Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit54cc9b9

Browse files
committed
[Fix]:#1466 add disabled styles for the components / refactor
1 parentc9cdee7 commit54cc9b9

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{defaultasButton}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
importstyled,{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-
exportfunctiongetButtonStyle(buttonStyle:ButtonStyleType,disabledStyle?:any){
10+
exportfunctiongetButtonStyle(buttonStyle:ButtonStyleType,disabledStyle:DisabledButtonStyleType={}asany){
1111
consthoverColor=buttonStyle.background&&genHoverColor(buttonStyle.background);
1212
constactiveColor=buttonStyle.background&&genActiveColor(buttonStyle.background);
1313
returncss`
@@ -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
exportconstButton100=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
<Tooltiptitle={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
<Sectionname={sectionNames.style}>
359361
{children.style.getPropertyView()}
360362
</Section>
363+
<Sectionname="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
importstyled,{css}from"styled-components";
99
// import { genActiveColor, genHoverColor } from "lowcoder-design";
1010

11-
exportfunctiongetButtonStyle(buttonStyle:any){
11+
exportfunctiongetButtonStyle(buttonStyle:any,disabledStyle:any){
1212
consthoverColor=buttonStyle.background&&genHoverColor(buttonStyle.background);
1313
constactiveColor=buttonStyle.background&&genActiveColor(buttonStyle.background);
1414
returncss`
@@ -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-
exportconstButton100=styled(Button)<{$buttonStyle?:any}>`
51-
${(props)=>props.$buttonStyle&&getButtonStyle(props.$buttonStyle)}
57+
exportconstButton100=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+
exportconstDisabledButtonTmpStyleControl=styleControl(DisabledButtonStyle);
109+
exportconstDisabledButtonStyleControl=migrateOldData(
110+
DisabledButtonTmpStyleControl,
111+
fixOldData
112+
);
113+
101114
exportconstbuttonRefMethods=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={typeofprops.tabIndex==='number' ?props.tabIndex :undefined}
403420
onPressEnter={()=>{
@@ -489,8 +506,8 @@ let NumberInputTmpComp = (function () {
489506
<Sectionname={sectionNames.inputFieldStyle}>
490507
{children.inputFieldStyle.getPropertyView()}
491508
</Section>
492-
<Sectionname={"DisabledInputStyle"}>
493-
{children.disabledInputStyle.getPropertyView()}
509+
<Sectionname={"Disabled Style"}>
510+
{children.disabledStyle.getPropertyView()}
494511
</Section>
495512
<Sectionname={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={typeofprops.tabIndex==='number' ?props.tabIndex :undefined}
@@ -127,7 +128,7 @@ let InputBasicComp = new UICompBuilder(childrenMap, (props) => {
127128
<Sectionname={sectionNames.style}>{children.style.getPropertyView()}</Section>
128129
<Sectionname={sectionNames.labelStyle}>{children.labelStyle.getPropertyView()}</Section>
129130
<Sectionname={sectionNames.inputFieldStyle}>{children.inputFieldStyle.getPropertyView()}</Section>
130-
<Sectionname={"Disabled Input Style"}>{children.disabledInputStyle.getPropertyView()}</Section>
131+
<Sectionname={"Disabled Input Style"}>{children.disabledStyle.getPropertyView()}</Section>
131132
<Sectionname={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
returnnewUICompBuilder(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={typeofprops.tabIndex==='number' ?props.tabIndex :undefined}
113114
/>
114115
</Wrapper>
@@ -152,7 +153,7 @@ let TextAreaTmpComp = (function () {
152153
<Sectionname={sectionNames.style}>{children.style.getPropertyView()}</Section>
153154
<Sectionname={sectionNames.labelStyle}>{children.labelStyle.getPropertyView()}</Section>
154155
<Sectionname={sectionNames.inputFieldStyle}>{children.inputFieldStyle.getPropertyView()}</Section>
155-
<Sectionname={"DisabledInputStyle"}>{children.disabledInputStyle.getPropertyView()}</Section>
156+
<Sectionname={"Disabled Style"}>{children.disabledStyle.getPropertyView()}</Section>
156157
<Sectionname={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+
}asconst;
983+
984+
985+
exportconstDISABLED_BORDER={
986+
name:"disabledBorder",
987+
label:trans("style.disabledBorder"),
988+
color:SECOND_SURFACE_COLOR,
982989
}asconst;
983990

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

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

9971003

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

10541046
// Create separate disabled style control
1055-
exportconstDisabledButtonStyle=[
1056-
...DISABLED_STYLE_FIELDS,
1057-
]asconst;
1047+
exportconstDisabledButtonStyle=withDisabled();
1048+
1049+
1050+
// For input components
1051+
exportconstDisabledInputStyle=withDisabled();
10581052

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

1333-
// Create separate disabled style control for text inputs
1334-
exportconstDisabledInputStyle=[
1335-
...DISABLED_INPUT_STYLE_FIELDS,
1336-
]asconst;
13371327

13381328
// added by Mousheng
13391329

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp