diff --git a/CHANGELOG.md b/CHANGELOG.md
index cfe19be..758d0b9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,11 @@
+## 0.11.8
+
+timeline增加自动聚焦功能。
+
## 0.11.7
取消多选吸附功能。
+
## 0.11.6
取消第一次点击鼠标的吸附。
diff --git a/packages/dooringx-dumi-doc/docs/ChangeLog/index.en.md b/packages/dooringx-dumi-doc/docs/ChangeLog/index.en.md
index 2565ea5..b379bb1 100644
--- a/packages/dooringx-dumi-doc/docs/ChangeLog/index.en.md
+++ b/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
diff --git a/packages/dooringx-dumi-doc/docs/ChangeLog/index.md b/packages/dooringx-dumi-doc/docs/ChangeLog/index.md
index 0dec290..6504419 100644
--- a/packages/dooringx-dumi-doc/docs/ChangeLog/index.md
+++ b/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
取消第一次点击鼠标的吸附。
diff --git a/packages/dooringx-lib/package.json b/packages/dooringx-lib/package.json
index 79019e4..998a980 100644
--- a/packages/dooringx-lib/package.json
+++ b/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",
diff --git a/packages/dooringx-lib/src/components/timeLine/timeline.tsx b/packages/dooringx-lib/src/components/timeLine/timeline.tsx
index 61e822f..7205473 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-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(() => );
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;
+ };
+ }) => (
{
+ ({
+ items,
+ }: {
+ items: {
+ data: IBlockType[];
+ config: UserConfig;
+ };
+ }) => {
return (
{items.data.map((value, index: number) => (
@@ -190,6 +207,13 @@ export function TimeLine(props: TimeLineProps) {
return cacheBlock;
}, [data, props.config.waitAnimate]);
+ const ref = useRef
(null);
+ useEffect(() => {
+ if (ref.current) {
+ props.config.timelineConfig.scrollDom = ref.current;
+ }
+ }, [props.config]);
+
return (
{renderData.map((v) => {
diff --git a/packages/dooringx-lib/src/config/index.tsx b/packages/dooringx-lib/src/config/index.tsx
index c44f5e3..9c0f991 100644
--- a/packages/dooringx-lib/src/config/index.tsx
+++ b/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;
diff --git a/packages/dooringx-lib/src/core/innerDrag/index.ts b/packages/dooringx-lib/src/core/innerDrag/index.ts
index 58972d8..72649f2 100644
--- a/packages/dooringx-lib/src/core/innerDrag/index.ts
+++ b/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;
diff --git a/packages/dooringx-plugin-template/package.json b/packages/dooringx-plugin-template/package.json
index 23f5f1e..513abb9 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.11.7",
+ "version": "0.11.8",
"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 fae3e46..b13aa45 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.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",