@blueprintjs/core
Version:
Core styles & components
91 lines • 4.06 kB
JavaScript
;
/*
* Copyright 2024 Palantir Technologies, Inc. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
Object.defineProperty(exports, "__esModule", { value: true });
exports.useLegacyOverlayStack = exports.modifyGlobalStack = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importDefault(require("react"));
var shim_1 = require("use-sync-external-store/shim");
var common_1 = require("../../common");
var globalStack = [];
var globalStackListeners = [];
/**
* Modify the global stack in-place and notify all listeners of the updated value.
*
* @public for testing
*/
var modifyGlobalStack = function (fn) {
fn(globalStack);
globalStackListeners.forEach(function (listener) { return listener(); });
};
exports.modifyGlobalStack = modifyGlobalStack;
var legacyGlobalOverlayStackStore = {
getSnapshot: function () { return globalStack; },
subscribe: function (listener) {
globalStackListeners.push(listener);
return function () {
var index = globalStackListeners.indexOf(listener);
globalStackListeners.splice(index, 1);
};
},
};
/**
* Legacy implementation of a global overlay stack which maintains state in a global variable.
* This is used for backwards-compatibility with overlay-based components in Blueprint v5.
* It will be removed in Blueprint v6 once `<OverlaysProvider>` is required.
*
* @see https://github.com/palantir/blueprint/wiki/Overlay2-migration
*/
function useLegacyOverlayStack() {
var stack = (0, shim_1.useSyncExternalStore)(legacyGlobalOverlayStackStore.subscribe, legacyGlobalOverlayStackStore.getSnapshot,
// server snapshot is the same as client snapshot
legacyGlobalOverlayStackStore.getSnapshot);
var getLastOpened = react_1.default.useCallback(function () { return stack[stack.length - 1]; }, [stack]);
var getThisOverlayAndDescendants = react_1.default.useCallback(function (id) {
var stackIndex = stack.findIndex(function (o) { return o.id === id; });
return stack.slice(stackIndex);
}, [stack]);
var resetStack = react_1.default.useCallback(function () {
(0, exports.modifyGlobalStack)(function (s) { return s.splice(0, s.length); });
}, []);
var openOverlay = react_1.default.useCallback(function (overlay) {
globalStack.push(overlay);
if (overlay.props.usePortal && overlay.props.hasBackdrop) {
// add a class to the body to prevent scrolling of content below the overlay
document.body.classList.add(common_1.Classes.OVERLAY_OPEN);
}
}, []);
var closeOverlay = react_1.default.useCallback(function (id) {
var otherOverlaysWithBackdrop = stack.filter(function (o) { return o.props.usePortal && o.props.hasBackdrop && o.id !== id; });
var index = globalStack.findIndex(function (o) { return o.id === id; });
if (index > -1) {
globalStack.splice(index, 1);
}
if (otherOverlaysWithBackdrop.length === 0) {
// remove body class which prevents scrolling of content below overlay
document.body.classList.remove(common_1.Classes.OVERLAY_OPEN);
}
}, [stack]);
return {
closeOverlay: closeOverlay,
getLastOpened: getLastOpened,
getThisOverlayAndDescendants: getThisOverlayAndDescendants,
openOverlay: openOverlay,
resetStack: resetStack,
};
}
exports.useLegacyOverlayStack = useLegacyOverlayStack;
//# sourceMappingURL=useLegacyOverlayStack.js.map