Skip to content

Commit 54cc9b9

Browse files
iamfaraniamfaran
committed
[Fix]: #1466 add disabled styles for the components / refactor
1 parent c9cdee7 commit 54cc9b9

File tree

7 files changed

+89
-62
lines changed

7 files changed

+89
-62
lines changed

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import { default as Button } from "antd/es/button";
22
import { styleControl } from "comps/controls/styleControl";
3-
import { ButtonStyleType, ButtonStyle, DisabledButtonStyle } from "comps/controls/styleControlConstants";
3+
import { ButtonStyleType, ButtonStyle, DisabledButtonStyle, DisabledButtonStyleType } from "comps/controls/styleControlConstants";
44
import { migrateOldData } from "comps/generators/simpleGenerators";
55
import styled, { css } from "styled-components";
66
import { genActiveColor, genHoverColor } from "lowcoder-design";
77
import { refMethods } from "comps/generators/withMethodExposing";
88
import { blurMethod, clickMethod, focusWithOptions } from "comps/utils/methodUtils";
99

10-
export function getButtonStyle(buttonStyle: ButtonStyleType, disabledStyle?: any) {
10+
export function getButtonStyle(buttonStyle: ButtonStyleType, disabledStyle: DisabledButtonStyleType = {} as any) {
1111
const hoverColor = buttonStyle.background && genHoverColor(buttonStyle.background);
1212
const activeColor = buttonStyle.background && genActiveColor(buttonStyle.background);
1313
return css`
@@ -52,8 +52,8 @@ export function getButtonStyle(buttonStyle: ButtonStyleType, disabledStyle?: any
5252
/* Disabled state styling */
5353
&:disabled,
5454
&.ant-btn-disabled {
55-
color: ${disabledStyle?.disabledText || buttonStyle.text};
56-
background: ${disabledStyle?.disabledBackground || buttonStyle.background};
55+
color: ${disabledStyle.disabledText};
56+
background: ${disabledStyle.disabledBackground};
5757
cursor: not-allowed;
5858
}
5959
}
@@ -62,7 +62,7 @@ export function getButtonStyle(buttonStyle: ButtonStyleType, disabledStyle?: any
6262

6363
export const Button100 = styled(Button)<{
6464
$buttonStyle?: ButtonStyleType;
65-
$disabledStyle?: any;
65+
$disabledStyle?: DisabledButtonStyleType;
6666
}>`
6767
${(props) => props.$buttonStyle && getButtonStyle(props.$buttonStyle, props.$disabledStyle)}
6868
width: 100%;

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ import {
2828
} from "../../generators/withExposing";
2929
import { IForm } from "../formComp/formDataConstants";
3030
import { SimpleNameComp } from "../simpleNameComp";
31-
import { Button100, ButtonStyleControl } from "./videobuttonCompConstants";
31+
import { Button100, ButtonStyleControl, DisabledButtonStyleControl } from "./videobuttonCompConstants";
3232
import { RefControl } from "comps/controls/refControl";
3333
import { AutoHeightControl } from "comps/controls/autoHeightControl";
3434
import {
@@ -195,6 +195,7 @@ const childrenMap = {
195195
aspectRatio: withDefault(StringControl, "1 / 1"),
196196
onEvent: ButtonEventHandlerControl,
197197
disabled: BoolCodeControl,
198+
disabledStyle: DisabledButtonStyleControl,
198199
loading: BoolCodeControl,
199200
form: SelectFormControl,
200201
sourceMode: dropdownControl(ModeOptions, "standard"),
@@ -267,6 +268,7 @@ let ButtonTmpComp = (function () {
267268
<Tooltip title={props.tooltip}>
268269
<Button100
269270
ref={props.viewRef}
271+
$disabledStyle={props.disabledStyle}
270272
$buttonStyle={props.style}
271273
loading={props.loading}
272274
style={
@@ -358,6 +360,9 @@ let ButtonTmpComp = (function () {
358360
<Section name={sectionNames.style}>
359361
{children.style.getPropertyView()}
360362
</Section>
363+
<Section name="Disabled">
364+
{children.disabledStyle.getPropertyView()}
365+
</Section>
361366
</>
362367
)}
363368
</>

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

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { styleControl } from "@lowcoder-ee/comps/controls/styleControl";
2-
import { ButtonStyle } from "@lowcoder-ee/comps/controls/styleControlConstants";
2+
import { ButtonStyle, DisabledButtonStyle } from "@lowcoder-ee/comps/controls/styleControlConstants";
33
import { migrateOldData } from "@lowcoder-ee/comps/generators/simpleGenerators";
44
import { refMethods } from "@lowcoder-ee/comps/generators/withMethodExposing";
55
import { blurMethod, clickMethod, focusWithOptions } from "@lowcoder-ee/comps/utils/methodUtils";
@@ -8,7 +8,7 @@ import { genActiveColor, genHoverColor } from "components/colorSelect/colorUtils
88
import styled, { css } from "styled-components";
99
// import { genActiveColor, genHoverColor } from "lowcoder-design";
1010

11-
export function getButtonStyle(buttonStyle: any) {
11+
export function getButtonStyle(buttonStyle: any, disabledStyle: any) {
1212
const hoverColor = buttonStyle.background && genHoverColor(buttonStyle.background);
1313
const activeColor = buttonStyle.background && genActiveColor(buttonStyle.background);
1414
return css`
@@ -42,13 +42,20 @@ export function getButtonStyle(buttonStyle: any) {
4242
? activeColor
4343
: buttonStyle.border};
4444
}
45+
46+
}
47+
&:disabled,
48+
&.ant-btn-disabled {
49+
color: ${disabledStyle.disabledText};
50+
background: ${disabledStyle.disabledBackground};
51+
cursor: not-allowed;
4552
}
4653
}
4754
`;
4855
}
4956

50-
export const Button100 = styled(Button)<{ $buttonStyle?: any }>`
51-
${(props) => props.$buttonStyle && getButtonStyle(props.$buttonStyle)}
57+
export const Button100 = styled(Button)<{ $buttonStyle?: any; $disabledStyle?: any }>`
58+
${(props) => props.$buttonStyle && getButtonStyle(props.$buttonStyle, props.$disabledStyle)}
5259
width: 100%;
5360
height: auto;
5461
display: inline-flex;
@@ -98,6 +105,12 @@ export const ButtonStyleControl = migrateOldData(
98105
fixOldData
99106
);
100107

108+
export const DisabledButtonTmpStyleControl = styleControl(DisabledButtonStyle);
109+
export const DisabledButtonStyleControl = migrateOldData(
110+
DisabledButtonTmpStyleControl,
111+
fixOldData
112+
);
113+
101114
export const buttonRefMethods = refMethods([
102115
focusWithOptions,
103116
blurMethod,

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

Lines changed: 30 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -74,11 +74,7 @@ const getStyle = (style: InputLikeStyleType) => {
7474
&:hover {
7575
border-color: ${style.accent};
7676
}
77-
78-
&::-webkit-input-placeholder {
79-
color: ${style.text};
80-
opacity: 0.4;
81-
}
77+
8278
.ant-input-number {
8379
margin: 0;
8480
@@ -92,6 +88,26 @@ const getStyle = (style: InputLikeStyleType) => {
9288
font-weight:${style.textWeight} !important;
9389
font-size:${style.textSize} !important;
9490
font-style:${style.fontStyle} !important;
91+
92+
&::-webkit-input-placeholder {
93+
color: ${style.placeholder};
94+
opacity: 1;
95+
}
96+
97+
&::-moz-placeholder {
98+
color: ${style.placeholder};
99+
opacity: 1;
100+
}
101+
102+
&:-ms-input-placeholder {
103+
color: ${style.placeholder};
104+
opacity: 1;
105+
}
106+
107+
&::placeholder {
108+
color: ${style.placeholder};
109+
opacity: 1;
110+
}
95111
}
96112
97113
.ant-input-number-handler-wrap {
@@ -131,13 +147,14 @@ const InputNumber = styled(AntdInputNumber)<{
131147
/* Disabled state styling */
132148
&:disabled,
133149
&.ant-input-number-disabled {
134-
color: ${(props) => props.$disabledStyle?.disabledText || props.$style.text} !important;
135-
background: ${(props) => props.$disabledStyle?.disabledBackground || props.$style.background} !important;
150+
color: ${(props) => props.$disabledStyle?.disabledText};
151+
background: ${(props) => props.$disabledStyle?.disabledBackground};
152+
border-color: ${(props) => props.$disabledStyle?.disabledBorder};
136153
cursor: not-allowed;
137154
138155
.ant-input-number-input {
139-
color: ${(props) => props.$disabledStyle?.disabledText || props.$style.text} !important;
140-
background: ${(props) => props.$disabledStyle?.disabledBackground || props.$style.background} !important;
156+
color: ${(props) => props.$disabledStyle?.disabledText};
157+
background: ${(props) => props.$disabledStyle?.disabledBackground};
141158
}
142159
143160
}
@@ -280,7 +297,7 @@ const childrenMap = {
280297
animationStyle: styleControl(AnimationStyle , 'animationStyle'),
281298
prefixIcon: IconControl,
282299
inputFieldStyle: styleControl(InputLikeStyle , 'inputFieldStyle'),
283-
disabledInputStyle: styleControl(DisabledInputStyle, 'disabledInputStyle'),
300+
disabledStyle: styleControl(DisabledInputStyle, 'disabledStyle'),
284301
// validation
285302
required: BoolControl,
286303
showValidationWhenEmpty: BoolControl,
@@ -397,7 +414,7 @@ const CustomInputNumber = (props: RecordConstructorToView<typeof childrenMap>) =
397414
stringMode={true}
398415
precision={props.precision}
399416
$style={props.inputFieldStyle}
400-
$disabledStyle={props.disabledInputStyle}
417+
$disabledStyle={props.disabledStyle}
401418
prefix={hasIcon(props.prefixIcon) ? props.prefixIcon : props.prefixText.value}
402419
tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined}
403420
onPressEnter={() => {
@@ -489,8 +506,8 @@ let NumberInputTmpComp = (function () {
489506
<Section name={sectionNames.inputFieldStyle}>
490507
{children.inputFieldStyle.getPropertyView()}
491508
</Section>
492-
<Section name={"Disabled Input Style"}>
493-
{children.disabledInputStyle.getPropertyView()}
509+
<Section name={"Disabled Style"}>
510+
{children.disabledStyle.getPropertyView()}
494511
</Section>
495512
<Section name={sectionNames.animationStyle} hasTooltip={true}>
496513
{children.animationStyle.getPropertyView()}

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

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -53,8 +53,9 @@ const InputStyle = styled(Input)<{
5353
/* Disabled state styling */
5454
&:disabled,
5555
&.ant-input-disabled {
56-
color: ${(props) => props.$disabledStyle?.disabledText || props.$style.text} !important;
57-
background: ${(props) => props.$disabledStyle?.disabledBackground || props.$style.background} !important;
56+
color: ${(props) => props.$disabledStyle?.disabledText};
57+
background: ${(props) => props.$disabledStyle?.disabledBackground};
58+
border-color: ${(props) => props.$disabledStyle?.disabledBorder};
5859
cursor: not-allowed;
5960
}
6061
`;
@@ -70,7 +71,7 @@ const childrenMap = {
7071
suffixIcon: IconControl,
7172
inputFieldStyle: styleControl(InputLikeStyle, 'inputFieldStyle'),
7273
animationStyle: styleControl(AnimationStyle, 'animationStyle'),
73-
disabledInputStyle: styleControl(DisabledInputStyle, 'disabledInputStyle'),
74+
disabledStyle: styleControl(DisabledInputStyle, 'disabledStyle'),
7475
tabIndex: NumberControl,
7576
};
7677

@@ -85,7 +86,7 @@ let InputBasicComp = new UICompBuilder(childrenMap, (props) => {
8586
showCount={props.showCount}
8687
allowClear={props.allowClear}
8788
$style={props.inputFieldStyle}
88-
$disabledStyle={props.disabledInputStyle}
89+
$disabledStyle={props.disabledStyle}
8990
prefix={hasIcon(props.prefixIcon) && props.prefixIcon}
9091
suffix={hasIcon(props.suffixIcon) && props.suffixIcon}
9192
tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined}
@@ -127,7 +128,7 @@ let InputBasicComp = new UICompBuilder(childrenMap, (props) => {
127128
<Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
128129
<Section name={sectionNames.labelStyle}>{children.labelStyle.getPropertyView()}</Section>
129130
<Section name={sectionNames.inputFieldStyle}>{children.inputFieldStyle.getPropertyView()}</Section>
130-
<Section name={"Disabled Input Style"}>{children.disabledInputStyle.getPropertyView()}</Section>
131+
<Section name={"Disabled Input Style"}>{children.disabledStyle.getPropertyView()}</Section>
131132
<Section name={sectionNames.animationStyle} hasTooltip={true}>{children.animationStyle.getPropertyView()}</Section>
132133
</>
133134
)}

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

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -50,8 +50,9 @@ const TextAreaStyled = styled(TextArea)<{
5050
/* Disabled state styling */
5151
&:disabled,
5252
&.ant-input-disabled {
53-
color: ${(props) => props.$disabledStyle?.disabledText || props.$style.text} !important;
54-
background: ${(props) => props.$disabledStyle?.disabledBackground || props.$style.background} !important;
53+
color: ${(props) => props.$disabledStyle?.disabledText};
54+
background: ${(props) => props.$disabledStyle?.disabledBackground};
55+
border-color: ${(props) => props.$disabledStyle?.disabledBorder};
5556
cursor: not-allowed;
5657
}
5758
`;
@@ -91,7 +92,7 @@ let TextAreaTmpComp = (function () {
9192
textAreaScrollBar: withDefault(BoolControl, false),
9293
inputFieldStyle: styleControl(InputLikeStyle , 'inputFieldStyle'),
9394
animationStyle: styleControl(AnimationStyle, 'animationStyle'),
94-
disabledInputStyle: styleControl(DisabledInputStyle, 'disabledInputStyle'),
95+
disabledStyle: styleControl(DisabledInputStyle, 'disabledStyle'),
9596
tabIndex: NumberControl
9697
};
9798
return new UICompBuilder(childrenMap, (props) => {
@@ -108,7 +109,7 @@ let TextAreaTmpComp = (function () {
108109
allowClear={props.allowClear}
109110
style={{ height: "100% !important", resize: "vertical" }}
110111
$style={props.inputFieldStyle}
111-
$disabledStyle={props.disabledInputStyle}
112+
$disabledStyle={props.disabledStyle}
112113
tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined}
113114
/>
114115
</Wrapper>
@@ -152,7 +153,7 @@ let TextAreaTmpComp = (function () {
152153
<Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
153154
<Section name={sectionNames.labelStyle}>{children.labelStyle.getPropertyView()}</Section>
154155
<Section name={sectionNames.inputFieldStyle}>{children.inputFieldStyle.getPropertyView()}</Section>
155-
<Section name={"Disabled Input Style"}>{children.disabledInputStyle.getPropertyView()}</Section>
156+
<Section name={"Disabled Style"}>{children.disabledStyle.getPropertyView()}</Section>
156157
<Section name={sectionNames.animationStyle} hasTooltip={true}>{children.animationStyle.getPropertyView()}</Section>
157158
</>
158159
)}

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

Lines changed: 19 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -978,37 +978,29 @@ const DISABLED_TEXT = {
978978
label: trans("style.disabledText"),
979979
depName: "disabledBackground",
980980
depType: DEP_TYPE.CONTRAST_TEXT,
981-
transformer: contrastText,
981+
transformer: (color: string) => lightenColor(color, 0.8),
982+
} as const;
983+
984+
985+
export const DISABLED_BORDER = {
986+
name: "disabledBorder",
987+
label: trans("style.disabledBorder"),
988+
color: SECOND_SURFACE_COLOR,
982989
} as const;
983990

984-
// Re-export for reuse in other components if needed
985991
export const DISABLED_STYLE_FIELDS = [
986992
DISABLED_BACKGROUND,
987993
DISABLED_TEXT,
994+
DISABLED_BORDER,
988995
] as const;
989996

990-
// Add disabled style constants specifically for text input components
991-
const DISABLED_INPUT_BACKGROUND = {
992-
name: "disabledBackground",
993-
label: trans("style.disabledBackground"),
994-
color: SECOND_SURFACE_COLOR,
995-
} as const;
997+
// Helper to quickly create a component-specific disabled style list by
998+
// extending the two generic disabled tokens above.
999+
export const withDisabled = <Extra extends readonly SingleColorConfig[] = []>(
1000+
extra: Extra = [] as unknown as Extra,
1001+
) => [...DISABLED_STYLE_FIELDS, ...extra] as const;
9961002

9971003

998-
const DISABLED_INPUT_TEXT = {
999-
name: "disabledText",
1000-
label: trans("style.disabledText"),
1001-
depName: "disabledInputBackground",
1002-
depType: DEP_TYPE.CONTRAST_TEXT,
1003-
transformer: contrastText,
1004-
} as const;
1005-
1006-
// Re-export for reuse in textInput components
1007-
export const DISABLED_INPUT_STYLE_FIELDS = [
1008-
DISABLED_INPUT_BACKGROUND,
1009-
DISABLED_INPUT_TEXT,
1010-
] as const;
1011-
10121004
// Add disabled style constants specifically for slider components
10131005
const DISABLED_SLIDER_FILL = {
10141006
name: "disabledFill",
@@ -1052,9 +1044,11 @@ export const ButtonStyle = [
10521044
] as const;
10531045

10541046
// Create separate disabled style control
1055-
export const DisabledButtonStyle = [
1056-
...DISABLED_STYLE_FIELDS,
1057-
] as const;
1047+
export const DisabledButtonStyle = withDisabled();
1048+
1049+
1050+
// For input components
1051+
export const DisabledInputStyle = withDisabled();
10581052

10591053
export const DropdownStyle = [
10601054
getBackground(),
@@ -1330,10 +1324,6 @@ export const InputLikeStyle = [
13301324
...ACCENT_VALIDATE,
13311325
] as const;
13321326

1333-
// Create separate disabled style control for text inputs
1334-
export const DisabledInputStyle = [
1335-
...DISABLED_INPUT_STYLE_FIELDS,
1336-
] as const;
13371327

13381328
// added by Mousheng
13391329

0 commit comments

Comments
 (0)