@atlaskit/navigation-system
Version:
The latest navigation system for Atlassian apps.
87 lines (86 loc) • 3.45 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useToggleSideNav = useToggleSideNav;
var _react = require("react");
var _fg = require("@atlaskit/platform-feature-flags/fg");
var _setSideNavVisibilityState = require("./set-side-nav-visibility-state");
var _sideNavVisibilityState = require("./side-nav-visibility-state");
var _useExpandSideNav = require("./use-expand-side-nav");
/**
* __useToggleSideNav__
*
* Returns a function to toggle the side nav visibility.
*
* It will toggle the appropriate internal desktop or mobile side nav visibility state based on the current screen size.
*
* If you need a function to make the side nav visible, use `useExpandSideNav` instead.
*/
function useToggleSideNav() {
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
_ref$trigger = _ref.trigger,
trigger = _ref$trigger === void 0 ? 'programmatic' : _ref$trigger;
var setSideNavState = (0, _react.useContext)(_setSideNavVisibilityState.SetSideNavVisibilityState);
var sideNavState = (0, _react.useContext)(_sideNavVisibilityState.SideNavVisibilityState);
var expandSideNav = (0, _useExpandSideNav.useExpandSideNav)({
trigger: trigger
});
var isCollapsedOnDesktop = (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.desktop) === 'collapsed';
var isCollapsedOnMobile = (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.mobile) === 'collapsed';
var toggleSideNav = (0, _react.useCallback)(function () {
var _window$matchMedia = window.matchMedia('(min-width: 64rem)'),
isDesktop = _window$matchMedia.matches;
if ((0, _fg.fg)('platform_dst_nav4_skip_link_a11y_1')) {
var isExpanding = isDesktop ? isCollapsedOnDesktop : isCollapsedOnMobile;
if (isExpanding) {
expandSideNav();
} else {
setSideNavState(function (currentState) {
// No-op if the side nav state has not been initialised yet
// e.g. if the SideNav has not been mounted yet
if (!currentState) {
return null;
}
return {
mobile: isDesktop ? currentState.mobile : 'collapsed',
desktop: isDesktop ? 'collapsed' : currentState.desktop,
flyout: 'closed',
lastTrigger: trigger
};
});
}
return;
}
if (isDesktop) {
setSideNavState(function (currentState) {
// No-op if the side nav state has not been initialised yet
// e.g. if the SideNav has not been mounted yet
if (!currentState) {
return null;
}
return {
mobile: currentState.mobile,
desktop: currentState.desktop === 'expanded' ? 'collapsed' : 'expanded',
flyout: 'closed',
lastTrigger: trigger
};
});
} else {
setSideNavState(function (currentState) {
// No-op if the side nav state has not been initialised yet
// e.g. if the SideNav has not been mounted yet
if (!currentState) {
return null;
}
return {
desktop: currentState.desktop,
mobile: currentState.mobile === 'expanded' ? 'collapsed' : 'expanded',
flyout: 'closed',
lastTrigger: trigger
};
});
}
}, [expandSideNav, isCollapsedOnDesktop, isCollapsedOnMobile, setSideNavState, trigger]);
return toggleSideNav;
}