update 0.12.4

CHANGELOG.md

@@ -1,3 +1,9 @@
+## 0.12.4
+
+添加生命周期。
+
+修改timeline颜色及样式，优化选中状态。
+
 ## 0.12.3
 
 修复双击定位问题

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

packages/dooringx-dumi-doc/docs/ChangeLog/index.md

@@ -5,6 +5,12 @@ nav:
   title: 变更日志
   order: 6
 ---
+## 0.12.4
+
+添加生命周期。
+
+修改timeline颜色及样式，优化选中状态。
+
 ## 0.12.3
 
 修复双击定位问题

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",

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<ContainerProps>) {
 		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' && (

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);
 				}

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();
+				}
+			}}
 		>
 			<>
 				<div

packages/dooringx-lib/src/components/timeLine/timelineItem.tsx

@@ -7,6 +7,7 @@
  */
 import React, { CSSProperties } from 'react';
 import { AnimateItem } from '../../core/store/storetype';
+import { randomColor } from '../../core/utils';
 
 export const iter = 500;
 export const itemHeight = 25;
@@ -20,19 +21,6 @@ const times = interval + 1;
 export interface TimeLineItemProps {
 	animate: AnimateItem[];
 }
-const bgColor = [
-	'#4af',
-	'rgb(93, 128, 158)',
-	'rgb(158, 130, 93)',
-	'rgb(219, 72, 34)',
-	'rgb(255, 68, 168)',
-	'#4af',
-	'rgb(93, 128, 158)',
-	'rgb(158, 130, 93)',
-	'rgb(219, 72, 34)',
-	'rgb(255, 68, 168)',
-];
-
 interface MoveStateTypes {
 	startX: number;
 	isMove: boolean;
@@ -47,6 +35,7 @@ const moveState: MoveStateTypes = {
 interface resizeStateTypes extends MoveStateTypes {
 	left: boolean;
 }
+let currentMoveItemId = '';
 
 const resizeState: resizeStateTypes = {
 	startX: 0,
@@ -118,6 +107,9 @@ export const TimeLineItemMouseOver = function () {
 	resizeState.startX = 0;
 	resizeState.uid = '';
 };
+export const resetCurrentMoveItemId = () => {
+	currentMoveItemId = '';
+};
 
 const commonCss: CSSProperties = {
 	transform: `rotate(45deg)`,
@@ -129,6 +121,8 @@ const commonCss: CSSProperties = {
 	cursor: 'e-resize',
 };
 
+const bgColorCache: Record<string, string> = {};
+
 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 (
 					<div
 						key={v.uid}
@@ -145,32 +142,40 @@ export function TimeLineItem(props: TimeLineItemProps) {
 							moveState.startX = e.clientX;
 							moveState.uid = v.uid;
 							moveState.isMove = true;
+							currentMoveItemId = v.uid;
 						}}
+						className="yh-timeline-item-mainblock"
 						style={{
 							position: 'absolute',
 							top: diff / 2,
 							left: left,
 							width: width,
 							height: itemHeight - diff,
-							background: bgColor[index],
+							background: bgColorCache[v.uid],
 							zIndex: 1,
 							cursor: 'move',
+							borderRadius: '4px',
+							opacity: v.uid === currentMoveItemId ? 1 : 0.7,
 						}}
 					>
-						<div
-							className="yh-timeline-item-left"
-							style={{ ...commonCss, left: -square }}
-							onMouseDown={(e) => {
-								resizeMouseDown(e, v, true);
-							}}
-						></div>
-						<div
-							className="yh-timeline-item-right"
-							style={{ ...commonCss, right: -square }}
-							onMouseDown={(e) => {
-								resizeMouseDown(e, v, false);
-							}}
-						></div>
+						{v.uid === currentMoveItemId && (
+							<>
+								<div
+									className="yh-timeline-item-left"
+									style={{ ...commonCss, left: -square }}
+									onMouseDown={(e) => {
+										resizeMouseDown(e, v, true);
+									}}
+								></div>
+								<div
+									className="yh-timeline-item-right"
+									style={{ ...commonCss, right: -square }}
+									onMouseDown={(e) => {
+										resizeMouseDown(e, v, false);
+									}}
+								></div>
+							</>
+						)}
 					</div>
 				);
 			})}

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<Function> = [];
 	public waitAnimate = false;
 	public wrapperMoveState = wrapperMoveState;

packages/dooringx-lib/src/core/utils/index.ts

@@ -17,6 +17,10 @@ export function swap(indexa: number, indexb: number, arr: Array<any>) {
 	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;

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",

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",