diff --git a/CHANGELOG.md b/CHANGELOG.md index ba6dbfa..52583ac 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,11 @@ ## changelog +## 0.8.2 + +增加左侧面板配置。 + +修复timeline闪烁问题。 + ## 0.8.1 新增动画组件timeline。可以更好预览所有动画。 diff --git a/packages/dooringx-doc/src/changelog/1.1.md b/packages/dooringx-doc/src/changelog/1.1.md index c319f37..1e8c1b1 100644 --- a/packages/dooringx-doc/src/changelog/1.1.md +++ b/packages/dooringx-doc/src/changelog/1.1.md @@ -4,6 +4,12 @@ order: 1 --- ## changelog +## 0.8.2 + +增加左侧面板配置。 + +修复timeline闪烁问题。 + ## 0.8.1 新增动画组件timeline。可以更好预览所有动画。 diff --git a/packages/dooringx-example/src/plugin/formComponents/animateControl.tsx b/packages/dooringx-example/src/plugin/formComponents/animateControl.tsx index dd08261..ef67620 100644 --- a/packages/dooringx-example/src/plugin/formComponents/animateControl.tsx +++ b/packages/dooringx-example/src/plugin/formComponents/animateControl.tsx @@ -126,9 +126,8 @@ let isOmit = false; function AnimateControl(props: AnimateControlProps) { const store = props.config.getStore(); - const animate = useMemo(() => { - if (isOmit) { + if (isOmit || props.config.waitAnimate) { return lastAnimate; } lastAnimate = props.current.animate; @@ -305,24 +304,27 @@ function AnimateControl(props: AnimateControlProps) { onClick={() => { if (!isOmit) { isOmit = true; + props.config.waitAnimate = true; const cacheProps = animate; - const data: IStoreData = store.getData(); + const data: IStoreData = deepCopy(store.getData()); data.block.forEach((v) => { if (v.id === props.current.id) { v.animate = []; } }); - store.emit(); - store.forceUpdate(); + store.setData(data); setTimeout(() => { - data.block.forEach((v) => { + const clone: IStoreData = deepCopy(store.getData()); + clone.block.forEach((v) => { if (v.id === props.current.id) { v.animate = cacheProps; } }); - store.emit(); - store.forceUpdate(); isOmit = false; + props.config.waitAnimate = false; + store.cleanLast(); + store.setData(clone); + store.cleanLast(); }); } }} diff --git a/packages/dooringx-lib/package.json b/packages/dooringx-lib/package.json index 4137cba..5145204 100644 --- a/packages/dooringx-lib/package.json +++ b/packages/dooringx-lib/package.json @@ -1,5 +1,5 @@ { - "version": "0.8.1", + "version": "0.8.2", "license": "MIT", "main": "dist/index.js", "module": "dist/dooringx-lib.esm.js", diff --git a/packages/dooringx-lib/src/components/timeLine/timeline.tsx b/packages/dooringx-lib/src/components/timeLine/timeline.tsx index 3992742..4bc966a 100644 --- a/packages/dooringx-lib/src/components/timeLine/timeline.tsx +++ b/packages/dooringx-lib/src/components/timeLine/timeline.tsx @@ -2,11 +2,11 @@ * @Author: yehuozhili * @Date: 2021-08-09 15:15:25 * @LastEditors: yehuozhili - * @LastEditTime: 2021-08-11 17:03:54 + * @LastEditTime: 2021-08-16 11:20:59 * @FilePath: \dooringx\packages\dooringx-lib\src\components\timeLine\timeline.tsx */ import deepcopy from 'deepcopy'; -import React, { CSSProperties, useState } from 'react'; +import React, { CSSProperties, useMemo, useState } from 'react'; import { SortableContainer, SortableElement, SortableHandle, SortEnd } from 'react-sortable-hoc'; import UserConfig from '../../config'; import { IBlockType, IStoreData } from '../../core/store/storetype'; @@ -82,6 +82,8 @@ const SortableList = SortableContainer( } ); +let cacheBlock: IBlockType[] = []; + export function TimeLine(props: TimeLineProps) { const store = props.config.getStore(); const data = store.getData().block; @@ -122,6 +124,14 @@ export function TimeLine(props: TimeLineProps) { ); + const renderData = useMemo(() => { + if (props.config.waitAnimate) { + return cacheBlock; + } + cacheBlock = data; + return cacheBlock; + }, [data, props.config.waitAnimate]); + return (
{ return v.animate; }); @@ -182,6 +193,7 @@ export function TimeLine(props: TimeLineProps) { v.animate = cache[i]; }); WAIT = false; + props.config.waitAnimate = false; store.setData(cloneData); }); } @@ -256,7 +268,7 @@ export function TimeLine(props: TimeLineProps) { }} style={{ overflow: 'auto', height: `calc(100% - ${itemHeight}px)` }} > - {data.map((v) => { + {renderData.map((v) => { return (
{}; diff --git a/packages/dooringx-lib/src/core/store/index.ts b/packages/dooringx-lib/src/core/store/index.ts index 2ba6a29..cec8fea 100644 --- a/packages/dooringx-lib/src/core/store/index.ts +++ b/packages/dooringx-lib/src/core/store/index.ts @@ -2,7 +2,7 @@ * @Author: yehuozhili * @Date: 2021-03-14 04:29:09 * @LastEditors: yehuozhili - * @LastEditTime: 2021-07-13 14:58:30 + * @LastEditTime: 2021-08-16 11:18:41 * @FilePath: \dooringx\packages\dooringx-lib\src\core\store\index.ts */ import { IStoreData } from './storetype'; @@ -130,6 +130,15 @@ class Store { this.emit(); } + cleanLast() { + if (this.current <= 1) { + return; + } + const removeIndex = this.current - 1; + this.storeDataList.splice(removeIndex, 1); + this.current = this.current - 1; + } + emit() { this.listeners.forEach((fn) => { fn(this.getData());