Skip to content

Commit 3af3766

Browse files
MenamAfzalMenamAfzal
committed
animation delay and duration added
1 parent 664a011 commit 3af3766

File tree

5 files changed

+877
-767
lines changed

5 files changed

+877
-767
lines changed

‎client/packages/lowcoder/src/api/commonSettingApi.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,8 @@ export interface ThemeDetail {
4949
gridColumns?: string; //Added By Aqib Mirza
5050
textSize?: string;
5151
animation?: string;
52+
animationDelay?: string;
53+
animationDuration?: string;
5254
}
5355

5456
export function getThemeDetailName(key: keyof ThemeDetail) {

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

Lines changed: 66 additions & 67 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(
@@ -194,7 +194,6 @@ export const LabelControl = (function () {
194194
<LabelViewWrapper
195195
$style={args.style}
196196
inputFieldStyle={args.inputFieldStyle}
197-
className="animate__animated animate__rubberBand animate__delay-2s"
198197
>
199198
<MainWrapper
200199
$position={props.position}
@@ -208,12 +207,12 @@ export const LabelControl = (function () {
208207
width: widthCalculator(
209208
args && args.inputFieldStyle
210209
? args?.inputFieldStyle?.margin
211-
: "0px"
210+
: '0px'
212211
),
213212
height: heightCalculator(
214213
args && args.inputFieldStyle
215214
? args?.inputFieldStyle?.margin
216-
: "0px"
215+
: '0px'
217216
),
218217
}}
219218
>
@@ -222,11 +221,11 @@ export const LabelControl = (function () {
222221
$align={props.align}
223222
style={{
224223
width:
225-
props.position === "row"
224+
props.position === 'row'
226225
? getLabelWidth(props.width, props.widthUnit)
227-
: "100%",
228-
maxWidth: props.position === "row" ? "70%" : "100%",
229-
fontSize: args && args.style ? args?.style?.textSize : "14px",
226+
: '100%',
227+
maxWidth: props.position === 'row' ? '70%' : '100%',
228+
fontSize: args && args.style ? args?.style?.textSize : '14px',
230229
}}
231230
$position={props.position}
232231
$hasToolTip={!!props.tooltip}
@@ -243,15 +242,15 @@ export const LabelControl = (function () {
243242
placement="top"
244243
color="#2c2c2c"
245244
getPopupContainer={(node: any) =>
246-
node.closest(".react-grid-item")
245+
node.closest('.react-grid-item')
247246
}
248247
>
249248
<Label
250249
$border={!!props.tooltip}
251250
$validateStatus={
252251
args && args.validateStatus ? args.validateStatus : null
253252
}
254-
$labelStyle={{ ...args.labelStyle }}
253+
$labelStyle={{...args.labelStyle}}
255254
>
256255
{props.text}
257256
</Label>
@@ -262,13 +261,13 @@ export const LabelControl = (function () {
262261
<ChildrenWrapper
263262
style={{
264263
width:
265-
props.position === "row"
264+
props.position === 'row'
266265
? `calc(100% - ${getLabelWidth(props.width, props.widthUnit)} - 8px)`
267-
: "100%",
266+
: '100%',
268267
height:
269-
props.position === "column" && !!props.text
270-
? "calc(100% - 22px)"
271-
: "100%",
268+
props.position === 'column' && !!props.text
269+
? 'calc(100% - 22px)'
270+
: '100%',
272271
}}
273272
>
274273
{args.children}
@@ -278,16 +277,16 @@ export const LabelControl = (function () {
278277
{args.help && (
279278
<HelpWrapper
280279
$marginLeft={
281-
props.position === "column" ||
280+
props.position === 'column' ||
282281
isEmpty(props.text) ||
283282
props.hidden
284-
? "0"
283+
? '0'
285284
: `calc(min(${getLabelWidth(props.width, props.widthUnit)} , 70%) + 8px)`
286285
}
287286
$color={
288-
args.validateStatus === "error"
287+
args.validateStatus === 'error'
289288
? red.primary
290-
: args.validateStatus === "warning"
289+
: args.validateStatus === 'warning'
291290
? yellow.primary
292291
: green.primary
293292
}
@@ -300,21 +299,21 @@ export const LabelControl = (function () {
300299
}
301300
)
302301
.setPropertyViewFn((children) => (
303-
<Section name={trans("label")}>
304-
{children.text.propertyView({ label: trans("labelProp.text") })}
305-
{children.tooltip.propertyView({ label: trans("labelProp.tooltip") })}
302+
<Section name={trans('label')}>
303+
{children.text.propertyView({label: trans('labelProp.text')})}
304+
{children.tooltip.propertyView({label: trans('labelProp.tooltip')})}
306305
{children.position.propertyView({
307-
label: trans("labelProp.position"),
306+
label: trans('labelProp.position'),
308307
radioButton: true,
309308
})}
310309
{children.align.propertyView({
311-
label: trans("labelProp.align"),
310+
label: trans('labelProp.align'),
312311
radioButton: true,
313312
})}
314-
{children.position.getView() !== "column" &&
313+
{children.position.getView() !== 'column' &&
315314
children.width.propertyView({
316-
label: trans("labelProp.width"),
317-
tooltip: trans("labelProp.widthTooltip"),
315+
label: trans('labelProp.width'),
316+
tooltip: trans('labelProp.widthTooltip'),
318317
lastNode: children.widthUnit.propertyView({}),
319318
})}
320319
</Section>

0 commit comments

Comments
 (0)