@atlaskit/atlassian-navigation
Version:
A horizontal navigation component for Atlassian apps.
111 lines (107 loc) • 5.42 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useOverflowController = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _throttle = _interopRequireDefault(require("lodash/throttle"));
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
// eslint-disable-next-line @atlassian/tangerine/import/entry-points
var THROTTLE_INTERVAL = 16 * 4;
var ITEM_APPROX_MINWIDTH = 70;
var calculateHash = function calculateHash(w, n) {
return w + '#' + n;
};
var updateHashRef = function updateHashRef(currentRef, value) {
currentRef.unshift(value);
currentRef.length = 3;
};
var useOverflowController = exports.useOverflowController = function useOverflowController(nodes) {
var items = _react.default.Children.toArray(nodes);
var _useState = (0, _react.useState)(9999),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
width = _useState2[0],
setWidth = _useState2[1];
var _useState3 = (0, _react.useState)(items.length),
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
itemsLimit = _useState4[0],
setItemsLimit = _useState4[1];
var _useState5 = (0, _react.useState)({}),
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
forceEffectValue = _useState6[0],
triggerForceEffect = _useState6[1];
// Storing items approximate width so we can try expanding when there is enough room
var itemsWidths = (0, _react.useRef)([]).current;
// Storing a couple of width + items count in order to stabilize
var hashRef = (0, _react.useRef)([]);
// AFP-2511 TODO: Fix automatic suppressions below
// eslint-disable-next-line react-hooks/exhaustive-deps
var throttleSetWidth = (0, _react.useCallback)((0, _throttle.default)(setWidth, THROTTLE_INTERVAL), [setWidth]);
(0, _react.useEffect)(function () {
var lastItemWidth = itemsWidths[itemsLimit] || 0;
var wasJustLimited = lastItemWidth < 0;
var currentHash = calculateHash(width, itemsLimit);
if (hashRef.current[0] === currentHash) {
// After removing an item, if width has not changed yet we schedule a force update
// to handle case where removing an item does not actually trigger width change
var t = setTimeout(function () {
updateHashRef(hashRef.current, '');
triggerForceEffect({});
}, THROTTLE_INTERVAL * 1.5);
return function () {
return clearTimeout(t);
};
}
if (wasJustLimited) {
// Width was updated either via resize or after changing the limit
// we cap the width between ITEM_APPROX_MINWIDTH and 2*ITEM_APPROX_MINWIDTH
// because width is throttled as when fast expanding/resizing partialWidth
// will not be reliable (edge case)
var partialWidth = Math.max(Math.min(width + lastItemWidth, ITEM_APPROX_MINWIDTH * 2), ITEM_APPROX_MINWIDTH);
itemsWidths[itemsLimit] = partialWidth;
}
if (width < ITEM_APPROX_MINWIDTH * 0.9 && itemsLimit) {
// If current width is less than an item approx width we remove an item
// marking the width as negative so we will calculate it on width update
// plus we set the hash to stabilise and not removing more than one element
// until we are sure width was updated
var nextHash = calculateHash(width, itemsLimit - 1);
if (hashRef.current.indexOf(nextHash) === -1) {
setItemsLimit(itemsLimit - 1);
itemsWidths[itemsLimit - 1] = -(width || 1);
updateHashRef(hashRef.current, nextHash);
}
return;
}
/**
* This is not necessarily equal to `lastItemWidth` because the
* ```js
* if (wasJustLimited) {}
* ```
* branch above modifies `itemsWidths`.
*
* Using `lastItemWidth` here can cause collapsing behavior to fail,
* such as the issue reported in DSP-7329.
*/
var currentLastItemWidth = itemsWidths[itemsLimit] || 0;
if (width - currentLastItemWidth > ITEM_APPROX_MINWIDTH * 1.1 && itemsLimit < items.length) {
// If we have enough room to accomodate next item width we increase the limit
// unless it has been recently removed
var _nextHash = calculateHash(width, itemsLimit + 1);
if (hashRef.current.indexOf(_nextHash) === -1) {
setItemsLimit(itemsLimit + 1);
updateHashRef(hashRef.current, _nextHash);
}
return;
}
return;
}, [width, hashRef, itemsLimit, itemsWidths, forceEffectValue, items.length]);
return {
visibleItems: items.slice(0, itemsLimit),
overflowItems: items.slice(itemsLimit),
updateWidth: throttleSetWidth
};
};