@awsui/components-react
Version:
AWS UI is a collection of [React](https://reactjs.org/) components that help create intuitive, responsive, and accessible user experiences for web applications. It is developed by Amazon Web Services (AWS). This work is available under the terms of the [A
47 lines (46 loc) • 3.06 kB
JavaScript
import clsx from 'clsx';
import React, { useEffect, useRef } from 'react';
import { AppLayoutButton, togglesConfig } from '../toggles';
import styles from './styles.css.js';
import sharedStyles from '../styles.css.js';
var MobileToggle = React.forwardRef(function (_a, ref) {
var className = _a.className, ariaLabels = _a.ariaLabels, type = _a.type, disabled = _a.disabled, onClick = _a.onClick;
var _b = togglesConfig[type], TagName = _b.TagName, iconName = _b.iconName, getLabels = _b.getLabels;
var _c = getLabels(ariaLabels), mainLabel = _c.mainLabel, openLabel = _c.openLabel;
return (React.createElement(TagName, { className: clsx(styles['mobile-toggle']), "aria-hidden": disabled, "aria-label": mainLabel, onClick: onClick },
React.createElement(AppLayoutButton, { ref: ref, className: className, iconName: iconName, onClick: onClick, ariaLabel: openLabel, disabled: disabled, ariaExpanded: disabled })));
});
export function MobileToolbar(_a) {
var _b = _a.ariaLabels, ariaLabels = _b === void 0 ? {} : _b, topOffset = _a.topOffset, navigationHide = _a.navigationHide, toolsHide = _a.toolsHide, _c = _a.anyPanelOpen, anyPanelOpen = _c === void 0 ? false : _c, activeElement = _a.activeElement, children = _a.children, onNavigationOpen = _a.onNavigationOpen, onToolsOpen = _a.onToolsOpen;
var navigationRef = useRef(null);
var toolsRef = useRef(null);
useEffect(function () {
if (anyPanelOpen) {
document.body.classList.add(styles['block-body-scroll']);
return function () {
document.body.classList.remove(styles['block-body-scroll']);
};
}
else {
document.body.classList.remove(styles['block-body-scroll']);
}
}, [anyPanelOpen]);
useEffect(function () {
if (activeElement) {
var _a = activeElement.split('-'), drawerType = _a[0], element = _a[1];
if (element === 'toggle') {
if (drawerType === 'navigation' && navigationRef.current) {
navigationRef.current.focus();
}
if (drawerType === 'tools' && toolsRef.current) {
toolsRef.current.focus();
}
}
}
}, [activeElement]);
return (React.createElement(React.Fragment, null,
React.createElement("div", { className: styles['mobile-bar'], style: { top: topOffset } },
!navigationHide && (React.createElement(MobileToggle, { ref: navigationRef, type: "navigation", className: sharedStyles['navigation-toggle'], ariaLabels: ariaLabels, disabled: anyPanelOpen, onClick: onNavigationOpen })),
React.createElement("div", { className: styles['mobile-bar-breadcrumbs'] }, children && React.createElement("div", { className: sharedStyles.breadcrumbs }, children)),
!toolsHide && (React.createElement(MobileToggle, { ref: toolsRef, type: "tools", className: sharedStyles['tools-toggle'], ariaLabels: ariaLabels, disabled: anyPanelOpen, onClick: onToolsOpen })))));
}