@ringcentral/juno 2.1.0 → 2.1.1

package/components/Tabs/Tabs/MoreMenuTabs/MoreMenuTabs.js

@@ -22,7 +22,7 @@ exports.findChildrenByKey = function (childrenProp, key) {
 var _MoreMenuTabs = react_1.forwardRef(function (props, ref) {
     var orientation = props.orientation, childrenProp = props.children, valueProp = props.value, onChange = props.onChange, _a = props.MoreButtonProps, MoreButtonProps = _a === void 0 ? {} : _a, rest = tslib_1.__rest(props, ["orientation", "children", "value", "onChange", "MoreButtonProps"]);
     var onGroupInfoChange = MoreButtonProps.onGroupInfoChange, MoreButtonPropsRest = tslib_1.__rest(MoreButtonProps, ["onGroupInfoChange"]);
-    var prevChildren = foundation_1.usePrevious(function () { return childrenProp; });
+    var prevChildrenProp = foundation_1.usePrevious(function () { return childrenProp; });
     var isVertical = orientation === 'vertical';
     var oriStr = isVertical ? 'height' : 'width';
     var innerRef = react_1.useRef(null);
@@ -54,42 +54,39 @@ var _MoreMenuTabs = react_1.forwardRef(function (props, ref) {
         throttleTabsSizeChange(obj);
     }, { mode: 'none' });
     var tabsSize = tabsSizeRef.current;
-    // init all children elm
-    if (tabRefsMapRef.current === undefined) {
-        var getRefsMapAndSetDefaultTabChildren = function () {
-            var tabRefs = new Map();
-            var tabsTabDefaultChild = [];
-            react_1.default.Children.forEach(childrenProp, function (child, index) {
-                var _a = child.props, ref = _a.ref, value = _a.value;
-                var innerRef = react_1.createRef();
-                var tabRef = ref ? foundation_1.useForkRef(innerRef, ref) : innerRef;
-                var childrenValue = value || index;
-                var children = react_1.default.cloneElement(child, {
-                    ref: tabRef,
-                    value: childrenValue,
-                });
-                var keyString = typeof child.key === 'string' ? child.key : '';
-                tabRefs.set(utils_1.getKey(keyString, index), {
-                    ref: tabRef,
-                    size: null,
-                    index: index,
-                    value: childrenValue,
-                });
-                tabsTabDefaultChild.push(children);
+    // initial tabRefsMapRef and tabsTabChildRef
+    if (tabRefsMapRef.current === undefined ||
+        prevChildrenProp !== childrenProp) {
+        var tabRefs_1 = new Map();
+        var tabsTabDefaultChild_1 = [];
+        react_1.default.Children.forEach(childrenProp, function (child, index) {
+            var _a = child.props, ref = _a.ref, value = _a.value;
+            var innerRef = react_1.createRef();
+            var tabRef = ref ? foundation_1.useForkRef(innerRef, ref) : innerRef;
+            var childrenValue = value || index;
+            var children = react_1.default.cloneElement(child, {
+                ref: tabRef,
+                value: childrenValue,
             });
-            return {
-                tabRefs: tabRefs,
-                tabsTabDefaultChild: tabsTabDefaultChild,
-            };
-        };
-        var _d = getRefsMapAndSetDefaultTabChildren(), tabRefs = _d.tabRefs, tabsTabDefaultChild = _d.tabsTabDefaultChild;
-        tabRefsMapRef.current = tabRefs;
-        tabsTabChildRef.current = tabsTabDefaultChild;
+            var keyString = typeof child.key === 'string' ? child.key : '';
+            tabRefs_1.set(utils_1.getKey(keyString, index), {
+                ref: tabRef,
+                size: null,
+                index: index,
+                value: childrenValue,
+            });
+            tabsTabDefaultChild_1.push(children);
+        });
+        tabRefsMapRef.current = tabRefs_1;
+        tabsTabChildRef.current = tabsTabDefaultChild_1;
     }
-    // get all size when first render
+    // get real render size when render
     react_1.useEffect(function () {
+        if (childrenProp === prevChildrenProp) {
+            return;
+        }
         var tabRefsMap = tabRefsMapRef.current;
-        if ((tabRefsMap === null || tabRefsMap === void 0 ? void 0 : tabRefsMap.size) !== undefined) {
+        if (tabRefsMap && tabRefsMap.size !== 0) {
             var allTabsSize_1 = tslib_1.__assign({}, utils_1.DEFAULT_SIZE);
             tabRefsMap.forEach(function (value, key) {
                 var _a = utils_1.getDomBoundingClientSize(value.ref.current), width = _a.width, height = _a.height;
@@ -110,8 +107,7 @@ var _MoreMenuTabs = react_1.forwardRef(function (props, ref) {
             var size = utils_1.getDomBoundingClientSize(moreElm);
             moreTabSizeRef.current = size;
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    }, [childrenProp, prevChildrenProp]);
     react_1.useEffect(function () {
         var _a;
         var currSelectTabItem;
@@ -190,11 +186,11 @@ var _MoreMenuTabs = react_1.forwardRef(function (props, ref) {
             }
         };
         if (tabsSize.width !== 0 && tabsSize.height !== 0) {
-            // computed: 1.resize 2. valueProp 3.moreMenuClick
+            // computed: 1.resize 2. valueProp 3.moreMenuClick 4.children change
             // not computed: visible tab change
             if (((_a = groupingRef.current) === null || _a === void 0 ? void 0 : _a.tabs.includes((currSelectTabItem === null || currSelectTabItem === void 0 ? void 0 : currSelectTabItem[0]) || '')) &&
                 !hasResizeRef.current &&
-                prevChildren === childrenProp) {
+                prevChildrenProp === childrenProp) {
                 return;
             }
             computeTabChild(tabsSize);
@@ -202,10 +198,10 @@ var _MoreMenuTabs = react_1.forwardRef(function (props, ref) {
         }
     }, [
         childrenProp,
+        prevChildrenProp,
         isVertical,
         onGroupInfoChange,
         oriStr,
-        prevChildren,
         tabsSize,
         valueProp,
     ]);

package/components/Tabs/Tabs/Tabs.js

@@ -12,9 +12,11 @@ var _RcTabs = react_1.forwardRef(function (inProps, ref) {
     var classesProp = props.classes, childrenProp = props.children, variantProp = props.variant, size = props.size, MoreButtonProps = props.MoreButtonProps, rest = tslib_1.__rest(props, ["classes", "children", "variant", "size", "MoreButtonProps"]);
     var isMore = variantProp === 'moreMenu';
     var classes = react_1.useMemo(function () { return foundation_1.combineProps(utils_1.RcTabsClasses, classesProp); }, [classesProp]);
-    var children = react_1.default.Children.map(childrenProp, function (child) {
-        return react_1.default.cloneElement(child, { size: size });
-    });
+    var children = react_1.useMemo(function () {
+        return react_1.default.Children.map(childrenProp, function (child) {
+            return react_1.default.cloneElement(child, { size: size });
+        });
+    }, [childrenProp, size]);
     if (isMore) {
         return (react_1.default.createElement(MoreMenuTabs_1.MoreMenuTabs, tslib_1.__assign({}, rest, { ref: ref, classes: classes, size: size, MoreButtonProps: MoreButtonProps }), children));
     }

package/es6/components/Tabs/Tabs/MoreMenuTabs/MoreMenuTabs.js

@@ -20,7 +20,7 @@ export var findChildrenByKey = function (childrenProp, key) {
 var _MoreMenuTabs = forwardRef(function (props, ref) {
     var orientation = props.orientation, childrenProp = props.children, valueProp = props.value, onChange = props.onChange, _a = props.MoreButtonProps, MoreButtonProps = _a === void 0 ? {} : _a, rest = __rest(props, ["orientation", "children", "value", "onChange", "MoreButtonProps"]);
     var onGroupInfoChange = MoreButtonProps.onGroupInfoChange, MoreButtonPropsRest = __rest(MoreButtonProps, ["onGroupInfoChange"]);
-    var prevChildren = usePrevious(function () { return childrenProp; });
+    var prevChildrenProp = usePrevious(function () { return childrenProp; });
     var isVertical = orientation === 'vertical';
     var oriStr = isVertical ? 'height' : 'width';
     var innerRef = useRef(null);
@@ -52,42 +52,39 @@ var _MoreMenuTabs = forwardRef(function (props, ref) {
         throttleTabsSizeChange(obj);
     }, { mode: 'none' });
     var tabsSize = tabsSizeRef.current;
-    // init all children elm
-    if (tabRefsMapRef.current === undefined) {
-        var getRefsMapAndSetDefaultTabChildren = function () {
-            var tabRefs = new Map();
-            var tabsTabDefaultChild = [];
-            React.Children.forEach(childrenProp, function (child, index) {
-                var _a = child.props, ref = _a.ref, value = _a.value;
-                var innerRef = createRef();
-                var tabRef = ref ? useForkRef(innerRef, ref) : innerRef;
-                var childrenValue = value || index;
-                var children = React.cloneElement(child, {
-                    ref: tabRef,
-                    value: childrenValue,
-                });
-                var keyString = typeof child.key === 'string' ? child.key : '';
-                tabRefs.set(getKey(keyString, index), {
-                    ref: tabRef,
-                    size: null,
-                    index: index,
-                    value: childrenValue,
-                });
-                tabsTabDefaultChild.push(children);
+    // initial tabRefsMapRef and tabsTabChildRef
+    if (tabRefsMapRef.current === undefined ||
+        prevChildrenProp !== childrenProp) {
+        var tabRefs_1 = new Map();
+        var tabsTabDefaultChild_1 = [];
+        React.Children.forEach(childrenProp, function (child, index) {
+            var _a = child.props, ref = _a.ref, value = _a.value;
+            var innerRef = createRef();
+            var tabRef = ref ? useForkRef(innerRef, ref) : innerRef;
+            var childrenValue = value || index;
+            var children = React.cloneElement(child, {
+                ref: tabRef,
+                value: childrenValue,
             });
-            return {
-                tabRefs: tabRefs,
-                tabsTabDefaultChild: tabsTabDefaultChild,
-            };
-        };
-        var _d = getRefsMapAndSetDefaultTabChildren(), tabRefs = _d.tabRefs, tabsTabDefaultChild = _d.tabsTabDefaultChild;
-        tabRefsMapRef.current = tabRefs;
-        tabsTabChildRef.current = tabsTabDefaultChild;
+            var keyString = typeof child.key === 'string' ? child.key : '';
+            tabRefs_1.set(getKey(keyString, index), {
+                ref: tabRef,
+                size: null,
+                index: index,
+                value: childrenValue,
+            });
+            tabsTabDefaultChild_1.push(children);
+        });
+        tabRefsMapRef.current = tabRefs_1;
+        tabsTabChildRef.current = tabsTabDefaultChild_1;
     }
-    // get all size when first render
+    // get real render size when render
     useEffect(function () {
+        if (childrenProp === prevChildrenProp) {
+            return;
+        }
         var tabRefsMap = tabRefsMapRef.current;
-        if ((tabRefsMap === null || tabRefsMap === void 0 ? void 0 : tabRefsMap.size) !== undefined) {
+        if (tabRefsMap && tabRefsMap.size !== 0) {
             var allTabsSize_1 = __assign({}, DEFAULT_SIZE);
             tabRefsMap.forEach(function (value, key) {
                 var _a = getDomBoundingClientSize(value.ref.current), width = _a.width, height = _a.height;
@@ -108,8 +105,7 @@ var _MoreMenuTabs = forwardRef(function (props, ref) {
             var size = getDomBoundingClientSize(moreElm);
             moreTabSizeRef.current = size;
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    }, [childrenProp, prevChildrenProp]);
     useEffect(function () {
         var _a;
         var currSelectTabItem;
@@ -188,11 +184,11 @@ var _MoreMenuTabs = forwardRef(function (props, ref) {
             }
         };
         if (tabsSize.width !== 0 && tabsSize.height !== 0) {
-            // computed: 1.resize 2. valueProp 3.moreMenuClick
+            // computed: 1.resize 2. valueProp 3.moreMenuClick 4.children change
             // not computed: visible tab change
             if (((_a = groupingRef.current) === null || _a === void 0 ? void 0 : _a.tabs.includes((currSelectTabItem === null || currSelectTabItem === void 0 ? void 0 : currSelectTabItem[0]) || '')) &&
                 !hasResizeRef.current &&
-                prevChildren === childrenProp) {
+                prevChildrenProp === childrenProp) {
                 return;
             }
             computeTabChild(tabsSize);
@@ -200,10 +196,10 @@ var _MoreMenuTabs = forwardRef(function (props, ref) {
         }
     }, [
         childrenProp,
+        prevChildrenProp,
         isVertical,
         onGroupInfoChange,
         oriStr,
-        prevChildren,
         tabsSize,
         valueProp,
     ]);

package/es6/components/Tabs/Tabs/Tabs.js

@@ -10,9 +10,11 @@ var _RcTabs = forwardRef(function (inProps, ref) {
     var classesProp = props.classes, childrenProp = props.children, variantProp = props.variant, size = props.size, MoreButtonProps = props.MoreButtonProps, rest = __rest(props, ["classes", "children", "variant", "size", "MoreButtonProps"]);
     var isMore = variantProp === 'moreMenu';
     var classes = useMemo(function () { return combineProps(RcTabsClasses, classesProp); }, [classesProp]);
-    var children = React.Children.map(childrenProp, function (child) {
-        return React.cloneElement(child, { size: size });
-    });
+    var children = useMemo(function () {
+        return React.Children.map(childrenProp, function (child) {
+            return React.cloneElement(child, { size: size });
+        });
+    }, [childrenProp, size]);
     if (isMore) {
         return (React.createElement(MoreMenuTabs, __assign({}, rest, { ref: ref, classes: classes, size: size, MoreButtonProps: MoreButtonProps }), children));
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ringcentral/juno",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "author": "RingCentral",
   "license": "MIT",
   "bugs": {