@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
74 lines • 6.53 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 { createWidgetizedComponent } from '../../../internal/widgets';
import { getLimitedValue } from '../../../split-panel/utils/size-utils';
import { TOOLS_DRAWER_ID } from '../../utils/use-drawers';
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';
export function AppLayoutDrawerImplementation({ appLayoutInternals }) {
var _a, _b, _c;
const { activeDrawer, minDrawerSize, activeDrawerSize, maxDrawerSize, ariaLabels, drawers, drawersFocusControl, isMobile, placement, verticalOffsets, drawersOpenQueue, onActiveDrawerChange, onActiveDrawerResize, } = appLayoutInternals;
const drawerRef = useRef(null);
const activeDrawerId = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.id;
const computedAriaLabels = {
closeButton: activeDrawer ? (_a = activeDrawer.ariaLabels) === null || _a === void 0 ? void 0 : _a.closeButton : ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.toolsClose,
content: activeDrawer ? (_b = activeDrawer.ariaLabels) === null || _b === void 0 ? void 0 : _b.drawerName : ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.tools,
};
const { drawerTopOffset, drawerHeight } = getDrawerStyles(verticalOffsets, isMobile, placement);
const toolsOnlyMode = drawers.length === 1 && drawers[0].id === TOOLS_DRAWER_ID;
const isToolsDrawer = (activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.id) === TOOLS_DRAWER_ID || toolsOnlyMode;
const toolsContent = (_c = drawers === null || drawers === void 0 ? void 0 : drawers.find(drawer => drawer.id === TOOLS_DRAWER_ID)) === null || _c === void 0 ? void 0 : _c.content;
const resizeProps = useResize({
currentWidth: activeDrawerSize,
minWidth: minDrawerSize,
maxWidth: maxDrawerSize,
panelRef: drawerRef,
handleRef: drawersFocusControl.refs.slider,
onResize: size => onActiveDrawerResize({ id: activeDrawerId, size }),
});
// temporary handle a situation when app-layout is old, but this component come as a widget
const isLegacyDrawer = drawersOpenQueue === undefined;
const size = getLimitedValue(minDrawerSize, activeDrawerSize, maxDrawerSize);
const lastOpenedDrawerId = (drawersOpenQueue === null || drawersOpenQueue === void 0 ? void 0 : drawersOpenQueue.length) ? drawersOpenQueue[0] : activeDrawerId;
const animationDisabled = (activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.defaultActive) && !drawersOpenQueue.includes(activeDrawer.id);
return (React.createElement(Transition, { nodeRef: drawerRef, in: !!activeDrawer, appear: true, timeout: 0 }, state => {
var _a;
return (React.createElement("aside", { id: activeDrawerId, "aria-hidden": !activeDrawer, "aria-label": computedAriaLabels.content, className: clsx(styles.drawer, {
[sharedStyles['with-motion-horizontal']]: !animationDisabled,
[styles['last-opened']]: lastOpenedDrawerId === activeDrawerId,
[styles.legacy]: isLegacyDrawer,
[testutilStyles['active-drawer']]: !toolsOnlyMode && activeDrawerId,
[testutilStyles.tools]: isToolsDrawer,
[styles['drawer-hidden']]: !activeDrawer,
[testutilStyles['drawer-closed']]: !activeDrawer,
}), ref: drawerRef, onBlur: e => {
if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget)) {
drawersFocusControl.loseFocus();
}
}, style: Object.assign({ blockSize: drawerHeight, insetBlockStart: drawerTopOffset }, (!isMobile &&
!isLegacyDrawer && {
[customCssProps.drawerSize]: `${['entering', 'entered'].includes(state) ? size : 0}px`,
})), "data-testid": activeDrawerId && `awsui-app-layout-drawer-${activeDrawerId}` },
!isMobile && (activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.resizable) && (React.createElement("div", { className: styles['drawer-slider'] },
React.createElement(PanelResizeHandle, { ref: drawersFocusControl.refs.slider, position: "side", className: testutilStyles['drawers-slider'], ariaLabel: (_a = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.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']) },
React.createElement("div", { className: clsx(styles['drawer-close-button']) },
React.createElement(InternalButton, { ariaLabel: computedAriaLabels.closeButton, className: clsx({
[testutilStyles['active-drawer-close-button']]: !isToolsDrawer && activeDrawerId,
[testutilStyles['tools-close']]: isToolsDrawer,
}), formAction: "none", iconName: isMobile ? 'close' : 'angle-right', onClick: () => onActiveDrawerChange(null, { initiatedByUserAction: true }), ref: drawersFocusControl.refs.close, variant: "icon" })),
React.createElement("div", { className: clsx(styles['drawer-content'], activeDrawerId !== TOOLS_DRAWER_ID && styles['drawer-content-hidden']), style: { blockSize: drawerHeight } }, toolsContent),
activeDrawerId !== TOOLS_DRAWER_ID && (React.createElement("div", { className: styles['drawer-content'], style: { blockSize: drawerHeight } }, activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.content)))));
}));
}
export const createWidgetizedAppLayoutDrawer = createWidgetizedComponent(AppLayoutDrawerImplementation);
//# sourceMappingURL=local-drawer.js.map