@ringcentral/juno 2.0.0 → 2.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/components/Tabs/Tabs/MoreMenuTabs/MoreMenuTabs.js +11 -8
  2. package/es6/components/Tabs/Tabs/MoreMenuTabs/MoreMenuTabs.js +12 -9
  3. package/package.json +1 -1
package/components/Tabs/Tabs/MoreMenuTabs/MoreMenuTabs.js CHANGED
@@ -22,6 +22,7 @@ exports.findChildrenByKey = function (childrenProp, key) {
22
22
  var _MoreMenuTabs = react_1.forwardRef(function (props, ref) {
23
23
  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"]);
24
24
  var onGroupInfoChange = MoreButtonProps.onGroupInfoChange, MoreButtonPropsRest = tslib_1.__rest(MoreButtonProps, ["onGroupInfoChange"]);
25
+ var prevChildren = foundation_1.usePrevious(function () { return childrenProp; });
25
26
  var isVertical = orientation === 'vertical';
26
27
  var oriStr = isVertical ? 'height' : 'width';
27
28
  var innerRef = react_1.useRef(null);
@@ -35,7 +36,7 @@ var _MoreMenuTabs = react_1.forwardRef(function (props, ref) {
35
36
  var groupingRef = react_1.useRef();
36
37
  var _b = tslib_1.__read(react_1.useState([]), 2), menuTabChild = _b[0], setMenuTabChild = _b[1];
37
38
  var _c = tslib_1.__read(react_1.useState(true), 2), useMoreMode = _c[0], setUseMoreMode = _c[1];
38
- var sizeChangeResolve = react_1.useRef(true);
39
+ var hasResizeRef = react_1.useRef(true);
39
40
  var forceUpdate = foundation_1.useForceUpdate();
40
41
  var sizeChange = function (size) {
41
42
  if (tabsSizeRef.current.height !== size.height ||
@@ -49,7 +50,7 @@ var _MoreMenuTabs = react_1.forwardRef(function (props, ref) {
49
50
  var _b = tslib_1.__read(_a, 1), entry = _b[0];
50
51
  var _c = entry.contentRect, width = _c.width, height = _c.height;
51
52
  var obj = { width: width, height: height };
52
- sizeChangeResolve.current = false;
53
+ hasResizeRef.current = true;
53
54
  throttleTabsSizeChange(obj);
54
55
  }, { mode: 'none' });
55
56
  var tabsSize = tabsSizeRef.current;
@@ -113,10 +114,10 @@ var _MoreMenuTabs = react_1.forwardRef(function (props, ref) {
113
114
  }, []);
114
115
  react_1.useEffect(function () {
115
116
  var _a;
116
- var currSelectMenuItem;
117
+ var currSelectTabItem;
117
118
  var tabRefsMap = tabRefsMapRef.current;
118
119
  if (tabRefsMap) {
119
- currSelectMenuItem = tslib_1.__spread(tabRefsMap).find(function (_a) {
120
+ currSelectTabItem = tslib_1.__spread(tabRefsMap).find(function (_a) {
120
121
  var _b = tslib_1.__read(_a, 2), mapValue = _b[1];
121
122
  return valueProp === mapValue.value || valueProp === mapValue.index;
122
123
  });
@@ -155,7 +156,7 @@ var _MoreMenuTabs = react_1.forwardRef(function (props, ref) {
155
156
  });
156
157
  });
157
158
  var limitSize = tabsSize[oriStr] - moreTabSizeRef.current[oriStr];
158
- var _a = utils_1.computeChildBySize(labelArray, currSelectMenuItem === null || currSelectMenuItem === void 0 ? void 0 : currSelectMenuItem[0], limitSize), tabsTabLabel = _a.plainArr, menuTabLabel = _a.groupArr;
159
+ var _a = utils_1.computeChildBySize(labelArray, currSelectTabItem === null || currSelectTabItem === void 0 ? void 0 : currSelectTabItem[0], limitSize), tabsTabLabel = _a.plainArr, menuTabLabel = _a.groupArr;
159
160
  computeGroupingInfo(tabsTabLabel, menuTabLabel);
160
161
  var tabsTabChild = tabsTabLabel.map(function (key) {
161
162
  return exports.findChildrenByKey(childrenProp, key);
@@ -191,18 +192,20 @@ var _MoreMenuTabs = react_1.forwardRef(function (props, ref) {
191
192
  if (tabsSize.width !== 0 && tabsSize.height !== 0) {
192
193
  // computed: 1.resize 2. valueProp 3.moreMenuClick
193
194
  // not computed: visible tab change
194
- if (((_a = groupingRef.current) === null || _a === void 0 ? void 0 : _a.tabs.includes((currSelectMenuItem === null || currSelectMenuItem === void 0 ? void 0 : currSelectMenuItem[0]) || '')) &&
195
- sizeChangeResolve.current === true) {
195
+ if (((_a = groupingRef.current) === null || _a === void 0 ? void 0 : _a.tabs.includes((currSelectTabItem === null || currSelectTabItem === void 0 ? void 0 : currSelectTabItem[0]) || '')) &&
196
+ !hasResizeRef.current &&
197
+ prevChildren === childrenProp) {
196
198
  return;
197
199
  }
198
200
  computeTabChild(tabsSize);
199
- sizeChangeResolve.current = true;
201
+ hasResizeRef.current = false;
200
202
  }
201
203
  }, [
202
204
  childrenProp,
203
205
  isVertical,
204
206
  onGroupInfoChange,
205
207
  oriStr,
208
+ prevChildren,
206
209
  tabsSize,
207
210
  valueProp,
208
211
  ]);
package/es6/components/Tabs/Tabs/MoreMenuTabs/MoreMenuTabs.js CHANGED
@@ -2,7 +2,7 @@ import { __assign, __makeTemplateObject, __read, __rest, __spread } from "tslib"
2
2
  import React, { createRef, forwardRef, useEffect, useMemo, useRef, useState, } from 'react';
3
3
  import isEqual from 'lodash/isEqual';
4
4
  import MuiTabs from '@material-ui/core/Tabs';
5
- import { styled, useForceUpdate, useForkRef, useResizeObserver, useThrottle, } from '../../../../foundation';
5
+ import { styled, useForceUpdate, useForkRef, usePrevious, useResizeObserver, useThrottle, } from '../../../../foundation';
6
6
  import { DEFAULT_MORE_MENU_TAB_LABEL, MoreMenuTab, } from '../MoreMenuTab';
7
7
  import { computeChildBySize, DEFAULT_SIZE, getDomBoundingClientSize, getKey, parseKey, } from './utils';
8
8
  export var findChildrenByKey = function (childrenProp, key) {
@@ -20,6 +20,7 @@ export var findChildrenByKey = function (childrenProp, key) {
20
20
  var _MoreMenuTabs = forwardRef(function (props, ref) {
21
21
  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"]);
22
22
  var onGroupInfoChange = MoreButtonProps.onGroupInfoChange, MoreButtonPropsRest = __rest(MoreButtonProps, ["onGroupInfoChange"]);
23
+ var prevChildren = usePrevious(function () { return childrenProp; });
23
24
  var isVertical = orientation === 'vertical';
24
25
  var oriStr = isVertical ? 'height' : 'width';
25
26
  var innerRef = useRef(null);
@@ -33,7 +34,7 @@ var _MoreMenuTabs = forwardRef(function (props, ref) {
33
34
  var groupingRef = useRef();
34
35
  var _b = __read(useState([]), 2), menuTabChild = _b[0], setMenuTabChild = _b[1];
35
36
  var _c = __read(useState(true), 2), useMoreMode = _c[0], setUseMoreMode = _c[1];
36
- var sizeChangeResolve = useRef(true);
37
+ var hasResizeRef = useRef(true);
37
38
  var forceUpdate = useForceUpdate();
38
39
  var sizeChange = function (size) {
39
40
  if (tabsSizeRef.current.height !== size.height ||
@@ -47,7 +48,7 @@ var _MoreMenuTabs = forwardRef(function (props, ref) {
47
48
  var _b = __read(_a, 1), entry = _b[0];
48
49
  var _c = entry.contentRect, width = _c.width, height = _c.height;
49
50
  var obj = { width: width, height: height };
50
- sizeChangeResolve.current = false;
51
+ hasResizeRef.current = true;
51
52
  throttleTabsSizeChange(obj);
52
53
  }, { mode: 'none' });
53
54
  var tabsSize = tabsSizeRef.current;
@@ -111,10 +112,10 @@ var _MoreMenuTabs = forwardRef(function (props, ref) {
111
112
  }, []);
112
113
  useEffect(function () {
113
114
  var _a;
114
- var currSelectMenuItem;
115
+ var currSelectTabItem;
115
116
  var tabRefsMap = tabRefsMapRef.current;
116
117
  if (tabRefsMap) {
117
- currSelectMenuItem = __spread(tabRefsMap).find(function (_a) {
118
+ currSelectTabItem = __spread(tabRefsMap).find(function (_a) {
118
119
  var _b = __read(_a, 2), mapValue = _b[1];
119
120
  return valueProp === mapValue.value || valueProp === mapValue.index;
120
121
  });
@@ -153,7 +154,7 @@ var _MoreMenuTabs = forwardRef(function (props, ref) {
153
154
  });
154
155
  });
155
156
  var limitSize = tabsSize[oriStr] - moreTabSizeRef.current[oriStr];
156
- var _a = computeChildBySize(labelArray, currSelectMenuItem === null || currSelectMenuItem === void 0 ? void 0 : currSelectMenuItem[0], limitSize), tabsTabLabel = _a.plainArr, menuTabLabel = _a.groupArr;
157
+ var _a = computeChildBySize(labelArray, currSelectTabItem === null || currSelectTabItem === void 0 ? void 0 : currSelectTabItem[0], limitSize), tabsTabLabel = _a.plainArr, menuTabLabel = _a.groupArr;
157
158
  computeGroupingInfo(tabsTabLabel, menuTabLabel);
158
159
  var tabsTabChild = tabsTabLabel.map(function (key) {
159
160
  return findChildrenByKey(childrenProp, key);
@@ -189,18 +190,20 @@ var _MoreMenuTabs = forwardRef(function (props, ref) {
189
190
  if (tabsSize.width !== 0 && tabsSize.height !== 0) {
190
191
  // computed: 1.resize 2. valueProp 3.moreMenuClick
191
192
  // not computed: visible tab change
192
- if (((_a = groupingRef.current) === null || _a === void 0 ? void 0 : _a.tabs.includes((currSelectMenuItem === null || currSelectMenuItem === void 0 ? void 0 : currSelectMenuItem[0]) || '')) &&
193
- sizeChangeResolve.current === true) {
193
+ if (((_a = groupingRef.current) === null || _a === void 0 ? void 0 : _a.tabs.includes((currSelectTabItem === null || currSelectTabItem === void 0 ? void 0 : currSelectTabItem[0]) || '')) &&
194
+ !hasResizeRef.current &&
195
+ prevChildren === childrenProp) {
194
196
  return;
195
197
  }
196
198
  computeTabChild(tabsSize);
197
- sizeChangeResolve.current = true;
199
+ hasResizeRef.current = false;
198
200
  }
199
201
  }, [
200
202
  childrenProp,
201
203
  isVertical,
202
204
  onGroupInfoChange,
203
205
  oriStr,
206
+ prevChildren,
204
207
  tabsSize,
205
208
  valueProp,
206
209
  ]);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ringcentral/juno",
3
- "version": "2.0.0",
3
+ "version": "2.0.1",
4
4
  "author": "RingCentral",
5
5
  "license": "MIT",
6
6
  "bugs": {