fix(OverlayTrigger)：拖动浏览器窗口大小onVisibleChange被高频率调用问题 (#738)

uiwjs · Apr 2, 2022 · 8b407ec · 8b407ec
1 parent 3a43b33
commit 8b407ec
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 9 deletions.
diff --git a/packages/react-overlay-trigger/README.md b/packages/react-overlay-trigger/README.md
@@ -229,6 +229,7 @@ class Demo extends React.Component {
   }
   onVisibleChange(isOpen) {
     console.log('onVisibleChange: ', isOpen);
+    this.setState({ isOpen: isOpen });
   }
   render() {
     return (

diff --git a/packages/react-overlay-trigger/src/index.tsx b/packages/react-overlay-trigger/src/index.tsx
@@ -133,15 +133,15 @@ export default React.forwardRef<OverlayTriggerRef, OverlayTriggerProps>((props,
   }
 
   useEffect(() => {
-    if (isClickOutside) {
+    if (isClickOutside && isOpen) {
       document && document.addEventListener('mousedown', handleClickOutside);
       window.addEventListener('resize', handleResize);
     }
     return () => {
       document && isClickOutside && document.removeEventListener('mousedown', handleClickOutside);
       window.removeEventListener('resize', handleResize);
     };
-  }, []);
+  }, [isOpen]);
 
   useEffect(() => {
     if (props.isOpen !== isOpen) {
@@ -162,9 +162,11 @@ export default React.forwardRef<OverlayTriggerRef, OverlayTriggerProps>((props,
   }, [isOpen]);
 
   const handleResize = () => {
-    zIndex.current -= 1;
-    setIsOpen(false);
-    onVisibleChange && onVisibleChange(false);
+    if (isOpen) {
+      zIndex.current -= 1;
+      setIsOpen(false);
+      onVisibleChange && onVisibleChange(false);
+    }
   };
 
   const handleClickOutside = (e: MouseEvent) => {

diff --git a/packages/react-search-select/README.md b/packages/react-search-select/README.md
@@ -512,7 +512,7 @@ ReactDOM.render(<Demo />, _mount_);
 | labelInValue | 开启会把 Select 的 value 类型从 `string/number` 变为 `{ value: string/number, label: string }` | Boolean | `false` | - |
 | showSearch | 是否可搜索 | Boolean | - | - |
 | size | 选择框尺寸 | Enum{large, default, small } | `default` | - |
-| tagProps | 将参数传递给 [`<Tag>`](https://uiwjs.github.io/#/components/tag) 组件 | `TagProps` | `{}` | `4.13.0` |
+| tagProps | 将参数传递给 [`<Tag>`](#/components/tag) 组件 | `TagProps` | `{}` | `4.13.0` |
 | onChange | 选中 option，或 input 的 value，调用此函数 | function(value:String \| Number \| String[] \| Number[] \| LabeledValue \| LabeledValue[]) | - | - |
 | onSearch | 文本框值变化时回调 | function(value: String) | - | - |
 | onSelect | 被选中时调用，参数为选中项的 value | function(value: String/Number ) | - | - |

diff --git a/packages/react-search-tree/README.md b/packages/react-search-tree/README.md
@@ -351,5 +351,5 @@ ReactDOM.render(<Demo />, _mount_);
 | onChange | 选中 option，或 input 的 value，调用此函数 | function(selectd, selectdAll, isChecked)=>void | - |
 | onSearch | 文本框值变化时回调 | function(searchValue) | - |
 | loading | 加载中状态 | Boolean | `false` |
-| emptyOption | 自定义下拉选项为空时显示内容 | React.ReactNode | [Empty](https://uiwjs.github.io/#/components/empty) |
-| tagProps | 将参数传递给 [`<Tag>`](https://uiwjs.github.io/#/components/tag) 组件 | `TagProps` | `{}` | `4.13.0` |
+| emptyOption | 自定义下拉选项为空时显示内容 | React.ReactNode | [Empty](#/components/empty) |
+| tagProps | 将参数传递给 [`<Tag>`](#/components/tag) 组件 | `TagProps` | `{}` | `4.13.0` |
diff --git a/packages/react-transfer/README.md b/packages/react-transfer/README.md
@@ -45,7 +45,7 @@ ReactDOM.render(<Demo />, _mount_);
 
 ## 树形节点
 
-使用 [Tree](https://uiwjs.github.io/#/components/tree) 结构作为选项节点
+使用 [`Tree`](#/components/tree) 结构作为选项节点
 
 <!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
 ```jsx