Skip to content

Commit 56e71f6

Browse files
iamfaraniamfaran
committed
add disabled input styles
1 parent 864a887 commit 56e71f6

File tree

5 files changed

+111
-6
lines changed

5 files changed

+111
-6
lines changed

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

Lines changed: 31 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ import { formDataChildren, FormDataPropertyView } from "../formComp/formDataCons
3030
import { withMethodExposing, refMethods } from "../../generators/withMethodExposing";
3131
import { RefControl } from "../../controls/refControl";
3232
import { styleControl } from "comps/controls/styleControl";
33-
import { AnimationStyle, InputFieldStyle, InputLikeStyle, InputLikeStyleType, LabelStyle, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
33+
import { AnimationStyle, InputFieldStyle, InputLikeStyle, InputLikeStyleType, LabelStyle, DisabledInputStyle, DisabledInputStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
3434
import {
3535
disabledPropertyView,
3636
hiddenPropertyView,
@@ -59,7 +59,6 @@ const getStyle = (style: InputLikeStyleType) => {
5959
return css`
6060
border-radius: ${style.radius};
6161
border-width:${style.borderWidth} !important;
62-
// line-height: ${style.lineHeight} !important;
6362
// still use antd style when disabled
6463
&:not(.ant-input-number-disabled) {
6564
color: ${style.text};
@@ -122,11 +121,36 @@ const getStyle = (style: InputLikeStyleType) => {
122121

123122
const InputNumber = styled(AntdInputNumber)<{
124123
$style: InputLikeStyleType;
124+
$disabledStyle?: DisabledInputStyleType;
125125
}>`
126126
box-shadow: ${(props) =>
127127
`${props.$style?.boxShadow} ${props.$style?.boxShadowColor}`};
128128
width: 100%;
129129
${(props) => props.$style && getStyle(props.$style)}
130+
131+
/* Disabled state styling */
132+
&:disabled,
133+
&.ant-input-number-disabled {
134+
color: ${(props) => props.$disabledStyle?.disabledText || props.$style.text} !important;
135+
background: ${(props) => props.$disabledStyle?.disabledBackground || props.$style.background} !important;
136+
border-color: ${(props) => props.$disabledStyle?.disabledBorder || props.$style.border} !important;
137+
cursor: not-allowed;
138+
139+
.ant-input-number-input {
140+
color: ${(props) => props.$disabledStyle?.disabledText || props.$style.text} !important;
141+
background: ${(props) => props.$disabledStyle?.disabledBackground || props.$style.background} !important;
142+
}
143+
144+
.ant-input-number-handler-wrap {
145+
background: ${(props) => props.$disabledStyle?.disabledBackground || props.$style.background} !important;
146+
border-color: ${(props) => props.$disabledStyle?.disabledBorder || props.$style.border} !important;
147+
148+
.ant-input-number-handler span {
149+
color: ${(props) => props.$disabledStyle?.disabledText || props.$style.text} !important;
150+
opacity: 0.3;
151+
}
152+
}
153+
}
130154
`;
131155

132156
const FormatterOptions = [
@@ -266,6 +290,7 @@ const childrenMap = {
266290
animationStyle: styleControl(AnimationStyle , 'animationStyle'),
267291
prefixIcon: IconControl,
268292
inputFieldStyle: styleControl(InputLikeStyle , 'inputFieldStyle'),
293+
disabledInputStyle: styleControl(DisabledInputStyle, 'disabledInputStyle'),
269294
// validation
270295
required: BoolControl,
271296
showValidationWhenEmpty: BoolControl,
@@ -382,6 +407,7 @@ const CustomInputNumber = (props: RecordConstructorToView<typeof childrenMap>) =
382407
stringMode={true}
383408
precision={props.precision}
384409
$style={props.inputFieldStyle}
410+
$disabledStyle={props.disabledInputStyle}
385411
prefix={hasIcon(props.prefixIcon) ? props.prefixIcon : props.prefixText.value}
386412
tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined}
387413
onPressEnter={() => {
@@ -473,6 +499,9 @@ let NumberInputTmpComp = (function () {
473499
<Section name={sectionNames.inputFieldStyle}>
474500
{children.inputFieldStyle.getPropertyView()}
475501
</Section>
502+
<Section name={"Disabled Input Style"}>
503+
{children.disabledInputStyle.getPropertyView()}
504+
</Section>
476505
<Section name={sectionNames.animationStyle} hasTooltip={true}>
477506
{children.animationStyle.getPropertyView()}
478507
</Section>

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

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Input, Section, sectionNames } from "lowcoder-design";
22
import { BoolControl } from "comps/controls/boolControl";
33
import { styleControl } from "comps/controls/styleControl";
4-
import { AnimationStyle, InputFieldStyle, InputLikeStyle, InputLikeStyleType, LabelStyle, LabelStyleType } from "comps/controls/styleControlConstants";
4+
import { AnimationStyle, InputFieldStyle, InputLikeStyle, InputLikeStyleType, LabelStyle, LabelStyleType, DisabledInputStyle, DisabledInputStyleType } from "comps/controls/styleControlConstants";
55
import {
66
NameConfig,
77
NameConfigPlaceHolder,
@@ -42,10 +42,22 @@ import { EditorContext } from "comps/editorState";
4242
* Input Comp
4343
*/
4444

45-
const InputStyle = styled(Input)<{$style: InputLikeStyleType}>`
45+
const InputStyle = styled(Input)<{
46+
$style: InputLikeStyleType;
47+
$disabledStyle?: DisabledInputStyleType;
48+
}>`
4649
box-shadow: ${(props) =>
4750
`${props.$style?.boxShadow} ${props.$style?.boxShadowColor}`};
4851
${(props) => props.$style && getStyle(props.$style)}
52+
53+
/* Disabled state styling */
54+
&:disabled,
55+
&.ant-input-disabled {
56+
color: ${(props) => props.$disabledStyle?.disabledText || props.$style.text} !important;
57+
background: ${(props) => props.$disabledStyle?.disabledBackground || props.$style.background} !important;
58+
border-color: ${(props) => props.$disabledStyle?.disabledBorder || props.$style.border} !important;
59+
cursor: not-allowed;
60+
}
4961
`;
5062

5163
const childrenMap = {
@@ -59,6 +71,7 @@ const childrenMap = {
5971
suffixIcon: IconControl,
6072
inputFieldStyle: styleControl(InputLikeStyle, 'inputFieldStyle'),
6173
animationStyle: styleControl(AnimationStyle, 'animationStyle'),
74+
disabledInputStyle: styleControl(DisabledInputStyle, 'disabledInputStyle'),
6275
tabIndex: NumberControl,
6376
};
6477

@@ -73,6 +86,7 @@ let InputBasicComp = new UICompBuilder(childrenMap, (props) => {
7386
showCount={props.showCount}
7487
allowClear={props.allowClear}
7588
$style={props.inputFieldStyle}
89+
$disabledStyle={props.disabledInputStyle}
7690
prefix={hasIcon(props.prefixIcon) && props.prefixIcon}
7791
suffix={hasIcon(props.suffixIcon) && props.suffixIcon}
7892
tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined}
@@ -114,6 +128,7 @@ let InputBasicComp = new UICompBuilder(childrenMap, (props) => {
114128
<Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
115129
<Section name={sectionNames.labelStyle}>{children.labelStyle.getPropertyView()}</Section>
116130
<Section name={sectionNames.inputFieldStyle}>{children.inputFieldStyle.getPropertyView()}</Section>
131+
<Section name={"Disabled Input Style"}>{children.disabledInputStyle.getPropertyView()}</Section>
117132
<Section name={sectionNames.animationStyle} hasTooltip={true}>{children.animationStyle.getPropertyView()}</Section>
118133
</>
119134
)}

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

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ import {
2626
import { withMethodExposing } from "../../generators/withMethodExposing";
2727
import { styleControl } from "comps/controls/styleControl";
2828
import styled from "styled-components";
29-
import { AnimationStyle, InputFieldStyle, InputLikeStyle, InputLikeStyleType, LabelStyle } from "comps/controls/styleControlConstants";
29+
import { AnimationStyle, InputFieldStyle, InputLikeStyle, InputLikeStyleType, LabelStyle, DisabledInputStyle, DisabledInputStyleType } from "comps/controls/styleControlConstants";
3030
import {
3131
hiddenPropertyView,
3232
minLengthPropertyView,
@@ -46,10 +46,20 @@ import { NumberControl } from "comps/controls/codeControl";
4646

4747
const PasswordStyle = styled(InputPassword)<{
4848
$style: InputLikeStyleType;
49+
$disabledStyle?: DisabledInputStyleType;
4950
}>`
5051
box-shadow: ${(props) =>
5152
`${props.$style?.boxShadow} ${props.$style?.boxShadowColor}`};
5253
${(props) => props.$style && getStyle(props.$style)}
54+
55+
/* Disabled state styling */
56+
&:disabled,
57+
&.ant-input-disabled {
58+
color: ${(props) => props.$disabledStyle?.disabledText || props.$style.text} !important;
59+
background: ${(props) => props.$disabledStyle?.disabledBackground || props.$style.background} !important;
60+
border-color: ${(props) => props.$disabledStyle?.disabledBorder || props.$style.border} !important;
61+
cursor: not-allowed;
62+
}
5363
`;
5464

5565
let PasswordTmpComp = (function () {
@@ -64,6 +74,7 @@ let PasswordTmpComp = (function () {
6474
labelStyle: styleControl(LabelStyle,'labelStyle'),
6575
inputFieldStyle: styleControl(InputLikeStyle , 'inputFieldStyle'),
6676
animationStyle: styleControl(AnimationStyle , 'animationStyle'),
77+
disabledInputStyle: styleControl(DisabledInputStyle, 'disabledInputStyle'),
6778
tabIndex: NumberControl,
6879
};
6980
return new UICompBuilder(childrenMap, (props, dispatch) => {
@@ -78,6 +89,7 @@ let PasswordTmpComp = (function () {
7889
ref={props.viewRef}
7990
visibilityToggle={props.visibilityToggle}
8091
$style={props.inputFieldStyle}
92+
$disabledStyle={props.disabledInputStyle}
8193
tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined}
8294
/>
8395
),
@@ -124,6 +136,7 @@ let PasswordTmpComp = (function () {
124136
<Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
125137
<Section name={sectionNames.labelStyle}>{children.labelStyle.getPropertyView()}</Section>
126138
<Section name={sectionNames.inputFieldStyle}>{children.inputFieldStyle.getPropertyView()}</Section>
139+
<Section name={"Disabled Input Style"}>{children.disabledInputStyle.getPropertyView()}</Section>
127140
<Section name={sectionNames.animationStyle} hasTooltip={true}>{children.animationStyle.getPropertyView()}</Section>
128141
</>
129142
)}

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

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ import {
2222
import { withMethodExposing, refMethods } from "../../generators/withMethodExposing";
2323
import { styleControl } from "comps/controls/styleControl";
2424
import styled from "styled-components";
25-
import { AnimationStyle, InputFieldStyle, InputLikeStyle, InputLikeStyleType, LabelStyle } from "comps/controls/styleControlConstants";
25+
import { AnimationStyle, InputFieldStyle, InputLikeStyle, InputLikeStyleType, LabelStyle, DisabledInputStyle, DisabledInputStyleType } from "comps/controls/styleControlConstants";
2626
import { TextArea } from "components/TextArea";
2727
import {
2828
allowClearPropertyView,
@@ -41,10 +41,20 @@ import { migrateOldData } from "comps/generators/simpleGenerators";
4141

4242
const TextAreaStyled = styled(TextArea)<{
4343
$style: InputLikeStyleType;
44+
$disabledStyle?: DisabledInputStyleType;
4445
}>`
4546
box-shadow: ${(props) =>
4647
`${props.$style?.boxShadow} ${props.$style?.boxShadowColor}`};
4748
${(props) => props.$style && getStyle(props.$style)}
49+
50+
/* Disabled state styling */
51+
&:disabled,
52+
&.ant-input-disabled {
53+
color: ${(props) => props.$disabledStyle?.disabledText || props.$style.text} !important;
54+
background: ${(props) => props.$disabledStyle?.disabledBackground || props.$style.background} !important;
55+
border-color: ${(props) => props.$disabledStyle?.disabledBorder || props.$style.border} !important;
56+
cursor: not-allowed;
57+
}
4858
`;
4959

5060
const Wrapper = styled.div<{
@@ -82,6 +92,7 @@ let TextAreaTmpComp = (function () {
8292
textAreaScrollBar: withDefault(BoolControl, false),
8393
inputFieldStyle: styleControl(InputLikeStyle , 'inputFieldStyle'),
8494
animationStyle: styleControl(AnimationStyle, 'animationStyle'),
95+
disabledInputStyle: styleControl(DisabledInputStyle, 'disabledInputStyle'),
8596
tabIndex: NumberControl
8697
};
8798
return new UICompBuilder(childrenMap, (props) => {
@@ -98,6 +109,7 @@ let TextAreaTmpComp = (function () {
98109
allowClear={props.allowClear}
99110
style={{ height: "100% !important", resize: "vertical" }}
100111
$style={props.inputFieldStyle}
112+
$disabledStyle={props.disabledInputStyle}
101113
tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined}
102114
/>
103115
</Wrapper>
@@ -141,6 +153,7 @@ let TextAreaTmpComp = (function () {
141153
<Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
142154
<Section name={sectionNames.labelStyle}>{children.labelStyle.getPropertyView()}</Section>
143155
<Section name={sectionNames.inputFieldStyle}>{children.inputFieldStyle.getPropertyView()}</Section>
156+
<Section name={"Disabled Input Style"}>{children.disabledInputStyle.getPropertyView()}</Section>
144157
<Section name={sectionNames.animationStyle} hasTooltip={true}>{children.animationStyle.getPropertyView()}</Section>
145158
</>
146159
)}

‎client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -988,6 +988,35 @@ export const DISABLED_STYLE_FIELDS = [
988988
DISABLED_TEXT,
989989
] as const;
990990

991+
// Add disabled style constants specifically for text input components
992+
const DISABLED_INPUT_BACKGROUND = {
993+
name: "disabledBackground",
994+
label: trans("style.disabledBackground"),
995+
color: SECOND_SURFACE_COLOR,
996+
} as const;
997+
998+
const DISABLED_INPUT_BORDER = {
999+
name: "disabledBorder",
1000+
label: trans("style.disabledBorder"),
1001+
depName: "disabledInputBackground",
1002+
transformer: backgroundToBorder,
1003+
} as const;
1004+
1005+
const DISABLED_INPUT_TEXT = {
1006+
name: "disabledText",
1007+
label: trans("style.disabledText"),
1008+
depName: "disabledInputBackground",
1009+
depType: DEP_TYPE.CONTRAST_TEXT,
1010+
transformer: contrastText,
1011+
} as const;
1012+
1013+
// Re-export for reuse in textInput components
1014+
export const DISABLED_INPUT_STYLE_FIELDS = [
1015+
DISABLED_INPUT_BACKGROUND,
1016+
DISABLED_INPUT_BORDER,
1017+
DISABLED_INPUT_TEXT,
1018+
] as const;
1019+
9911020
export const ButtonStyle = [
9921021
getBackground('primary'),
9931022
...STYLING_FIELDS_SEQUENCE,
@@ -1259,6 +1288,11 @@ export const InputLikeStyle = [
12591288
...ACCENT_VALIDATE,
12601289
] as const;
12611290

1291+
// Create separate disabled style control for text inputs
1292+
export const DisabledInputStyle = [
1293+
...DISABLED_INPUT_STYLE_FIELDS,
1294+
] as const;
1295+
12621296
// added by Mousheng
12631297

12641298
export const ColorPickerStyle = [
@@ -2325,6 +2359,7 @@ export type SignatureContainerStyleType = StyleConfigType<typeof SignatureContai
23252359
export type ColorPickerStyleType = StyleConfigType<typeof ColorPickerStyle>;
23262360
export type ButtonStyleType = StyleConfigType<typeof ButtonStyle>;
23272361
export type DisabledButtonStyleType = StyleConfigType<typeof DisabledButtonStyle>;
2362+
export type DisabledInputStyleType = StyleConfigType<typeof DisabledInputStyle>;
23282363
export type ToggleButtonStyleType = StyleConfigType<typeof ToggleButtonStyle>;
23292364
export type TextStyleType = StyleConfigType<typeof TextStyle>;
23302365
export type TextContainerStyleType = StyleConfigType<typeof TextContainerStyle>;

0 commit comments

Comments
 (0)