@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
30 lines • 2.21 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 { useMergeRefs } from '@awsui/component-toolkit/internal';
import { copyAnalyticsMetadataAttribute } from '@awsui/component-toolkit/internal/analytics-metadata';
import RadioButton from '../internal/components/radio-button';
import { fireNonCancelableEvent } from '../internal/events';
import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
import analyticsSelectors from './analytics-metadata/styles.css.js';
import styles from './styles.css.js';
export const Tile = React.forwardRef(({ item, selected, name, breakpoint, onChange, readOnly, ...rest }, forwardedRef) => {
const internalRef = useRef(null);
const isVisualRefresh = useVisualRefresh();
const mergedRef = useMergeRefs(internalRef, forwardedRef);
return (React.createElement("div", { className: clsx(styles['tile-container'], { [styles['has-metadata']]: item.description || item.image }, { [styles.selected]: selected }, { [styles.disabled]: !!item.disabled }, { [styles.readonly]: readOnly }, { [styles.refresh]: isVisualRefresh }, styles[`breakpoint-${breakpoint}`]), "data-value": item.value, onClick: () => {
var _a;
if (item.disabled || readOnly) {
return;
}
(_a = internalRef.current) === null || _a === void 0 ? void 0 : _a.focus();
if (!selected) {
fireNonCancelableEvent(onChange, { value: item.value });
}
}, ...copyAnalyticsMetadataAttribute(rest) },
React.createElement("div", { className: clsx(styles.control, { [styles['no-image']]: !item.image }) },
React.createElement(RadioButton, { checked: selected, ref: mergedRef, name: name, value: item.value, description: item.description, disabled: item.disabled, controlId: item.controlId, readOnly: readOnly, className: analyticsSelectors['radio-button'] }, item.label)),
item.image && React.createElement("div", { className: clsx(styles.image, { [styles.disabled]: !!item.disabled }) }, item.image)));
});
//# sourceMappingURL=tile.js.map