Skip to content

Commit c910778

Browse files
MenamAfzalMenamAfzal
committed
rotation added to input and slider
1 parent 7fa7b87 commit c910778

File tree

4 files changed

+230
-140
lines changed

4 files changed

+230
-140
lines changed

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

Lines changed: 34 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,43 @@
1-
import { trans } from "i18n";
2-
import { Section, sectionNames } from "lowcoder-design";
3-
import { numberExposingStateControl } from "../../controls/codeStateControl";
4-
import { UICompBuilder } from "../../generators";
5-
import { CommonNameConfig, NameConfig, withExposingConfigs } from "../../generators/withExposing";
6-
import { formDataChildren, FormDataPropertyView } from "../formComp/formDataConstants";
7-
import { SliderChildren, SliderPropertyView, SliderStyled, SliderWrapper } from "./sliderCompConstants";
8-
import { hasIcon } from "comps/utils";
9-
import { BoolControl } from "comps/controls/boolControl";
1+
import {trans} from 'i18n';
2+
import {Section, sectionNames} from 'lowcoder-design';
3+
import {numberExposingStateControl} from '../../controls/codeStateControl';
4+
import {UICompBuilder} from '../../generators';
5+
import {
6+
CommonNameConfig,
7+
NameConfig,
8+
withExposingConfigs,
9+
} from '../../generators/withExposing';
10+
import {
11+
formDataChildren,
12+
FormDataPropertyView,
13+
} from '../formComp/formDataConstants';
14+
import {
15+
SliderChildren,
16+
SliderPropertyView,
17+
SliderStyled,
18+
SliderWrapper,
19+
} from './sliderCompConstants';
20+
import {hasIcon} from 'comps/utils';
21+
import {BoolControl} from 'comps/controls/boolControl';
1022

1123
const SliderBasicComp = (function () {
1224
/**
1325
* FIXME: the range of setValue cannot exceed max
1426
*/
1527
const childrenMap = {
1628
...SliderChildren,
17-
value: numberExposingStateControl("value", 60),
29+
value: numberExposingStateControl('value', 60),
1830
vertical: BoolControl,
1931
...formDataChildren,
2032
};
2133
return new UICompBuilder(childrenMap, (props) => {
2234
return props.label({
2335
style: props.style,
2436
labelStyle: props.labelStyle,
25-
inputFieldStyle:props.inputFieldStyle,
37+
inputFieldStyle: props.inputFieldStyle,
2638
children: (
2739
<SliderWrapper
40+
$style={props.inputFieldStyle}
2841
vertical={props.vertical}
2942
onMouseDown={(e: any) => {
3043
e.stopPropagation();
@@ -40,7 +53,7 @@ const SliderBasicComp = (function () {
4053
vertical={props.vertical || false}
4154
onChange={(e) => {
4255
props.value.onChange(e);
43-
props.onEvent("change");
56+
props.onEvent('change');
4457
}}
4558
/>
4659
{hasIcon(props.suffixIcon) && props.suffixIcon}
@@ -52,14 +65,14 @@ const SliderBasicComp = (function () {
5265
return (
5366
<>
5467
<Section name={sectionNames.basic}>
55-
{children.value.propertyView({ label: trans("prop.defaultValue") })}
56-
{children.max.propertyView({ label: trans("prop.maximum") })}
57-
{children.min.propertyView({ label: trans("prop.minimum") })}
68+
{children.value.propertyView({label: trans('prop.defaultValue')})}
69+
{children.max.propertyView({label: trans('prop.maximum')})}
70+
{children.min.propertyView({label: trans('prop.minimum')})}
5871
{children.step.propertyView({
59-
label: trans("slider.step"),
60-
tooltip: trans("slider.stepTooltip"),
72+
label: trans('slider.step'),
73+
tooltip: trans('slider.stepTooltip'),
6174
})}
62-
{children.vertical.propertyView({ label: trans("slider.vertical") })}
75+
{children.vertical.propertyView({label: trans('slider.vertical')})}
6376
</Section>
6477
<FormDataPropertyView {...children} />
6578
<SliderPropertyView {...children} />
@@ -70,8 +83,8 @@ const SliderBasicComp = (function () {
7083
})();
7184

7285
export const SliderComp = withExposingConfigs(SliderBasicComp, [
73-
new NameConfig("value", trans("export.sliderValueDesc")),
74-
new NameConfig("max", trans("export.sliderMaxValueDesc")),
75-
new NameConfig("min", trans("export.sliderMinValueDesc")),
86+
new NameConfig('value', trans('export.sliderValueDesc')),
87+
new NameConfig('max', trans('export.sliderMaxValueDesc')),
88+
new NameConfig('min', trans('export.sliderMinValueDesc')),
7689
...CommonNameConfig,
7790
]);

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

Lines changed: 68 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,33 @@
1-
import { BoolCodeControl, NumberControl } from "../../controls/codeControl";
2-
import { LabelControl } from "../../controls/labelControl";
3-
import { withDefault } from "../../generators";
4-
import { ChangeEventHandlerControl } from "../../controls/eventHandlerControl";
5-
import { Section, sectionNames } from "lowcoder-design";
6-
import { RecordConstructorToComp } from "lowcoder-core";
7-
import { styleControl } from "comps/controls/styleControl";
8-
import { InputFieldStyle, LabelStyle, SliderStyle, SliderStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
9-
import styled, { css } from "styled-components";
10-
import { default as Slider } from "antd/es/slider";
11-
import { darkenColor, fadeColor } from "lowcoder-design";
12-
import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils";
13-
import { IconControl } from "comps/controls/iconControl";
14-
import { trans } from "i18n";
1+
import {BoolCodeControl, NumberControl} from '../../controls/codeControl';
2+
import {LabelControl} from '../../controls/labelControl';
3+
import {withDefault} from '../../generators';
4+
import {ChangeEventHandlerControl} from '../../controls/eventHandlerControl';
5+
import {Section, sectionNames} from 'lowcoder-design';
6+
import {RecordConstructorToComp} from 'lowcoder-core';
7+
import {styleControl} from 'comps/controls/styleControl';
8+
import {
9+
InputFieldStyle,
10+
LabelStyle,
11+
SliderStyle,
12+
SliderStyleType,
13+
heightCalculator,
14+
widthCalculator,
15+
} from 'comps/controls/styleControlConstants';
16+
import styled, {css} from 'styled-components';
17+
import {default as Slider} from 'antd/es/slider';
18+
import {darkenColor, fadeColor} from 'lowcoder-design';
19+
import {
20+
disabledPropertyView,
21+
hiddenPropertyView,
22+
} from 'comps/utils/propertyUtils';
23+
import {IconControl} from 'comps/controls/iconControl';
24+
import {trans} from 'i18n';
1525

16-
import { useContext } from "react";
17-
import { EditorContext } from "comps/editorState";
26+
import {useContext} from 'react';
27+
import {EditorContext} from 'comps/editorState';
1828

1929
const getStyle = (style: SliderStyleType, vertical: boolean) => {
30+
console.log('🚀 ~ getStyle ~ style:', style);
2031
return css`
2132
&.ant-slider:not(.ant-slider-disabled) {
2233
&,
@@ -39,66 +50,86 @@ const getStyle = (style: SliderStyleType, vertical: boolean) => {
3950
}
4051
}
4152
.ant-slider-handle:focus {
42-
box-shadow: 0 0 0 5px ${fadeColor(darkenColor(style.thumbBorder, 0.08), 0.12)};
53+
box-shadow: 0 0 0 5px
54+
${fadeColor(darkenColor(style.thumbBorder, 0.08), 0.12)};
4355
}
44-
${vertical && css`
45-
width: auto;
56+
${vertical &&
57+
css`
58+
width: auto;
4659
min-height: calc(300px - ${style.margin});
4760
margin: ${style.margin} auto !important;
4861
`}
4962
}
5063
`;
5164
};
5265

53-
export const SliderStyled = styled(Slider)<{ $style: SliderStyleType, vertical: boolean }>`
66+
export const SliderStyled = styled(Slider)<{
67+
$style: SliderStyleType;
68+
vertical: boolean;
69+
}>`
5470
${(props) => props.$style && getStyle(props.$style, props.vertical)}
5571
`;
5672

57-
export const SliderWrapper = styled.div<{ vertical: boolean }>`
73+
export const SliderWrapper = styled.div<{
74+
$style: SliderStyleType;
75+
vertical: boolean;
76+
}>`
5877
width: 100%;
5978
display: inline-flex;
6079
align-items: center;
6180
justify-content: center;
6281
.ant-slider {
6382
width: 100%;
83+
rotate: ${(props) => props.$style.rotation};
6484
}
65-
`
85+
`;
6686

6787
export const SliderChildren = {
68-
max: withDefault(NumberControl, "100"),
69-
min: withDefault(NumberControl, "0"),
70-
step: withDefault(NumberControl, "1"),
88+
max: withDefault(NumberControl, '100'),
89+
min: withDefault(NumberControl, '0'),
90+
step: withDefault(NumberControl, '1'),
7191
label: LabelControl,
7292
disabled: BoolCodeControl,
7393
onEvent: ChangeEventHandlerControl,
7494
style: styleControl(InputFieldStyle),
75-
labelStyle:styleControl(LabelStyle.filter((style)=> ['accent','validate'].includes(style.name) === false)),
95+
labelStyle: styleControl(
96+
LabelStyle.filter(
97+
(style) => ['accent', 'validate'].includes(style.name) === false
98+
)
99+
),
76100
prefixIcon: IconControl,
77101
suffixIcon: IconControl,
78-
inputFieldStyle:styleControl(SliderStyle)
102+
inputFieldStyle: styleControl(SliderStyle),
79103
};
80104

81105
export const SliderPropertyView = (
82-
children: RecordConstructorToComp<typeof SliderChildren & { hidden: typeof BoolCodeControl }>
106+
children: RecordConstructorToComp<
107+
typeof SliderChildren & {hidden: typeof BoolCodeControl}
108+
>
83109
) => (
84110
<>
85-
86-
{["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
111+
{['logic', 'both'].includes(useContext(EditorContext).editorModeStatus) && (
87112
<Section name={sectionNames.interaction}>
88113
{children.onEvent.getPropertyView()}
89114
{disabledPropertyView(children)}
90115
{hiddenPropertyView(children)}
91116
</Section>
92117
)}
93118

94-
{["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
95-
children.label.getPropertyView()
96-
)}
119+
{['layout', 'both'].includes(useContext(EditorContext).editorModeStatus) &&
120+
children.label.getPropertyView()}
97121

98-
{["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
99-
<><Section name={sectionNames.layout}>
100-
{children.prefixIcon.propertyView({ label: trans("button.prefixIcon") })}
101-
{children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })}
122+
{['layout', 'both'].includes(
123+
useContext(EditorContext).editorModeStatus
124+
) && (
125+
<>
126+
<Section name={sectionNames.layout}>
127+
{children.prefixIcon.propertyView({
128+
label: trans('button.prefixIcon'),
129+
})}
130+
{children.suffixIcon.propertyView({
131+
label: trans('button.suffixIcon'),
132+
})}
102133
</Section>
103134
<Section name={sectionNames.style}>
104135
{children.style.getPropertyView()}

0 commit comments

Comments
 (0)