@rc-component/util - npm Package Compare versions

Comparing version 1.10.0 to 1.10.1

es/Dom/focus.js

@@ -1,2 +0,2 @@
-import { useEffect } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import isVisible from "./isVisible";
@@ -177,2 +177,26 @@ import useId from "../hooks/useId";
 /**
+ * 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.
@@ -185,10 +209,15 @@ * When locked, focus will be restricted to focusable elements within the specified element.
   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];
     }
-  }, [lock, id]);
+    const element = getElementRef.current();
+    if (element) {
+      return [lockFocus(element, id), true];
+    }
+    return [undefined, retryTimes >= 1];
+  };
+  useRetryEffect(lockEffect, [id, lock]);
   const ignoreElement = ele => {
@@ -195,0 +224,0 @@ if (ele) {

lib/Dom/focus.js

@@ -187,2 +187,26 @@ "use strict";
 /**
+ * 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.
@@ -195,10 +219,15 @@ * When locked, focus will be restricted to focusable elements within the specified element.
   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];
     }
-  }, [lock, id]);
+    const element = getElementRef.current();
+    if (element) {
+      return [lockFocus(element, id), true];
+    }
+    return [undefined, retryTimes >= 1];
+  };
+  useRetryEffect(lockEffect, [id, lock]);
   const ignoreElement = ele => {
@@ -205,0 +234,0 @@ if (ele) {

package.json

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

No alert changes

Improved metrics

Total package byte prevSize

197852

0.95%

Lines of code

6498

0.84%

No dependency changes