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
</>

‎client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -128,7 +128,7 @@ let InputBasicComp = new UICompBuilder(childrenMap, (props) => {
128128
<Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
129129
<Section name={sectionNames.labelStyle}>{children.labelStyle.getPropertyView()}</Section>
130130
<Section name={sectionNames.inputFieldStyle}>{children.inputFieldStyle.getPropertyView()}</Section>
131-
<Section name={"Disabled Input Style"}>{children.disabledStyle.getPropertyView()}</Section>
131+
<Section name={trans("prop.disabledStyle")}>{children.disabledStyle.getPropertyView()}</Section>
132132
<Section name={sectionNames.animationStyle} hasTooltip={true}>{children.animationStyle.getPropertyView()}</Section>
133133
</>
134134
)}

‎client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -135,7 +135,7 @@ let PasswordTmpComp = (function () {
135135
<Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
136136
<Section name={sectionNames.labelStyle}>{children.labelStyle.getPropertyView()}</Section>
137137
<Section name={sectionNames.inputFieldStyle}>{children.inputFieldStyle.getPropertyView()}</Section>
138-
<Section name={"Disabled Input Style"}>{children.disabledInputStyle.getPropertyView()}</Section>
138+
<Section name={trans("prop.disabledStyle")}>{children.disabledInputStyle.getPropertyView()}</Section>
139139
<Section name={sectionNames.animationStyle} hasTooltip={true}>{children.animationStyle.getPropertyView()}</Section>
140140
</>
141141
)}

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy