@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
51 lines • 2.98 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React from 'react';
import clsx from 'clsx';
import { useMergeRefs, useUniqueId } from '@awsui/component-toolkit/internal';
import { getAnalyticsMetadataAttribute } from '@awsui/component-toolkit/internal/analytics-metadata';
import { getBaseProps } from '../internal/base-component';
import { useFormFieldContext } from '../internal/context/form-field-context';
import { useContainerBreakpoints } from '../internal/hooks/container-queries';
import useRadioGroupForwardFocus from '../internal/hooks/forward-focus/radio-group';
import { Tile } from './tile';
import analyticsSelectors from './analytics-metadata/styles.css.js';
import styles from './styles.css.js';
const COLUMN_TRIGGERS = ['default', 'xxs', 'xs'];
const InternalTiles = React.forwardRef(({ name, value, items, ariaLabel, ariaRequired, ariaControls, columns, onChange, readOnly, __internalRootRef, ...rest }, ref) => {
const baseProps = getBaseProps(rest);
const { ariaDescribedby, ariaLabelledby } = useFormFieldContext(rest);
const generatedName = useUniqueId('awsui-tiles-');
const [tileRef, tileRefIndex] = useRadioGroupForwardFocus(ref, items, value);
const [breakpoint, breakpointRef] = useContainerBreakpoints(COLUMN_TRIGGERS);
const mergedRef = useMergeRefs(breakpointRef, __internalRootRef);
const columnCount = getColumnCount(items, columns);
return (React.createElement("div", { role: "radiogroup", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "aria-required": ariaRequired, "aria-controls": ariaControls, "aria-readonly": readOnly ? 'true' : undefined, ...baseProps, className: clsx(baseProps.className, styles.root), ref: mergedRef },
React.createElement("div", { className: clsx(styles.columns, styles[`column-${columnCount}`]) }, items &&
items.map((item, index) => (React.createElement(Tile, { ref: index === tileRefIndex ? tileRef : undefined, key: item.value, item: item, selected: item.value === value, name: name || generatedName, breakpoint: breakpoint, onChange: onChange, readOnly: readOnly, ...(!item.disabled && !readOnly
? getAnalyticsMetadataAttribute({
action: 'select',
detail: {
position: `${index + 1}`,
value: item.value,
label: `.${analyticsSelectors['radio-button']}`,
},
})
: {}) }))))));
});
function getColumnCount(items, columns) {
if (columns) {
return columns;
}
const nItems = items ? items.length : 0;
const columnsLookup = {
0: 1,
1: 1,
2: 2,
4: 2,
8: 2,
};
return columnsLookup[nItems] || 3;
}
export default InternalTiles;
//# sourceMappingURL=internal.js.map