@atlaskit/navigation-system
Version:
The latest navigation system for Atlassian apps.
79 lines (78 loc) • 3.6 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useSideNavVisibilityCallbacks = useSideNavVisibilityCallbacks;
var _react = require("react");
var _usePreviousValue = _interopRequireDefault(require("@atlaskit/ds-lib/use-previous-value"));
/**
* Calls the `onExpand` and `onCollapse` callbacks as required.
* This is used for both user-provided callbacks, as well as internal callbacks to respond to visibility state changes.
*/
function useSideNavVisibilityCallbacks(_ref) {
var onExpand = _ref.onExpand,
onCollapse = _ref.onCollapse,
isExpandedOnDesktop = _ref.isExpandedOnDesktop,
isExpandedOnMobile = _ref.isExpandedOnMobile,
lastTrigger = _ref.lastTrigger;
// Wrapping in refs so we can call them in `useEffect` without changes to them triggering the `useEffect`
var onExpandRef = (0, _react.useRef)(onExpand);
var onCollapseRef = (0, _react.useRef)(onCollapse);
(0, _react.useEffect)(function () {
onExpandRef.current = onExpand;
onCollapseRef.current = onCollapse;
}, [onExpand, onCollapse]);
var previousIsExpandedOnDesktop = (0, _usePreviousValue.default)(isExpandedOnDesktop);
(0, _react.useEffect)(function () {
if (previousIsExpandedOnDesktop === undefined || previousIsExpandedOnDesktop === isExpandedOnDesktop) {
/**
* The previous value is `undefined` on initialization, so if it is `undefined` then the value hasn't changed.
*
* The previous value can be equal to the current one if the component re-renders due to something else changing.
*
* In both cases the value hasn't changed and we don't want to notify consumers.
*/
return;
}
if (isExpandedOnDesktop) {
var _onExpandRef$current;
(_onExpandRef$current = onExpandRef.current) === null || _onExpandRef$current === void 0 || _onExpandRef$current.call(onExpandRef, {
screen: 'desktop',
trigger: lastTrigger
});
} else {
var _onCollapseRef$curren;
(_onCollapseRef$curren = onCollapseRef.current) === null || _onCollapseRef$curren === void 0 || _onCollapseRef$curren.call(onCollapseRef, {
screen: 'desktop',
trigger: lastTrigger
});
}
}, [previousIsExpandedOnDesktop, isExpandedOnDesktop, lastTrigger]);
var previousIsExpandedOnMobile = (0, _usePreviousValue.default)(isExpandedOnMobile);
(0, _react.useEffect)(function () {
if (previousIsExpandedOnMobile === undefined || previousIsExpandedOnMobile === isExpandedOnMobile) {
/**
* The previous value is `undefined` on initialization, so if it is `undefined` then the value hasn't changed.
*
* The previous value can be equal to the current one if the component re-renders due to something else changing.
*
* In both cases the value hasn't changed and we don't want to notify consumers.
*/
return;
}
if (isExpandedOnMobile) {
var _onExpandRef$current2;
(_onExpandRef$current2 = onExpandRef.current) === null || _onExpandRef$current2 === void 0 || _onExpandRef$current2.call(onExpandRef, {
screen: 'mobile',
trigger: lastTrigger
});
} else {
var _onCollapseRef$curren2;
(_onCollapseRef$curren2 = onCollapseRef.current) === null || _onCollapseRef$curren2 === void 0 || _onCollapseRef$curren2.call(onCollapseRef, {
screen: 'mobile',
trigger: lastTrigger
});
}
}, [previousIsExpandedOnMobile, isExpandedOnMobile, lastTrigger]);
}