Skip to content

Commit 8a6451d

Browse files
FalkWolskyFalkWolsky
authored
Merge branch 'dev' into doc/existing_components
2 parents a5bc94b + 5e1f1d7 commit 8a6451d

File tree

32 files changed

+291
-40
lines changed

32 files changed

+291
-40
lines changed

‎client/packages/lowcoder-sdk/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "lowcoder-sdk",
3-
"version": "2.6.4",
3+
"version": "2.6.5",
44
"type": "module",
55
"files": [
66
"src",

‎client/packages/lowcoder/src/comps/comps/columnLayout/columnLayout.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ import { EditorContext } from "comps/editorState";
4040

4141
import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils";
4242
import { DisabledContext } from "comps/generators/uiCompBuilder";
43-
import SliderControl from "@lowcoder-ee/comps/controls/sliderControl";
43+
import { SliderControl } from "@lowcoder-ee/comps/controls/sliderControl";
4444
import { getBackgroundStyle } from "@lowcoder-ee/util/styleUtils";
4545

4646
const ContainWrapper = styled.div<{

‎client/packages/lowcoder/src/comps/comps/containerComp/containerView.tsx

+17-17
Original file line numberDiff line numberDiff line change
@@ -326,7 +326,7 @@ const GridItemWrapper = React.memo(React.forwardRef(
326326
const editorState = useContext(EditorContext);
327327
const { children, ...divProps } = props;
328328
return (
329-
<ItemWrapper ref={ref} $disableInteract={editorState.disableInteract} {...divProps}>
329+
<ItemWrapper ref={ref} $disableInteract={editorState?.disableInteract} {...divProps}>
330330
{props.children}
331331
</ItemWrapper>
332332
);
@@ -350,9 +350,9 @@ export const InnerGrid = React.memo((props: ViewPropsWithSelect) => {
350350
const [currentRowHeight, setRowHeight] = useState(positionParams.rowHeight || DEFAULT_ROW_HEIGHT);
351351
const editorState = useContext(EditorContext);
352352
const { readOnly } = useContext(ExternalEditorContext);
353-
const appSettingsComp = editorState.getAppSettingsComp().getView();
353+
const appSettingsComp = editorState?.getAppSettingsComp().getView();
354354

355-
const maxWidth = useMemo(() => appSettingsComp.maxWidth, [appSettingsComp.maxWidth]);
355+
const maxWidth = useMemo(() => appSettingsComp?.maxWidth, [appSettingsComp?.maxWidth]);
356356

357357
// Falk: TODO: Here we can define the inner grid columns dynamically
358358
const defaultGrid = useMemo(() => {
@@ -372,10 +372,10 @@ export const InnerGrid = React.memo((props: ViewPropsWithSelect) => {
372372
getExtraLayout(
373373
props.items,
374374
props.layout,
375-
editorState.selectedCompNames,
375+
editorState?.selectedCompNames,
376376
props.dragSelectedComps
377377
),
378-
[props.items, props.layout, editorState.selectedCompNames, props.dragSelectedComps]
378+
[props.items, props.layout, editorState?.selectedCompNames, props.dragSelectedComps]
379379
);
380380

381381
const [containerSelectNames, setContainerSelectNames] = useState<Set<string>>(new Set([]));
@@ -392,8 +392,8 @@ export const InnerGrid = React.memo((props: ViewPropsWithSelect) => {
392392
}, [extraLayout, containerSelectNames]);
393393

394394
const canAddSelect = useMemo(
395-
() => _.size(containerSelectNames) === _.size(editorState.selectedCompNames),
396-
[containerSelectNames, editorState.selectedCompNames]
395+
() => _.size(containerSelectNames) === _.size(editorState?.selectedCompNames),
396+
[containerSelectNames, editorState?.selectedCompNames]
397397
);
398398

399399
const dispatchPositionParamsTimerRef = useRef(0);
@@ -446,9 +446,9 @@ export const InnerGrid = React.memo((props: ViewPropsWithSelect) => {
446446
);
447447
const setSelectedNames = useCallback(
448448
(names: Set<string>) => {
449-
editorState.setSelectedCompNames(names);
449+
editorState?.setSelectedCompNames(names);
450450
},
451-
[editorState.setSelectedCompNames]
451+
[editorState?.setSelectedCompNames]
452452
);
453453

454454
const { width, ref } = useResizeDetector({
@@ -502,7 +502,7 @@ export const InnerGrid = React.memo((props: ViewPropsWithSelect) => {
502502
style={props.style}
503503
scrollContainerRef={props.scrollContainerRef}
504504
width={width ?? 0}
505-
showGridLines={editorState.showGridLines() && (isDroppable || enableGridLines)}
505+
showGridLines={editorState?.showGridLines() && (isDroppable || enableGridLines)}
506506
isRowCountLocked={isRowCountLocked}
507507
isDraggable={isDraggable}
508508
isResizable={isResizable}
@@ -519,7 +519,7 @@ export const InnerGrid = React.memo((props: ViewPropsWithSelect) => {
519519
: defaultLayout(compType);
520520
return {
521521
size: compLayout ?? defaultSize,
522-
positionParams: editorState.canvasPositionParams(),
522+
positionParams: editorState?.canvasPositionParams(),
523523
};
524524
}
525525
}}
@@ -535,18 +535,18 @@ export const InnerGrid = React.memo((props: ViewPropsWithSelect) => {
535535
const items = _.pick(props.items, Object.keys(layoutItems));
536536
draggingUtils.setData("sourceDispatch", props.dispatch);
537537
draggingUtils.setData<Record<string, GridItem>>("items", items);
538-
editorState.setDragging(true);
538+
editorState?.setDragging(true);
539539
const names = Object.values(items).map((item) => item.name);
540-
editorState.setSelectedCompNames(new Set(names));
540+
editorState?.setSelectedCompNames(new Set(names));
541541
}}
542542
onFlyDrop={(layout, items) => {
543543
onFlyDrop(layout, items, props.dispatch);
544544
}}
545545
onResizeStart={(_a, _b, _c, _d, event) => {
546546
event.stopPropagation();
547-
editorState.setDragging(true);
547+
editorState?.setDragging(true);
548548
}}
549-
onResizeStop={() => editorState.setDragging(false)}
549+
onResizeStop={() => editorState?.setDragging(false)}
550550
margin={[0, 0]}
551551
containerPadding={props.containerPadding}
552552
fixedRowCount={props.emptyRows !== DEFAULT_ROW_COUNT}
@@ -560,12 +560,12 @@ export const InnerGrid = React.memo((props: ViewPropsWithSelect) => {
560560
minHeight={props.minHeight}
561561
bgColor={props.bgColor}
562562
radius={props.radius}
563-
hintPlaceholder={!editorState.isDragging && !readOnly && props.hintPlaceholder}
563+
hintPlaceholder={!editorState?.isDragging && !readOnly && props.hintPlaceholder}
564564
selectedSize={_.size(containerSelectNames)}
565565
clickItem={clickItem}
566566
isCanvas={props.isCanvas}
567567
showName={props.showName}
568-
disableDirectionKey={editorState.isDragging || readOnly}
568+
disableDirectionKey={editorState?.isDragging || readOnly}
569569
>
570570
{itemViews}
571571
</ReactGridLayout>

‎client/packages/lowcoder/src/comps/comps/gridItemComp.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,7 @@ const CachedPropertyView = React.memo((props: {
9797
useEffect(() => {
9898
setSearchText("");
9999
}, [props.name]);
100+
100101
return useMemo(() => {
101102
return (
102103
<>

‎client/packages/lowcoder/src/comps/comps/listViewComp/listViewComp.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ import { ListView } from "./listView";
3939
import { listPropertyView } from "./listViewPropertyView";
4040
import { getData } from "./listViewUtils";
4141
import { withMethodExposing } from "comps/generators/withMethodExposing";
42-
import SliderControl from "@lowcoder-ee/comps/controls/sliderControl";
42+
import { SliderControl } from "@lowcoder-ee/comps/controls/sliderControl";
4343

4444
const childrenMap = {
4545
noOfRows: withIsLoadingMethod(NumberOrJSONObjectArrayControl), // FIXME: migrate "noOfRows" to "data"

‎client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayoutComp.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ import { ContainerBodyChildComp } from "./containerBodyChildComp";
2828
import { trans } from "i18n";
2929
import { ControlNode } from "lowcoder-design";
3030
import { StringControl } from "comps/controls/codeControl";
31-
import SliderControl from "@lowcoder-ee/comps/controls/sliderControl";
31+
import { SliderControl } from "@lowcoder-ee/comps/controls/sliderControl";
3232
import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
3333

3434
const childrenMap = {

‎client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ import { EditorContext } from "comps/editorState";
4242

4343
import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils";
4444
import { DisabledContext } from "comps/generators/uiCompBuilder";
45-
import SliderControl from "@lowcoder-ee/comps/controls/sliderControl";
45+
import { SliderControl } from "@lowcoder-ee/comps/controls/sliderControl";
4646
import { getBackgroundStyle } from "@lowcoder-ee/util/styleUtils";
4747
import { useScreenInfo } from "../../hooks/screenInfoComp";
4848

‎client/packages/lowcoder/src/comps/comps/splitLayout/splitLayout.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ import { NameGenerator } from "comps/utils";
2828
import { AutoHeightControl } from "comps/controls/autoHeightControl";
2929
import { messageInstance } from "lowcoder-design/src/components/GlobalInstances";
3030
import { NameConfigHidden, withExposingConfigs } from "comps/generators/withExposing";
31-
import SliderControl from "@lowcoder-ee/comps/controls/sliderControl";
31+
import { SliderControl } from "@lowcoder-ee/comps/controls/sliderControl";
3232
import { getBackgroundStyle } from "@lowcoder-ee/util/styleUtils";
3333
import _ from "lodash";
3434

‎client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComp.tsx

+7
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { CellProps } from "components/table/EditableCell";
22
import { DateTimeComp } from "comps/comps/tableComp/column/columnTypeComps/columnDateTimeComp";
3+
import { TimeComp } from "./columnTypeComps/columnTimeComp";
34
import { ButtonComp } from "comps/comps/tableComp/column/simpleColumnTypeComps";
45
import { withType } from "comps/generators";
56
import { trans } from "i18n";
@@ -67,6 +68,11 @@ const actionOptions = [
6768
label: trans("table.image"),
6869
value: "image",
6970
},
71+
{
72+
label: trans("table.time"),
73+
value: "time",
74+
},
75+
7076
{
7177
label: trans("table.date"),
7278
value: "date",
@@ -116,6 +122,7 @@ export const ColumnTypeCompMap = {
116122
rating: RatingComp,
117123
progress: ProgressComp,
118124
date: DateComp,
125+
time: TimeComp,
119126
};
120127

121128
type ColumnTypeMapType = typeof ColumnTypeCompMap;

‎client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnTimeComp.tsx

+166
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
import { default as TimePicker } from "antd/es/time-picker";
2+
import {
3+
ColumnTypeCompBuilder,
4+
ColumnTypeViewFn,
5+
} from "comps/comps/tableComp/column/columnTypeCompBuilder";
6+
import { ColumnValueTooltip } from "comps/comps/tableComp/column/simpleColumnTypeComps";
7+
import { StringControl } from "comps/controls/codeControl";
8+
import { withDefault } from "comps/generators";
9+
import { formatPropertyView } from "comps/utils/propertyUtils";
10+
import { trans } from "i18n";
11+
import dayjs from "dayjs";
12+
import { useEffect, useRef, useState } from "react";
13+
import styled from "styled-components";
14+
import { TIME_FORMAT } from "util/dateTimeUtils";
15+
import { hasIcon } from "comps/utils";
16+
import { IconControl } from "comps/controls/iconControl";
17+
18+
19+
const TimePickerStyled = styled(TimePicker)<{ $open: boolean }>`
20+
width: 100%;
21+
height: 100%;
22+
position: absolute;
23+
top: 0;
24+
padding: 0;
25+
padding-left: 11px;
26+
.ant-picker-input {
27+
height: 100%;
28+
}
29+
input {
30+
padding-right: 18px;
31+
cursor: pointer;
32+
}
33+
&.ant-picker-focused .ant-picker-suffix svg g {
34+
stroke: ${(props) => props.$open && "#315EFB"};
35+
}
36+
.ant-picker-suffix {
37+
height: calc(100% - 1px);
38+
position: absolute;
39+
right: 0;
40+
top: 0.5px;
41+
display: flex;
42+
align-items: center;
43+
padding: 0 3px;
44+
}
45+
`;
46+
47+
const Wrapper = styled.div`
48+
background: transparent !important;
49+
`;
50+
51+
export function formatTime(time: string, format: string) {
52+
const parsedTime = dayjs(time, TIME_FORMAT);
53+
return parsedTime.isValid() ? parsedTime.format(format) : "";
54+
}
55+
56+
const childrenMap = {
57+
text: StringControl,
58+
prefixIcon: IconControl,
59+
suffixIcon: IconControl,
60+
format: withDefault(StringControl, TIME_FORMAT),
61+
inputFormat: withDefault(StringControl, TIME_FORMAT),
62+
};
63+
64+
let inputFormat = TIME_FORMAT;
65+
66+
const getBaseValue: ColumnTypeViewFn<typeof childrenMap, string, string> = (props) => props.text;
67+
68+
type TimeEditProps = {
69+
value: string;
70+
onChange: (value: string) => void;
71+
onChangeEnd: () => void;
72+
inputFormat: string;
73+
};
74+
75+
export const TimeEdit = (props: TimeEditProps) => {
76+
const pickerRef = useRef<any>();
77+
const [panelOpen, setPanelOpen] = useState(true);
78+
let value = dayjs(props.value, TIME_FORMAT);
79+
if (!value.isValid()) {
80+
value = dayjs("00:00:00", TIME_FORMAT);
81+
}
82+
83+
const [tempValue, setTempValue] = useState<dayjs.Dayjs | null>(value);
84+
85+
useEffect(() => {
86+
const value = props.value ? dayjs(props.value, TIME_FORMAT) : null;
87+
setTempValue(value);
88+
}, [props.value]);
89+
90+
return (
91+
<Wrapper
92+
onKeyDown={(e) => {
93+
if (e.key === "Enter" && !panelOpen) {
94+
props.onChangeEnd();
95+
}
96+
}}
97+
onMouseDown={(e) => {
98+
e.stopPropagation();
99+
e.preventDefault();
100+
}}
101+
>
102+
<TimePickerStyled
103+
ref={pickerRef}
104+
$open={panelOpen}
105+
format={props.inputFormat}
106+
allowClear={true}
107+
autoFocus
108+
value={tempValue}
109+
defaultOpen={true}
110+
onOpenChange={(open) => setPanelOpen(open)}
111+
onChange={(value, timeString) => {
112+
props.onChange(timeString as string);
113+
}}
114+
onBlur={() => props.onChangeEnd()}
115+
/>
116+
</Wrapper>
117+
);
118+
};
119+
120+
export const TimeComp = (function () {
121+
return new ColumnTypeCompBuilder(
122+
childrenMap,
123+
(props, dispatch) => {
124+
inputFormat = props.inputFormat;
125+
const value = props.changeValue ?? getBaseValue(props, dispatch);
126+
return(
127+
<>
128+
{hasIcon(props.prefixIcon) && (
129+
<span>{props.prefixIcon}</span>
130+
)}
131+
<span>{value}</span>
132+
{hasIcon(props.suffixIcon) && (
133+
<span>{props.suffixIcon}</span>
134+
)}
135+
</>
136+
);
137+
138+
},
139+
(nodeValue) => formatTime(nodeValue.text.value, nodeValue.format.value),
140+
getBaseValue
141+
)
142+
.setEditViewFn((props) => (
143+
<TimeEdit
144+
value={props.value}
145+
onChange={props.onChange}
146+
onChangeEnd={props.onChangeEnd}
147+
inputFormat={inputFormat}
148+
/>
149+
))
150+
.setPropertyViewFn((children) => (
151+
<>
152+
{children.text.propertyView({
153+
label: trans("table.columnValue"),
154+
tooltip: ColumnValueTooltip,
155+
})}
156+
{children.prefixIcon.propertyView({
157+
label: trans("button.prefixIcon"),
158+
})}
159+
{children.suffixIcon.propertyView({
160+
label: trans("button.suffixIcon"),
161+
})}
162+
{formatPropertyView({ children, placeholder: TIME_FORMAT })}
163+
</>
164+
))
165+
.build();
166+
})();

‎client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ import { checkIsMobile } from "util/commonUtils";
3535
import { messageInstance } from "lowcoder-design/src/components/GlobalInstances";
3636
import { BoolControl } from "comps/controls/boolControl";
3737
import { PositionControl } from "comps/controls/dropdownControl";
38-
import SliderControl from "@lowcoder-ee/comps/controls/sliderControl";
38+
import { SliderControl } from "@lowcoder-ee/comps/controls/sliderControl";
3939
import { getBackgroundStyle } from "@lowcoder-ee/util/styleUtils";
4040

4141
const EVENT_OPTIONS = [

‎client/packages/lowcoder/src/comps/comps/triContainerComp/triContainerComp.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ import { SimpleContainerComp } from "../containerBase/simpleContainerComp";
2727
import { ContainerBodyChildComp } from "./containerBodyChildComp";
2828
import { trans } from "i18n";
2929
import { ControlNode } from "lowcoder-design";
30-
import SliderControl from "@lowcoder-ee/comps/controls/sliderControl";
30+
import { SliderControl } from "@lowcoder-ee/comps/controls/sliderControl";
3131
import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
3232

3333
const childrenMap = {

‎client/packages/lowcoder/src/comps/controls/keyValueControl.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ export function keyValueControl<T extends OptionsType>(
6969
if(controlType === "variable") {
7070
childrenMap = {
7171
key: SimpleVariableHeaderComp(true) as any,
72-
value: SimpleVariableHeaderComp() as any,
72+
value: StringControl,
7373
type: dropdownControl(types, types[0]?.value),
7474
};
7575
}

0 commit comments

Comments
 (0)