feat: add debounce for ensure constraints

DouyinFE · Nov 13, 2024 · 6d92750 · 6d92750
1 parent a552de7
commit 6d92750
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 8 deletions.
diff --git 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<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     registerEvents: () => void;
     unregisterEvents: () => void
@@ -303,7 +304,8 @@ export class ResizeGroupFoundation<P = Record<string, any>, S = Record<string, a
         });
     }
 
-    calculateSpace = () => { // 浏览器拖拽时保证px值最大最小仍生效
+    ensureConstraint = debounce(() => {
+        // 浏览器拖拽时保证px值最大最小仍生效
         const { direction } = this.getProps();
         const itemCount = this._adapter.getItemCount();
         let continueFlag = true;
@@ -346,7 +348,7 @@ export class ResizeGroupFoundation<P = Record<string, any>, S = Record<string, a
                 break;
             }
         }
-    }
+    }, 200) 
 
     destroy(): void {
 

diff --git a/packages/semi-ui/resizable/_story/resizable.stories.jsx b/packages/semi-ui/resizable/_story/resizable.stories.jsx
@@ -377,7 +377,7 @@ export const Group_horizontal = () => {
 }
 
 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 = () => {
       <ResizeGroup direction={direction}>
         <ResizeItem
           onChange={() => { setText('resizing') }}
-          onResizeEnd={() => { setText('test') }}
+          onResizeEnd={() => { setText('drag to resize') }}
           defaultSize={8}
         >
             <ResizeGroup direction='horizontal'>
               <ResizeItem
                 style={{ backgroundColor: 'rgba(var(--semi-grey-1), 1)', }}
                 onChange={() => { setText('resizing') }}
-                onResizeEnd={() => { setText('test') }}
+                onResizeEnd={() => { setText('drag to resize') }}
               >
                 <div style={{ marginLeft: '20%', border: 'var(--semi-color-border) solid 1px', padding:'5px' }}>
                   {text}

diff --git 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<ResizeGroupProps, ResizeGroupState> {
     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<ResizeGroupProps, ResizeGroupState> {
 
     componentWillUnmount() {
         this.foundation.destroy();
-        window.removeEventListener('resize', this.foundation.calculateSpace);
+        window.removeEventListener('resize', this.foundation.ensureConstraint);
     }
 
     get adapter(): ResizeGroupAdapter<ResizeGroupProps, ResizeGroupState> {

diff --git a/packages/semi-ui/resizable/group/resizeItem.tsx b/packages/semi-ui/resizable/group/resizeItem.tsx
@@ -58,6 +58,7 @@ class ResizeItem extends BaseComponent<ResizeItemProps, ResizeItemState> {
         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中判断方向是否有变化