update 0.11.8

CHANGELOG.md

@@ -1,6 +1,11 @@
+## 0.11.8
+
+timeline增加自动聚焦功能。
+
 ## 0.11.7
 
 取消多选吸附功能。
+
 ## 0.11.6
 
 取消第一次点击鼠标的吸附。

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

@@ -5,6 +5,8 @@ nav:
   title: change log
   order: 6
 ---
+## 0.11.8
+Timeline adds auto focus function.
 ## 0.11.7
 Cancel the multi selection adsorption function.
 ## 0.11.6

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

@@ -5,9 +5,14 @@ nav:
   title: 变更日志
   order: 6
 ---
+## 0.11.8
+
+timeline增加自动聚焦功能。
+
 ## 0.11.7
 
 取消多选吸附功能。
+
 ## 0.11.6
 
 取消第一次点击鼠标的吸附。

packages/dooringx-lib/package.json

@@ -1,5 +1,5 @@
 {
-	"version": "0.11.7",
+	"version": "0.11.8",
 	"license": "MIT",
 	"main": "dist/index.js",
 	"module": "dist/dooringx-lib.esm.js",

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-09-27 21:41:20
+ * @LastEditTime: 2022-01-12 17:44:22
  * @FilePath: \dooringx\packages\dooringx-lib\src\components\timeLine\timeline.tsx
  */
 import deepcopy from 'deepcopy';
-import React, { CSSProperties, useMemo, useState } from 'react';
+import React, { CSSProperties, useEffect, useMemo, useRef, useState } from 'react';
 import { SortableContainer, SortableElement, SortableHandle, SortEnd } from 'react-sortable-hoc';
 import UserConfig from '../../config';
 import { IBlockType, IStoreData } from '../../core/store/storetype';
@@ -35,6 +35,10 @@ export interface TimeLineProps {
 	classes?: string;
 	config: UserConfig;
 }
+export interface TimeLineConfigType {
+	autoFocus: boolean;
+	scrollDom: null | HTMLDivElement;
+}
 
 const animateTicker = new Array(iter).fill(1).map((_, y) => y);
 
@@ -42,13 +46,19 @@ const DragHandle = SortableHandle(() => <MenuOutlined />);
 
 const leftWidth = 200;
 let WAIT = false;
-
 const widthInterval = interval * 10 + 9;
 const ruleWidth = (widthInterval * iter) / 10 + 10;
 const borderColor = '1px solid rgb(204, 204, 204)';
 
 const SortableItem = SortableElement(
-	({ value }: { value: { value: IBlockType; config: UserConfig } }) => (
+	({
+		value,
+	}: {
+		value: {
+			value: IBlockType;
+			config: UserConfig;
+		};
+	}) => (
 		<div
 			style={{
 				userSelect: 'none',
@@ -129,7 +139,14 @@ const SortableItem = SortableElement(
 );
 
 const SortableList = SortableContainer(
-	({ items }: { items: { data: IBlockType[]; config: UserConfig } }) => {
+	({
+		items,
+	}: {
+		items: {
+			data: IBlockType[];
+			config: UserConfig;
+		};
+	}) => {
 		return (
 			<div>
 				{items.data.map((value, index: number) => (
@@ -190,6 +207,13 @@ export function TimeLine(props: TimeLineProps) {
 		return cacheBlock;
 	}, [data, props.config.waitAnimate]);
 
+	const ref = useRef<HTMLDivElement>(null);
+	useEffect(() => {
+		if (ref.current) {
+			props.config.timelineConfig.scrollDom = ref.current;
+		}
+	}, [props.config]);
+
 	return (
 		<div
 			className={`${props.classes} ant-menu yh-timeline-wrap`}
@@ -323,6 +347,7 @@ export function TimeLine(props: TimeLineProps) {
 								setState(target.scrollTop);
 								setScrollx(target.scrollLeft);
 							}}
+							ref={ref}
 							style={{ overflow: 'auto', height: `calc(100% - ${itemHeight}px)` }}
 						>
 							{renderData.map((v) => {

packages/dooringx-lib/src/config/index.tsx

@@ -2,7 +2,7 @@
  * @Author: yehuozhili
  * @Date: 2021-02-25 21:16:58
  * @LastEditors: yehuozhili
- * @LastEditTime: 2021-09-28 22:05:04
+ * @LastEditTime: 2022-01-12 17:26:07
  * @FilePath: \dooringx\packages\dooringx-lib\src\config\index.tsx
  */
 import React from 'react';
@@ -33,6 +33,7 @@ import Store from '../core/store';
 import { VerticalAlignMiddleOutlined } from '@ant-design/icons';
 import { wrapperMoveState } from '../components/wrapperMove/event';
 import { wrapperMoveState as iframeWrapperMoveState } from '../components/IframeWrapperMove/event';
+import { TimeLineConfigType } from '../components/timeLine/timeline';
 // 组件部分
 
 /**
@@ -348,6 +349,10 @@ export class UserConfig {
 	public collapsed = false;
 	public ticker = true;
 	public timeline = false;
+	public timelineConfig: TimeLineConfigType = {
+		autoFocus: true,
+		scrollDom: null,
+	};
 	public waitAnimate = false;
 	public wrapperMoveState = wrapperMoveState;
 	public iframeWrapperMoveState = iframeWrapperMoveState;

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

@@ -13,6 +13,7 @@ import UserConfig from '../../config';
 import { rotateMouseMove, rotateMouseUp } from '../rotateHandler';
 import { specialCoList } from '../utils/special';
 import { marklineState } from '../markline/state';
+import { itemHeight } from '../../components/timeLine/timelineItem';
 
 export const innerDrag = function (
 	item: IBlockType,
@@ -35,6 +36,15 @@ export const innerDrag = function (
 			}
 			//candrag给选中，不给拖
 			blockFocus(e, item, config);
+			// 计算scrollTop值，更新dom
+			if (config.timelineConfig.autoFocus && config.timelineConfig.scrollDom) {
+				// 根据其为第几个block计算滚动高度
+				const index = store.getData().block.findIndex((v) => v.id === item.id);
+				if (index >= 0) {
+					config.timelineConfig.scrollDom.scrollTop = itemHeight * index;
+				}
+			}
+
 			if (!item.canDrag) {
 				//containerFocusRemove(config).onMouseDown(e);
 				return;

packages/dooringx-plugin-template/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dooringx-plugin-template",
-  "version": "0.11.7",
+  "version": "0.11.8",
   "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.11.7",
+		"dooringx-lib": "^0.11.8",
 		"postcss": "^8.3.6",
 		"rollup-plugin-peer-deps-external": "^2.2.4",
 		"rollup-plugin-postcss": "^4.0.1",