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