@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.65 kB
JavaScript
import { __rest } from "tslib";
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React, { useEffect, useRef, useState } from 'react';
import clsx from 'clsx';
import InternalIcon from '../../icon/internal.js';
import { getBaseProps } from '../../internal/base-component';
import CheckboxIcon from '../../internal/components/checkbox-icon';
import Option from '../../internal/components/option';
import SelectableItem from '../../internal/components/selectable-item';
import Tooltip from '../../internal/components/tooltip';
import useHiddenDescription from '../../internal/hooks/use-hidden-description';
import { useMergeRefs } from '../../internal/hooks/use-merge-refs';
import styles from './styles.css.js';
const Item = (_a, ref) => {
var { option, highlighted, selected, filteringValue, hasCheckbox, virtualPosition, padBottom, isNextSelected, screenReaderContent, ariaPosinset, ariaSetsize, highlightType } = _a, restProps = __rest(_a, ["option", "highlighted", "selected", "filteringValue", "hasCheckbox", "virtualPosition", "padBottom", "isNextSelected", "screenReaderContent", "ariaPosinset", "ariaSetsize", "highlightType"]);
const baseProps = getBaseProps(restProps);
const isParent = option.type === 'parent';
const isChild = option.type === 'child';
const wrappedOption = option.option;
const disabled = option.disabled || wrappedOption.disabled;
const disabledReason = disabled && wrappedOption.disabledReason ? wrappedOption.disabledReason : '';
const isDisabledWithReason = !!disabledReason;
const internalRef = useRef(null);
const { descriptionEl, descriptionId } = useHiddenDescription(disabledReason);
const [canShowTooltip, setCanShowTooltip] = useState(true);
useEffect(() => setCanShowTooltip(true), [highlighted]);
return (React.createElement(SelectableItem, Object.assign({ ariaSelected: Boolean(selected), selected: selected, isNextSelected: isNextSelected, highlighted: highlighted, disabled: option.disabled, isParent: isParent, isChild: isChild, ref: useMergeRefs(ref, internalRef), virtualPosition: virtualPosition, padBottom: padBottom, screenReaderContent: screenReaderContent, ariaPosinset: ariaPosinset, ariaSetsize: ariaSetsize, highlightType: highlightType, ariaDescribedby: isDisabledWithReason ? descriptionId : '', value: option.option.value }, baseProps),
React.createElement("div", { className: clsx(styles.item, !isParent && wrappedOption.labelTag && styles['show-label-tag']) },
hasCheckbox && !isParent && (React.createElement("div", { className: styles.checkbox },
React.createElement(CheckboxIcon, { checked: selected || false, disabled: option.disabled }))),
React.createElement(Option, { option: Object.assign(Object.assign({}, wrappedOption), { disabled }), highlightedOption: highlighted, selectedOption: selected, highlightText: filteringValue, isGroupOption: isParent }),
!hasCheckbox && !isParent && selected && (React.createElement("div", { className: styles['selected-icon'] },
React.createElement(InternalIcon, { name: "check" }))),
isDisabledWithReason && (React.createElement(React.Fragment, null,
descriptionEl,
highlighted && canShowTooltip && (React.createElement(Tooltip, { className: styles['disabled-reason-tooltip'], trackRef: internalRef, value: disabledReason, position: "right", hideOnOverscroll: true, onDismiss: () => setCanShowTooltip(false) })))))));
};
export default React.memo(React.forwardRef(Item));
//# sourceMappingURL=item.js.map