@atlaskit/atlassian-navigation
Version:
A horizontal navigation component for Atlassian apps.
156 lines (149 loc) • 7.2 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useOverflowStatus = exports.useOverflowController = exports.default = exports.OverflowProvider = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _throttle = _interopRequireDefault(require("lodash/throttle"));
var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
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
// oxlint-disable-next-line @atlassian/no-restricted-imports
// Prevent width detector from triggering too many re-renders
var THROTTLE_INTERVAL = 16 * 4;
// Approx min width of items (based of "More" size)
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 OverflowContext = /*#__PURE__*/(0, _react.createContext)({
isVisible: true,
openOverflowMenu: _noop.default,
closeOverflowMenu: _noop.default
});
// eslint-disable-next-line @repo/internal/react/require-jsdoc
var OverflowProvider = exports.OverflowProvider = function OverflowProvider(_ref) {
var children = _ref.children,
isVisible = _ref.isVisible,
openOverflowMenu = _ref.openOverflowMenu,
closeOverflowMenu = _ref.closeOverflowMenu;
var Provider = OverflowContext.Provider;
var value = (0, _react.useMemo)(function () {
return {
isVisible: isVisible,
openOverflowMenu: openOverflowMenu,
closeOverflowMenu: closeOverflowMenu
};
}, [isVisible, openOverflowMenu, closeOverflowMenu]);
return /*#__PURE__*/_react.default.createElement(Provider, {
value: value
}, children);
};
/**
* __useOverFlowStatus__
*
* Returns the current context value for the nearest OverflowProvider.
*
* - [Example](https://atlassian.design/components/atlassian-navigation/examples#responsive)
*
* @deprecated `@atlaskit/atlassian-navigation` is deprecated. Use `@atlaskit/navigation-system` instead.
*/
var useOverflowStatus = exports.useOverflowStatus = function useOverflowStatus() {
return (0, _react.useContext)(OverflowContext);
};
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
};
};
// Used to extract props for useOverflowStatus();
// eslint-disable-next-line import/no-anonymous-default-export
var _default = exports.default = function _default(_props) {};