Skip to content

Commit 2e1edd0

Browse files
raheeliftikhar5raheeliftikhar5
committed
fixing issues
1 parent bc32155 commit 2e1edd0

File tree

12 files changed

+169
-102
lines changed

12 files changed

+169
-102
lines changed

‎client/packages/lowcoder/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737
"@types/react-test-renderer": "^18.0.0",
3838
"@types/react-virtualized": "^9.21.21",
3939
"animate.css": "^4.1.1",
40-
"antd": "^5.19.4",
40+
"antd": "^5.20.0",
4141
"axios": "^1.6.2",
4242
"buffer": "^6.0.3",
4343
"clsx": "^2.0.0",

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

Lines changed: 47 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -37,22 +37,22 @@ import {
3737
} from "comps/utils/propertyUtils";
3838
import { trans } from "i18n";
3939
import { DATE_FORMAT, DATE_TIME_FORMAT, DateParser, PickerMode } from "util/dateTimeUtils";
40-
import React, { ReactNode, useContext, useEffect } from "react";
40+
import React, { ReactNode, useContext, useEffect, useRef } from "react";
4141
import { IconControl } from "comps/controls/iconControl";
4242
import { hasIcon } from "comps/utils";
4343
import { Section, sectionNames } from "components/Section";
44-
import { dateRefMethods, disabledTime, handleDateChange } from "comps/comps/dateComp/dateCompUtil";
44+
import { CommonPickerMethods, dateRefMethods, disabledTime, handleDateChange } from "comps/comps/dateComp/dateCompUtil";
4545
import { DateUIView } from "./dateUIView";
4646
import { useIsMobile } from "util/hooks";
4747
import { RefControl } from "comps/controls/refControl";
4848
// import { CommonPickerMethods } from "antd/es/date-picker/generatePicker/interface";
49-
import type { DatePickerType } from "antd/es/date-picker";
49+
import type { PickerPropsWithMultiple } from "antd/es/date-picker/generatePicker/interface";
5050
import { DateRangeUIView } from "comps/comps/dateComp/dateRangeUIView";
5151
import { EditorContext } from "comps/editorState";
5252
import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
5353
import { DatePicker } from "antd";
54+
// import type { PickerRef } from "";
5455

55-
const CommonPickerMethods = _.pick(DatePicker, 'ref');
5656

5757
const defaultStyle = {
5858
borderStyle: 'solid',
@@ -173,7 +173,8 @@ export type DateCompViewProps = Pick<
173173
};
174174

175175
export const datePickerControl = new UICompBuilder(childrenMap, (props, dispatch) => {
176-
useMergeCompStyles(props as Record<string, any>, dispatch);
176+
useMergeCompStyles(props as Record<string, any>, dispatch);
177+
const pickerRef = useRef<any>();
177178

178179
let time = null;
179180
if (props.value.value !== '') {
@@ -187,31 +188,48 @@ export const datePickerControl = new UICompBuilder(childrenMap, (props, dispatch
187188
inputFieldStyle:props.inputFieldStyle,
188189
animationStyle:props.animationStyle,
189190
children: (
190-
<DateUIView
191-
// viewRef={props.viewRef}
192-
disabledTime={() => disabledTime(props.minTime, props.maxTime)}
193-
$style={props.inputFieldStyle}
194-
disabled={props.disabled}
195-
{...datePickerProps(props)}
196-
minDate={props.minDate}
197-
maxDate={props.maxDate}
198-
placeholder={props.placeholder}
199-
value={time?.isValid() ? time : null}
200-
onChange={(time) => {
201-
handleDateChange(
202-
time && time.isValid()
203-
? time.format(props.showTime ? DATE_TIME_FORMAT : DATE_FORMAT)
204-
: "",
205-
props.value.onChange,
206-
props.onEvent
207-
);
191+
// <DateUIView
192+
// viewRef={props.viewRef}
193+
// disabledTime={() => disabledTime(props.minTime, props.maxTime)}
194+
// $style={props.inputFieldStyle}
195+
// disabled={props.disabled}
196+
// {...datePickerProps(props)}
197+
// hourStep={props.hourStep}
198+
// minDate={props.minDate}
199+
// maxDate={props.maxDate}
200+
// placeholder={props.placeholder}
201+
// // value={time?.isValid() ? time : null}
202+
// defaultValue={time?.isValid() ? time : null}
203+
// onChange={(time) => {
204+
// console.log('onchange');
205+
// handleDateChange(
206+
// time && time.isValid()
207+
// ? time.format(props.showTime ? DATE_TIME_FORMAT : DATE_FORMAT)
208+
// : "",
209+
// props.value.onChange,
210+
// props.onEvent
211+
// );
212+
// }}
213+
// onPanelChange={() => {
214+
// console.log('onPanelChange');
215+
// handleDateChange("", props.value.onChange, noop);
216+
// }}
217+
// onFocus={() => props.onEvent("focus")}
218+
// onBlur={() => props.onEvent("blur")}
219+
// suffixIcon={hasIcon(props.suffixIcon) && props.suffixIcon}
220+
// />
221+
<DatePicker
222+
ref={pickerRef}
223+
showTime
224+
needConfirm
225+
onChange={(value, dateString) => {
226+
console.log('Selected Time: ', value);
227+
console.log('Formatted Selected Time: ', dateString);
208228
}}
209-
onPanelChange={() => {
210-
handleDateChange("", props.value.onChange, noop);
229+
onOpenChange={(open) => {
230+
console.log('opne change', open);
211231
}}
212-
onFocus={() => props.onEvent("focus")}
213-
onBlur={() => props.onEvent("blur")}
214-
suffixIcon={hasIcon(props.suffixIcon) && props.suffixIcon}
232+
// onOk={onOk}
215233
/>
216234
),
217235
...validate(props),
@@ -556,7 +574,7 @@ export let DateRangeComp = withExposingConfigs(dateRangeControl, [
556574
]);
557575

558576
DateRangeComp = withMethodExposing(DateRangeComp, [
559-
...dateRefMethods,
577+
// ...dateRefMethods,
560578
{
561579
method: {
562580
name: "clearAll",

‎client/packages/lowcoder/src/comps/comps/dateComp/dateCompUtil.ts

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,15 @@ import { range } from "lodash";
44
import { DateTimeStyleType } from "../../controls/styleControlConstants";
55
import { css } from "styled-components";
66
import { isDarkColor, lightenColor } from "components/colorSelect/colorUtils";
7-
import { CommonPickerMethods } from "antd/es/date-picker/generatePicker/interface";
7+
// import { CommonPickerMethods } from "antd/es/date-picker/generatePicker/interface";
88
import { blurMethod, focusMethod } from "comps/utils/methodUtils";
99
import { refMethods } from "comps/generators/withMethodExposing";
1010

11+
export interface CommonPickerMethods {
12+
focus: (options?: FocusOptions) => void;
13+
blur: VoidFunction;
14+
};
15+
1116
export const handleDateChange = (
1217
time: string,
1318
onChange: (value: string) => Promise<unknown>,

‎client/packages/lowcoder/src/comps/comps/dateComp/dateMobileUIView.tsx

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,21 @@ import { DataUIViewProps } from "comps/comps/dateComp/dateUIView";
1010
import { default as SwapRightOutlined } from "@ant-design/icons/SwapRightOutlined"
1111
import { DateRangeUIViewProps } from "comps/comps/dateComp/dateRangeUIView";
1212
import { DateCompViewProps } from "comps/comps/dateComp/dateComp";
13+
import type { DatePickerProps } from "antd/es/date-picker";
14+
import type { Dayjs } from "dayjs";
15+
16+
interface DateMobileUIViewProps extends Omit<DataUIViewProps, 'onChange'> {
17+
onChange: (value: dayjs.Dayjs | null) => void;
18+
}
1319

1420
const handleClick = async (
1521
params: Pick<
1622
DateCompViewProps,
1723
"showTime" | "minDate" | "maxDate" | "disabledTime" | "onFocus" | "onBlur"
1824
> & {
1925
value: dayjs.Dayjs | null;
20-
onChange: (value: dayjs.Dayjs | null) => void;
26+
// onChange: (value: dayjs.Dayjs | null) => void;
27+
onChange: DatePickerProps<Dayjs>['onChange'];
2128
}
2229
) => {
2330
const MobileDatePicker = (await import("antd-mobile/es/components/date-picker")).default;
@@ -45,7 +52,8 @@ const handleClick = async (
4552
},
4653
onConfirm: (value) => {
4754
const time = dayjs(value);
48-
params.onChange(time);
55+
const timeString = time.format(params.showTime ? DATE_TIME_FORMAT : DATE_FORMAT);
56+
params.onChange?.(time, timeString);
4957
},
5058
onClose: params.onBlur,
5159
});

‎client/packages/lowcoder/src/comps/comps/dateComp/dateRangeUIView.tsx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { EditorContext } from "../../editorState";
1010
import { default as DatePicker } from "antd/es/date-picker";
1111
import { hasIcon } from "comps/utils";
1212
import { omit } from "lodash";
13+
import { DateParser } from "@lowcoder-ee/util/dateTimeUtils";
1314

1415
const { RangePicker } = DatePicker;
1516

@@ -57,6 +58,11 @@ export const DateRangeUIView = (props: DateRangeUIViewProps) => {
5758
inputReadOnly={checkIsMobile(editorState?.getAppSettings().maxWidth)}
5859
suffixIcon={hasIcon(props.suffixIcon) && props.suffixIcon}
5960
placeholder={placeholders}
61+
minDate={props.minDate ? dayjs(props.minDate, DateParser) : undefined}
62+
maxDate={props.maxDate ? dayjs(props.maxDate, DateParser) : undefined}
63+
hourStep={props.hourStep as any}
64+
minuteStep={props.minuteStep as any}
65+
secondStep={props.secondStep as any}
6066
/>
6167
);
6268
};

‎client/packages/lowcoder/src/comps/comps/dateComp/dateUIView.tsx

Lines changed: 31 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,21 @@ import styled from "styled-components";
88
import type { DateTimeStyleType } from "../../controls/styleControlConstants";
99
import { EditorContext } from "../../editorState";
1010
import { default as DatePicker } from "antd/es/date-picker";
11+
import type { DatePickerProps } from "antd/es/date-picker";
12+
import type { Dayjs } from 'dayjs';
13+
import { DateParser } from "@lowcoder-ee/util/dateTimeUtils";
1114

12-
const DatePickerStyled = styled(DatePicker)<{ $style: DateTimeStyleType }>`
15+
const DatePickerStyled = styled(DatePicker<Dayjs>)<{ $style: DateTimeStyleType }>`
1316
width: 100%;
1417
box-shadow: ${props=>`${props.$style.boxShadow} ${props.$style.boxShadowColor}`};
1518
${(props) => props.$style && getStyle(props.$style)}
1619
`;
1720

1821
export interface DataUIViewProps extends DateCompViewProps {
19-
value: dayjs.Dayjs | null;
20-
onChange: (value: dayjs.Dayjs | null) => void;
22+
value?: dayjs.Dayjs | null;
23+
defaultValue?: dayjs.Dayjs | null;
24+
// onChange: (value: dayjs.Dayjs | null) => void;
25+
onChange: DatePickerProps<Dayjs>['onChange'];
2126
onPanelChange: () => void;
2227
}
2328

@@ -29,16 +34,31 @@ export const DateUIView = (props: DataUIViewProps) => {
2934
const editorState = useContext(EditorContext);
3035

3136
const placeholder = Array.isArray(props.placeholder) ? props.placeholder[0] : props.placeholder;
32-
37+
console.log('props', props);
3338
return useUIView(
3439
<DateMobileUIView {...props} />,
35-
<DatePickerStyled
36-
{...props}
37-
ref={props.viewRef as any}
38-
disabledDate={(current) => disabledDate(current, props.minDate, props.maxDate)}
39-
picker={"date"}
40-
inputReadOnly={checkIsMobile(editorState?.getAppSettings().maxWidth)}
41-
placeholder={placeholder}
40+
<DatePicker
41+
showTime
42+
onChange={(value, dateString) => {
43+
console.log('Selected Time: ', value);
44+
console.log('Formatted Selected Time: ', dateString);
45+
}}
46+
// onOk={onOk}
4247
/>
48+
// <DatePickerStyled
49+
// {...props}
50+
// multiple={false}
51+
// ref={props.viewRef as any}
52+
// minDate={props.minDate ? dayjs(props.minDate, DateParser) : undefined}
53+
// maxDate={props.maxDate ? dayjs(props.maxDate, DateParser) : undefined}
54+
// hourStep={props.hourStep as any}
55+
// minuteStep={props.minuteStep as any}
56+
// secondStep={props.secondStep as any}
57+
// disabledDate={(current) => disabledDate(current, props.minDate, props.maxDate)}
58+
// picker={"date"}
59+
// inputReadOnly={checkIsMobile(editorState?.getAppSettings().maxWidth)}
60+
// placeholder={placeholder}
61+
// />
62+
4363
);
4464
};

‎client/packages/lowcoder/src/comps/comps/dateComp/timeComp.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,11 +44,11 @@ import React, { ReactNode, useContext, useEffect } from "react";
4444
import { IconControl } from "comps/controls/iconControl";
4545
import { hasIcon } from "comps/utils";
4646
import { Section, sectionNames } from "components/Section";
47-
import { dateRefMethods, disabledTime, handleDateChange } from "comps/comps/dateComp/dateCompUtil";
47+
import { CommonPickerMethods, dateRefMethods, disabledTime, handleDateChange } from "comps/comps/dateComp/dateCompUtil";
4848
import { TimeUIView } from "./timeUIView";
4949
import { TimeRangeUIView } from "comps/comps/dateComp/timeRangeUIView";
5050
import { RefControl } from "comps/controls/refControl";
51-
import { CommonPickerMethods } from "antd/es/date-picker/generatePicker/interface";
51+
// import { CommonPickerMethods } from "antd/es/date-picker/generatePicker/interface";
5252
import { TimePickerProps } from "antd/es/time-picker";
5353

5454
import { EditorContext } from "comps/editorState";

‎client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -62,11 +62,11 @@ let CascaderBasicComp = (function () {
6262
onFocus={() => props.onEvent("focus")}
6363
onBlur={() => props.onEvent("blur")}
6464
dropdownRender={(menus: React.ReactNode) => (
65-
<DropdownRenderStyle $childrenInputFieldStyle={props.childrenInputFieldStyle}>
66-
{menus}
65+
<DropdownRenderStyle $childrenInputFieldStyle={props.childrenInputFieldStyle}>
66+
{menus}
6767
</DropdownRenderStyle>
6868
)}
69-
onChange={(value: (string | number)[]) => {
69+
onChange={(value: (string | number | null)[]) => {
7070
props.value.onChange(value as string[]);
7171
props.onEvent("change");
7272
}}

‎client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@ let SegmentedControlBasicComp = (function () {
106106
value={props.value.value}
107107
$style={props.style}
108108
onChange={(value) => {
109-
handleChange(value.toString());
109+
handleChange(String(value));
110110
}}
111111
options={props.options
112112
.filter((option) => option.value !== undefined && !option.hidden)

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -183,7 +183,7 @@ export const DateEdit = (props: DateEditProps) => {
183183
overflow: "hidden",
184184
}}
185185
onOpenChange={(open) => setPanelOpen(open)}
186-
onChange={(value, dateString) => props.onChange(dateString)}
186+
onChange={(value, dateString) => props.onChange(dateString as string)}
187187
onBlur={props.onChangeEnd}
188188
/>
189189
</Wrapper>

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

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@ import { Section, sectionNames } from "lowcoder-design";
99
import { hiddenPropertyView } from "comps/utils/propertyUtils";
1010
import { trans } from "i18n";
1111
import { NumberControl, StringControl } from "comps/controls/codeControl";
12-
import { Transfer } from "antd";
12+
import { default as Transfer } from "antd/es/transfer";
13+
import type { TransferKey } from "antd/es/transfer/interface";
1314
import ReactResizeDetector from "react-resize-detector";
1415
import { changeEvent, eventHandlerControl, searchEvent, selectedChangeEvent } from "../controls/eventHandlerControl";
1516
import styled, { css } from "styled-components";
@@ -85,15 +86,15 @@ const TransferView = (props: RecordConstructorToView<typeof childrenMap> & {
8586
}
8687
}, [height, width]);
8788

88-
const handleChange = (newTargetKeys: string[]) => {
89-
props.targetKeys.onChange(newTargetKeys);
89+
const handleChange = (newTargetKeys: TransferKey[]) => {
90+
props.targetKeys.onChange(newTargetKeys as string[]);
9091
props.dispatch(changeChildAction("targerObject", Array.isArray(props.items.value) ? props.items.value.filter(item => newTargetKeys.includes(item.key as string)) : [], false));
9192
props.onEvent('change')
9293
};
9394

94-
const onSelectChange = (sourceSelectedKeys: string[], targetSelectedKeys: string[]) => {
95-
setSelectedKeys([...sourceSelectedKeys, ...targetSelectedKeys]);
96-
props.dispatch(changeChildAction("selectedKeys", [sourceSelectedKeys, targetSelectedKeys], false));
95+
const onSelectChange = (sourceSelectedKeys: TransferKey[], targetSelectedKeys: TransferKey[]) => {
96+
setSelectedKeys([...sourceSelectedKeys, ...targetSelectedKeys] as string[]);
97+
props.dispatch(changeChildAction("selectedKeys", [sourceSelectedKeys as string[], targetSelectedKeys as string[]], false));
9798
props.onEvent('selectedChange')
9899
};
99100

0 commit comments

Comments
 (0)