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

Commit7f74ce1

Browse files
Merge pull request#1815 from iamfaran/feat/1466-disabled-placeholders
[Feat]:#1466 Add disabled/placeholder styles for the main components
2 parents6722132 +b366ecb commit7f74ce1

21 files changed

+437
-48
lines changed

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import {
2121
ButtonCompWrapper,
2222
buttonRefMethods,
2323
ButtonStyleControl,
24+
DisabledButtonStyleControl,
2425
}from"./buttonCompConstants";
2526
import{RefControl}from"comps/controls/refControl";
2627
import{Tooltip}from"antd";
@@ -133,6 +134,7 @@ const childrenMap = {
133134
prefixIcon:IconControl,
134135
suffixIcon:IconControl,
135136
style:ButtonStyleControl,
137+
disabledStyle:DisabledButtonStyleControl,
136138
animationStyle:styleControl(AnimationStyle,'animationStyle'),
137139
viewRef:RefControl<HTMLElement>,
138140
tooltip:StringControl
@@ -173,6 +175,7 @@ const ButtonPropertyView = React.memo((props: {
173175
{props.children.suffixIcon.propertyView({label:trans("button.suffixIcon")})}
174176
</Section>
175177
<Sectionname={sectionNames.style}>{props.children.style.getPropertyView()}</Section>
178+
<Sectionname={trans("prop.disabledStyle")}>{props.children.disabledStyle.getPropertyView()}</Section>
176179
</>
177180
)}
178181
</>
@@ -212,6 +215,7 @@ const ButtonView = React.memo((props: ToViewReturn<ChildrenType>) => {
212215
<Button100
213216
ref={props.viewRef}
214217
$buttonStyle={props.style}
218+
$disabledStyle={props.disabledStyle}
215219
loading={props.loading}
216220
disabled={
217221
props.disabled||

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

Lines changed: 28 additions & 11 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}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){
10+
exportfunctiongetButtonStyle(buttonStyle:ButtonStyleType,disabledStyle:DisabledButtonStyleType={}asany){
1111
consthoverColor=buttonStyle.background&&genHoverColor(buttonStyle.background);
1212
constactiveColor=buttonStyle.background&&genActiveColor(buttonStyle.background);
1313
returncss`
@@ -48,12 +48,23 @@ export function getButtonStyle(buttonStyle: ButtonStyleType) {
4848
:buttonStyle.border}!important;
4949
}
5050
}
51+
52+
/* Disabled state styling */
53+
&:disabled,
54+
&.ant-btn-disabled {
55+
color:${disabledStyle.disabledText};
56+
background:${disabledStyle.disabledBackground};
57+
cursor: not-allowed;
58+
}
5159
}
5260
`;
5361
}
5462

55-
exportconstButton100=styled(Button)<{$buttonStyle?:ButtonStyleType}>`
56-
${(props)=>props.$buttonStyle&&getButtonStyle(props.$buttonStyle)}
63+
exportconstButton100=styled(Button)<{
64+
$buttonStyle?:ButtonStyleType;
65+
$disabledStyle?:DisabledButtonStyleType;
66+
}>`
67+
${(props)=>props.$buttonStyle&&getButtonStyle(props.$buttonStyle,props.$disabledStyle)}
5768
width: 100%;
5869
height: auto;
5970
display: inline-flex;
@@ -73,13 +84,15 @@ export const ButtonCompWrapper = styled.div<{ $disabled: boolean }>`
7384
7485
// The button component is disabled but can respond to drag & select events
7586
${(props)=>
76-
props.$disabled&&
77-
`
78-
cursor: not-allowed;
79-
button:disabled {
80-
pointer-events: none;
81-
}
82-
`};
87+
props.$disabled
88+
?`
89+
cursor: not-allowed;
90+
button:disabled {
91+
pointer-events: none;
92+
}
93+
`
94+
:""
95+
}
8396
`;
8497

8598
/**
@@ -103,6 +116,10 @@ function fixOldData(oldData: any) {
103116
constButtonTmpStyleControl=styleControl(ButtonStyle,'style');
104117
exportconstButtonStyleControl=migrateOldData(ButtonTmpStyleControl,fixOldData);
105118

119+
// Create disabled style control
120+
constDisabledButtonTmpStyleControl=styleControl(DisabledButtonStyle,'disabledStyle');
121+
exportconstDisabledButtonStyleControl=migrateOldData(DisabledButtonTmpStyleControl,fixOldData);
122+
106123
exportconstbuttonRefMethods=refMethods<HTMLElement>([
107124
focusWithOptions,
108125
blurMethod,

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,10 @@ import {
44
Button100,
55
ButtonCompWrapper,
66
buttonRefMethods,
7+
ButtonStyleControl,
78
}from"comps/comps/buttonComp/buttonCompConstants";
89
import{BoolCodeControl,StringControl}from"comps/controls/codeControl";
910
import{ScannerEventHandlerControl}from"comps/controls/eventHandlerControl";
10-
import{styleControl}from"comps/controls/styleControl";
11-
import{DropdownStyle}from"comps/controls/styleControlConstants";
1211
import{withDefault}from"comps/generators";
1312
import{UICompBuilder}from"comps/generators/uiCompBuilder";
1413
import{CustomModal,Section,sectionNames}from"lowcoder-design";
@@ -127,7 +126,7 @@ const ScannerTmpComp = (function () {
127126
maskClosable:withDefault(BoolControl,true),
128127
onEvent:ScannerEventHandlerControl,
129128
disabled:BoolCodeControl,
130-
style:styleControl(DropdownStyle,"style"),
129+
style:ButtonStyleControl,
131130
viewRef:RefControl<HTMLElement>,
132131
};
133132
returnnewUICompBuilder(childrenMap,(props)=>{

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import { trans } from "i18n";
1212
importstyledfrom"styled-components";
1313
import{ChangeEventHandlerControl}from"../../controls/eventHandlerControl";
1414
import{CommonNameConfig,NameConfig,withExposingConfigs}from"../../generators/withExposing";
15-
import{Button100,ButtonCompWrapper,buttonRefMethods}from"./buttonCompConstants";
15+
import{Button100,ButtonCompWrapper,buttonRefMethods,DisabledButtonStyleControl}from"./buttonCompConstants";
1616
import{IconControl}from"comps/controls/iconControl";
1717
import{AlignWithStretchControl,LeftRightControl}from"comps/controls/dropdownControl";
1818
import{booleanExposingStateControl}from"comps/controls/codeStateControl";
@@ -63,6 +63,7 @@ const ToggleTmpComp = (function () {
6363
iconPosition:LeftRightControl,
6464
alignment:AlignWithStretchControl,
6565
style:styleControl(ToggleButtonStyle,'style'),
66+
disabledStyle:DisabledButtonStyleControl,
6667
animationStyle:styleControl(AnimationStyle,'animationStyle'),
6768
showBorder:withDefault(BoolControl,true),
6869
viewRef:RefControl<HTMLElement>,
@@ -84,6 +85,7 @@ const ToggleTmpComp = (function () {
8485
<Button100
8586
ref={props.viewRef}
8687
$buttonStyle={props.style}
88+
$disabledStyle={props.disabledStyle}
8789
loading={props.loading}
8890
disabled={props.disabled}
8991
onClick={()=>{
@@ -153,6 +155,7 @@ const ToggleTmpComp = (function () {
153155
</>
154156
)}
155157

158+
<Sectionname={trans("prop.disabledStyle")}>{children.disabledStyle.getPropertyView()}</Section>
156159
</>
157160
))
158161
.setExposeMethodConfigs(buttonRefMethods)

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

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ import { UICompBuilder, withDefault } from "../../generators";
2121
import{CommonNameConfig,depsConfig,withExposingConfigs}from"../../generators/withExposing";
2222
import{formDataChildren,FormDataPropertyView}from"../formComp/formDataConstants";
2323
import{styleControl}from"comps/controls/styleControl";
24-
import{AnimationStyle,ChildrenMultiSelectStyle,ChildrenMultiSelectStyleType,DateTimeStyle,DateTimeStyleType,InputFieldStyle,LabelStyle}from"comps/controls/styleControlConstants";
24+
import{AnimationStyle,ChildrenMultiSelectStyle,ChildrenMultiSelectStyleType,DateTimeStyle,DateTimeStyleType,InputFieldStyle,LabelStyle,DisabledInputStyle,DisabledInputStyleType}from"comps/controls/styleControlConstants";
2525
import{withMethodExposing}from"../../generators/withMethodExposing";
2626
import{
2727
disabledPropertyView,
@@ -81,6 +81,7 @@ const commonChildren = {
8181
format:StringControl,
8282
inputFormat:withDefault(StringControl,DATE_FORMAT),
8383
disabled:BoolCodeControl,
84+
disabledStyle:styleControl(DisabledInputStyle,'disabledStyle'),
8485
onEvent:eventHandlerControl(EventOptions),
8586
showTime:BoolControl,
8687
use12Hours:BoolControl,
@@ -179,11 +180,13 @@ export type DateCompViewProps = Pick<
179180
|"viewRef"
180181
|"timeZone"
181182
|"pickerMode"
183+
|"disabledStyle"
182184
>&{
183185
onFocus:()=>void;
184186
onBlur:()=>void;
185187
$style:DateTimeStyleType;
186188
$childrenInputFieldStyle:ChildrenMultiSelectStyleType;
189+
$disabledStyle?:DisabledInputStyleType;
187190
disabledTime:()=>ReturnType<typeofdisabledTime>;
188191
suffixIcon:ReactNode;
189192
placeholder?:string|[string,string];
@@ -264,6 +267,7 @@ const DatePickerTmpCmp = new UICompBuilder(childrenMap, (props) => {
264267
disabledTime={()=>disabledTime(props.minTime,props.maxTime)}
265268
$style={props.inputFieldStyle}
266269
$childrenInputFieldStyle={props.childrenInputFieldStyle}
270+
$disabledStyle={props.disabledStyle}
267271
disabled={props.disabled}
268272
{...datePickerProps(props)}
269273
hourStep={props.hourStep}
@@ -285,6 +289,7 @@ const DatePickerTmpCmp = new UICompBuilder(childrenMap, (props) => {
285289
onBlur={()=>props.onEvent("blur")}
286290
suffixIcon={hasIcon(props.suffixIcon)&&props.suffixIcon}
287291
tabIndex={typeofprops.tabIndex==='number' ?props.tabIndex :undefined}
292+
disabledStyle={props.disabledStyle}
288293
/>
289294
),
290295
showValidationWhenEmpty:props.showValidationWhenEmpty,
@@ -366,6 +371,9 @@ const DatePickerTmpCmp = new UICompBuilder(childrenMap, (props) => {
366371
<Sectionname={sectionNames.animationStyle}hasTooltip={true}>
367372
{children.animationStyle.getPropertyView()}
368373
</Section>
374+
<Sectionname={trans("prop.disabledStyle")}>
375+
{children.disabledStyle.getPropertyView()}
376+
</Section>
369377
</>
370378
)}
371379
</>
@@ -457,6 +465,7 @@ let DateRangeTmpCmp = (function () {
457465
viewRef={props.viewRef}
458466
$style={props.inputFieldStyle}
459467
$childrenInputFieldStyle={props.childrenInputFieldStyle}
468+
$disabledStyle={props.disabledStyle}
460469
disabled={props.disabled}
461470
{...datePickerProps(props)}
462471
start={tempStartValue?.isValid() ?tempStartValue :null}
@@ -482,6 +491,7 @@ let DateRangeTmpCmp = (function () {
482491
onBlur={()=>props.onEvent("blur")}
483492
suffixIcon={hasIcon(props.suffixIcon)&&props.suffixIcon}
484493
tabIndex={typeofprops.tabIndex==='number' ?props.tabIndex :undefined}
494+
disabledStyle={props.disabledStyle}
485495
/>
486496
);
487497

@@ -579,6 +589,9 @@ let DateRangeTmpCmp = (function () {
579589
<Sectionname={sectionNames.childrenInputFieldStyle}>
580590
{children.childrenInputFieldStyle.getPropertyView()}
581591
</Section>
592+
<Sectionname={trans("prop.disabledStyle")}>
593+
{children.disabledStyle.getPropertyView()}
594+
</Section>
582595
</>
583596
)}
584597

‎client/packages/lowcoder/src/comps/comps/dateComp/dateCompUtil.ts

Lines changed: 37 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -85,8 +85,23 @@ export const getStyle = (style: DateTimeStyleType) => {
8585
color:${style.text};
8686
8787
&::-webkit-input-placeholder {
88-
color:${style.text};
89-
opacity:0.25;
88+
color:${style.placeholder};
89+
opacity:1;
90+
}
91+
92+
&::-moz-placeholder {
93+
color:${style.placeholder};
94+
opacity:1;
95+
}
96+
97+
&:-ms-input-placeholder {
98+
color:${style.placeholder};
99+
opacity:1;
100+
}
101+
102+
&::placeholder {
103+
color:${style.placeholder};
104+
opacity:1;
90105
}
91106
}
92107
@@ -132,6 +147,26 @@ export const getMobileStyle = (style: DateTimeStyleType) =>
132147
background-color:${style.background};
133148
border-radius:${style.radius};
134149
border-color:${style.border};
150+
151+
&::-webkit-input-placeholder {
152+
color:${style.placeholder};
153+
opacity:1;
154+
}
155+
156+
&::-moz-placeholder {
157+
color:${style.placeholder};
158+
opacity:1;
159+
}
160+
161+
&:-ms-input-placeholder {
162+
color:${style.placeholder};
163+
opacity:1;
164+
}
165+
166+
&::placeholder {
167+
color:${style.placeholder};
168+
opacity:1;
169+
}
135170
`;
136171

137172
exportconstdateRefMethods=refMethods<CommonPickerMethods>([focusMethod,blurMethod]);

‎client/packages/lowcoder/src/comps/comps/dateComp/dateRangeUIView.tsx

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { useUIView } from "../../utils/useUIView";
55
import{checkIsMobile}from"util/commonUtils";
66
importReact,{useContext}from"react";
77
importstyledfrom"styled-components";
8-
importtype{ChildrenMultiSelectStyleType,DateTimeStyleType}from"../../controls/styleControlConstants";
8+
importtype{ChildrenMultiSelectStyleType,DateTimeStyleType,DisabledInputStyleType}from"../../controls/styleControlConstants";
99
import{EditorContext}from"../../editorState";
1010
import{defaultasDatePicker}from"antd/es/date-picker";
1111
import{hasIcon}from"comps/utils";
@@ -16,11 +16,28 @@ import { timeZoneOptions } from "./timeZone";
1616

1717
const{ RangePicker}=DatePicker;
1818

19-
constRangePickerStyled=styled(RangePicker)<{$style:DateTimeStyleType}>`
19+
constRangePickerStyled=styled(RangePicker)<{$style:DateTimeStyleType;$disabledStyle?:DisabledInputStyleType}>`
2020
width: 100%;
2121
box-shadow:${(props)=>
2222
`${props.$style.boxShadow}${props.$style.boxShadowColor}`};
2323
${(props)=>props.$style&&getStyle(props.$style)}
24+
25+
&.ant-picker-disabled {
26+
cursor: not-allowed;
27+
color:${(props)=>props.$disabledStyle?.disabledText};
28+
background:${(props)=>props.$disabledStyle?.disabledBackground};
29+
border-color:${(props)=>props.$disabledStyle?.disabledBorder};
30+
31+
.ant-picker-input > input {
32+
color:${(props)=>props.$disabledStyle?.disabledText};
33+
background:${(props)=>props.$disabledStyle?.disabledBackground};
34+
}
35+
.ant-picker-suffix,
36+
.ant-picker-clear,
37+
.ant-picker-separator {
38+
color:${(props)=>props.$disabledStyle?.disabledText};
39+
}
40+
}
2441
`;
2542

2643
constStyledAntdSelect=styled(AntdSelect)`
@@ -46,6 +63,7 @@ export interface DateRangeUIViewProps extends DateCompViewProps {
4663
onPanelChange:(value:any,mode:[string,string])=>void;
4764
onClickDateRangeTimeZone:(value:any)=>void;
4865
tabIndex?:number;
66+
$disabledStyle?:DisabledInputStyleType;
4967
}
5068

5169
exportconstDateRangeUIView=(props:DateRangeUIViewProps)=>{
@@ -98,6 +116,7 @@ export const DateRangeUIView = (props: DateRangeUIViewProps) => {
98116
</StyledDiv>
99117
)
100118
)}
119+
$disabledStyle={props.$disabledStyle}
101120
/>
102121
);
103122
};

0 commit comments

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