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中判断方向是否有变化