@awsui/components-react
Version:
On July 19th, 2022, we launched [Cloudscape Design System](https://cloudscape.design). Cloudscape is an evolution of AWS-UI. It consists of user interface guidelines, front-end components, design resources, and development tools for building intuitive, en
88 lines • 4.61 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import { useRef, useState } from 'react';
import { fireNonCancelableEvent } from '../../../internal/events';
import { mapRuntimeConfigToAiDrawer } from '../../runtime-drawer';
const DEFAULT_ON_CHANGE_PARAMS = { initiatedByUserAction: true };
const MIN_DRAWER_SIZE = 400;
export function useBottomDrawers({ onBottomDrawerFocus, expandedDrawerId, setExpandedDrawerId, drawersOpenQueue, }) {
var _a, _b, _c;
const [activeBottomDrawerId, setActiveBottomDrawerId] = useState(null);
const [drawerSizes, setDrawerSizes] = useState({});
const [runtimeBottomDrawers, setRuntimeBottomDrawers] = useState([]);
const bottomDrawerWasOpenRef = useRef(false);
bottomDrawerWasOpenRef.current = bottomDrawerWasOpenRef.current || !!activeBottomDrawerId;
const bottomDrawers = runtimeBottomDrawers.map(mapRuntimeConfigToAiDrawer);
function onActiveBottomDrawerResize({ id, size }) {
setDrawerSizes(oldSizes => ({ ...oldSizes, [id]: size }));
fireNonCancelableEvent(activeBottomDrawer === null || activeBottomDrawer === void 0 ? void 0 : activeBottomDrawer.onResize, { id, size });
}
function onActiveBottomDrawerChange(drawerId, { initiatedByUserAction } = DEFAULT_ON_CHANGE_PARAMS) {
const drawer = bottomDrawers.find(drawer => drawer.id === (drawerId || activeBottomDrawerId));
setActiveBottomDrawerId(drawerId);
fireNonCancelableEvent(drawer === null || drawer === void 0 ? void 0 : drawer.onToggle, { isOpen: !!drawerId, initiatedByUserAction });
if (activeBottomDrawerId === expandedDrawerId) {
setExpandedDrawerId(null);
}
if (drawerId) {
drawersOpenQueue.current = [drawerId, ...drawersOpenQueue.current];
}
else {
drawersOpenQueue.current = drawersOpenQueue.current.filter(id => id !== activeBottomDrawerId);
}
onBottomDrawerFocus === null || onBottomDrawerFocus === void 0 ? void 0 : onBottomDrawerFocus();
}
function bottomDrawersMessageHandler(event) {
if (event.type === 'registerBottomDrawer') {
if (bottomDrawers.find(drawer => drawer.id === event.payload.id)) {
return;
}
setRuntimeBottomDrawers(existingBottomDrawers => [...existingBottomDrawers, event.payload]);
if (!bottomDrawerWasOpenRef.current && event.payload.defaultActive) {
onActiveBottomDrawerChange(event.payload.id, { initiatedByUserAction: false });
}
return;
}
switch (event.type) {
case 'updateDrawerConfig':
setRuntimeBottomDrawers(existingBottomDrawers => {
return existingBottomDrawers.map(drawer => {
if (drawer.id === event.payload.id) {
return {
...drawer,
...event.payload,
};
}
return drawer;
});
});
break;
case 'openDrawer':
onActiveBottomDrawerChange(event.payload.id, { initiatedByUserAction: false });
break;
case 'closeDrawer':
onActiveBottomDrawerChange(null, { initiatedByUserAction: false });
break;
case 'resizeDrawer':
onActiveBottomDrawerResize({ id: event.payload.id, size: event.payload.size });
break;
}
}
const activeBottomDrawer = activeBottomDrawerId
? bottomDrawers.find(drawer => drawer.id === activeBottomDrawerId)
: null;
const activeBottomDrawerSize = activeBottomDrawerId
? ((_b = (_a = drawerSizes[activeBottomDrawerId]) !== null && _a !== void 0 ? _a : activeBottomDrawer === null || activeBottomDrawer === void 0 ? void 0 : activeBottomDrawer.defaultSize) !== null && _b !== void 0 ? _b : MIN_DRAWER_SIZE)
: 0;
const minBottomDrawerSize = Math.min((_c = activeBottomDrawer === null || activeBottomDrawer === void 0 ? void 0 : activeBottomDrawer.defaultSize) !== null && _c !== void 0 ? _c : MIN_DRAWER_SIZE, MIN_DRAWER_SIZE);
return {
bottomDrawers,
activeBottomDrawer,
onActiveBottomDrawerChange,
activeBottomDrawerSize,
minBottomDrawerSize,
onActiveBottomDrawerResize,
bottomDrawersMessageHandler,
};
}
//# sourceMappingURL=use-bottom-drawers.js.map