@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
82 lines • 8.92 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React, { useRef } from 'react';
import clsx from 'clsx';
import { useContainerQuery } from '@awsui/component-toolkit';
import { useMobile } from '../../../internal/hooks/use-mobile';
import { splitItems } from '../../drawer/drawers-helpers';
import OverflowMenu from '../../drawer/overflow-menu';
import { TOOLS_DRAWER_ID } from '../../utils/use-drawers';
import TriggerButton from './trigger-button';
import splitPanelTestUtilStyles from '../../../split-panel/test-classes/styles.css.js';
import testutilStyles from '../../test-classes/styles.css.js';
import styles from './styles.css.js';
export function DrawerTriggers({ ariaLabels, activeDrawerId, drawers, drawersFocusRef, onActiveDrawerChange, splitPanelOpen, splitPanelPosition = 'bottom', splitPanelFocusRef, splitPanelToggleProps, onSplitPanelToggle, disabled, activeGlobalDrawersIds, globalDrawers, globalDrawersFocusControl, onActiveGlobalDrawersChange, }) {
const isMobile = useMobile();
const hasMultipleTriggers = drawers.length > 1;
const previousActiveLocalDrawerId = useRef(activeDrawerId);
const previousActiveGlobalDrawersIds = useRef(activeGlobalDrawersIds);
const [containerWidth, triggersContainerRef] = useContainerQuery(rect => rect.contentBoxWidth);
if (!drawers.length && !globalDrawers.length && !splitPanelToggleProps) {
return null;
}
if (activeDrawerId) {
previousActiveLocalDrawerId.current = activeDrawerId;
}
if (activeGlobalDrawersIds.length) {
previousActiveGlobalDrawersIds.current = activeGlobalDrawersIds;
}
const getIndexOfOverflowItem = () => {
if (isMobile) {
return 2;
}
if (containerWidth) {
const ITEM_WIDTH = 50; // Roughly 34px + padding = 42px but added extra for safety
const overflowSpot = containerWidth;
const index = Math.floor(overflowSpot / ITEM_WIDTH);
let splitPanelItem = 0;
if (splitPanelToggleProps) {
splitPanelItem = 1;
}
return index - splitPanelItem;
}
return 0;
};
const indexOfOverflowItem = getIndexOfOverflowItem();
const { visibleItems, overflowItems } = splitItems([...drawers, ...globalDrawers], indexOfOverflowItem, activeDrawerId !== null && activeDrawerId !== void 0 ? activeDrawerId : null);
const overflowMenuHasBadge = !!overflowItems.find(item => item.badge);
const toolsOnlyMode = drawers.length === 1 && drawers[0].id === TOOLS_DRAWER_ID;
const globalDrawersStartIndex = drawers.length;
const hasOpenDrawer = !!activeDrawerId || (splitPanelPosition === 'side' && splitPanelOpen);
const splitPanelResolvedPosition = splitPanelToggleProps === null || splitPanelToggleProps === void 0 ? void 0 : splitPanelToggleProps.position;
return (React.createElement("aside", { className: styles[`drawers-${isMobile ? 'mobile' : 'desktop'}-triggers-container`], "aria-label": ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.drawers, ref: triggersContainerRef, role: "region" },
React.createElement("div", { className: styles['drawers-trigger-content'], role: "toolbar", "aria-orientation": "horizontal" },
splitPanelToggleProps && (React.createElement(React.Fragment, null,
React.createElement(TriggerButton, { ariaLabel: splitPanelToggleProps.ariaLabel, ariaControls: splitPanelToggleProps.controlId, ariaExpanded: splitPanelToggleProps.active, className: clsx(styles['drawers-trigger'], testutilStyles['drawers-trigger'], splitPanelTestUtilStyles['open-button']), iconName: splitPanelResolvedPosition === 'side' ? 'view-vertical' : 'view-horizontal', onClick: () => onSplitPanelToggle === null || onSplitPanelToggle === void 0 ? void 0 : onSplitPanelToggle(), selected: splitPanelToggleProps.active, ref: splitPanelResolvedPosition === 'side' ? splitPanelFocusRef : undefined, hasTooltip: true, isMobile: isMobile, isForSplitPanel: true, disabled: disabled }),
hasMultipleTriggers ? React.createElement("div", { className: styles['group-divider'] }) : null)),
visibleItems.slice(0, globalDrawersStartIndex).map(item => {
var _a, _b;
const isForPreviousActiveDrawer = (previousActiveLocalDrawerId === null || previousActiveLocalDrawerId === void 0 ? void 0 : previousActiveLocalDrawerId.current) === item.id;
return (React.createElement(TriggerButton, { ariaLabel: (_a = item.ariaLabels) === null || _a === void 0 ? void 0 : _a.triggerButton, ariaExpanded: item.id === activeDrawerId, ariaControls: activeDrawerId === item.id ? item.id : undefined, className: clsx(styles['drawers-trigger'], !toolsOnlyMode && testutilStyles['drawers-trigger'], item.id === TOOLS_DRAWER_ID && testutilStyles['tools-toggle']), iconName: item.trigger.iconName, iconSvg: item.trigger.iconSvg, key: item.id, onClick: () => onActiveDrawerChange === null || onActiveDrawerChange === void 0 ? void 0 : onActiveDrawerChange(activeDrawerId !== item.id ? item.id : null, { initiatedByUserAction: true }), ref: item.id === previousActiveLocalDrawerId.current ? drawersFocusRef : undefined, selected: item.id === activeDrawerId, badge: item.badge, testId: `awsui-app-layout-trigger-${item.id}`, hasTooltip: true, hasOpenDrawer: hasOpenDrawer, tooltipText: (_b = item.ariaLabels) === null || _b === void 0 ? void 0 : _b.drawerName, isForPreviousActiveDrawer: isForPreviousActiveDrawer, isMobile: isMobile, disabled: disabled }));
}),
globalDrawersStartIndex > 0 && visibleItems.length > globalDrawersStartIndex && (React.createElement("div", { className: styles['group-divider'] })),
visibleItems.slice(globalDrawersStartIndex).map(item => {
var _a, _b, _c;
const isForPreviousActiveDrawer = previousActiveGlobalDrawersIds === null || previousActiveGlobalDrawersIds === void 0 ? void 0 : previousActiveGlobalDrawersIds.current.includes(item.id);
return (React.createElement(TriggerButton, { ariaLabel: (_a = item.ariaLabels) === null || _a === void 0 ? void 0 : _a.triggerButton, ariaExpanded: activeGlobalDrawersIds.includes(item.id), ariaControls: activeGlobalDrawersIds.includes(item.id) ? item.id : undefined, className: clsx(styles['drawers-trigger'], testutilStyles['drawers-trigger'], testutilStyles['drawers-trigger-global']), iconName: item.trigger.iconName, iconSvg: item.trigger.iconSvg, key: item.id, onClick: () => {
onActiveGlobalDrawersChange && onActiveGlobalDrawersChange(item.id, { initiatedByUserAction: true });
}, ref: (_b = globalDrawersFocusControl === null || globalDrawersFocusControl === void 0 ? void 0 : globalDrawersFocusControl.refs[item.id]) === null || _b === void 0 ? void 0 : _b.toggle, selected: activeGlobalDrawersIds.includes(item.id), badge: item.badge, testId: `awsui-app-layout-trigger-${item.id}`, hasTooltip: true, hasOpenDrawer: hasOpenDrawer, tooltipText: (_c = item.ariaLabels) === null || _c === void 0 ? void 0 : _c.drawerName, isForPreviousActiveDrawer: isForPreviousActiveDrawer, isMobile: isMobile, disabled: disabled }));
}),
overflowItems.length > 0 && (React.createElement(OverflowMenu, { items: overflowItems.map(item => (Object.assign(Object.assign({}, item), { active: activeGlobalDrawersIds.includes(item.id) }))), ariaLabel: overflowMenuHasBadge ? ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.drawersOverflowWithBadge : ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.drawersOverflow, customTriggerBuilder: ({ onClick, triggerRef, ariaLabel, ariaExpanded, testUtilsClass }) => {
return (React.createElement(TriggerButton, { ref: triggerRef, ariaLabel: ariaLabel, ariaExpanded: ariaExpanded, badge: overflowMenuHasBadge, className: clsx(styles['drawers-trigger'], testutilStyles['drawers-trigger'], testutilStyles['drawers-trigger-global'], testUtilsClass), iconName: "ellipsis", onClick: onClick, disabled: disabled }));
}, onItemClick: event => {
const id = event.detail.id;
if (globalDrawers.find(drawer => drawer.id === id)) {
onActiveGlobalDrawersChange === null || onActiveGlobalDrawersChange === void 0 ? void 0 : onActiveGlobalDrawersChange(id, { initiatedByUserAction: true });
}
else {
onActiveDrawerChange === null || onActiveDrawerChange === void 0 ? void 0 : onActiveDrawerChange(event.detail.id, { initiatedByUserAction: true });
}
}, globalDrawersStartIndex: globalDrawersStartIndex - indexOfOverflowItem })))));
}
//# sourceMappingURL=drawer-triggers.js.map