@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
80 lines • 7.03 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react';
import clsx from 'clsx';
import { useDensityMode, useMergeRefs } from '@awsui/component-toolkit/internal';
import { copyAnalyticsMetadataAttribute, getAnalyticsMetadataAttribute, } from '@awsui/component-toolkit/internal/analytics-metadata';
import InternalIcon from '../../icon/internal';
import { useListFocusController } from '../../internal/hooks/use-list-focus-controller';
import InternalPopover from '../../popover/internal';
import InternalSelect from '../../select/internal';
import testUtilStyles from '../test-classes/styles.css.js';
import styles from './styles.css.js';
const FilteringToken = forwardRef(({ tokens, showOperation, readOnlyOperations, operation, groupOperation, andText, orText, groupAriaLabel, operationAriaLabel, groupEditAriaLabel, disabled = false, onChangeOperation, onChangeGroupOperation, onDismissToken, editorContent, editorHeader, editorDismissAriaLabel, editorExpandToViewport, onEditorOpen, hasGroups, popoverSize, ...rest }, ref) => {
const [nextFocusIndex, setNextFocusIndex] = useState(null);
const tokenListRef = useListFocusController({
nextFocusIndex,
onFocusMoved: target => {
target.focus();
setNextFocusIndex(null);
},
listItemSelector: `.${styles['inner-root']}`,
fallbackSelector: `.${styles.root}`,
});
const popoverRef = useRef(null);
const popoverProps = {
content: editorContent,
triggerType: 'text',
header: editorHeader,
size: popoverSize,
position: 'bottom',
dismissAriaLabel: editorDismissAriaLabel,
renderWithPortal: editorExpandToViewport,
__onOpen: onEditorOpen,
__closeAnalyticsAction: 'editClose',
};
useImperativeHandle(ref, () => ({ closeEditor: () => { var _a; return (_a = popoverRef.current) === null || _a === void 0 ? void 0 : _a.focus(); } }));
return (React.createElement(TokenGroup, { ref: tokenListRef, ariaLabel: tokens.length === 1 ? tokens[0].ariaLabel : groupAriaLabel, operation: showOperation && (React.createElement(OperationSelector, { operation: operation, onChange: onChangeOperation, ariaLabel: operationAriaLabel, andText: andText, orText: orText, parent: true, readOnlyOperations: readOnlyOperations, disabled: disabled })), tokenAction: tokens.length === 1 ? (React.createElement(TokenDismissButton, { ariaLabel: tokens[0].dismissAriaLabel, onClick: () => onDismissToken(0), parent: true, disabled: disabled })) : (React.createElement(InternalPopover, { ref: popoverRef, ...popoverProps, triggerType: "filtering-token" },
React.createElement(TokenEditButton, { ariaLabel: groupEditAriaLabel, disabled: disabled }))), parent: true, grouped: tokens.length > 1, disabled: disabled, hasGroups: hasGroups, ...copyAnalyticsMetadataAttribute(rest) }, tokens.length === 1 ? (React.createElement(InternalPopover, { ref: popoverRef, ...popoverProps },
React.createElement("span", { ...getAnalyticsMetadataAttribute({
action: 'editStart',
}) }, tokens[0].content))) : (React.createElement("ul", { className: styles.list }, tokens.map((token, index) => (React.createElement("li", { key: index },
React.createElement(TokenGroup, { ariaLabel: token.ariaLabel, operation: index !== 0 && (React.createElement(OperationSelector, { operation: groupOperation, onChange: onChangeGroupOperation, ariaLabel: operationAriaLabel, andText: andText, orText: orText, parent: false, readOnlyOperations: readOnlyOperations, disabled: disabled })), tokenAction: React.createElement(TokenDismissButton, { ariaLabel: token.dismissAriaLabel, onClick: () => {
onDismissToken(index);
setNextFocusIndex(index);
}, parent: false, disabled: disabled }), parent: false, grouped: false, disabled: disabled, hasGroups: false }, token.content))))))));
});
export default FilteringToken;
const TokenGroup = forwardRef(({ ariaLabel, children, operation, tokenAction, parent, grouped, disabled, hasGroups, ...rest }, ref) => {
const groupRef = useRef(null);
const mergedRef = useMergeRefs(ref, groupRef);
const isCompactMode = useDensityMode(groupRef) === 'compact';
return (React.createElement("div", { ref: mergedRef, className: clsx(parent
? clsx(styles.root, testUtilStyles['filtering-token'])
: clsx(styles['inner-root'], testUtilStyles['filtering-token-inner']), hasGroups && styles['has-groups'], isCompactMode && styles['compact-mode']), role: "group", "aria-label": ariaLabel, ...copyAnalyticsMetadataAttribute(rest) },
operation,
React.createElement("div", { className: clsx(parent ? styles.token : styles['inner-token'], !!operation && styles['show-operation'], grouped && styles.grouped, disabled && styles['token-disabled']), "aria-disabled": disabled },
React.createElement("div", { className: clsx(parent
? clsx(styles['token-content'], testUtilStyles['filtering-token-content'])
: clsx(styles['inner-token-content'], testUtilStyles['filtering-token-inner-content']), grouped && styles['token-content-grouped']) }, children),
tokenAction)));
});
function OperationSelector({ operation, onChange, ariaLabel, andText, orText, parent, readOnlyOperations, disabled, }) {
return (React.createElement(InternalSelect, { __inFilteringToken: parent ? 'root' : 'nested', className: clsx(parent
? clsx(styles.select, testUtilStyles['filtering-token-select'])
: clsx(styles['inner-select'], testUtilStyles['filtering-token-inner-select'])), options: [
{ value: 'and', label: andText },
{ value: 'or', label: orText },
], selectedOption: { value: operation, label: operation === 'and' ? andText : orText }, onChange: e => onChange(e.detail.selectedOption.value), disabled: disabled, readOnly: readOnlyOperations, ariaLabel: ariaLabel }));
}
function TokenDismissButton({ ariaLabel, onClick, parent, disabled, }) {
return (React.createElement("button", { type: "button", className: clsx(parent
? clsx(styles['dismiss-button'], testUtilStyles['filtering-token-dismiss-button'])
: clsx(styles['inner-dismiss-button'], testUtilStyles['filtering-token-inner-dismiss-button'])), "aria-label": ariaLabel, onClick: onClick, disabled: disabled, ...getAnalyticsMetadataAttribute({ action: 'dismiss' }) },
React.createElement(InternalIcon, { name: "close" })));
}
function TokenEditButton({ ariaLabel, disabled }) {
return (React.createElement("button", { type: "button", className: clsx(styles['edit-button'], testUtilStyles['filtering-token-edit-button']), "aria-label": ariaLabel, disabled: disabled },
React.createElement(InternalIcon, { name: "edit" })));
}
//# sourceMappingURL=index.js.map