@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
73 lines • 6.63 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React, { useRef } from 'react';
import { Transition } from 'react-transition-group';
import clsx from 'clsx';
import { InternalButton } from '../../../button/internal';
import PanelResizeHandle from '../../../internal/components/panel-resize-handle';
import customCssProps from '../../../internal/generated/custom-css-properties';
import { getLimitedValue } from '../../../split-panel/utils/size-utils';
import { getDrawerStyles } from '../compute-layout';
import { useResize } from './use-resize';
import sharedStyles from '../../resize/styles.css.js';
import testutilStyles from '../../test-classes/styles.css.js';
import styles from './styles.css.js';
function AppLayoutGlobalDrawerImplementation({ appLayoutInternals, show, activeGlobalDrawer, }) {
var _a, _b, _c, _d, _e, _f;
const { ariaLabels, globalDrawersFocusControl, isMobile, placement, onActiveGlobalDrawersChange, onActiveDrawerResize, minGlobalDrawersSizes, maxGlobalDrawersSizes, activeGlobalDrawersSizes, verticalOffsets, drawersOpenQueue, } = appLayoutInternals;
const drawerRef = useRef(null);
const activeDrawerId = (_a = activeGlobalDrawer === null || activeGlobalDrawer === void 0 ? void 0 : activeGlobalDrawer.id) !== null && _a !== void 0 ? _a : '';
const computedAriaLabels = {
closeButton: activeGlobalDrawer ? (_b = activeGlobalDrawer.ariaLabels) === null || _b === void 0 ? void 0 : _b.closeButton : ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.toolsClose,
content: activeGlobalDrawer ? (_c = activeGlobalDrawer.ariaLabels) === null || _c === void 0 ? void 0 : _c.drawerName : ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.tools,
};
const { drawerTopOffset, drawerHeight } = getDrawerStyles(verticalOffsets, isMobile, placement);
const activeDrawerSize = (_d = (activeDrawerId ? activeGlobalDrawersSizes[activeDrawerId] : 0)) !== null && _d !== void 0 ? _d : 0;
const minDrawerSize = (_e = (activeDrawerId ? minGlobalDrawersSizes[activeDrawerId] : 0)) !== null && _e !== void 0 ? _e : 0;
const maxDrawerSize = (_f = (activeDrawerId ? maxGlobalDrawersSizes[activeDrawerId] : 0)) !== null && _f !== void 0 ? _f : 0;
const refs = globalDrawersFocusControl.refs[activeDrawerId];
const resizeProps = useResize({
currentWidth: activeDrawerSize,
minWidth: minDrawerSize,
maxWidth: maxDrawerSize,
panelRef: drawerRef,
handleRef: refs === null || refs === void 0 ? void 0 : refs.slider,
onResize: size => onActiveDrawerResize({ id: activeDrawerId, size }),
});
const size = getLimitedValue(minDrawerSize, activeDrawerSize, maxDrawerSize);
const lastOpenedDrawerId = drawersOpenQueue.length ? drawersOpenQueue[0] : null;
const hasTriggerButton = !!(activeGlobalDrawer === null || activeGlobalDrawer === void 0 ? void 0 : activeGlobalDrawer.trigger);
const animationDisabled = (activeGlobalDrawer === null || activeGlobalDrawer === void 0 ? void 0 : activeGlobalDrawer.defaultActive) && !drawersOpenQueue.includes(activeGlobalDrawer.id);
return (React.createElement(Transition, { nodeRef: drawerRef, in: show, appear: show, timeout: 0 }, state => {
var _a;
return (React.createElement("aside", { id: activeDrawerId, "aria-hidden": !show, "aria-label": computedAriaLabels.content, className: clsx(styles.drawer, styles['drawer-global'], styles[state], !animationDisabled && sharedStyles['with-motion-horizontal'], {
[styles['drawer-hidden']]: !show,
[styles['last-opened']]: lastOpenedDrawerId === activeDrawerId,
[testutilStyles['active-drawer']]: show,
}), ref: drawerRef, onBlur: e => {
// Drawers with trigger buttons follow this restore focus logic:
// If a previously focused element exists, restore focus on it; otherwise, focus on the associated trigger button.
// This function resets the previously focused element.
// If the drawer has no trigger button and loses focus on the previously focused element, it defaults to document.body,
// which ideally should never happen.
if (!hasTriggerButton) {
return;
}
if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget)) {
globalDrawersFocusControl.loseFocus();
}
}, style: Object.assign({ blockSize: drawerHeight, insetBlockStart: drawerTopOffset }, (!isMobile && {
[customCssProps.drawerSize]: `${['entering', 'entered'].includes(state) ? size : 0}px`,
})), "data-testid": `awsui-app-layout-drawer-${activeDrawerId}` },
!isMobile && (activeGlobalDrawer === null || activeGlobalDrawer === void 0 ? void 0 : activeGlobalDrawer.resizable) && (React.createElement("div", { className: styles['drawer-slider'] },
React.createElement(PanelResizeHandle, { ref: refs === null || refs === void 0 ? void 0 : refs.slider, position: "side", className: testutilStyles['drawers-slider'], ariaLabel: (_a = activeGlobalDrawer === null || activeGlobalDrawer === void 0 ? void 0 : activeGlobalDrawer.ariaLabels) === null || _a === void 0 ? void 0 : _a.resizeHandle, ariaValuenow: resizeProps.relativeSize, onKeyDown: resizeProps.onKeyDown, onPointerDown: resizeProps.onPointerDown }))),
React.createElement("div", { className: clsx(styles['drawer-content-container'], sharedStyles['with-motion-horizontal']), "data-testid": `awsui-app-layout-drawer-content-${activeDrawerId}` },
React.createElement("div", { className: clsx(styles['drawer-close-button']) },
React.createElement(InternalButton, { ariaLabel: computedAriaLabels.closeButton, className: clsx({
[testutilStyles['active-drawer-close-button']]: activeDrawerId,
}), formAction: "none", iconName: isMobile ? 'close' : 'angle-right', onClick: () => onActiveGlobalDrawersChange(activeDrawerId, { initiatedByUserAction: true }), ref: refs === null || refs === void 0 ? void 0 : refs.close, variant: "icon" })),
React.createElement("div", { className: styles['drawer-content'], style: { blockSize: drawerHeight } }, activeGlobalDrawer === null || activeGlobalDrawer === void 0 ? void 0 : activeGlobalDrawer.content))));
}));
}
export default AppLayoutGlobalDrawerImplementation;
//# sourceMappingURL=global-drawer.js.map