@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
40 lines • 3.07 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react';
import clsx from 'clsx';
import { warnOnce } from '@awsui/component-toolkit/internal';
import { getBaseProps } from '../internal/base-component';
import InternalNavigableGroup from '../navigable-group/internal';
import ItemElement from './item-element.js';
import { getButtonGroupStyles } from './style';
import styles from './styles.css.js';
import testUtilStyles from './test-classes/styles.css.js';
const InternalButtonGroup = forwardRef(({ items = [], onItemClick, onFilesChange, ariaLabel, dropdownExpandToViewport, style, __internalRootRef, ...props }, ref) => {
const baseProps = getBaseProps(props);
const itemsRef = useRef({});
const [tooltip, setTooltip] = useState(null);
useImperativeHandle(ref, () => ({
focus: id => {
var _a;
(_a = itemsRef.current[id]) === null || _a === void 0 ? void 0 : _a.focus();
},
}));
const stylePropertiesAndVariables = getButtonGroupStyles(style);
return (React.createElement("div", { ...baseProps, ref: __internalRootRef, className: clsx(styles.root, testUtilStyles['button-group'], baseProps.className), role: "toolbar", "aria-label": ariaLabel, style: stylePropertiesAndVariables },
React.createElement(InternalNavigableGroup, { getItemKey: item => item.dataset.itemid }, items.map((itemOrGroup, index) => {
var _a;
const itemContent = (item, position) => (React.createElement(ItemElement, { key: item.id, item: item, dropdownExpandToViewport: dropdownExpandToViewport, tooltip: tooltip, setTooltip: setTooltip, onItemClick: onItemClick, onFilesChange: onFilesChange, ref: element => (itemsRef.current[item.id] = element), position: position, style: style }));
const isGroupBefore = ((_a = items[index - 1]) === null || _a === void 0 ? void 0 : _a.type) === 'group';
const currentItem = items[index];
const isGroupNow = (currentItem === null || currentItem === void 0 ? void 0 : currentItem.type) === 'group';
const shouldAddDivider = isGroupBefore || (!isGroupBefore && isGroupNow && index !== 0);
if (isGroupNow && currentItem.items.length === 0) {
warnOnce('ButtonGroup', 'Empty group detected. Empty groups are not allowed.');
}
return (React.createElement(React.Fragment, { key: itemOrGroup.type === 'group' ? index : itemOrGroup.id },
shouldAddDivider && React.createElement("div", { className: styles.divider }),
itemOrGroup.type === 'group' ? (React.createElement("div", { key: index, role: "group", "aria-label": itemOrGroup.text, className: styles.group }, itemOrGroup.items.map((item, subIndex) => itemContent(item, `${index + 1},${subIndex + 1}`)))) : (itemContent(itemOrGroup, `${index + 1}`))));
}))));
});
export default InternalButtonGroup;
//# sourceMappingURL=internal.js.map