Skip to content

Commit 7f74ce1

Browse files
raheeliftikhar5raheeliftikhar5
authored
Merge pull request #1815 from iamfaran/feat/1466-disabled-placeholders
[Feat]: #1466 Add disabled/placeholder styles for the main components
2 parents 6722132 + b366ecb commit 7f74ce1

File tree

21 files changed

+437
-48
lines changed

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
<Section name={sectionNames.style}>{props.children.style.getPropertyView()}</Section>
178+
<Section name={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 { default as Button } 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
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) {
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`
@@ -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-
export const Button100 = styled(Button)<{ $buttonStyle?: ButtonStyleType }>`
56-
${(props) => props.$buttonStyle && getButtonStyle(props.$buttonStyle)}
63+
export const Button100 = 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
const ButtonTmpStyleControl = styleControl(ButtonStyle, 'style');
104117
export const ButtonStyleControl = migrateOldData(ButtonTmpStyleControl, fixOldData);
105118

119+
// Create disabled style control
120+
const DisabledButtonTmpStyleControl = styleControl(DisabledButtonStyle, 'disabledStyle');
121+
export const DisabledButtonStyleControl = migrateOldData(DisabledButtonTmpStyleControl, fixOldData);
122+
106123
export const buttonRefMethods = 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
return new UICompBuilder(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
import styled from "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+
<Section name={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<typeof disabledTime>;
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={typeof props.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
<Section name={sectionNames.animationStyle} hasTooltip={true}>
367372
{children.animationStyle.getPropertyView()}
368373
</Section>
374+
<Section name={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={typeof props.tabIndex === 'number' ? props.tabIndex : undefined}
494+
disabledStyle={props.disabledStyle}
485495
/>
486496
);
487497

@@ -579,6 +589,9 @@ let DateRangeTmpCmp = (function () {
579589
<Section name={sectionNames.childrenInputFieldStyle}>
580590
{children.childrenInputFieldStyle.getPropertyView()}
581591
</Section>
592+
<Section name={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
export const dateRefMethods = 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
import React, { useContext } from "react";
77
import styled from "styled-components";
8-
import type { ChildrenMultiSelectStyleType, DateTimeStyleType } from "../../controls/styleControlConstants";
8+
import type { ChildrenMultiSelectStyleType, DateTimeStyleType, DisabledInputStyleType } from "../../controls/styleControlConstants";
99
import { EditorContext } from "../../editorState";
1010
import { default as DatePicker } 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-
const RangePickerStyled = styled(RangePicker)<{$style: DateTimeStyleType}>`
19+
const RangePickerStyled = 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
const StyledAntdSelect = 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
export const DateRangeUIView = (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)