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

Commitb366ecb

Browse files
committed
[Fix]:#1466 add disabled/placeholder style for components
1 parent54cc9b9 commitb366ecb

File tree

15 files changed

+165
-45
lines changed

15 files changed

+165
-45
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -175,7 +175,7 @@ const ButtonPropertyView = React.memo((props: {
175175
{props.children.suffixIcon.propertyView({label:trans("button.suffixIcon")})}
176176
</Section>
177177
<Sectionname={sectionNames.style}>{props.children.style.getPropertyView()}</Section>
178-
<Sectionname="Disabled">{props.children.disabledStyle.getPropertyView()}</Section>
178+
<Sectionname={trans("prop.disabledStyle")}>{props.children.disabledStyle.getPropertyView()}</Section>
179179
</>
180180
)}
181181
</>

‎client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -155,7 +155,7 @@ const ToggleTmpComp = (function () {
155155
</>
156156
)}
157157

158-
<Sectionname="Disabled">{children.disabledStyle.getPropertyView()}</Section>
158+
<Sectionname={trans("prop.disabledStyle")}>{children.disabledStyle.getPropertyView()}</Section>
159159
</>
160160
))
161161
.setExposeMethodConfigs(buttonRefMethods)

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

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ import { UICompBuilder, withDefault } from "../../generators";
2121
import{CommonNameConfig,depsConfig,withExposingConfigs}from"../../generators/withExposing";
2222
import{formDataChildren,FormDataPropertyView}from"../formComp/formDataConstants";
2323
import{styleControl}from"comps/controls/styleControl";
24-
import{AnimationStyle,ChildrenMultiSelectStyle,ChildrenMultiSelectStyleType,DateTimeStyle,DateTimeStyleType,InputFieldStyle,LabelStyle}from"comps/controls/styleControlConstants";
24+
import{AnimationStyle,ChildrenMultiSelectStyle,ChildrenMultiSelectStyleType,DateTimeStyle,DateTimeStyleType,InputFieldStyle,LabelStyle,DisabledInputStyle,DisabledInputStyleType}from"comps/controls/styleControlConstants";
2525
import{withMethodExposing}from"../../generators/withMethodExposing";
2626
import{
2727
disabledPropertyView,
@@ -81,6 +81,7 @@ const commonChildren = {
8181
format:StringControl,
8282
inputFormat:withDefault(StringControl,DATE_FORMAT),
8383
disabled:BoolCodeControl,
84+
disabledStyle:styleControl(DisabledInputStyle,'disabledStyle'),
8485
onEvent:eventHandlerControl(EventOptions),
8586
showTime:BoolControl,
8687
use12Hours:BoolControl,
@@ -179,11 +180,13 @@ export type DateCompViewProps = Pick<
179180
|"viewRef"
180181
|"timeZone"
181182
|"pickerMode"
183+
|"disabledStyle"
182184
>&{
183185
onFocus:()=>void;
184186
onBlur:()=>void;
185187
$style:DateTimeStyleType;
186188
$childrenInputFieldStyle:ChildrenMultiSelectStyleType;
189+
$disabledStyle?:DisabledInputStyleType;
187190
disabledTime:()=>ReturnType<typeofdisabledTime>;
188191
suffixIcon:ReactNode;
189192
placeholder?:string|[string,string];
@@ -264,6 +267,7 @@ const DatePickerTmpCmp = new UICompBuilder(childrenMap, (props) => {
264267
disabledTime={()=>disabledTime(props.minTime,props.maxTime)}
265268
$style={props.inputFieldStyle}
266269
$childrenInputFieldStyle={props.childrenInputFieldStyle}
270+
$disabledStyle={props.disabledStyle}
267271
disabled={props.disabled}
268272
{...datePickerProps(props)}
269273
hourStep={props.hourStep}
@@ -285,6 +289,7 @@ const DatePickerTmpCmp = new UICompBuilder(childrenMap, (props) => {
285289
onBlur={()=>props.onEvent("blur")}
286290
suffixIcon={hasIcon(props.suffixIcon)&&props.suffixIcon}
287291
tabIndex={typeofprops.tabIndex==='number' ?props.tabIndex :undefined}
292+
disabledStyle={props.disabledStyle}
288293
/>
289294
),
290295
showValidationWhenEmpty:props.showValidationWhenEmpty,
@@ -366,6 +371,9 @@ const DatePickerTmpCmp = new UICompBuilder(childrenMap, (props) => {
366371
<Sectionname={sectionNames.animationStyle}hasTooltip={true}>
367372
{children.animationStyle.getPropertyView()}
368373
</Section>
374+
<Sectionname={trans("prop.disabledStyle")}>
375+
{children.disabledStyle.getPropertyView()}
376+
</Section>
369377
</>
370378
)}
371379
</>
@@ -457,6 +465,7 @@ let DateRangeTmpCmp = (function () {
457465
viewRef={props.viewRef}
458466
$style={props.inputFieldStyle}
459467
$childrenInputFieldStyle={props.childrenInputFieldStyle}
468+
$disabledStyle={props.disabledStyle}
460469
disabled={props.disabled}
461470
{...datePickerProps(props)}
462471
start={tempStartValue?.isValid() ?tempStartValue :null}
@@ -482,6 +491,7 @@ let DateRangeTmpCmp = (function () {
482491
onBlur={()=>props.onEvent("blur")}
483492
suffixIcon={hasIcon(props.suffixIcon)&&props.suffixIcon}
484493
tabIndex={typeofprops.tabIndex==='number' ?props.tabIndex :undefined}
494+
disabledStyle={props.disabledStyle}
485495
/>
486496
);
487497

@@ -579,6 +589,9 @@ let DateRangeTmpCmp = (function () {
579589
<Sectionname={sectionNames.childrenInputFieldStyle}>
580590
{children.childrenInputFieldStyle.getPropertyView()}
581591
</Section>
592+
<Sectionname={trans("prop.disabledStyle")}>
593+
{children.disabledStyle.getPropertyView()}
594+
</Section>
582595
</>
583596
)}
584597

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

Lines changed: 37 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -85,8 +85,23 @@ export const getStyle = (style: DateTimeStyleType) => {
8585
color:${style.text};
8686
8787
&::-webkit-input-placeholder {
88-
color:${style.text};
89-
opacity:0.25;
88+
color:${style.placeholder};
89+
opacity:1;
90+
}
91+
92+
&::-moz-placeholder {
93+
color:${style.placeholder};
94+
opacity:1;
95+
}
96+
97+
&:-ms-input-placeholder {
98+
color:${style.placeholder};
99+
opacity:1;
100+
}
101+
102+
&::placeholder {
103+
color:${style.placeholder};
104+
opacity:1;
90105
}
91106
}
92107
@@ -132,6 +147,26 @@ export const getMobileStyle = (style: DateTimeStyleType) =>
132147
background-color:${style.background};
133148
border-radius:${style.radius};
134149
border-color:${style.border};
150+
151+
&::-webkit-input-placeholder {
152+
color:${style.placeholder};
153+
opacity:1;
154+
}
155+
156+
&::-moz-placeholder {
157+
color:${style.placeholder};
158+
opacity:1;
159+
}
160+
161+
&:-ms-input-placeholder {
162+
color:${style.placeholder};
163+
opacity:1;
164+
}
165+
166+
&::placeholder {
167+
color:${style.placeholder};
168+
opacity:1;
169+
}
135170
`;
136171

137172
exportconstdateRefMethods=refMethods<CommonPickerMethods>([focusMethod,blurMethod]);

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

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { useUIView } from "../../utils/useUIView";
55
import{checkIsMobile}from"util/commonUtils";
66
importReact,{useContext}from"react";
77
importstyledfrom"styled-components";
8-
importtype{ChildrenMultiSelectStyleType,DateTimeStyleType}from"../../controls/styleControlConstants";
8+
importtype{ChildrenMultiSelectStyleType,DateTimeStyleType,DisabledInputStyleType}from"../../controls/styleControlConstants";
99
import{EditorContext}from"../../editorState";
1010
import{defaultasDatePicker}from"antd/es/date-picker";
1111
import{hasIcon}from"comps/utils";
@@ -16,11 +16,28 @@ import { timeZoneOptions } from "./timeZone";
1616

1717
const{ RangePicker}=DatePicker;
1818

19-
constRangePickerStyled=styled(RangePicker)<{$style:DateTimeStyleType}>`
19+
constRangePickerStyled=styled(RangePicker)<{$style:DateTimeStyleType;$disabledStyle?:DisabledInputStyleType}>`
2020
width: 100%;
2121
box-shadow:${(props)=>
2222
`${props.$style.boxShadow}${props.$style.boxShadowColor}`};
2323
${(props)=>props.$style&&getStyle(props.$style)}
24+
25+
&.ant-picker-disabled {
26+
cursor: not-allowed;
27+
color:${(props)=>props.$disabledStyle?.disabledText};
28+
background:${(props)=>props.$disabledStyle?.disabledBackground};
29+
border-color:${(props)=>props.$disabledStyle?.disabledBorder};
30+
31+
.ant-picker-input > input {
32+
color:${(props)=>props.$disabledStyle?.disabledText};
33+
background:${(props)=>props.$disabledStyle?.disabledBackground};
34+
}
35+
.ant-picker-suffix,
36+
.ant-picker-clear,
37+
.ant-picker-separator {
38+
color:${(props)=>props.$disabledStyle?.disabledText};
39+
}
40+
}
2441
`;
2542

2643
constStyledAntdSelect=styled(AntdSelect)`
@@ -46,6 +63,7 @@ export interface DateRangeUIViewProps extends DateCompViewProps {
4663
onPanelChange:(value:any,mode:[string,string])=>void;
4764
onClickDateRangeTimeZone:(value:any)=>void;
4865
tabIndex?:number;
66+
$disabledStyle?:DisabledInputStyleType;
4967
}
5068

5169
exportconstDateRangeUIView=(props:DateRangeUIViewProps)=>{
@@ -98,6 +116,7 @@ export const DateRangeUIView = (props: DateRangeUIViewProps) => {
98116
</StyledDiv>
99117
)
100118
)}
119+
$disabledStyle={props.$disabledStyle}
101120
/>
102121
);
103122
};

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

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { useUIView } from "../../utils/useUIView";
55
import{checkIsMobile}from"util/commonUtils";
66
importReact,{useContext}from"react";
77
importstyledfrom"styled-components";
8-
importtype{ChildrenMultiSelectStyleType,DateTimeStyleType}from"../../controls/styleControlConstants";
8+
importtype{ChildrenMultiSelectStyleType,DateTimeStyleType,DisabledInputStyleType}from"../../controls/styleControlConstants";
99
import{EditorContext}from"../../editorState";
1010
import{defaultasDatePicker}from"antd/es/date-picker";
1111
importtype{DatePickerProps}from"antd/es/date-picker";
@@ -15,10 +15,28 @@ import { timeZoneOptions } from "./timeZone";
1515
import{defaultasAntdSelect}from"antd/es/select";
1616
import{omit}from"lodash";
1717

18-
constDatePickerStyled=styled(DatePicker<Dayjs>)<{$style:DateTimeStyleType}>`
18+
constDatePickerStyled=styled(DatePicker<Dayjs>)<{$style:DateTimeStyleType;$disabledStyle?:DisabledInputStyleType;}>`
1919
width: 100%;
2020
box-shadow:${props=>`${props.$style.boxShadow}${props.$style.boxShadowColor}`};
2121
${(props)=>props.$style&&getStyle(props.$style)}
22+
23+
/* Disabled state styling */
24+
&.ant-picker-disabled {
25+
cursor: not-allowed;
26+
color:${(props)=>props.$disabledStyle?.disabledText};
27+
background:${(props)=>props.$disabledStyle?.disabledBackground};
28+
border-color:${(props)=>props.$disabledStyle?.disabledBorder};
29+
30+
.ant-picker-input > input {
31+
color:${(props)=>props.$disabledStyle?.disabledText};
32+
background:${(props)=>props.$disabledStyle?.disabledBackground};
33+
}
34+
.ant-picker-suffix,
35+
.ant-picker-clear,
36+
.ant-picker-separator {
37+
color:${(props)=>props.$disabledStyle?.disabledText};
38+
}
39+
}
2240
`;
2341

2442
constStyledDiv=styled.div`
@@ -40,6 +58,7 @@ export interface DataUIViewProps extends DateCompViewProps {
4058
onPanelChange:()=>void;
4159
onClickDateTimeZone:(value:any)=>void;
4260
tabIndex?:number;
61+
$disabledStyle?:DisabledInputStyleType;
4362
}
4463

4564
constDateMobileUIView=React.lazy(()=>
@@ -54,6 +73,7 @@ export const DateUIView = (props: DataUIViewProps) => {
5473
<DateMobileUIView{...props}/>,
5574
<DatePickerStyled
5675
{...omit(props,"format","inputFormat","pickerMode","$childrenInputFieldStyle")}
76+
$disabledStyle={props.$disabledStyle}
5777
multiple={false}
5878
format={props.inputFormat}
5979
ref={props.viewRefasany}

‎client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -360,7 +360,7 @@ let ButtonTmpComp = (function () {
360360
<Sectionname={sectionNames.style}>
361361
{children.style.getPropertyView()}
362362
</Section>
363-
<Sectionname="Disabled">
363+
<Sectionname={trans("prop.disabledStyle")}>
364364
{children.disabledStyle.getPropertyView()}
365365
</Section>
366366
</>

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -506,9 +506,9 @@ let NumberInputTmpComp = (function () {
506506
<Sectionname={sectionNames.inputFieldStyle}>
507507
{children.inputFieldStyle.getPropertyView()}
508508
</Section>
509-
<Sectionname={"Disabled Style"}>
510-
{children.disabledStyle.getPropertyView()}
511-
</Section>
509+
<Sectionname={trans("prop.disabledStyle")}>
510+
{children.disabledStyle.getPropertyView()}
511+
</Section>
512512
<Sectionname={sectionNames.animationStyle}hasTooltip={true}>
513513
{children.animationStyle.getPropertyView()}
514514
</Section>

‎client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -65,11 +65,6 @@ const getStyle = (style: SliderStyleType, vertical: boolean, disabledStyle?: Dis
6565
.ant-slider-track {
6666
background-color:${disabledStyle?.disabledFill||lightenColor(style.fill,0.3)}!important;
6767
}
68-
.ant-slider-handle {
69-
background-color:${disabledStyle?.disabledThumb||lightenColor(style.thumb,0.25)}!important;
70-
border-color:${disabledStyle?.disabledThumbBorder||lightenColor(style.thumbBorder,0.25)}!important;
71-
cursor: not-allowed!important;
72-
}
7368
${vertical&&css`
7469
width: auto;
7570
min-height:calc(300px-${style.margin});
@@ -157,7 +152,7 @@ const LayoutSection = memo(({ children }: { children: RecordConstructorToComp<ty
157152
<Sectionname={sectionNames.inputFieldStyle}>
158153
{children.inputFieldStyle.getPropertyView()}
159154
</Section>
160-
<Sectionname={"Disabled Slider Style"}>
155+
<Sectionname={trans("prop.disabledStyle")}>
161156
{children.disabledSliderStyle.getPropertyView()}
162157
</Section>
163158
<Sectionname={sectionNames.animationStyle}hasTooltip={true}>

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

Lines changed: 31 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { stringExposingStateControl, numberExposingStateControl } from "comps/co
55
import{ChangeEventHandlerControl}from"comps/controls/eventHandlerControl";
66
import{StepOptionControl}from"comps/controls/optionsControl";
77
import{styleControl}from"comps/controls/styleControl";
8-
import{StepsStyle,StepsStyleType,heightCalculator,widthCalculator,marginCalculator,AnimationStyle,AnimationStyleType}from"comps/controls/styleControlConstants";
8+
import{StepsStyle,StepsStyleType,heightCalculator,widthCalculator,marginCalculator,AnimationStyle,AnimationStyleType,DisabledStepStyle,DisabledStepStyleType}from"comps/controls/styleControlConstants";
99
importstyled,{css}from"styled-components";
1010
import{UICompBuilder,withDefault}from"../../generators";
1111
import{CommonNameConfig,NameConfig,withExposingConfigs}from"../../generators/withExposing";
@@ -98,11 +98,12 @@ const StepsChildrenMap = {
9898
animationStyle:styleControl(AnimationStyle,'animationStyle'),
9999
showScrollBars:withDefault(BoolControl,false),
100100
minHorizontalWidth:withDefault(RadiusControl,''),
101+
disabledStyle:styleControl(DisabledStepStyle,'disabledStyle'),
101102
};
102103

103104
letStepControlBasicComp=(function(){
104105
returnnewUICompBuilder(StepsChildrenMap,(props)=>{
105-
constStyledWrapper=styled.div<{style:StepsStyleType,$animationStyle:AnimationStyleType}>`
106+
constStyledWrapper=styled.div<{style:StepsStyleType,$animationStyle:AnimationStyleType,$disabledStyle:DisabledStepStyleType}>`
106107
${props=>props.$animationStyle}
107108
height: 100%;
108109
overflow-y: scroll;
@@ -124,6 +125,30 @@ let StepControlBasicComp = (function () {
124125
border:${props.style.borderWidth} solid${props.style.border};
125126
border-radius:${props.style.radius};
126127
${getBackgroundStyle(props.style)}
128+
/* Disabled step styles */
129+
.ant-steps-item-disabled {
130+
.ant-steps-item-icon {
131+
background:${(props)=>props.$disabledStyle?.disabledBackground};
132+
border-color:${(props)=>props.$disabledStyle?.disabledBorder};
133+
134+
/* When using icon as dot */
135+
.ant-steps-icon-dot {
136+
background:${(props)=>props.$disabledStyle?.disabledBackground};
137+
}
138+
139+
/* Default icon or custom icon */
140+
.ant-steps-icon,
141+
> * {
142+
color:${(props)=>props.$disabledStyle?.disabledText};
143+
}
144+
}
145+
146+
.ant-steps-item-title,
147+
.ant-steps-item-subtitle,
148+
.ant-steps-item-description {
149+
color:${(props)=>props.$disabledStyle?.disabledText};
150+
}
151+
}
127152
.ant-steps-item { padding-top: 5px !important; }
128153
.ant-steps.ant-steps-label-vertical.ant-steps-small .ant-steps-item-icon { margin-top: 17px !important; }
129154
.ant-steps.ant-steps-label-vertical.ant-steps-default .ant-steps-item-icon { margin-top: 12px !important; }
@@ -172,7 +197,7 @@ let StepControlBasicComp = (function () {
172197
}
173198
}}
174199
>
175-
<StyledWrapperstyle={props.style}$animationStyle={props.animationStyle}>
200+
<StyledWrapperstyle={props.style}$animationStyle={props.animationStyle}$disabledStyle={props.disabledStyle}>
176201
<ScrollBar
177202
style={{
178203
height:props.autoHeight ?"auto" :"100%",
@@ -281,6 +306,9 @@ let StepControlBasicComp = (function () {
281306
<Sectionname={sectionNames.animationStyle}hasTooltip={true}>
282307
{children.animationStyle.getPropertyView()}
283308
</Section>
309+
<Sectionname={trans("prop.disabledStyle")}>
310+
{children.disabledStyle.getPropertyView()}
311+
</Section>
284312
</>
285313
)}
286314
</>

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp