Skip to content

Commit dfb4fec

Browse files
raheeliftikhar5raheeliftikhar5
committed
added popup styles for date/time pickers
1 parent f65005a commit dfb4fec

File tree

7 files changed

+118
-26
lines changed

7 files changed

+118
-26
lines changed

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

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import { UICompBuilder, withDefault } from "../../generators";
2020
import { CommonNameConfig, depsConfig, withExposingConfigs } from "../../generators/withExposing";
2121
import { formDataChildren, FormDataPropertyView } from "../formComp/formDataConstants";
2222
import { styleControl } from "comps/controls/styleControl";
23-
import { AnimationStyle, DateTimeStyle, DateTimeStyleType, InputFieldStyle, LabelStyle } from "comps/controls/styleControlConstants";
23+
import { AnimationStyle, ChildrenMultiSelectStyle, ChildrenMultiSelectStyleType, DateTimeStyle, DateTimeStyleType, InputFieldStyle, LabelStyle } from "comps/controls/styleControlConstants";
2424
import { withMethodExposing } from "../../generators/withMethodExposing";
2525
import {
2626
disabledPropertyView,
@@ -89,6 +89,7 @@ const commonChildren = {
8989
...validationChildren,
9090
viewRef: RefControl<CommonPickerMethods>,
9191
inputFieldStyle: styleControl(DateTimeStyle, 'inputFieldStyle'),
92+
childrenInputFieldStyle: styleControl(ChildrenMultiSelectStyle, 'childrenInputFieldStyle'),
9293
timeZone: dropdownControl(timeZoneOptions, Intl.DateTimeFormat().resolvedOptions().timeZone),
9394
};
9495
type CommonChildrenType = RecordConstructorToComp<typeof commonChildren>;
@@ -171,6 +172,7 @@ export type DateCompViewProps = Pick<
171172
onFocus: () => void;
172173
onBlur: () => void;
173174
$style: DateTimeStyleType;
175+
$childrenInputFieldStyle: ChildrenMultiSelectStyleType;
174176
disabledTime: () => ReturnType<typeof disabledTime>;
175177
suffixIcon: ReactNode;
176178
placeholder?: string | [string, string];
@@ -214,6 +216,7 @@ const DatePickerTmpCmp = new UICompBuilder(childrenMap, (props) => {
214216
viewRef={props.viewRef}
215217
disabledTime={() => disabledTime(props.minTime, props.maxTime)}
216218
$style={props.inputFieldStyle}
219+
$childrenInputFieldStyle={props.childrenInputFieldStyle}
217220
disabled={props.disabled}
218221
{...datePickerProps(props)}
219222
hourStep={props.hourStep}
@@ -307,6 +310,9 @@ const DatePickerTmpCmp = new UICompBuilder(childrenMap, (props) => {
307310
<Section name={sectionNames.inputFieldStyle}>
308311
{children.inputFieldStyle.getPropertyView()}
309312
</Section>
313+
<Section name={sectionNames.childrenInputFieldStyle}>
314+
{children.childrenInputFieldStyle.getPropertyView()}
315+
</Section>
310316
<Section name={sectionNames.animationStyle} hasTooltip={true}>
311317
{children.animationStyle.getPropertyView()}
312318
</Section>
@@ -400,6 +406,7 @@ let DateRangeTmpCmp = (function () {
400406
timeZone={props?.timeZone}
401407
viewRef={props.viewRef}
402408
$style={props.inputFieldStyle}
409+
$childrenInputFieldStyle={props.childrenInputFieldStyle}
403410
disabled={props.disabled}
404411
{...datePickerProps(props)}
405412
start={tempStartValue?.isValid() ? tempStartValue : null}
@@ -515,6 +522,9 @@ let DateRangeTmpCmp = (function () {
515522
<Section name={sectionNames.inputFieldStyle}>
516523
{children.inputFieldStyle.getPropertyView()}
517524
</Section>
525+
<Section name={sectionNames.childrenInputFieldStyle}>
526+
{children.childrenInputFieldStyle.getPropertyView()}
527+
</Section>
518528
</>
519529
)}
520530

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

Lines changed: 45 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import dayjs from "dayjs";
22
import { DateParser, TimeParser } from "util/dateTimeUtils";
33
import { range } from "lodash";
4-
import { DateTimeStyleType } from "../../controls/styleControlConstants";
5-
import { css } from "styled-components";
6-
import { isDarkColor, lightenColor } from "components/colorSelect/colorUtils";
4+
import { ChildrenMultiSelectStyleType, DateTimeStyleType } from "../../controls/styleControlConstants";
5+
import styled, { css } from "styled-components";
6+
import { fadeColor, isDarkColor, lightenColor } from "components/colorSelect/colorUtils";
77
// import { CommonPickerMethods } from "antd/es/date-picker/generatePicker/interface";
88
import { blurMethod, focusMethod } from "comps/utils/methodUtils";
99
import { refMethods } from "comps/generators/withMethodExposing";
@@ -135,3 +135,45 @@ export const getMobileStyle = (style: DateTimeStyleType) =>
135135
`;
136136

137137
export const dateRefMethods = refMethods<CommonPickerMethods>([focusMethod, blurMethod]);
138+
139+
export const StyledPickerPanel = styled.div<{
140+
$style: ChildrenMultiSelectStyleType
141+
}>`
142+
background: ${props => props.$style?.background};
143+
border: ${props => props.$style?.border};
144+
border-style: ${props => props.$style?.borderStyle};
145+
border-width: ${props => props.$style?.borderWidth};
146+
border-radius: ${props => props.$style?.radius};
147+
rotate: ${props => props.$style?.rotation};
148+
margin: ${props => props.$style?.margin};
149+
padding: ${props => props.$style?.padding};
150+
151+
.ant-picker-content th, .ant-picker-content td.ant-picker-cell {
152+
font-size: ${props => props.$style?.textSize};
153+
font-style: ${props => props.$style?.fontStyle};
154+
font-family: ${props => props.$style?.fontFamily};
155+
font-weight: ${props => props.$style?.textWeight};
156+
text-transform: ${props => props.$style?.textTransform};
157+
line-height: ${props => props.$style?.lineHeight};
158+
color: ${props => props.$style?.text};
159+
160+
.ant-picker-cell-inner {
161+
text-decoration: ${props => props.$style?.textDecoration};
162+
}
163+
}
164+
165+
.ant-picker-content td.ant-picker-cell:not(.ant-picker-cell-in-view) {
166+
color: ${props => fadeColor(props.$style?.text, 0.5)};
167+
}
168+
169+
.ant-picker-content .ant-picker-time-panel-column > li.ant-picker-time-panel-cell .ant-picker-time-panel-cell-inner {
170+
font-size: ${props => props.$style?.textSize};
171+
font-style: ${props => props.$style?.fontStyle};
172+
font-family: ${props => props.$style?.fontFamily};
173+
font-weight: ${props => props.$style?.textWeight};
174+
text-transform: ${props => props.$style?.textTransform};
175+
line-height: ${props => props.$style?.lineHeight};
176+
color: ${props => props.$style?.text};
177+
text-decoration: ${props => props.$style?.textDecoration};
178+
}
179+
`

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

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import dayjs from "dayjs";
22
import type { DateCompViewProps } from "./dateComp";
3-
import { disabledDate, getStyle } from "comps/comps/dateComp/dateCompUtil";
3+
import { disabledDate, getStyle, StyledPickerPanel } from "comps/comps/dateComp/dateCompUtil";
44
import { useUIView } from "../../utils/useUIView";
55
import { checkIsMobile } from "util/commonUtils";
66
import React, { useContext } from "react";
77
import styled from "styled-components";
8-
import type { DateTimeStyleType } from "../../controls/styleControlConstants";
8+
import type { ChildrenMultiSelectStyleType, DateTimeStyleType } from "../../controls/styleControlConstants";
99
import { EditorContext } from "../../editorState";
1010
import { default as DatePicker } from "antd/es/date-picker";
1111
import { hasIcon } from "comps/utils";
@@ -61,7 +61,7 @@ export const DateRangeUIView = (props: DateRangeUIViewProps) => {
6161
return useUIView(
6262
<DateRangeMobileUIView {...props} />,
6363
<RangePickerStyled
64-
{...omit(props, "onChange" , "format", "inputFormat")}
64+
{...omit(props, "onChange" , "format", "inputFormat", "$childrenInputFieldStyle")}
6565
format={props.inputFormat}
6666
ref={props.viewRef as any}
6767
value={[props.start, props.end]}
@@ -77,6 +77,13 @@ export const DateRangeUIView = (props: DateRangeUIViewProps) => {
7777
hourStep={props.hourStep as any}
7878
minuteStep={props.minuteStep as any}
7979
secondStep={props.secondStep as any}
80+
panelRender={(panelNode) => (
81+
<StyledPickerPanel
82+
$style={props.$childrenInputFieldStyle as ChildrenMultiSelectStyleType}
83+
>
84+
{panelNode}
85+
</StyledPickerPanel>
86+
)}
8087
renderExtraFooter={() => (
8188
props.timeZone === "UserChoice" && (
8289
<StyledDiv>

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

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import dayjs from "dayjs";
22
import type { DateCompViewProps } from "./dateComp";
3-
import { disabledDate, getStyle } from "comps/comps/dateComp/dateCompUtil";
3+
import { disabledDate, getStyle, StyledPickerPanel } from "comps/comps/dateComp/dateCompUtil";
44
import { useUIView } from "../../utils/useUIView";
55
import { checkIsMobile } from "util/commonUtils";
66
import React, { useContext } from "react";
77
import styled from "styled-components";
8-
import type { DateTimeStyleType } from "../../controls/styleControlConstants";
8+
import type { ChildrenMultiSelectStyleType, DateTimeStyleType } from "../../controls/styleControlConstants";
99
import { EditorContext } from "../../editorState";
1010
import { default as DatePicker } from "antd/es/date-picker";
1111
import type { DatePickerProps } from "antd/es/date-picker";
@@ -53,7 +53,7 @@ export const DateUIView = (props: DataUIViewProps) => {
5353
return useUIView(
5454
<DateMobileUIView {...props} />,
5555
<DatePickerStyled
56-
{...omit(props, "format", "inputFormat")}
56+
{...omit(props, "format", "inputFormat", "$childrenInputFieldStyle")}
5757
multiple={false}
5858
format={props.inputFormat}
5959
ref={props.viewRef as any}
@@ -66,6 +66,13 @@ export const DateUIView = (props: DataUIViewProps) => {
6666
picker={"date"}
6767
inputReadOnly={checkIsMobile(editorState?.getAppSettings().maxWidth)}
6868
placeholder={placeholder}
69+
panelRender={(panelNode) => (
70+
<StyledPickerPanel
71+
$style={props.$childrenInputFieldStyle as ChildrenMultiSelectStyleType}
72+
>
73+
{panelNode}
74+
</StyledPickerPanel>
75+
)}
6976
renderExtraFooter={()=>(
7077
props.timeZone === "UserChoice" && (
7178
<StyledDiv>

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

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ import {
2525
} from "../../generators/withExposing";
2626
import { formDataChildren, FormDataPropertyView } from "../formComp/formDataConstants";
2727
import { styleControl } from "comps/controls/styleControl";
28-
import { AnimationStyle, DateTimeStyle, DateTimeStyleType, InputFieldStyle, LabelStyle } from "comps/controls/styleControlConstants";
28+
import { AnimationStyle, ChildrenMultiSelectStyle, ChildrenMultiSelectStyleType, DateTimeStyle, DateTimeStyleType, InputFieldStyle, LabelStyle } from "comps/controls/styleControlConstants";
2929
import { withMethodExposing } from "../../generators/withMethodExposing";
3030
import {
3131
disabledPropertyView,
@@ -87,6 +87,7 @@ const commonChildren = {
8787
'labelStyle',
8888
),
8989
inputFieldStyle: styleControl(DateTimeStyle, 'inputFieldStyle'),
90+
childrenInputFieldStyle: styleControl(ChildrenMultiSelectStyle, 'childrenInputFieldStyle'),
9091
suffixIcon: withDefault(IconControl, "/icon:regular/clock"),
9192
timeZone: dropdownControl(timeZoneOptions, Intl.DateTimeFormat().resolvedOptions().timeZone),
9293
viewRef: RefControl<CommonPickerMethods>,
@@ -147,6 +148,7 @@ export type TimeCompViewProps = Pick<
147148
onFocus: () => void;
148149
onBlur: () => void;
149150
$style: DateTimeStyleType;
151+
$childrenInputFieldStyle: ChildrenMultiSelectStyleType;
150152
disabledTime: () => ReturnType<typeof disabledTime>;
151153
suffixIcon?: ReactNode | false;
152154
placeholder?: string | [string, string];
@@ -190,6 +192,7 @@ const TimePickerTmpCmp = new UICompBuilder(childrenMap, (props) => {
190192
timeZone={props?.timeZone}
191193
viewRef={props.viewRef}
192194
$style={props.inputFieldStyle}
195+
$childrenInputFieldStyle={props.childrenInputFieldStyle}
193196
disabled={props.disabled}
194197
value={tempValue?.isValid() ? tempValue : null}
195198
disabledTime={() => disabledTime(props.minTime, props.maxTime)}
@@ -207,7 +210,8 @@ const TimePickerTmpCmp = new UICompBuilder(childrenMap, (props) => {
207210
}}
208211
onFocus={() => props.onEvent("focus")}
209212
onBlur={() => props.onEvent("blur")}
210-
suffixIcon={hasIcon(props.suffixIcon) && props.suffixIcon} />
213+
suffixIcon={hasIcon(props.suffixIcon) && props.suffixIcon}
214+
/>
211215
),
212216
showValidationWhenEmpty: props.showValidationWhenEmpty,
213217
...validate(props),
@@ -272,6 +276,9 @@ const TimePickerTmpCmp = new UICompBuilder(childrenMap, (props) => {
272276
<Section name={sectionNames.inputFieldStyle}>
273277
{children.inputFieldStyle.getPropertyView()}
274278
</Section>
279+
<Section name={sectionNames.childrenInputFieldStyle}>
280+
{children.childrenInputFieldStyle.getPropertyView()}
281+
</Section>
275282
<Section name={sectionNames.animationStyle} hasTooltip={true}>
276283
{children.animationStyle.getPropertyView()}
277284
</Section>
@@ -342,6 +349,7 @@ const TimeRangeTmpCmp = (function () {
342349
timeZone={props?.timeZone}
343350
viewRef={props.viewRef}
344351
$style={props.inputFieldStyle}
352+
$childrenInputFieldStyle={props.childrenInputFieldStyle}
345353
disabled={props.disabled}
346354
start={tempStartValue?.isValid() ? tempStartValue : null}
347355
end={tempEndValue?.isValid() ? tempEndValue : null}
@@ -444,6 +452,9 @@ const TimeRangeTmpCmp = (function () {
444452
<Section name={sectionNames.inputFieldStyle}>
445453
{children.inputFieldStyle.getPropertyView()}
446454
</Section>
455+
<Section name={sectionNames.childrenInputFieldStyle}>
456+
{children.childrenInputFieldStyle.getPropertyView()}
457+
</Section>
447458
<Section name={sectionNames.animationStyle} hasTooltip={true}>
448459
{children.animationStyle.getPropertyView()}
449460
</Section>

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

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import styled from "styled-components";
22
import { default as TimePicker } from "antd/es/time-picker";
3-
import { DateTimeStyleType } from "../../controls/styleControlConstants";
4-
import { getStyle } from "comps/comps/dateComp/dateCompUtil";
3+
import { ChildrenMultiSelectStyleType, DateTimeStyleType } from "../../controls/styleControlConstants";
4+
import { getStyle, StyledPickerPanel } from "comps/comps/dateComp/dateCompUtil";
55
import { useUIView } from "../../utils/useUIView";
66
import { checkIsMobile } from "util/commonUtils";
7-
import React, { useContext } from "react";
7+
import React, { ReactNode, useContext } from "react";
88
import type { TimeCompViewProps } from "./timeComp";
99
import { EditorContext } from "../../editorState";
1010
import dayjs from "dayjs";
@@ -66,6 +66,13 @@ export const TimeRangeUIView = (props: TimeRangeUIViewProps) => {
6666
inputReadOnly={checkIsMobile(editorState?.getAppSettings().maxWidth)}
6767
suffixIcon={hasIcon(props.suffixIcon) && props.suffixIcon}
6868
placeholder={placeholders}
69+
panelRender={(panelNode: ReactNode) => (
70+
<StyledPickerPanel
71+
$style={props.$childrenInputFieldStyle as ChildrenMultiSelectStyleType}
72+
>
73+
{panelNode}
74+
</StyledPickerPanel>
75+
)}
6976
renderExtraFooter={() => (
7077
props.timeZone === "UserChoice" && (
7178
<StyledAntdSelect

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

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import styled from "styled-components";
22
import { default as TimePicker } from "antd/es/time-picker";
3-
import { DateTimeStyleType } from "../../controls/styleControlConstants";
4-
import { getStyle } from "comps/comps/dateComp/dateCompUtil";
3+
import { ChildrenMultiSelectStyleType, DateTimeStyleType } from "../../controls/styleControlConstants";
4+
import { getStyle, StyledPickerPanel } from "comps/comps/dateComp/dateCompUtil";
55
import { useUIView } from "../../utils/useUIView";
66
import { checkIsMobile } from "util/commonUtils";
77
import React, { useContext } from "react";
@@ -44,21 +44,29 @@ export const TimeUIView = (props: TimeUIViewProps) => {
4444
return useUIView(
4545
<TimeMobileUIView {...props} />,
4646
<TimePickerStyled
47-
{...omit(props, "format")}
47+
{...omit(props, "format", "$childrenInputFieldStyle")}
4848
ref={props.viewRef}
4949
hideDisabledOptions
5050
inputReadOnly={checkIsMobile(editorState?.getAppSettings().maxWidth)}
5151
placeholder={placeholder}
52+
panelRender={(panelNode) => (
53+
<StyledPickerPanel
54+
$style={props.$childrenInputFieldStyle as ChildrenMultiSelectStyleType}
55+
>
56+
{panelNode}
57+
</StyledPickerPanel>
58+
)}
5259
renderExtraFooter={()=>(
53-
props.timeZone === "UserChoice" && (
54-
<StyledAntdSelect
55-
placeholder="Select Time Zone"
56-
options={timeZoneOptions.filter(option => option.value !== 'UserChoice')} // Filter out 'userChoice'
57-
onChange={props?.handleTimeZoneChange}
58-
defaultValue={Intl.DateTimeFormat().resolvedOptions().timeZone}
59-
/>
60+
props.timeZone === "UserChoice" && (
61+
<StyledAntdSelect
62+
placeholder="Select Time Zone"
63+
options={timeZoneOptions.filter(option => option.value !== 'UserChoice')} // Filter out 'userChoice'
64+
onChange={props?.handleTimeZoneChange}
65+
defaultValue={Intl.DateTimeFormat().resolvedOptions().timeZone}
66+
/>
67+
)
6068
)
61-
)}
69+
}
6270
/>
6371
);
6472
};

0 commit comments

Comments
 (0)