@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
48 lines • 3.88 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 { warnOnce } from '@awsui/component-toolkit/internal';
import { getBaseProps } from '../../base-component';
import { isDevelopment } from '../../is-development';
import { Description, FilteringTags, Label, LabelTag, OptionIcon, Tags } from './option-parts';
import analyticsSelectors from './analytics-metadata/styles.css.js';
import styles from './styles.css.js';
function validateStringValue(value, propertyName) {
if (typeof value !== 'undefined' && typeof value !== 'string') {
warnOnce('DropdownOption', `This component only supports string values, but "option.${propertyName}" has ${typeof value} type. The component may work incorrectly.`);
}
}
const Option = ({ option, highlightText, triggerVariant = false, isGroupOption = false, highlightedOption = false, selectedOption = false, disableTitleTooltip = false, labelContainerRef, labelRef, labelId, ...restProps }) => {
var _a, _b, _c, _d;
if (!option) {
return null;
}
const { disabled } = option;
const baseProps = getBaseProps(restProps);
const SpanOrDivTag = option.labelContent ? 'div' : 'span';
if (isDevelopment) {
validateStringValue(option.label, 'label');
validateStringValue(option.description, 'description');
validateStringValue(option.labelTag, 'labelTag');
(_a = option.tags) === null || _a === void 0 ? void 0 : _a.forEach((tag, index) => {
validateStringValue(tag, `tags[${index}]`);
});
(_b = option.filteringTags) === null || _b === void 0 ? void 0 : _b.forEach((tag, index) => {
validateStringValue(tag, `filteringTags[${index}]`);
});
}
const className = clsx(styles.option, disabled && styles.disabled, isGroupOption && styles.parent, highlightedOption && styles.highlighted, baseProps.className);
const icon = option.__customIcon || (React.createElement(OptionIcon, { name: option.iconName, url: option.iconUrl, svg: option.iconSvg, alt: option.iconAlt, ariaLabel: option.iconAriaLabel, size: "normal" }));
return (React.createElement(SpanOrDivTag, { ...baseProps, "data-value": option.value, className: className, lang: option.lang, title: !disableTitleTooltip ? ((_c = option.label) !== null && _c !== void 0 ? _c : option.value) : undefined },
icon,
React.createElement(SpanOrDivTag, { className: styles.content },
React.createElement(SpanOrDivTag, { className: styles['label-content'] },
option.labelContent ? (React.createElement(SpanOrDivTag, { className: clsx(styles.label, analyticsSelectors.label) }, option.labelContent)) : (React.createElement(Label, { labelContainerRef: labelContainerRef, labelRef: labelRef, labelId: labelId, label: (_d = option.label) !== null && _d !== void 0 ? _d : option.value, prefix: option.__labelPrefix, highlightText: highlightText, triggerVariant: triggerVariant })),
React.createElement(LabelTag, { labelTag: option.labelTag, highlightText: highlightText, triggerVariant: triggerVariant })),
React.createElement(Description, { description: option.description, highlightedOption: highlightedOption, selectedOption: selectedOption, highlightText: highlightText, triggerVariant: triggerVariant }),
React.createElement(Tags, { tags: option.tags, highlightedOption: highlightedOption, selectedOption: selectedOption, highlightText: highlightText, triggerVariant: triggerVariant }),
React.createElement(FilteringTags, { filteringTags: option.filteringTags, highlightedOption: highlightedOption, selectedOption: selectedOption, highlightText: highlightText, triggerVariant: triggerVariant }))));
};
export default Option;
//# sourceMappingURL=index.js.map