animate restruct

packages/dooringx-example/src/plugin/formComponents/animateControl.tsx

@@ -1,9 +1,9 @@
 import React, { useMemo, useState } from 'react';
 import { UserConfig, deepCopy } from 'dooringx-lib';
-import { Col, Row, Select, InputNumber } from 'antd';
+import { Col, Row, Select, InputNumber, Button } from 'antd';
 import { FormMap, FormBaseType } from '../formTypes';
 import { CreateOptionsRes } from 'dooringx-lib/dist/core/components/formTypes';
-import { IBlockType } from 'dooringx-lib/dist/core/store/storetype';
+import { AnimateItem, IBlockType, IStoreData } from 'dooringx-lib/dist/core/store/storetype';
 
 export interface FormAnimateControlType extends FormBaseType {}
 
@@ -112,195 +112,134 @@ const animateCategory: Record<string, string> = {
 	animate__slideOutDown: 'slideOutDown',
 	animate__slideOutLeft: 'slideOutLeft',
 	animate__slideOutRight: 'slideOutRight',
-	animate__slideOutUp: 'slideOutUp',
 };
 
-const animateRepeat: Record<string, string> = {
-	'': '无',
-	'1': '1次',
-	'2': '2次',
-	'3': '3次',
-	'4': '4次',
-	infinite: '无限',
+const duration = ['0s', '1s', '2s', '3s', '4s', '5s', '6s', '7s', '8s', '9s', '10s'];
+
+const delay = ['0s', '1s', '2s', '3s', '4s', '5s', '6s', '7s', '8s', '9s', '10s'];
+
+const repeat = ['1', '2', '3', '4', '5', 'infinite'];
+
+const timeFunction = {
+	平滑: 'linear',
+	缓入: 'ease in',
 };
 
-const animateSpeed: Record<string, string> = {
-	'': '普通',
-	animate__slow: '特慢',
-	animate__slower: '慢速',
-	animate__fast: '快速',
-	animate__faster: '特快',
-};
-
-let lastAnimate = '';
-/**
- *
- * 这个控制组件配置项写死，只可能出现或者不出现
- * @return {*}
- */
 function AnimateControl(props: AnimateControlProps) {
-	const [count, setCount] = useState<number | null>(null);
-	const [sign, setSign] = useState(false);
-	const v1 = useMemo(() => {
-		if (sign) {
-			return lastAnimate;
-		} else {
-			const val = props.current.animate.animate
-				? animateCategory[props.current.animate.animate]
-				: '';
-			lastAnimate = val;
-			return val;
-		}
-	}, [props.current.animate.animate, sign]);
-
-	const v2 = useMemo(() => {
-		if (typeof props.current.animate.animationIterationCount === 'number') {
-			setCount(props.current.animate.animationIterationCount);
-			return '';
-		} else {
-			setCount(null);
-			return props.current.animate.animationIterationCount
-				? animateRepeat[props.current.animate.animationIterationCount]
-				: '';
-		}
-	}, [props.current.animate.animationIterationCount]);
-
-	const v3 = useMemo(() => {
-		return animateSpeed[props.current.animate.speed ?? ''];
-	}, [props.current.animate.speed]);
-
-	const changeAnimation = (
-		e: any,
-		props: AnimateControlProps,
-		type: 'animate' | 'animationIterationCount' | 'speed'
-	) => {
-		if (type === 'animationIterationCount') {
-			setCount(null);
-		}
-
-		const clonedata = deepCopy(props.config.getStore().getData());
-		const newblock = clonedata.block.map((v: IBlockType) => {
-			if (v.id === props.current.id) {
-				if (type === 'animationIterationCount') {
-					v.animate[type] = Number(e);
-				}
-				v.animate[type] = e;
-			}
-			return v;
-		});
-		const [item] = clonedata.block.filter((item: IBlockType) => item.id === props.current.id);
-		if (item?.animate?.animate) {
-			const cloneNewBlock = deepCopy(newblock);
-			const temporaryBlock = cloneNewBlock.map((item: IBlockType) => {
-				if (item.id === props.current.id) {
-					delete item.animate.animate;
-				}
-				return item;
-			});
-			setSign(true);
-			// 若有动画属性则删除动画属性再将动画属性添加
-			props.config.getStore().setData({ ...clonedata, block: [...temporaryBlock] });
-		}
-		setTimeout(() => {
-			props.config.getStore().setData({ ...clonedata, block: [...newblock] });
-			setSign(false);
-		});
-	};
+	const animate = props.current.animate;
+	const store = props.config.getStore();
 	return (
 		<>
-			<Row style={{ padding: '20px' }}>
-				<Col span={6} style={{ lineHeight: '30px' }}>
-					动画种类
-				</Col>
-				<Col span={18}>
-					<Select
-						value={v1}
-						onChange={(e) => changeAnimation(e, props, 'animate')}
-						style={{ width: '100%' }}
-					>
-						{Object.keys(animateCategory).map((v) => {
-							return (
-								<Select.Option value={v} key={v}>
-									{animateCategory[v]}
-								</Select.Option>
-							);
-						})}
-					</Select>
-				</Col>
-			</Row>
-			<Row style={{ padding: '20px' }}>
-				<Col span={6} style={{ lineHeight: '30px' }}>
-					频率
-				</Col>
-				<Col span={18} style={{ display: 'flex', justifyContent: 'space-between' }}>
-					<InputNumber
-						min={1}
-						value={count as number}
-						onChange={(value) => {
-							setCount(value);
-							const clonedata = deepCopy(props.config.getStore().getData());
-							const newblock = clonedata.block.map((v: IBlockType) => {
-								if (v.id === props.current.id) {
-									v.animate.animationIterationCount = value;
-								}
-								return v;
-							});
+			{animate.map((v, i) => {
+				return (
+					<div key={props.current.id + i}>
+						<Row style={{ padding: '20px', alignItems: 'center' }}>
+							<Col span={3}>动画:</Col>
+							<Col span={8}>
+								<Select style={{ width: '80%' }}>
+									{Object.keys(animateCategory).map((v, i) => {
+										return (
+											<Select.Option key={i} value={animateCategory[v]}>
+												{animateCategory[v]}
+											</Select.Option>
+										);
+									})}
+								</Select>
+							</Col>
+							<Col span={5}>持续时间:</Col>
+							<Col span={8}>
+								<Select style={{ width: '100%' }}>
+									{duration.map((v, i) => {
+										return (
+											<Select.Option key={i} value={v}>
+												{v}
+											</Select.Option>
+										);
+									})}
+								</Select>
+							</Col>
+						</Row>
+						<Row style={{ padding: '20px', alignItems: 'center' }}>
+							<Col span={3}>延迟:</Col>
+							<Col span={8}>
+								<Select style={{ width: '80%' }}>
+									{delay.map((v, i) => {
+										return (
+											<Select.Option key={i} value={v}>
+												{v}
+											</Select.Option>
+										);
+									})}
+								</Select>
+							</Col>
+							<Col span={5}>重复次数:</Col>
+							<Col span={8}>
+								<Select style={{ width: '100%' }}>
+									{repeat.map((v, i) => {
+										return (
+											<Select.Option key={i} value={v}>
+												{v}
+											</Select.Option>
+										);
+									})}
+								</Select>
+							</Col>
+						</Row>
+						<Row style={{ padding: '20px' }}>
+							<Col span={3}>延迟:</Col>
+							<Col span={8}>
+								<Select style={{ width: '80%' }}>
+									{delay.map((v, i) => {
+										return (
+											<Select.Option key={i} value={v}>
+												{v}
+											</Select.Option>
+										);
+									})}
+								</Select>
+							</Col>
+							<Col span={8} style={{ justifyContent: 'flex-end' }}>
+								<Button
+									danger
+									onClick={() => {
+										const cloneData: IStoreData = deepCopy(store.getData());
+										cloneData.block.map((v) => {
+											if (v.id === props.current.id) {
+												v.animate.splice(i, 1);
+											}
+										});
+										store.setData(cloneData);
+									}}
+								>
+									删除
+								</Button>
+							</Col>
+						</Row>
+					</div>
+				);
+			})}
 
-							const [item] = clonedata.block.filter(
-								(item: IBlockType) => item.id === props.current.id
-							);
-
-							if (item?.animate?.animate) {
-								const cloneNewBlock = deepCopy(newblock);
-								const temporaryBlock = cloneNewBlock.map((item: IBlockType) => {
-									if (item.id === props.current.id) {
-										delete item.animate.animate;
-									}
-									return item;
-								});
-								setSign(true);
-								props.config.getStore().setData({ ...clonedata, block: [...temporaryBlock] });
+			<Row style={{ padding: '20px', justifyContent: 'center' }}>
+				<Button
+					onClick={() => {
+						const cloneData: IStoreData = deepCopy(store.getData());
+						const newItem: AnimateItem = {
+							animationName: '',
+							animationDelay: '0s',
+							animationDuration: '1s',
+							animationTimingFunction: 'linear',
+							animationIterationCount: 1,
+						};
+						cloneData.block.map((v) => {
+							if (v.id === props.current.id) {
+								v.animate.push(newItem);
 							}
-							setTimeout(() => {
-								props.config.getStore().setData({ ...clonedata, block: [...newblock] });
-								setSign(false);
-							});
-						}}
-					></InputNumber>
-					<Select
-						value={v2}
-						onChange={(e) => changeAnimation(e, props, 'animationIterationCount')}
-						style={{ width: '60%' }}
-					>
-						{Object.keys(animateRepeat).map((v) => {
-							return (
-								<Select.Option value={v} key={v}>
-									{animateRepeat[v]}
-								</Select.Option>
-							);
-						})}
-					</Select>
-				</Col>
-			</Row>
-			<Row style={{ padding: '20px' }}>
-				<Col span={6} style={{ lineHeight: '30px' }}>
-					动画速度
-				</Col>
-				<Col span={18}>
-					<Select
-						value={v3}
-						onChange={(e: any) => changeAnimation(e, props, 'speed')}
-						style={{ width: '100%' }}
-					>
-						{Object.keys(animateSpeed).map((v) => {
-							return (
-								<Select.Option value={v} key={v}>
-									{animateSpeed[v]}
-								</Select.Option>
-							);
-						})}
-					</Select>
-				</Col>
+						});
+						store.setData(cloneData);
+					}}
+				>
+					添加动画
+				</Button>
 			</Row>
 		</>
 	);