@rc-component/util 1.10.0 → 1.10.1

package/es/Dom/focus.js

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import isVisible from "./isVisible";
 import useId from "../hooks/useId";
 function focusable(node, includePositive = false) {
@@ -173,6 +173,30 @@ export function lockFocus(element, id) {
   };
 }
 
+/**
+ * Retry an effect until it reports ready.
+ * When `ready` is `false`, it will schedule one more effect cycle and call `func` again
+ * with the next `retryTimes`.
+ */
+
+function useRetryEffect(func, deps) {
+  /* eslint-disable react-hooks/exhaustive-deps */
+  const retryTimesRef = useRef(0);
+  const [retryMark, setRetryMark] = useState(0);
+  useEffect(() => {
+    retryTimesRef.current = 0;
+  }, deps);
+  useEffect(() => {
+    const [clearFn, ready] = func(retryTimesRef.current);
+    if (!ready) {
+      retryTimesRef.current += 1;
+      setRetryMark(count => count + 1);
+    }
+    return clearFn;
+  }, [...deps, retryMark]);
+  /* eslint-enable react-hooks/exhaustive-deps */
+}
+
 /**
  * Lock focus within an element.
  * When locked, focus will be restricted to focusable elements within the specified element.
@@ -181,14 +205,19 @@ export function lockFocus(element, id) {
  */
 export function useLockFocus(lock, getElement) {
   const id = useId();
-  useEffect(() => {
-    if (lock) {
-      const element = getElement();
-      if (element) {
-        return lockFocus(element, id);
-      }
+  const getElementRef = useRef(getElement);
+  getElementRef.current = getElement;
+  const lockEffect = retryTimes => {
+    if (!lock) {
+      return [undefined, true];
+    }
+    const element = getElementRef.current();
+    if (element) {
+      return [lockFocus(element, id), true];
     }
-  }, [lock, id]);
+    return [undefined, retryTimes >= 1];
+  };
+  useRetryEffect(lockEffect, [id, lock]);
   const ignoreElement = ele => {
     if (ele) {
       // Set the ignored element using stable ID

package/lib/Dom/focus.js

@@ -183,6 +183,30 @@ function lockFocus(element, id) {
   };
 }
 
+/**
+ * Retry an effect until it reports ready.
+ * When `ready` is `false`, it will schedule one more effect cycle and call `func` again
+ * with the next `retryTimes`.
+ */
+
+function useRetryEffect(func, deps) {
+  /* eslint-disable react-hooks/exhaustive-deps */
+  const retryTimesRef = (0, _react.useRef)(0);
+  const [retryMark, setRetryMark] = (0, _react.useState)(0);
+  (0, _react.useEffect)(() => {
+    retryTimesRef.current = 0;
+  }, deps);
+  (0, _react.useEffect)(() => {
+    const [clearFn, ready] = func(retryTimesRef.current);
+    if (!ready) {
+      retryTimesRef.current += 1;
+      setRetryMark(count => count + 1);
+    }
+    return clearFn;
+  }, [...deps, retryMark]);
+  /* eslint-enable react-hooks/exhaustive-deps */
+}
+
 /**
  * Lock focus within an element.
  * When locked, focus will be restricted to focusable elements within the specified element.
@@ -191,14 +215,19 @@ function lockFocus(element, id) {
  */
 function useLockFocus(lock, getElement) {
   const id = (0, _useId.default)();
-  (0, _react.useEffect)(() => {
-    if (lock) {
-      const element = getElement();
-      if (element) {
-        return lockFocus(element, id);
-      }
+  const getElementRef = (0, _react.useRef)(getElement);
+  getElementRef.current = getElement;
+  const lockEffect = retryTimes => {
+    if (!lock) {
+      return [undefined, true];
+    }
+    const element = getElementRef.current();
+    if (element) {
+      return [lockFocus(element, id), true];
     }
-  }, [lock, id]);
+    return [undefined, retryTimes >= 1];
+  };
+  useRetryEffect(lockEffect, [id, lock]);
   const ignoreElement = ele => {
     if (ele) {
       // Set the ignored element using stable ID

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rc-component/util",
-  "version": "1.10.0",
+  "version": "1.10.1",
   "description": "Common Utils For React Component",
   "keywords": [
     "react",