Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitdfb4fec

Browse files
added popup styles for date/time pickers
1 parentf65005a commitdfb4fec

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
typeCommonChildrenType=RecordConstructorToComp<typeofcommonChildren>;
@@ -171,6 +172,7 @@ export type DateCompViewProps = Pick<
171172
onFocus:()=>void;
172173
onBlur:()=>void;
173174
$style:DateTimeStyleType;
175+
$childrenInputFieldStyle:ChildrenMultiSelectStyleType;
174176
disabledTime:()=>ReturnType<typeofdisabledTime>;
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
<Sectionname={sectionNames.inputFieldStyle}>
308311
{children.inputFieldStyle.getPropertyView()}
309312
</Section>
313+
<Sectionname={sectionNames.childrenInputFieldStyle}>
314+
{children.childrenInputFieldStyle.getPropertyView()}
315+
</Section>
310316
<Sectionname={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
<Sectionname={sectionNames.inputFieldStyle}>
516523
{children.inputFieldStyle.getPropertyView()}
517524
</Section>
525+
<Sectionname={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
importdayjsfrom"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+
importstyled,{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
exportconstdateRefMethods=refMethods<CommonPickerMethods>([focusMethod,blurMethod]);
138+
139+
exportconstStyledPickerPanel=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
importdayjsfrom"dayjs";
22
importtype{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
importReact,{useContext}from"react";
77
importstyledfrom"styled-components";
8-
importtype{DateTimeStyleType}from"../../controls/styleControlConstants";
8+
importtype{ChildrenMultiSelectStyleType,DateTimeStyleType}from"../../controls/styleControlConstants";
99
import{EditorContext}from"../../editorState";
1010
import{defaultasDatePicker}from"antd/es/date-picker";
1111
import{hasIcon}from"comps/utils";
@@ -61,7 +61,7 @@ export const DateRangeUIView = (props: DateRangeUIViewProps) => {
6161
returnuseUIView(
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.viewRefasany}
6767
value={[props.start,props.end]}
@@ -77,6 +77,13 @@ export const DateRangeUIView = (props: DateRangeUIViewProps) => {
7777
hourStep={props.hourStepasany}
7878
minuteStep={props.minuteStepasany}
7979
secondStep={props.secondStepasany}
80+
panelRender={(panelNode)=>(
81+
<StyledPickerPanel
82+
$style={props.$childrenInputFieldStyleasChildrenMultiSelectStyleType}
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
importdayjsfrom"dayjs";
22
importtype{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
importReact,{useContext}from"react";
77
importstyledfrom"styled-components";
8-
importtype{DateTimeStyleType}from"../../controls/styleControlConstants";
8+
importtype{ChildrenMultiSelectStyleType,DateTimeStyleType}from"../../controls/styleControlConstants";
99
import{EditorContext}from"../../editorState";
1010
import{defaultasDatePicker}from"antd/es/date-picker";
1111
importtype{DatePickerProps}from"antd/es/date-picker";
@@ -53,7 +53,7 @@ export const DateUIView = (props: DataUIViewProps) => {
5353
returnuseUIView(
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.viewRefasany}
@@ -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.$childrenInputFieldStyleasChildrenMultiSelectStyleType}
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<typeofdisabledTime>;
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
<Sectionname={sectionNames.inputFieldStyle}>
273277
{children.inputFieldStyle.getPropertyView()}
274278
</Section>
279+
<Sectionname={sectionNames.childrenInputFieldStyle}>
280+
{children.childrenInputFieldStyle.getPropertyView()}
281+
</Section>
275282
<Sectionname={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
<Sectionname={sectionNames.inputFieldStyle}>
445453
{children.inputFieldStyle.getPropertyView()}
446454
</Section>
455+
<Sectionname={sectionNames.childrenInputFieldStyle}>
456+
{children.childrenInputFieldStyle.getPropertyView()}
457+
</Section>
447458
<Sectionname={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
importstyledfrom"styled-components";
22
import{defaultasTimePicker}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-
importReact,{useContext}from"react";
7+
importReact,{ReactNode,useContext}from"react";
88
importtype{TimeCompViewProps}from"./timeComp";
99
import{EditorContext}from"../../editorState";
1010
importdayjsfrom"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.$childrenInputFieldStyleasChildrenMultiSelectStyleType}
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
importstyledfrom"styled-components";
22
import{defaultasTimePicker}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
importReact,{useContext}from"react";
@@ -44,21 +44,29 @@ export const TimeUIView = (props: TimeUIViewProps) => {
4444
returnuseUIView(
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.$childrenInputFieldStyleasChildrenMultiSelectStyleType}
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)
[8]ページ先頭
©2009-2025 Movatter.jp