@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
51 lines • 4.02 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 ButtonTrigger from '../../internal/components/button-trigger';
import Option from '../../internal/components/option';
import { useMergeRefs } from '../../internal/hooks/use-merge-refs';
import { useUniqueId } from '../../internal/hooks/use-unique-id';
import { useVisualRefresh } from '../../internal/hooks/use-visual-mode';
import { joinStrings } from '../../internal/utils/strings';
import styles from './styles.css.js';
const Trigger = React.forwardRef(({ ariaLabelledby, ariaDescribedby, controlId, invalid, inlineLabelText, warning, triggerProps, selectedOption, selectedOptions, triggerVariant, inFilteringToken, isOpen, placeholder, disabled, readOnly, }, ref) => {
const isVisualRefresh = useVisualRefresh();
const generatedId = useUniqueId();
const id = controlId !== null && controlId !== void 0 ? controlId : generatedId;
const triggerContentId = useUniqueId('trigger-content-');
let ariaLabelledbyIds = joinStrings(ariaLabelledby, triggerContentId);
let triggerContent = null;
if (triggerVariant === 'tokens') {
if (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) {
triggerContent = (React.createElement("span", { className: clsx(styles['inline-token-trigger'], disabled && styles['inline-token-trigger--disabled'], isVisualRefresh && styles['visual-refresh']) },
React.createElement("span", { className: styles['inline-token-list'] }, selectedOptions.map(({ label }, i) => (React.createElement("span", { key: i, className: styles['inline-token'] }, label)))),
React.createElement("span", { className: styles['inline-token-counter'], id: triggerContentId },
React.createElement("span", { className: styles['inline-token-hidden-placeholder'] }, placeholder),
React.createElement("span", null,
"(",
selectedOptions.length,
")"))));
ariaLabelledbyIds = ariaLabelledby;
}
else {
triggerContent = (React.createElement("span", { "aria-disabled": "true", className: clsx(styles.placeholder, styles.trigger), id: triggerContentId }, placeholder));
}
}
else if (!selectedOption) {
triggerContent = (React.createElement("span", { "aria-disabled": "true", className: clsx(styles.placeholder, styles.trigger), id: triggerContentId }, placeholder));
}
else if (triggerVariant === 'option') {
triggerContent = React.createElement(Option, { id: triggerContentId, option: Object.assign(Object.assign({}, selectedOption), { disabled }), triggerVariant: true });
}
else {
triggerContent = (React.createElement("span", { id: triggerContentId, className: styles.trigger }, selectedOption.label || selectedOption.value));
}
const mergedRef = useMergeRefs(triggerProps.ref, ref);
const triggerButton = (React.createElement(ButtonTrigger, Object.assign({}, triggerProps, { id: id, ref: mergedRef, pressed: !!isOpen, disabled: disabled, readOnly: readOnly, invalid: invalid, warning: warning && !invalid, inFilteringToken: inFilteringToken, inlineTokens: triggerVariant === 'tokens', ariaDescribedby: ariaDescribedby, ariaLabelledby: ariaLabelledbyIds }), triggerContent));
return (React.createElement(React.Fragment, null, inlineLabelText ? (React.createElement("div", { className: styles['inline-label-wrapper'] },
React.createElement("label", { htmlFor: controlId, className: clsx(styles['inline-label'], disabled && styles['inline-label-disabled']) }, inlineLabelText),
React.createElement("div", { className: styles['inline-label-trigger-wrapper'] }, triggerButton))) : (React.createElement(React.Fragment, null, triggerButton))));
});
export default Trigger;
//# sourceMappingURL=trigger.js.map