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