Skip to content

Commit 3f516ab

Browse files
iamfaraniamfaran
committed
add disable styles slider
1 parent 9ad28bb commit 3f516ab

File tree

3 files changed

+76
-4
lines changed

3 files changed

+76
-4
lines changed

‎client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ const SliderBasicComp = (function () {
4646
{...props}
4747
value={props.value.value}
4848
$style={props.inputFieldStyle}
49+
$disabledStyle={props.disabledSliderStyle}
4950
style={{margin: 0}}
5051
$vertical={Boolean(props.vertical) || false}
5152
tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined}

‎client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx

Lines changed: 32 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { ChangeEventHandlerControl } from "../../controls/eventHandlerControl";
55
import { Section, lightenColor, sectionNames } from "lowcoder-design";
66
import { RecordConstructorToComp } from "lowcoder-core";
77
import { styleControl } from "comps/controls/styleControl";
8-
import { AnimationStyle, InputFieldStyle, LabelStyle, SliderStyle, SliderStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
8+
import { AnimationStyle, InputFieldStyle, LabelStyle, SliderStyle, SliderStyleType, DisabledSliderStyle, DisabledSliderStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
99
import styled, { css } from "styled-components";
1010
import { default as Slider } from "antd/es/slider";
1111
import { darkenColor, fadeColor } from "lowcoder-design";
@@ -15,7 +15,7 @@ import { trans } from "i18n";
1515
import { memo, useCallback, useContext } from "react";
1616
import { EditorContext } from "comps/editorState";
1717

18-
const getStyle = (style: SliderStyleType, vertical: boolean) => {
18+
const getStyle = (style: SliderStyleType, vertical: boolean, disabledStyle?: DisabledSliderStyleType) => {
1919
return css`
2020
&.ant-slider:not(.ant-slider-disabled) {
2121
&,
@@ -56,11 +56,35 @@ const getStyle = (style: SliderStyleType, vertical: boolean) => {
5656
margin: ${style.margin} auto !important;
5757
`}
5858
}
59+
60+
/* Disabled state styling */
61+
&.ant-slider-disabled {
62+
.ant-slider-rail {
63+
background-color: ${disabledStyle?.disabledTrack || lightenColor(style.track, 0.2)} !important;
64+
}
65+
.ant-slider-track {
66+
background-color: ${disabledStyle?.disabledFill || lightenColor(style.fill, 0.3)} !important;
67+
}
68+
.ant-slider-handle {
69+
background-color: ${disabledStyle?.disabledThumb || lightenColor(style.thumb, 0.25)} !important;
70+
border-color: ${disabledStyle?.disabledThumbBorder || lightenColor(style.thumbBorder, 0.25)} !important;
71+
cursor: not-allowed !important;
72+
}
73+
${vertical && css`
74+
width: auto;
75+
min-height: calc(300px - ${style.margin});
76+
margin: ${style.margin} auto !important;
77+
`}
78+
}
5979
`;
6080
};
6181

62-
export const SliderStyled = styled(Slider)<{ $style: SliderStyleType, $vertical: boolean }>`
63-
${(props) => props.$style && getStyle(props.$style, props.$vertical)}
82+
export const SliderStyled = styled(Slider)<{
83+
$style: SliderStyleType,
84+
$vertical: boolean,
85+
$disabledStyle?: DisabledSliderStyleType
86+
}>`
87+
${(props) => props.$style && getStyle(props.$style, props.$vertical, props.$disabledStyle)}
6488
`;
6589

6690
export const SliderWrapper = styled.div<{ $vertical: boolean }>`
@@ -88,6 +112,7 @@ export const SliderChildren = {
88112
prefixIcon: IconControl,
89113
suffixIcon: IconControl,
90114
inputFieldStyle: styleControl(SliderStyle, 'inputFieldStyle'),
115+
disabledSliderStyle: styleControl(DisabledSliderStyle, 'disabledSliderStyle'),
91116
animationStyle: styleControl(AnimationStyle, 'animationStyle')
92117
};
93118

@@ -132,6 +157,9 @@ const LayoutSection = memo(({ children }: { children: RecordConstructorToComp<ty
132157
<Section name={sectionNames.inputFieldStyle}>
133158
{children.inputFieldStyle.getPropertyView()}
134159
</Section>
160+
<Section name={"Disabled Slider Style"}>
161+
{children.disabledSliderStyle.getPropertyView()}
162+
</Section>
135163
<Section name={sectionNames.animationStyle} hasTooltip={true}>
136164
{children.animationStyle.getPropertyView()}
137165
</Section>

‎client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1004,6 +1004,43 @@ export const DISABLED_INPUT_STYLE_FIELDS = [
10041004
DISABLED_INPUT_TEXT,
10051005
] as const;
10061006

1007+
// Add disabled style constants specifically for slider components
1008+
const DISABLED_SLIDER_FILL = {
1009+
name: "disabledFill",
1010+
label: trans("style.disabledFill"),
1011+
depName: "fill",
1012+
transformer: (color: string) => lightenColor(color, 0.3),
1013+
} as const;
1014+
1015+
const DISABLED_SLIDER_TRACK = {
1016+
name: "disabledTrack",
1017+
label: trans("style.disabledTrack"),
1018+
depName: "track",
1019+
transformer: (color: string) => lightenColor(color, 0.2),
1020+
} as const;
1021+
1022+
const DISABLED_SLIDER_THUMB = {
1023+
name: "disabledThumb",
1024+
label: trans("style.disabledThumb"),
1025+
depName: "thumb",
1026+
transformer: (color: string) => lightenColor(color, 0.25),
1027+
} as const;
1028+
1029+
const DISABLED_SLIDER_THUMB_BORDER = {
1030+
name: "disabledThumbBorder",
1031+
label: trans("style.disabledThumbBorder"),
1032+
depName: "thumbBorder",
1033+
transformer: (color: string) => lightenColor(color, 0.25),
1034+
} as const;
1035+
1036+
// Re-export for reuse in slider components
1037+
export const DISABLED_SLIDER_STYLE_FIELDS = [
1038+
DISABLED_SLIDER_FILL,
1039+
DISABLED_SLIDER_TRACK,
1040+
DISABLED_SLIDER_THUMB,
1041+
DISABLED_SLIDER_THUMB_BORDER,
1042+
] as const;
1043+
10071044
export const ButtonStyle = [
10081045
getBackground('primary'),
10091046
...STYLING_FIELDS_SEQUENCE,
@@ -1267,6 +1304,11 @@ export const SliderStyle = [
12671304
PADDING,
12681305
] as const;
12691306

1307+
// Create separate disabled style control for sliders
1308+
export const DisabledSliderStyle = [
1309+
...DISABLED_SLIDER_STYLE_FIELDS,
1310+
] as const;
1311+
12701312
export const InputLikeStyle = [
12711313
getStaticBackground(SURFACE_COLOR),
12721314
BOXSHADOW,
@@ -2362,6 +2404,7 @@ export type ContainerFooterStyleType = StyleConfigType<
23622404
typeof ContainerFooterStyle
23632405
>;
23642406
export type SliderStyleType = StyleConfigType<typeof SliderStyle>;
2407+
export type DisabledSliderStyleType = StyleConfigType<typeof DisabledSliderStyle>;
23652408
export type RatingStyleType = StyleConfigType<typeof RatingStyle>;
23662409
export type SwitchStyleType = StyleConfigType<typeof SwitchStyle>;
23672410
export type SelectStyleType = StyleConfigType<typeof SelectStyle>;

0 commit comments

Comments
 (0)