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