@atlaskit/atlassian-navigation
Version:
A horizontal navigation component for Atlassian products.
105 lines (102 loc) • 4.01 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.PrimaryItemsContainer = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = require("react");
var _react2 = require("@emotion/react");
var _popup = _interopRequireDefault(require("@atlaskit/popup"));
var _widthDetector = require("@atlaskit/width-detector");
var _constants = require("../../common/constants");
var _overflow = require("../../controllers/overflow");
var _PrimaryDropdownButton = require("../PrimaryDropdownButton");
/** @jsx jsx */
var containerStyles = (0, _react2.css)({
display: 'flex',
height: '100%',
position: 'relative',
alignItems: 'stretch',
flexBasis: 0,
flexGrow: 1,
flexShrink: 0,
// eslint-disable-next-line @repo/internal/styles/no-nested-styles
'& > *': {
margin: "0 ".concat(_constants.gridSize / 2, "px"),
flexShrink: 0
}
});
var widthObserverContainerStyles = (0, _react2.css)({
width: '100%',
minWidth: '1px',
margin: '0px',
position: 'relative',
flexShrink: 1
});
// Internal only
// eslint-disable-next-line @repo/internal/react/require-jsdoc
var PrimaryItemsContainer = function PrimaryItemsContainer(_ref) {
var moreLabel = _ref.moreLabel,
items = _ref.items,
Create = _ref.create,
theme = _ref.theme,
testId = _ref.testId;
var _useState = (0, _react.useState)(false),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
isMoreOpen = _useState2[0],
setIsMoreOpen = _useState2[1];
var _useOverflowControlle = (0, _overflow.useOverflowController)(items),
updateWidth = _useOverflowControlle.updateWidth,
visibleItems = _useOverflowControlle.visibleItems,
overflowItems = _useOverflowControlle.overflowItems;
var onMoreClick = (0, _react.useCallback)(function () {
setIsMoreOpen(!isMoreOpen);
}, [isMoreOpen, setIsMoreOpen]);
var onMoreClose = (0, _react.useCallback)(function () {
setIsMoreOpen(false);
}, []);
var openOverflowMenu = (0, _react.useCallback)(function () {
setIsMoreOpen(true);
}, []);
var trigger = (0, _react.useCallback)(function (triggerProps) {
return (0, _react2.jsx)(_PrimaryDropdownButton.PrimaryDropdownButton, (0, _extends2.default)({
onClick: onMoreClick,
isSelected: isMoreOpen,
testId: testId ? "".concat(testId, "-overflow-menu-trigger") : 'overflow-menu-trigger'
}, triggerProps), moreLabel);
}, [moreLabel, onMoreClick, isMoreOpen, testId]);
var content = (0, _react.useCallback)(function () {
return (0, _react2.jsx)(_overflow.OverflowProvider, {
isVisible: false,
openOverflowMenu: openOverflowMenu,
closeOverflowMenu: onMoreClose
}, overflowItems);
},
// Overflow items has an unstable reference - so we will only recalculate
// content if `overflowItems` length changes.
// eslint-disable-next-line react-hooks/exhaustive-deps
[overflowItems.length, openOverflowMenu, onMoreClose]);
return (0, _react2.jsx)("div", {
css: containerStyles,
"data-testid": testId && "".concat(testId, "-primary-actions")
}, (0, _react2.jsx)(_overflow.OverflowProvider, {
isVisible: true,
openOverflowMenu: openOverflowMenu,
closeOverflowMenu: onMoreClose
}, visibleItems), overflowItems.length > 0 && (0, _react2.jsx)(_popup.default, {
placement: "bottom-start",
content: content,
isOpen: isMoreOpen,
onClose: onMoreClose,
trigger: trigger,
testId: testId ? "".concat(testId, "-overflow-menu-popup") : 'overflow-menu-popup'
}), Create && (0, _react2.jsx)(Create, null), (0, _react2.jsx)("div", {
css: widthObserverContainerStyles
}, (0, _react2.jsx)(_widthDetector.WidthObserver, {
offscreen: true,
setWidth: updateWidth
})));
};
exports.PrimaryItemsContainer = PrimaryItemsContainer;