Skip to content

Commit 068c8fb

Browse files
MenamAfzalMenamAfzal
committed
animation styles added
1 parent b0cecdc commit 068c8fb

File tree

11 files changed

+985
-635
lines changed

11 files changed

+985
-635
lines changed

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

Lines changed: 293 additions & 181 deletions
Large diffs are not rendered by default.

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

Lines changed: 187 additions & 131 deletions
Large diffs are not rendered by default.

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

Lines changed: 34 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,34 @@
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 { SliderChildren, SliderPropertyView, SliderStyled, SliderWrapper } from "./sliderCompConstants";
7-
import { hasIcon } from "comps/utils";
8-
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+
SliderChildren,
12+
SliderPropertyView,
13+
SliderStyled,
14+
SliderWrapper,
15+
} from './sliderCompConstants';
16+
import {hasIcon} from 'comps/utils';
17+
import {BoolControl} from 'comps/controls/boolControl';
918

1019
const RangeSliderBasicComp = (function () {
1120
const childrenMap = {
1221
...SliderChildren,
13-
start: numberExposingStateControl("start", 10),
14-
end: numberExposingStateControl("end", 60),
22+
start: numberExposingStateControl('start', 10),
23+
end: numberExposingStateControl('end', 60),
1524
vertical: BoolControl,
1625
};
1726
return new UICompBuilder(childrenMap, (props) => {
1827
return props.label({
1928
style: props.style,
2029
labelStyle: props.labelStyle,
21-
inputFieldStyle:props.inputFieldStyle,
30+
inputFieldStyle: props.inputFieldStyle,
31+
animationStyle: props.animationStyle,
2232
children: (
2333
<SliderWrapper
2434
vertical={props.vertical}
@@ -33,12 +43,12 @@ const RangeSliderBasicComp = (function () {
3343
range={true}
3444
value={[props.start.value, props.end.value]}
3545
$style={props.inputFieldStyle}
36-
style={{ margin: 0 }}
46+
style={{margin: 0}}
3747
vertical={props.vertical || false}
3848
onChange={([start, end]) => {
3949
props.start.onChange(start);
4050
props.end.onChange(end);
41-
props.onEvent("change");
51+
props.onEvent('change');
4252
}}
4353
/>
4454
{hasIcon(props.suffixIcon) && props.suffixIcon}
@@ -50,15 +60,15 @@ const RangeSliderBasicComp = (function () {
5060
return (
5161
<>
5262
<Section name={sectionNames.basic}>
53-
{children.start.propertyView({ label: trans("rangeSlider.start") })}
54-
{children.end.propertyView({ label: trans("rangeSlider.end") })}
55-
{children.max.propertyView({ label: trans("prop.maximum") })}
56-
{children.min.propertyView({ label: trans("prop.minimum") })}
63+
{children.start.propertyView({label: trans('rangeSlider.start')})}
64+
{children.end.propertyView({label: trans('rangeSlider.end')})}
65+
{children.max.propertyView({label: trans('prop.maximum')})}
66+
{children.min.propertyView({label: trans('prop.minimum')})}
5767
{children.step.propertyView({
58-
label: trans("rangeSlider.step"),
59-
tooltip: trans("rangeSlider.stepTooltip"),
68+
label: trans('rangeSlider.step'),
69+
tooltip: trans('rangeSlider.stepTooltip'),
6070
})}
61-
{children.vertical.propertyView({ label: trans("slider.vertical") })}
71+
{children.vertical.propertyView({label: trans('slider.vertical')})}
6272
</Section>
6373

6474
<SliderPropertyView {...children} />
@@ -69,9 +79,9 @@ const RangeSliderBasicComp = (function () {
6979
})();
7080

7181
export const RangeSliderComp = withExposingConfigs(RangeSliderBasicComp, [
72-
new NameConfig("start", trans("export.sliderStartDesc")),
73-
new NameConfig("end", trans("export.sliderEndDesc")),
74-
new NameConfig("max", trans("export.sliderMaxValueDesc")),
75-
new NameConfig("min", trans("export.sliderMinValueDesc")),
82+
new NameConfig('start', trans('export.sliderStartDesc')),
83+
new NameConfig('end', trans('export.sliderEndDesc')),
84+
new NameConfig('max', trans('export.sliderMaxValueDesc')),
85+
new NameConfig('min', trans('export.sliderMinValueDesc')),
7686
...CommonNameConfig,
7787
]);

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ const SliderBasicComp = (function () {
3535
style: props.style,
3636
labelStyle: props.labelStyle,
3737
inputFieldStyle: props.inputFieldStyle,
38+
animationStyle: props.animationStyle,
3839
children: (
3940
<SliderWrapper
4041
$style={props.inputFieldStyle}

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

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {Section, sectionNames} from 'lowcoder-design';
66
import {RecordConstructorToComp} from 'lowcoder-core';
77
import {styleControl} from 'comps/controls/styleControl';
88
import {
9+
AnimationStyle,
910
InputFieldStyle,
1011
LabelStyle,
1112
SliderStyle,
@@ -92,10 +93,15 @@ export const SliderChildren = {
9293
disabled: BoolCodeControl,
9394
onEvent: ChangeEventHandlerControl,
9495
style: withDefault(styleControl(InputFieldStyle), {borderWidth: '1px'}),
95-
labelStyle:styleControl(LabelStyle.filter((style)=> ['accent','validate'].includes(style.name) === false)),
96+
labelStyle: styleControl(
97+
LabelStyle.filter(
98+
(style) => ['accent', 'validate'].includes(style.name) === false
99+
)
100+
),
96101
prefixIcon: IconControl,
97102
suffixIcon: IconControl,
98103
inputFieldStyle: styleControl(SliderStyle),
104+
animationStyle: styleControl(AnimationStyle),
99105
};
100106

101107
export const SliderPropertyView = (
@@ -136,6 +142,9 @@ export const SliderPropertyView = (
136142
<Section name={sectionNames.inputFieldStyle}>
137143
{children.inputFieldStyle.getPropertyView()}
138144
</Section>
145+
<Section name={sectionNames.animationStyle}>
146+
{children.animationStyle.getPropertyView()}
147+
</Section>
139148
</>
140149
)}
141150
</>

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

Lines changed: 81 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,49 @@
1-
import { default as Rate } from "antd/es/rate";
2-
import styled, { css } from "styled-components";
3-
import { Section, sectionNames } from "lowcoder-design";
4-
import { NumberControl, BoolCodeControl } from "../controls/codeControl";
5-
import { BoolControl } from "../controls/boolControl";
6-
import { changeEvent, eventHandlerControl } from "../controls/eventHandlerControl";
7-
import { LabelControl } from "../controls/labelControl";
8-
import { numberExposingStateControl } from "../controls/codeStateControl";
9-
import { UICompBuilder, withDefault } from "../generators";
10-
import { CommonNameConfig, NameConfig, withExposingConfigs } from "../generators/withExposing";
11-
import { formDataChildren, FormDataPropertyView } from "./formComp/formDataConstants";
12-
import { styleControl } from "comps/controls/styleControl";
13-
import { InputFieldStyle, LabelStyle, RatingStyle, RatingStyleType } from "comps/controls/styleControlConstants";
14-
import { migrateOldData } from "comps/generators/simpleGenerators";
15-
import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils";
16-
import { trans } from "i18n";
17-
18-
import { useContext, useEffect, useRef } from "react";
19-
import { EditorContext } from "comps/editorState";
1+
import {default as Rate} from 'antd/es/rate';
2+
import styled, {css} from 'styled-components';
3+
import {Section, sectionNames} from 'lowcoder-design';
4+
import {NumberControl, BoolCodeControl} from '../controls/codeControl';
5+
import {BoolControl} from '../controls/boolControl';
6+
import {
7+
changeEvent,
8+
eventHandlerControl,
9+
} from '../controls/eventHandlerControl';
10+
import {LabelControl} from '../controls/labelControl';
11+
import {numberExposingStateControl} from '../controls/codeStateControl';
12+
import {UICompBuilder, withDefault} from '../generators';
13+
import {
14+
CommonNameConfig,
15+
NameConfig,
16+
withExposingConfigs,
17+
} from '../generators/withExposing';
18+
import {
19+
formDataChildren,
20+
FormDataPropertyView,
21+
} from './formComp/formDataConstants';
22+
import {styleControl} from 'comps/controls/styleControl';
23+
import {
24+
AnimationStyle,
25+
InputFieldStyle,
26+
LabelStyle,
27+
RatingStyle,
28+
RatingStyleType,
29+
} from 'comps/controls/styleControlConstants';
30+
import {migrateOldData} from 'comps/generators/simpleGenerators';
31+
import {
32+
disabledPropertyView,
33+
hiddenPropertyView,
34+
} from 'comps/utils/propertyUtils';
35+
import {trans} from 'i18n';
36+
37+
import {useContext, useEffect, useRef} from 'react';
38+
import {EditorContext} from 'comps/editorState';
2039

2140
const EventOptions = [changeEvent] as const;
2241

2342
/**
2443
* Compatible with old data 2022-08-23
2544
*/
2645
function fixOldData(oldData: any) {
27-
if (oldData && oldData.hasOwnProperty("unChecked")) {
46+
if (oldData && oldData.hasOwnProperty('unChecked')) {
2847
return {
2948
label: oldData.label,
3049
checked: oldData.checked,
@@ -36,22 +55,27 @@ function fixOldData(oldData: any) {
3655

3756
const RatingBasicComp = (function () {
3857
const childrenMap = {
39-
defaultValue: numberExposingStateControl("defaultValue"),
40-
value: numberExposingStateControl("value"),
41-
max: withDefault(NumberControl, "5"),
58+
defaultValue: numberExposingStateControl('defaultValue'),
59+
value: numberExposingStateControl('value'),
60+
max: withDefault(NumberControl, '5'),
4261
label: LabelControl,
4362
allowHalf: BoolControl,
4463
disabled: BoolCodeControl,
4564
onEvent: eventHandlerControl(EventOptions),
4665
style: withDefault(styleControl(InputFieldStyle), {borderWidth: '1px'}),
47-
labelStyle: styleControl(LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false)),
48-
inputFieldStyle:migrateOldData(styleControl(RatingStyle), fixOldData),
66+
animationStyle: styleControl(AnimationStyle),
67+
labelStyle: styleControl(
68+
LabelStyle.filter(
69+
(style) => ['accent', 'validate'].includes(style.name) === false
70+
)
71+
),
72+
inputFieldStyle: migrateOldData(styleControl(RatingStyle), fixOldData),
4973
...formDataChildren,
5074
};
5175
return new UICompBuilder(childrenMap, (props) => {
52-
const defaultValue = { ...props.defaultValue }.value;
53-
const value = { ...props.value }.value;
54-
const changeRef = useRef(false)
76+
const defaultValue = {...props.defaultValue}.value;
77+
const value = {...props.value}.value;
78+
const changeRef = useRef(false);
5579

5680
useEffect(() => {
5781
props.value.onChange(defaultValue);
@@ -60,14 +84,15 @@ const RatingBasicComp = (function () {
6084
useEffect(() => {
6185
if (!changeRef.current) return;
6286

63-
props.onEvent("change");
87+
props.onEvent('change');
6488
changeRef.current = false;
6589
}, [value]);
6690

6791
return props.label({
6892
style: props.style,
6993
labelStyle: props.labelStyle,
70-
inputFieldStyle:props.inputFieldStyle,
94+
inputFieldStyle: props.inputFieldStyle,
95+
animationStyle: props.animationStyle,
7196
children: (
7297
<RateStyled
7398
count={props.max}
@@ -87,33 +112,40 @@ const RatingBasicComp = (function () {
87112
return (
88113
<>
89114
<Section name={sectionNames.basic}>
90-
{children.defaultValue.propertyView({ label: trans("prop.defaultValue") })}
115+
{children.defaultValue.propertyView({
116+
label: trans('prop.defaultValue'),
117+
})}
91118
{children.max.propertyView({
92-
label: trans("rating.max"),
119+
label: trans('rating.max'),
93120
})}
94121
</Section>
95122

96123
<FormDataPropertyView {...children} />
97124

98-
{["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
99-
<><Section name={sectionNames.interaction}>
100-
{children.onEvent.getPropertyView()}
101-
{disabledPropertyView(children)}
102-
{hiddenPropertyView(children)}
103-
</Section>
125+
{['logic', 'both'].includes(
126+
useContext(EditorContext).editorModeStatus
127+
) && (
128+
<>
129+
<Section name={sectionNames.interaction}>
130+
{children.onEvent.getPropertyView()}
131+
{disabledPropertyView(children)}
132+
{hiddenPropertyView(children)}
133+
</Section>
104134
<Section name={sectionNames.advanced}>
105135
{children.allowHalf.propertyView({
106-
label: trans("rating.allowHalf"),
136+
label: trans('rating.allowHalf'),
107137
})}
108138
</Section>
109139
</>
110140
)}
111141

112-
{["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
113-
children.label.getPropertyView()
114-
)}
142+
{['layout', 'both'].includes(
143+
useContext(EditorContext).editorModeStatus
144+
) && children.label.getPropertyView()}
115145

116-
{["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
146+
{['layout', 'both'].includes(
147+
useContext(EditorContext).editorModeStatus
148+
) && (
117149
<>
118150
<Section name={sectionNames.style}>
119151
{children.style.getPropertyView()}
@@ -124,6 +156,9 @@ const RatingBasicComp = (function () {
124156
<Section name={sectionNames.inputFieldStyle}>
125157
{children.inputFieldStyle.getPropertyView()}
126158
</Section>
159+
<Section name={sectionNames.animationStyle}>
160+
{children.animationStyle.getPropertyView()}
161+
</Section>
127162
</>
128163
)}
129164
</>
@@ -133,8 +168,8 @@ const RatingBasicComp = (function () {
133168
})();
134169

135170
export const RatingComp = withExposingConfigs(RatingBasicComp, [
136-
new NameConfig("value", trans("export.ratingValueDesc")),
137-
new NameConfig("max", trans("export.ratingMaxDesc")),
171+
new NameConfig('value', trans('export.ratingValueDesc')),
172+
new NameConfig('max', trans('export.ratingMaxDesc')),
138173
...CommonNameConfig,
139174
]);
140175

@@ -156,6 +191,6 @@ const getStyle = (style: RatingStyleType) => {
156191
`;
157192
};
158193

159-
export const RateStyled = styled(Rate) <{ $style: RatingStyleType }>`
194+
export const RateStyled = styled(Rate)<{$style: RatingStyleType}>`
160195
${(props) => props.$style && getStyle(props.$style)}
161196
`;

0 commit comments

Comments
 (0)