From 958ddd3a0929bbafaa460d6a05a9958e3361b417 Mon Sep 17 00:00:00 2001 From: hufeixiong Date: Tue, 15 Feb 2022 18:02:32 +0800 Subject: [PATCH] update 0.12.4 --- CHANGELOG.md | 6 ++ .../docs/ChangeLog/index.en.md | 3 + .../dooringx-dumi-doc/docs/ChangeLog/index.md | 6 ++ packages/dooringx-lib/package.json | 2 +- .../dooringx-lib/src/components/container.tsx | 15 ++++- .../dooringx-lib/src/components/preview.tsx | 4 ++ .../src/components/timeLine/timeline.tsx | 7 +++ .../src/components/timeLine/timelineItem.tsx | 63 ++++++++++--------- packages/dooringx-lib/src/config/index.tsx | 8 +++ packages/dooringx-lib/src/core/utils/index.ts | 4 ++ .../dooringx-plugin-template/package.json | 2 +- .../template/template.json | 2 +- 12 files changed, 89 insertions(+), 33 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1f7f93b..c529ac6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,9 @@ +## 0.12.4 + +添加生命周期。 + +修改timeline颜色及样式，优化选中状态。 + ## 0.12.3 修复双击定位问题 diff --git a/packages/dooringx-dumi-doc/docs/ChangeLog/index.en.md b/packages/dooringx-dumi-doc/docs/ChangeLog/index.en.md index 4c75569..37ffd5c 100644 --- a/packages/dooringx-dumi-doc/docs/ChangeLog/index.en.md +++ b/packages/dooringx-dumi-doc/docs/ChangeLog/index.en.md @@ -5,6 +5,9 @@ nav: title: change log order: 6 --- +## 0.12.4 +Add a lifecycle. +Modify the timeline color and style to optimize the selected state. ## 0.12.3 Fix double click positioning problem ## 0.12.2 diff --git a/packages/dooringx-dumi-doc/docs/ChangeLog/index.md b/packages/dooringx-dumi-doc/docs/ChangeLog/index.md index 5c87640..f176d3a 100644 --- a/packages/dooringx-dumi-doc/docs/ChangeLog/index.md +++ b/packages/dooringx-dumi-doc/docs/ChangeLog/index.md @@ -5,6 +5,12 @@ nav: title: 变更日志 order: 6 --- +## 0.12.4 + +添加生命周期。 + +修改timeline颜色及样式，优化选中状态。 + ## 0.12.3 修复双击定位问题 diff --git a/packages/dooringx-lib/package.json b/packages/dooringx-lib/package.json index 8e59fc9..0a2eb61 100644 --- a/packages/dooringx-lib/package.json +++ b/packages/dooringx-lib/package.json @@ -1,5 +1,5 @@ { - "version": "0.12.3", + "version": "0.12.4", "license": "MIT", "main": "dist/index.js", "module": "dist/dooringx-lib.esm.js", diff --git a/packages/dooringx-lib/src/components/container.tsx b/packages/dooringx-lib/src/components/container.tsx index 088809e..0124dfa 100644 --- a/packages/dooringx-lib/src/components/container.tsx +++ b/packages/dooringx-lib/src/components/container.tsx @@ -4,7 +4,7 @@ import { innerContainerDrag } from '../core/innerDrag'; import { NormalMarkLineRender } from '../core/markline'; import { IStoreData } from '../core/store/storetype'; import { wrapperMoveState } from './wrapperMove/event'; -import { CSSProperties, PropsWithChildren, useMemo, useState } from 'react'; +import { CSSProperties, PropsWithChildren, useEffect, useMemo, useState } from 'react'; import Blocks from './blocks'; import { containerResizer } from '../core/resizeHandler/containerResizer'; import React from 'react'; @@ -42,6 +42,19 @@ function Container(props: PropsWithChildren) { forceUpdate((p) => p + 1); }; + useEffect(() => { + if (props.context === 'preview') { + props.config.onMounted(); + props.config.onMountedFn.forEach((v) => v()); + } + return () => { + if (props.context === 'preview') { + props.config.destroyed(); + props.config.destroyedFn.forEach((v) => v()); + } + }; + }, [props.config, props.context]); + return ( <> {props.context === 'edit' && ( diff --git a/packages/dooringx-lib/src/components/preview.tsx b/packages/dooringx-lib/src/components/preview.tsx index a2e62cd..2c51735 100644 --- a/packages/dooringx-lib/src/components/preview.tsx +++ b/packages/dooringx-lib/src/components/preview.tsx @@ -49,6 +49,8 @@ function Preview(props: PreviewProps): ReactElement { useEffect(() => { const finalFn = () => { + props.config.created(); + props.config.createdFn.forEach((v) => v()); setTimeout(() => { // 链接数据 props.config @@ -67,6 +69,8 @@ function Preview(props: PreviewProps): ReactElement { if (props.completeFn) { props.completeFn(); } + props.config.beforeOnMounted(); + props.config.beforeOnMountedFn.forEach((v) => v()); if (props.loadingState === undefined) { setLoading(false); } diff --git a/packages/dooringx-lib/src/components/timeLine/timeline.tsx b/packages/dooringx-lib/src/components/timeLine/timeline.tsx index a14a666..5b6289c 100644 --- a/packages/dooringx-lib/src/components/timeLine/timeline.tsx +++ b/packages/dooringx-lib/src/components/timeLine/timeline.tsx @@ -27,6 +27,7 @@ import { TimeLineItemMouseOver, interval, iter, + resetCurrentMoveItemId, } from './timelineItem'; import { specialCoList } from '../../core/utils/special'; import { replaceLocale } from '../../locale'; @@ -454,6 +455,12 @@ export function TimeLine(props: TimeLineProps) { flexDirection: 'column', ...props.style, }} + onMouseDown={(e) => { + const dom = e.target as HTMLDivElement; + if (!(dom.className && dom.className.indexOf('yh-timeline-item-mainblock') > -1)) { + resetCurrentMoveItemId(); + } + }} > <>
{ + currentMoveItemId = ''; +}; const commonCss: CSSProperties = { transform: `rotate(45deg)`, @@ -129,6 +121,8 @@ const commonCss: CSSProperties = { cursor: 'e-resize', }; +const bgColorCache: Record = {}; + export function TimeLineItem(props: TimeLineItemProps) { return ( <> @@ -137,7 +131,10 @@ export function TimeLineItem(props: TimeLineItemProps) { const repeat = v.animationIterationCount === 'infinite' ? iter : parseInt(v.animationIterationCount); const width = v.animationDuration * times * repeat; - const index = v.uid.charCodeAt(0) % 10; + + if (!bgColorCache[v.uid]) { + bgColorCache[v.uid] = randomColor(); + } return (
-
{ - resizeMouseDown(e, v, true); - }} - >
-
{ - resizeMouseDown(e, v, false); - }} - >
+ {v.uid === currentMoveItemId && ( + <> +
{ + resizeMouseDown(e, v, true); + }} + >
+
{ + resizeMouseDown(e, v, false); + }} + >
+ + )}
); })} diff --git a/packages/dooringx-lib/src/config/index.tsx b/packages/dooringx-lib/src/config/index.tsx index e822aa5..40e7514 100644 --- a/packages/dooringx-lib/src/config/index.tsx +++ b/packages/dooringx-lib/src/config/index.tsx @@ -364,6 +364,14 @@ export class UserConfig { current: 0, isRefresh: true, }; + public createdFn: Function[] = []; + public created: Function = () => {}; + public beforeOnMountedFn: Function[] = []; + public beforeOnMounted: Function = () => {}; + public onMountedFn: Function[] = []; + public onMounted: Function = () => {}; + public destroyedFn: Function[] = []; + public destroyed: Function = () => {}; public blockForceUpdate: Array = []; public waitAnimate = false; public wrapperMoveState = wrapperMoveState; diff --git a/packages/dooringx-lib/src/core/utils/index.ts b/packages/dooringx-lib/src/core/utils/index.ts index 7cf6932..090bcc5 100644 --- a/packages/dooringx-lib/src/core/utils/index.ts +++ b/packages/dooringx-lib/src/core/utils/index.ts @@ -17,6 +17,10 @@ export function swap(indexa: number, indexb: number, arr: Array) { return arr; } +export function randomColor() { + return '#' + ('00000' + ((Math.random() * 0x1000000) << 0).toString(16)).slice(-6); +} + // 将rgba字符串对象转化为rgba对象 export function rgba2Obj(rgba = '') { let reg = /rgba\(\s*?(\d+)\s*?,\s*?(\d+)\s*?,\s*?(\d+)\s*?,\s*?(\d+)\s*?\)/g; diff --git a/packages/dooringx-plugin-template/package.json b/packages/dooringx-plugin-template/package.json index 6cc3dac..d3ca7b9 100644 --- a/packages/dooringx-plugin-template/package.json +++ b/packages/dooringx-plugin-template/package.json @@ -1,6 +1,6 @@ { "name": "dooringx-plugin-template", - "version": "0.12.3", + "version": "0.12.4", "description": "> TODO: description", "author": "yehuozhili <673632758@qq.com>", "homepage": "https://github.com/H5-Dooring/dooringx#readme", diff --git a/packages/dooringx-plugin-template/template/template.json b/packages/dooringx-plugin-template/template/template.json index 9b1e62f..d7d64e6 100644 --- a/packages/dooringx-plugin-template/template/template.json +++ b/packages/dooringx-plugin-template/template/template.json @@ -40,7 +40,7 @@ "@rollup/plugin-node-resolve": "^13.0.4", "@rollup/plugin-url": "^6.1.0", "@svgr/rollup": "^5.5.0", - "dooringx-lib": "^0.12.3", + "dooringx-lib": "^0.12.4", "postcss": "^8.3.6", "rollup-plugin-peer-deps-external": "^2.2.4", "rollup-plugin-postcss": "^4.0.1",