@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
123 lines • 11.2 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 ButtonGroup from '../../../button-group/internal';
import PanelResizeHandle from '../../../internal/components/panel-resize-handle';
import customCssProps from '../../../internal/generated/custom-css-properties';
import { usePrevious } from '../../../internal/hooks/use-previous';
import { getLimitedValue } from '../../../split-panel/utils/size-utils';
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 AppLayoutGlobalAiDrawerImplementation({ appLayoutInternals, show, activeAiDrawer, aiDrawerProps, }) {
var _a, _b, _c, _d;
const { activeAiDrawerSize, minAiDrawerSize, maxAiDrawerSize, ariaLabels, aiDrawerFocusControl, isMobile, drawersOpenQueue, onActiveAiDrawerChange, onActiveDrawerResize, expandedDrawerId, setExpandedDrawerId, } = aiDrawerProps;
const { verticalOffsets, placement } = appLayoutInternals;
const drawerRef = useRef(null);
const activeDrawerId = activeAiDrawer === null || activeAiDrawer === void 0 ? void 0 : activeAiDrawer.id;
const computedAriaLabels = {
closeButton: activeAiDrawer ? (_a = activeAiDrawer.ariaLabels) === null || _a === void 0 ? void 0 : _a.closeButton : ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.toolsClose,
content: activeAiDrawer ? (_b = activeAiDrawer.ariaLabels) === null || _b === void 0 ? void 0 : _b.drawerName : ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.tools,
};
const resizeProps = useResize({
currentWidth: activeAiDrawerSize,
minWidth: minAiDrawerSize,
maxWidth: maxAiDrawerSize,
panelRef: drawerRef,
handleRef: aiDrawerFocusControl.refs.slider,
onResize: size => {
onActiveDrawerResize({ id: activeDrawerId, size });
},
position: 'side-start',
});
const size = getLimitedValue(minAiDrawerSize, activeAiDrawerSize, maxAiDrawerSize);
const isExpanded = (activeAiDrawer === null || activeAiDrawer === void 0 ? void 0 : activeAiDrawer.isExpandable) && expandedDrawerId === activeDrawerId;
const wasExpanded = usePrevious(isExpanded);
const animationDisabled = ((activeAiDrawer === null || activeAiDrawer === void 0 ? void 0 : activeAiDrawer.defaultActive) && !(drawersOpenQueue === null || drawersOpenQueue === void 0 ? void 0 : drawersOpenQueue.includes(activeAiDrawer.id))) || (wasExpanded && !isExpanded);
const drawerHeight = `calc(100vh - ${verticalOffsets.toolbar + placement.insetBlockEnd}px)`;
// disable resizing when the drawer is at its minimum width in a "squeezed" state
// (window is between mobile and desktop sizes). At this point, the drawer can't be
// resized in either direction, so we disable the resize handler
const isResizingDisabled = maxAiDrawerSize < activeAiDrawerSize;
let drawerActions = [
{
type: 'icon-button',
id: 'close',
iconName: isMobile ? 'close' : 'angle-left',
text: computedAriaLabels.closeButton,
analyticsAction: 'close',
},
];
if (!isMobile && (activeAiDrawer === null || activeAiDrawer === void 0 ? void 0 : activeAiDrawer.isExpandable)) {
drawerActions = [
{
type: 'icon-button',
id: 'expand',
iconName: isExpanded ? 'shrink' : 'expand',
text: (_d = (_c = activeAiDrawer === null || activeAiDrawer === void 0 ? void 0 : activeAiDrawer.ariaLabels) === null || _c === void 0 ? void 0 : _c.expandedModeButton) !== null && _d !== void 0 ? _d : '',
analyticsAction: isExpanded ? 'expand' : 'collapse',
},
...drawerActions,
];
}
if (activeAiDrawer === null || activeAiDrawer === void 0 ? void 0 : activeAiDrawer.headerActions) {
drawerActions = [
{
type: 'group',
text: 'Actions',
items: activeAiDrawer.headerActions,
},
...drawerActions,
];
}
return (React.createElement(Transition, { nodeRef: drawerRef, in: show, appear: show, mountOnEnter: true, timeout: 250 }, drawerTransitionState => {
return (React.createElement(Transition, { nodeRef: drawerRef, in: isExpanded, timeout: 250 }, expandedTransitionState => {
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
return (React.createElement("aside", { id: activeAiDrawer === null || activeAiDrawer === void 0 ? void 0 : activeAiDrawer.id, "aria-hidden": !activeAiDrawer, "aria-label": computedAriaLabels.content, className: clsx(styles.drawer, styles['ai-drawer'], !animationDisabled && isExpanded && styles['with-expanded-motion'], {
[sharedStyles['with-motion-horizontal']]: !animationDisabled,
[testutilStyles['active-drawer']]: show,
[styles['drawer-hidden']]: !show && drawerTransitionState === 'exited',
[testutilStyles['drawer-closed']]: !activeAiDrawer,
[styles['drawer-expanded']]: isExpanded,
}), ref: drawerRef, onBlur: e => {
if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget)) {
aiDrawerFocusControl === null || aiDrawerFocusControl === void 0 ? void 0 : aiDrawerFocusControl.loseFocus();
}
}, style: {
blockSize: drawerHeight,
insetBlockStart: `${placement.insetBlockStart}px`,
...(!isMobile && {
[customCssProps.drawerMinSize]: `${size}px`,
[customCssProps.drawerSize]: `${['entering', 'entered'].includes(drawerTransitionState) ? size : 0}px`,
}),
}, "data-testid": activeDrawerId && `awsui-app-layout-drawer-${activeDrawerId}` },
!isMobile && (activeAiDrawer === null || activeAiDrawer === void 0 ? void 0 : activeAiDrawer.resizable) && (!isExpanded || expandedTransitionState !== 'entered') && (React.createElement("div", { className: styles['drawer-slider'] },
React.createElement(PanelResizeHandle, { ref: aiDrawerFocusControl === null || aiDrawerFocusControl === void 0 ? void 0 : aiDrawerFocusControl.refs.slider, position: "side-start", className: clsx(testutilStyles['drawers-slider'], styles['ai-drawer-slider-handle']), ariaLabel: (_a = activeAiDrawer === null || activeAiDrawer === void 0 ? void 0 : activeAiDrawer.ariaLabels) === null || _a === void 0 ? void 0 : _a.resizeHandle, tooltipText: (_b = activeAiDrawer === null || activeAiDrawer === void 0 ? void 0 : activeAiDrawer.ariaLabels) === null || _b === void 0 ? void 0 : _b.resizeHandleTooltipText, ariaValuenow: resizeProps.relativeSize, onKeyDown: resizeProps.onKeyDown, onPointerDown: resizeProps.onPointerDown, onDirectionClick: resizeProps.onDirectionClick, disabled: isResizingDisabled }))),
React.createElement("div", { className: clsx(styles['drawer-content-container'], sharedStyles['with-motion-horizontal']) },
React.createElement("div", { className: styles['drawer-content'] },
React.createElement("header", { className: styles['drawer-content-header'] },
React.createElement("div", { className: styles['drawer-content-header-content'] }, (_c = activeAiDrawer === null || activeAiDrawer === void 0 ? void 0 : activeAiDrawer.header) !== null && _c !== void 0 ? _c : React.createElement("div", null),
React.createElement("div", { className: styles['drawer-actions'] },
React.createElement(ButtonGroup, { dropdownExpandToViewport: false, variant: "icon", onItemClick: event => {
var _a;
switch (event.detail.id) {
case 'close':
onActiveAiDrawerChange === null || onActiveAiDrawerChange === void 0 ? void 0 : onActiveAiDrawerChange(null, { initiatedByUserAction: true });
break;
case 'expand':
setExpandedDrawerId(isExpanded ? null : activeDrawerId);
break;
default:
(_a = activeAiDrawer === null || activeAiDrawer === void 0 ? void 0 : activeAiDrawer.onHeaderActionClick) === null || _a === void 0 ? void 0 : _a.call(activeAiDrawer, event);
}
}, ariaLabel: "Left panel actions", items: drawerActions }))),
!isMobile && isExpanded && ((_d = activeAiDrawer === null || activeAiDrawer === void 0 ? void 0 : activeAiDrawer.ariaLabels) === null || _d === void 0 ? void 0 : _d.exitExpandedModeButton) && (React.createElement("div", { className: styles['drawer-back-to-console-slot'] },
React.createElement("div", { className: styles['drawer-back-to-console-button-wrapper'] }, ((_e = activeAiDrawer === null || activeAiDrawer === void 0 ? void 0 : activeAiDrawer.exitExpandedModeTrigger) === null || _e === void 0 ? void 0 : _e.customIcon) ? (React.createElement("button", { className: clsx(testutilStyles['active-ai-drawer-leave-expanded-mode-custom-button'], styles['drawer-back-to-console-custom-button']), formAction: "none", onClick: () => setExpandedDrawerId(null), "aria-label": (_f = activeAiDrawer === null || activeAiDrawer === void 0 ? void 0 : activeAiDrawer.ariaLabels) === null || _f === void 0 ? void 0 : _f.exitExpandedModeButton }, (_g = activeAiDrawer === null || activeAiDrawer === void 0 ? void 0 : activeAiDrawer.exitExpandedModeTrigger) === null || _g === void 0 ? void 0 : _g.customIcon)) : (React.createElement("button", { className: clsx(testutilStyles['active-ai-drawer-leave-expanded-mode-custom-button'], styles['drawer-back-to-console-button']), formAction: "none", onClick: () => setExpandedDrawerId(null), "aria-label": (_h = activeAiDrawer === null || activeAiDrawer === void 0 ? void 0 : activeAiDrawer.ariaLabels) === null || _h === void 0 ? void 0 : _h.exitExpandedModeButton }, (_j = activeAiDrawer === null || activeAiDrawer === void 0 ? void 0 : activeAiDrawer.ariaLabels) === null || _j === void 0 ? void 0 : _j.exitExpandedModeButton)))))),
React.createElement("div", { className: styles['drawer-content-content'] }, activeAiDrawer === null || activeAiDrawer === void 0 ? void 0 : activeAiDrawer.content)))));
}));
}));
}
//# sourceMappingURL=global-ai-drawer.js.map