diff --git a/packages/semi-foundation/resizable/group/index.ts b/packages/semi-foundation/resizable/group/index.ts index 1d4f4333b4..b81f996fb0 100644 --- a/packages/semi-foundation/resizable/group/index.ts +++ b/packages/semi-foundation/resizable/group/index.ts @@ -2,6 +2,7 @@ import { getItemDirection, getPixelSize } from "../utils"; import BaseFoundation, { DefaultAdapter } from '../../base/foundation'; import { ResizeStartCallback, ResizeCallback } from "../types"; import { adjustNewSize, judgeConstraint, getOffset } from "../utils"; +import { debounce } from "lodash"; export interface ResizeHandlerAdapter

, S = Record> extends DefaultAdapter { registerEvents: () => void; unregisterEvents: () => void @@ -303,7 +304,8 @@ export class ResizeGroupFoundation

, S = Record { // 浏览器拖拽时保证px值最大最小仍生效 + ensureConstraint = debounce(() => { + // 浏览器拖拽时保证px值最大最小仍生效 const { direction } = this.getProps(); const itemCount = this._adapter.getItemCount(); let continueFlag = true; @@ -346,7 +348,7 @@ export class ResizeGroupFoundation

, S = Record { } export const Group_dynamic_direction = () => { - const [text, setText] = useState('test') + const [text, setText] = useState('drag to resize') const [direction, setDirection] = useState('horizontal') const changeDirection = () => { @@ -393,14 +393,14 @@ export const Group_dynamic_direction = () => { { setText('resizing') }} - onResizeEnd={() => { setText('test') }} + onResizeEnd={() => { setText('drag to resize') }} defaultSize={8} > { setText('resizing') }} - onResizeEnd={() => { setText('test') }} + onResizeEnd={() => { setText('drag to resize') }} >

{text} diff --git a/packages/semi-ui/resizable/group/resizeGroup.tsx b/packages/semi-ui/resizable/group/resizeGroup.tsx index 5d1d3c5bfb..7877e46790 100644 --- a/packages/semi-ui/resizable/group/resizeGroup.tsx +++ b/packages/semi-ui/resizable/group/resizeGroup.tsx @@ -7,7 +7,6 @@ import BaseComponent from '../../_base/baseComponent'; import { ResizeContext, ResizeContextProps } from './resizeContext'; import { ResizeCallback, ResizeStartCallback } from '@douyinfe/semi-foundation/resizable/types'; import "@douyinfe/semi-foundation/resizable/resizable.scss"; -import pre from 'markdownRender/components/code'; const prefixCls = cssClasses.PREFIX; @@ -89,7 +88,7 @@ class ResizeGroup extends BaseComponent { componentDidMount() { this.foundation.init(); // 监听窗口大小变化,保证一些限制仍生效 - window.addEventListener('resize', this.foundation.calculateSpace); + window.addEventListener('resize', this.foundation.ensureConstraint); } componentDidUpdate(prevProps: ResizeGroupProps) { @@ -108,7 +107,7 @@ class ResizeGroup extends BaseComponent { componentWillUnmount() { this.foundation.destroy(); - window.removeEventListener('resize', this.foundation.calculateSpace); + window.removeEventListener('resize', this.foundation.ensureConstraint); } get adapter(): ResizeGroupAdapter { diff --git a/packages/semi-ui/resizable/group/resizeItem.tsx b/packages/semi-ui/resizable/group/resizeItem.tsx index 4135b3e4de..ea5a0e8bc7 100644 --- a/packages/semi-ui/resizable/group/resizeItem.tsx +++ b/packages/semi-ui/resizable/group/resizeItem.tsx @@ -58,6 +58,7 @@ class ResizeItem extends BaseComponent { this.foundation.init(); const { min, max, onResizeStart, onChange, onResizeEnd, defaultSize } = this.props; if (this.itemIndex === -1) { + // 开发过程在StrictMode下context方法会执行两次,需要判断一下是否已经注册过 this.itemIndex = this.context.registerItem(this.itemRef, min, max, defaultSize, onResizeStart, onChange, onResizeEnd); } this.direction = this.context.direction; // 留一个direction的引用,方便在componentDidUpdate中判断方向是否有变化