@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
39 lines • 3.54 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 { 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 MultiSelectItem = (_a, ref) => {
var { option, highlighted, selected, filteringValue, hasCheckbox, virtualPosition, padBottom, isNextSelected, indeterminate, screenReaderContent, ariaPosinset, ariaSetsize, highlightType } = _a, restProps = __rest(_a, ["option", "highlighted", "selected", "filteringValue", "hasCheckbox", "virtualPosition", "padBottom", "isNextSelected", "indeterminate", "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 && (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, Object.assign({ ariaChecked: isParent && indeterminate ? 'mixed' : Boolean(selected), selected: selected, isNextSelected: isNextSelected, highlighted: highlighted, disabled: disabled, isParent: isParent, isChild: isChild, 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 }, baseProps),
React.createElement("div", { className: className },
hasCheckbox && (React.createElement("div", { className: styles.checkbox },
React.createElement(CheckboxIcon, { checked: selected, indeterminate: isParent && indeterminate, disabled: option.disabled }))),
React.createElement(Option, { option: Object.assign(Object.assign({}, 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