Skip to content

Commit 664a011

Browse files
MenamAfzalMenamAfzal
committed
animation configurations
1 parent 7c438a6 commit 664a011

File tree

3 files changed

+784
-762
lines changed

3 files changed

+784
-762
lines changed

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

Lines changed: 66 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,29 @@
1-
import {trans} from 'i18n';
2-
import {green, red, yellow} from '@ant-design/colors/es';
3-
import {FormItemProps} from 'antd/es/form/FormItem';
4-
import {BoolControl} from 'comps/controls/boolControl';
5-
import {NumberControl, StringControl} from 'comps/controls/codeControl';
6-
import {dropdownControl} from 'comps/controls/dropdownControl';
7-
import {withDefault} from 'comps/generators';
8-
import {MultiCompBuilder} from 'comps/generators/multi';
9-
import {labelCss, Section, Tooltip, UnderlineCss} from 'lowcoder-design';
10-
import {ValueFromOption} from 'lowcoder-design';
11-
import {isEmpty} from 'lodash';
12-
import {Fragment, ReactNode} from 'react';
13-
import styled, {css} from 'styled-components';
14-
import {AlignLeft} from 'lowcoder-design';
15-
import {AlignRight} from 'lowcoder-design';
16-
import {StarIcon} from 'lowcoder-design';
1+
import { trans } from "i18n";
2+
import { green, red, yellow } from "@ant-design/colors/es";
3+
import { FormItemProps } from "antd/es/form/FormItem";
4+
import { BoolControl } from "comps/controls/boolControl";
5+
import { NumberControl, StringControl } from "comps/controls/codeControl";
6+
import { dropdownControl } from "comps/controls/dropdownControl";
7+
import { withDefault } from "comps/generators";
8+
import { MultiCompBuilder } from "comps/generators/multi";
9+
import { labelCss, Section, Tooltip, UnderlineCss } from "lowcoder-design";
10+
import { ValueFromOption } from "lowcoder-design";
11+
import { isEmpty } from "lodash";
12+
import { Fragment, ReactNode } from "react";
13+
import styled, { css } from "styled-components";
14+
import { AlignLeft } from "lowcoder-design";
15+
import { AlignRight } from "lowcoder-design";
16+
import { StarIcon } from "lowcoder-design";
1717

1818
import {
1919
LabelStyleType,
2020
heightCalculator,
2121
widthCalculator,
22-
} from './styleControlConstants';
22+
} from "./styleControlConstants";
2323

2424
type LabelViewProps = Pick<
2525
FormItemProps,
26-
'required' | 'help' | 'validateStatus'
26+
"required" | "help" | "validateStatus"
2727
> & {
2828
children: ReactNode;
2929
style?: Record<string, string>;
@@ -51,7 +51,7 @@ function getStyle(style: any) {
5151
`;
5252
}
5353

54-
const LabelViewWrapper = styled.div<{$style: any; inputFieldStyle: any}>`
54+
const LabelViewWrapper = styled.div<{ $style: any; inputFieldStyle: any }>`
5555
${(props) => {
5656
return (
5757
props.$style && {
@@ -74,13 +74,13 @@ const MainWrapper = styled.div<{
7474
flex-grow: 1;
7575
width: 100%;
7676
margin-top: ${(props) =>
77-
props.$position === 'column' && props.$hasLabel ? '4px' : 0};
77+
props.$position === "column" && props.$hasLabel ? "4px" : 0};
7878
height: ${(props) =>
79-
props.$position === 'column' && props.$hasLabel
80-
? 'calc(100% - 4px)'
81-
: '100%'};
79+
props.$position === "column" && props.$hasLabel
80+
? "calc(100% - 4px)"
81+
: "100%"};
8282
display: flex;
83-
align-items: ${(props) => (props.$position === 'row' ? 'center' : 'start')};
83+
align-items: ${(props) => (props.$position === "row" ? "center" : "start")};
8484
flex-shrink: 0;
8585
`;
8686

@@ -92,9 +92,9 @@ const LabelWrapper = styled.div<{
9292
display: flex;
9393
align-items: center;
9494
margin-right: 8px;
95-
margin-bottom: ${(props) => (props.$position === 'row' ? 0 : '3.5px')};
96-
justify-content: ${(props) => (props.$align === 'left' ? 'start' : 'end')};
97-
max-width: ${(props) => (props.$position === 'row' ? '80%' : '100%')};
95+
margin-bottom: ${(props) => (props.$position === "row" ? 0 : "3.5px")};
96+
justify-content: ${(props) => (props.$align === "left" ? "start" : "end")};
97+
max-width: ${(props) => (props.$position === "row" ? "80%" : "100%")};
9898
flex-shrink: 0;
9999
`;
100100
// ${(props) => props.$border && UnderlineCss};
@@ -103,7 +103,7 @@ const LabelWrapper = styled.div<{
103103
const Label = styled.span<{
104104
$border: boolean;
105105
$labelStyle: LabelStyleType;
106-
$validateStatus: 'success' | 'warning' | 'error' | 'validating' | null;
106+
$validateStatus: "success" | "warning" | "error" | "validating" | null;
107107
}>`
108108
${labelCss};
109109
font-family: ${(props) => props.$labelStyle.fontFamily};
@@ -113,11 +113,11 @@ const Label = styled.span<{
113113
text-decoration: ${(props) => props.$labelStyle.textDecoration};
114114
font-size: ${(props) => props.$labelStyle.textSize};
115115
color: ${(props) =>
116-
!!props.$validateStatus && props?.$validateStatus === 'error'
116+
!!props.$validateStatus && props?.$validateStatus === "error"
117117
? props.$labelStyle.validate
118118
: props.$labelStyle.label} !important;
119119
${(props) =>
120-
`border:${props.$labelStyle.borderWidth} ${props.$labelStyle.borderStyle} ${!!props.$validateStatus && props?.$validateStatus === 'error' ? props.$labelStyle.validate : props.$labelStyle.border};`}
120+
`border:${props.$labelStyle.borderWidth} ${props.$labelStyle.borderStyle} ${!!props.$validateStatus && props?.$validateStatus === "error" ? props.$labelStyle.validate : props.$labelStyle.border};`}
121121
border-radius:${(props) => props.$labelStyle.radius};
122122
padding: ${(props) => props.$labelStyle.padding};
123123
margin: ${(props) => props.$labelStyle.margin};
@@ -153,38 +153,38 @@ const TooltipWrapper = styled.span`
153153
`;
154154

155155
const PositionOptions = [
156-
{label: trans('labelProp.left'), value: 'row'},
157-
{label: trans('labelProp.top'), value: 'column'},
156+
{ label: trans("labelProp.left"), value: "row" },
157+
{ label: trans("labelProp.top"), value: "column" },
158158
] as const;
159159
type PositionOptionsValue = ValueFromOption<typeof PositionOptions>;
160160

161161
const AlignOptions = [
162-
{label: <AlignLeft />, value: 'left'},
163-
{label: <AlignRight />, value: 'right'},
162+
{ label: <AlignLeft />, value: "left" },
163+
{ label: <AlignRight />, value: "right" },
164164
] as const;
165165
type AlignOptionsValue = ValueFromOption<typeof AlignOptions>;
166166

167167
const WidthUnitOptions = [
168-
{label: 'px', value: 'px'},
169-
{label: '%', value: '%'},
168+
{ label: "px", value: "px" },
169+
{ label: "%", value: "%" },
170170
];
171171

172172
function getLabelWidth(width: number, widthUnit: string): string {
173173
if (width <= 0 || isNaN(width)) {
174-
return '0%';
174+
return "0%";
175175
}
176176
return width + widthUnit;
177177
}
178178

179179
export const LabelControl = (function () {
180180
const childrenMap = {
181-
text: withDefault(StringControl, trans('label')),
181+
text: withDefault(StringControl, trans("label")),
182182
tooltip: StringControl,
183183
hidden: BoolControl,
184184
width: withDefault(NumberControl, 33),
185-
widthUnit: dropdownControl(WidthUnitOptions, '%'),
186-
position: dropdownControl(PositionOptions, 'row'),
187-
align: dropdownControl(AlignOptions, 'left'),
185+
widthUnit: dropdownControl(WidthUnitOptions, "%"),
186+
position: dropdownControl(PositionOptions, "row"),
187+
align: dropdownControl(AlignOptions, "left"),
188188
};
189189

190190
return new MultiCompBuilder(
@@ -208,12 +208,12 @@ export const LabelControl = (function () {
208208
width: widthCalculator(
209209
args && args.inputFieldStyle
210210
? args?.inputFieldStyle?.margin
211-
: '0px'
211+
: "0px"
212212
),
213213
height: heightCalculator(
214214
args && args.inputFieldStyle
215215
? args?.inputFieldStyle?.margin
216-
: '0px'
216+
: "0px"
217217
),
218218
}}
219219
>
@@ -222,11 +222,11 @@ export const LabelControl = (function () {
222222
$align={props.align}
223223
style={{
224224
width:
225-
props.position === 'row'
225+
props.position === "row"
226226
? getLabelWidth(props.width, props.widthUnit)
227-
: '100%',
228-
maxWidth: props.position === 'row' ? '70%' : '100%',
229-
fontSize: args && args.style ? args?.style?.textSize : '14px',
227+
: "100%",
228+
maxWidth: props.position === "row" ? "70%" : "100%",
229+
fontSize: args && args.style ? args?.style?.textSize : "14px",
230230
}}
231231
$position={props.position}
232232
$hasToolTip={!!props.tooltip}
@@ -243,15 +243,15 @@ export const LabelControl = (function () {
243243
placement="top"
244244
color="#2c2c2c"
245245
getPopupContainer={(node: any) =>
246-
node.closest('.react-grid-item')
246+
node.closest(".react-grid-item")
247247
}
248248
>
249249
<Label
250250
$border={!!props.tooltip}
251251
$validateStatus={
252252
args && args.validateStatus ? args.validateStatus : null
253253
}
254-
$labelStyle={{...args.labelStyle}}
254+
$labelStyle={{ ...args.labelStyle }}
255255
>
256256
{props.text}
257257
</Label>
@@ -262,13 +262,13 @@ export const LabelControl = (function () {
262262
<ChildrenWrapper
263263
style={{
264264
width:
265-
props.position === 'row'
265+
props.position === "row"
266266
? `calc(100% - ${getLabelWidth(props.width, props.widthUnit)} - 8px)`
267-
: '100%',
267+
: "100%",
268268
height:
269-
props.position === 'column' && !!props.text
270-
? 'calc(100% - 22px)'
271-
: '100%',
269+
props.position === "column" && !!props.text
270+
? "calc(100% - 22px)"
271+
: "100%",
272272
}}
273273
>
274274
{args.children}
@@ -278,16 +278,16 @@ export const LabelControl = (function () {
278278
{args.help && (
279279
<HelpWrapper
280280
$marginLeft={
281-
props.position === 'column' ||
281+
props.position === "column" ||
282282
isEmpty(props.text) ||
283283
props.hidden
284-
? '0'
284+
? "0"
285285
: `calc(min(${getLabelWidth(props.width, props.widthUnit)} , 70%) + 8px)`
286286
}
287287
$color={
288-
args.validateStatus === 'error'
288+
args.validateStatus === "error"
289289
? red.primary
290-
: args.validateStatus === 'warning'
290+
: args.validateStatus === "warning"
291291
? yellow.primary
292292
: green.primary
293293
}
@@ -300,21 +300,21 @@ export const LabelControl = (function () {
300300
}
301301
)
302302
.setPropertyViewFn((children) => (
303-
<Section name={trans('label')}>
304-
{children.text.propertyView({label: trans('labelProp.text')})}
305-
{children.tooltip.propertyView({label: trans('labelProp.tooltip')})}
303+
<Section name={trans("label")}>
304+
{children.text.propertyView({ label: trans("labelProp.text") })}
305+
{children.tooltip.propertyView({ label: trans("labelProp.tooltip") })}
306306
{children.position.propertyView({
307-
label: trans('labelProp.position'),
307+
label: trans("labelProp.position"),
308308
radioButton: true,
309309
})}
310310
{children.align.propertyView({
311-
label: trans('labelProp.align'),
311+
label: trans("labelProp.align"),
312312
radioButton: true,
313313
})}
314-
{children.position.getView() !== 'column' &&
314+
{children.position.getView() !== "column" &&
315315
children.width.propertyView({
316-
label: trans('labelProp.width'),
317-
tooltip: trans('labelProp.widthTooltip'),
316+
label: trans("labelProp.width"),
317+
tooltip: trans("labelProp.widthTooltip"),
318318
lastNode: children.widthUnit.propertyView({}),
319319
})}
320320
</Section>

0 commit comments

Comments
 (0)