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

Commit56e71f6

Browse files
committed
add disabled input styles
1 parent864a887 commit56e71f6

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
returncss`
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
constInputNumber=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
constFormatterOptions=[
@@ -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={typeofprops.tabIndex==='number' ?props.tabIndex :undefined}
387413
onPressEnter={()=>{
@@ -473,6 +499,9 @@ let NumberInputTmpComp = (function () {
473499
<Sectionname={sectionNames.inputFieldStyle}>
474500
{children.inputFieldStyle.getPropertyView()}
475501
</Section>
502+
<Sectionname={"Disabled Input Style"}>
503+
{children.disabledInputStyle.getPropertyView()}
504+
</Section>
476505
<Sectionname={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-
constInputStyle=styled(Input)<{$style:InputLikeStyleType}>`
45+
constInputStyle=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
constchildrenMap={
@@ -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={typeofprops.tabIndex==='number' ?props.tabIndex :undefined}
@@ -114,6 +128,7 @@ let InputBasicComp = new UICompBuilder(childrenMap, (props) => {
114128
<Sectionname={sectionNames.style}>{children.style.getPropertyView()}</Section>
115129
<Sectionname={sectionNames.labelStyle}>{children.labelStyle.getPropertyView()}</Section>
116130
<Sectionname={sectionNames.inputFieldStyle}>{children.inputFieldStyle.getPropertyView()}</Section>
131+
<Sectionname={"Disabled Input Style"}>{children.disabledInputStyle.getPropertyView()}</Section>
117132
<Sectionname={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
importstyledfrom"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
constPasswordStyle=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
letPasswordTmpComp=(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
returnnewUICompBuilder(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={typeofprops.tabIndex==='number' ?props.tabIndex :undefined}
8294
/>
8395
),
@@ -124,6 +136,7 @@ let PasswordTmpComp = (function () {
124136
<Sectionname={sectionNames.style}>{children.style.getPropertyView()}</Section>
125137
<Sectionname={sectionNames.labelStyle}>{children.labelStyle.getPropertyView()}</Section>
126138
<Sectionname={sectionNames.inputFieldStyle}>{children.inputFieldStyle.getPropertyView()}</Section>
139+
<Sectionname={"Disabled Input Style"}>{children.disabledInputStyle.getPropertyView()}</Section>
127140
<Sectionname={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
importstyledfrom"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
constTextAreaStyled=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
constWrapper=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
returnnewUICompBuilder(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={typeofprops.tabIndex==='number' ?props.tabIndex :undefined}
102114
/>
103115
</Wrapper>
@@ -141,6 +153,7 @@ let TextAreaTmpComp = (function () {
141153
<Sectionname={sectionNames.style}>{children.style.getPropertyView()}</Section>
142154
<Sectionname={sectionNames.labelStyle}>{children.labelStyle.getPropertyView()}</Section>
143155
<Sectionname={sectionNames.inputFieldStyle}>{children.inputFieldStyle.getPropertyView()}</Section>
156+
<Sectionname={"Disabled Input Style"}>{children.disabledInputStyle.getPropertyView()}</Section>
144157
<Sectionname={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
]asconst;
990990

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

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

12641298
exportconstColorPickerStyle=[
@@ -2325,6 +2359,7 @@ export type SignatureContainerStyleType = StyleConfigType<typeof SignatureContai
23252359
exporttypeColorPickerStyleType=StyleConfigType<typeofColorPickerStyle>;
23262360
exporttypeButtonStyleType=StyleConfigType<typeofButtonStyle>;
23272361
exporttypeDisabledButtonStyleType=StyleConfigType<typeofDisabledButtonStyle>;
2362+
exporttypeDisabledInputStyleType=StyleConfigType<typeofDisabledInputStyle>;
23282363
exporttypeToggleButtonStyleType=StyleConfigType<typeofToggleButtonStyle>;
23292364
exporttypeTextStyleType=StyleConfigType<typeofTextStyle>;
23302365
exporttypeTextContainerStyleType=StyleConfigType<typeofTextContainerStyle>;

0 commit comments

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