@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
38 lines • 3.48 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React, { useEffect, useRef, useState } from 'react';
import { useMergeRefs } from '@awsui/component-toolkit/internal';
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 styles from './styles.css.js';
const MultiSelectItem = ({ option, highlighted, selected, filteringValue, hasCheckbox, virtualPosition, padBottom, isNextSelected, isPreviousSelected, indeterminate, screenReaderContent, ariaPosinset, ariaSetsize, highlightType, withScrollbar, sticky, ...restProps }, ref) => {
const baseProps = getBaseProps(restProps);
const isParent = option.type === 'parent';
const isChild = option.type === 'child';
const isSelectAll = option.type === 'select-all';
const wrappedOption = option.option;
const disabled = option.disabled || wrappedOption.disabled;
const disabledReason = disabled && (option.disabledReason || wrappedOption.disabledReason)
? option.disabledReason || wrappedOption.disabledReason
: '';
const isDisabledWithReason = !!disabledReason;
const internalRef = useRef(null);
const className = styles.item;
const { descriptionId, descriptionEl } = useHiddenDescription(disabledReason);
const [canShowTooltip, setCanShowTooltip] = useState(true);
useEffect(() => setCanShowTooltip(true), [highlighted]);
return (React.createElement(SelectableItem, { ariaChecked: isParent && indeterminate ? 'mixed' : Boolean(selected), selected: selected, isNextSelected: isNextSelected, isPreviousSelected: isPreviousSelected, highlighted: highlighted, disabled: disabled, isParent: isParent, isChild: isChild, isSelectAll: isSelectAll, highlightType: highlightType, ref: useMergeRefs(ref, internalRef), virtualPosition: virtualPosition, padBottom: padBottom, useInteractiveGroups: true, screenReaderContent: screenReaderContent, ariaPosinset: ariaPosinset, ariaSetsize: ariaSetsize, ariaDescribedby: isDisabledWithReason ? descriptionId : '', value: option.option.value, afterHeader: option.afterHeader, withScrollbar: withScrollbar, sticky: sticky, ...baseProps },
React.createElement("div", { className: className },
hasCheckbox && (React.createElement("div", { className: styles.checkbox },
React.createElement(CheckboxIcon, { checked: selected, indeterminate: (isParent || isSelectAll) && indeterminate, disabled: disabled }))),
React.createElement(Option, { option: { ...wrappedOption, disabled }, highlightedOption: highlighted, selectedOption: selected, highlightText: filteringValue, isGroupOption: isParent })),
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(MultiSelectItem));
//# sourceMappingURL=multiselect-item.js.map