@atlaskit/navigation-system
Version:
The latest navigation system for Atlassian apps.
117 lines (116 loc) • 5.65 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useCssLayoutAreaStates = useCssLayoutAreaStates;
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = require("react");
var _bindEventListener = require("bind-event-listener");
function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
/**
* Observe CSS's responsive modes without loading the drag allocator or publishing
* measured widths back into CSS. Observe the host and independent occupied tracks;
* managed panels, TopNav and Banner are deliberately not observed during dragging.
*/
function useCssLayoutAreaStates(layoutRef, revision, isEnabled) {
var _useState = (0, _react.useState)({}),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
modes = _useState2[0],
setModes = _useState2[1];
(0, _react.useEffect)(function () {
var root = layoutRef === null || layoutRef === void 0 ? void 0 : layoutRef.current;
if (!root || !isEnabled) {
return;
}
var measure = function measure() {
var selectors = {
'side-nav': ':scope > nav[data-layout-slot]',
panel: '[data-layout-with-panel-slot]',
'chat-panel': ':scope > [data-layout-chat-panel]'
};
var next = {};
var _iterator = _createForOfIteratorHelper(['side-nav', 'panel', 'chat-panel']),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var area = _step.value;
var element = root.querySelector(selectors[area]);
if (element) {
next[area] = getComputedStyle(element).gridArea.split('/')[0].trim() === area ? 'inline' : 'overlay';
}
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
setModes(function (previous) {
return ['side-nav', 'panel', 'chat-panel'].every(function (area) {
return previous[area] === next[area];
}) ? previous : next;
});
};
var widths = new Map();
var observer = new ResizeObserver(function (entries) {
var changed = false;
var _iterator2 = _createForOfIteratorHelper(entries),
_step2;
try {
for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
var entry = _step2.value;
if (widths.get(entry.target) !== entry.contentRect.width) {
widths.set(entry.target, entry.contentRect.width);
changed = true;
}
}
} catch (err) {
_iterator2.e(err);
} finally {
_iterator2.f();
}
if (changed) {
measure();
}
});
var observeSlots = function observeSlots() {
observer.disconnect();
widths.clear();
var occupied = Array.from(root.children).filter(function (element) {
return element.matches('[data-layout-slot]:not(nav):not(header):not([role="main"]):not([data-layout-chat-panel])') && ['aside', 'ribbon', 'panel'].includes(getComputedStyle(element).gridArea.split('/')[0].trim());
});
for (var _i = 0, _arr = [root].concat((0, _toConsumableArray2.default)(occupied)); _i < _arr.length; _i++) {
var element = _arr[_i];
widths.set(element, element.getBoundingClientRect().width);
observer.observe(element);
}
measure();
};
observeSlots();
var mutations = new MutationObserver(observeSlots);
mutations.observe(root, {
childList: true
});
var queries = [window.matchMedia('(min-width: 40rem)'), window.matchMedia('(min-width: 64rem)')];
var unbind = [(0, _bindEventListener.bindAll)(window, [{
type: 'resize',
listener: measure
}])].concat((0, _toConsumableArray2.default)(queries.map(function (query) {
return (0, _bindEventListener.bindAll)(query, [{
type: 'change',
listener: measure
}]);
})));
return function () {
observer.disconnect();
mutations.disconnect();
unbind.forEach(function (cleanup) {
return cleanup();
});
};
}, [isEnabled, layoutRef, revision]);
return modes;
}