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

Commit3f516ab

Browse files
committed
add disable styles slider
1 parent9ad28bb commit3f516ab

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={typeofprops.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
importstyled,{css}from"styled-components";
1010
import{defaultasSlider}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-
constgetStyle=(style:SliderStyleType,vertical:boolean)=>{
18+
constgetStyle=(style:SliderStyleType,vertical:boolean,disabledStyle?:DisabledSliderStyleType)=>{
1919
returncss`
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-
exportconstSliderStyled=styled(Slider)<{$style:SliderStyleType,$vertical:boolean}>`
63-
${(props)=>props.$style&&getStyle(props.$style,props.$vertical)}
82+
exportconstSliderStyled=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
exportconstSliderWrapper=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
<Sectionname={sectionNames.inputFieldStyle}>
133158
{children.inputFieldStyle.getPropertyView()}
134159
</Section>
160+
<Sectionname={"Disabled Slider Style"}>
161+
{children.disabledSliderStyle.getPropertyView()}
162+
</Section>
135163
<Sectionname={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
]asconst;
10061006

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

1307+
// Create separate disabled style control for sliders
1308+
exportconstDisabledSliderStyle=[
1309+
...DISABLED_SLIDER_STYLE_FIELDS,
1310+
]asconst;
1311+
12701312
exportconstInputLikeStyle=[
12711313
getStaticBackground(SURFACE_COLOR),
12721314
BOXSHADOW,
@@ -2362,6 +2404,7 @@ export type ContainerFooterStyleType = StyleConfigType<
23622404
typeofContainerFooterStyle
23632405
>;
23642406
exporttypeSliderStyleType=StyleConfigType<typeofSliderStyle>;
2407+
exporttypeDisabledSliderStyleType=StyleConfigType<typeofDisabledSliderStyle>;
23652408
exporttypeRatingStyleType=StyleConfigType<typeofRatingStyle>;
23662409
exporttypeSwitchStyleType=StyleConfigType<typeofSwitchStyle>;
23672410
exporttypeSelectStyleType=StyleConfigType<typeofSelectStyle>;

0 commit comments

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