Skip to content

Commit b366ecb

Browse files
iamfaraniamfaran
committed
[Fix]: #1466 add disabled/placeholder style for components
1 parent 54cc9b9 commit b366ecb

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
<Section name={sectionNames.style}>{props.children.style.getPropertyView()}</Section>
178-
<Section name="Disabled">{props.children.disabledStyle.getPropertyView()}</Section>
178+
<Section name={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-
<Section name="Disabled">{children.disabledStyle.getPropertyView()}</Section>
158+
<Section name={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<typeof disabledTime>;
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={typeof props.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
<Section name={sectionNames.animationStyle} hasTooltip={true}>
367372
{children.animationStyle.getPropertyView()}
368373
</Section>
374+
<Section name={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={typeof props.tabIndex === 'number' ? props.tabIndex : undefined}
494+
disabledStyle={props.disabledStyle}
485495
/>
486496
);
487497

@@ -579,6 +589,9 @@ let DateRangeTmpCmp = (function () {
579589
<Section name={sectionNames.childrenInputFieldStyle}>
580590
{children.childrenInputFieldStyle.getPropertyView()}
581591
</Section>
592+
<Section name={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
export const dateRefMethods = 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
import React, { useContext } from "react";
77
import styled from "styled-components";
8-
import type { ChildrenMultiSelectStyleType, DateTimeStyleType } from "../../controls/styleControlConstants";
8+
import type { ChildrenMultiSelectStyleType, DateTimeStyleType, DisabledInputStyleType } from "../../controls/styleControlConstants";
99
import { EditorContext } from "../../editorState";
1010
import { default as DatePicker } 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-
const RangePickerStyled = styled(RangePicker)<{$style: DateTimeStyleType}>`
19+
const RangePickerStyled = 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
const StyledAntdSelect = 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
export const DateRangeUIView = (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
import React, { useContext } from "react";
77
import styled from "styled-components";
8-
import type { ChildrenMultiSelectStyleType, DateTimeStyleType } from "../../controls/styleControlConstants";
8+
import type { ChildrenMultiSelectStyleType, DateTimeStyleType, DisabledInputStyleType } 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";
@@ -15,10 +15,28 @@ import { timeZoneOptions } from "./timeZone";
1515
import { default as AntdSelect } from "antd/es/select";
1616
import { omit } from "lodash";
1717

18-
const DatePickerStyled = styled(DatePicker<Dayjs>)<{ $style: DateTimeStyleType }>`
18+
const DatePickerStyled = 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
const StyledDiv = 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
const DateMobileUIView = 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.viewRef as any}

‎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
<Section name={sectionNames.style}>
361361
{children.style.getPropertyView()}
362362
</Section>
363-
<Section name="Disabled">
363+
<Section name={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
<Section name={sectionNames.inputFieldStyle}>
507507
{children.inputFieldStyle.getPropertyView()}
508508
</Section>
509-
<Section name={"Disabled Style"}>
510-
{children.disabledStyle.getPropertyView()}
511-
</Section>
509+
<Section name={trans("prop.disabledStyle")}>
510+
{children.disabledStyle.getPropertyView()}
511+
</Section>
512512
<Section name={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
<Section name={sectionNames.inputFieldStyle}>
158153
{children.inputFieldStyle.getPropertyView()}
159154
</Section>
160-
<Section name={"Disabled Slider Style"}>
155+
<Section name={trans("prop.disabledStyle")}>
161156
{children.disabledSliderStyle.getPropertyView()}
162157
</Section>
163158
<Section name={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
import styled, { 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
let StepControlBasicComp = (function () {
104105
return new UICompBuilder(StepsChildrenMap, (props) => {
105-
const StyledWrapper = styled.div<{ style: StepsStyleType, $animationStyle: AnimationStyleType }>`
106+
const StyledWrapper = 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-
<StyledWrapper style={props.style} $animationStyle={props.animationStyle}>
200+
<StyledWrapper style={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
<Section name={sectionNames.animationStyle} hasTooltip={true}>
282307
{children.animationStyle.getPropertyView()}
283308
</Section>
309+
<Section name={trans("prop.disabledStyle")}>
310+
{children.disabledStyle.getPropertyView()}
311+
</Section>
284312
</>
285313
)}
286314
</>

0 commit comments

Comments
 (0)