@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
81 lines • 6.02 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React, { useRef, useState } from 'react';
import clsx from 'clsx';
import { getAnalyticsMetadataAttribute } from '@awsui/component-toolkit/internal/analytics-metadata';
import FilteringToken from './filtering-token';
import { TokenEditor } from './token-editor';
import { tokenGroupToTokens } from './utils';
import analyticsSelectors from './analytics-metadata/styles.css.js';
import styles from './styles.css.js';
export const TokenButton = ({ query, onUpdateToken, onUpdateOperation, onRemoveToken, tokenIndex, filteringProperties, filteringOptions, asyncProps, onLoadItems, i18nStrings, asyncProperties, hideOperations, customGroupsText, disabled, freeTextFiltering, expandToViewport, enableTokenGroups, }) => {
var _a, _b, _c, _d;
const tokenRef = useRef(null);
const hasGroups = query.tokens.some(tokenOrGroup => 'operation' in tokenOrGroup);
const first = tokenIndex === 0;
const tokenOrGroup = query.tokens[tokenIndex];
const tokens = tokenGroupToTokens([tokenOrGroup]).map(t => (Object.assign(Object.assign({}, t), { standaloneIndex: undefined })));
const operation = query.operation;
const groupOperation = 'operation' in tokenOrGroup ? tokenOrGroup.operation : operation === 'and' ? 'or' : 'and';
const [tempTokens, setTempTokens] = useState(tokens);
const capturedTokenIndices = tempTokens.map(token => token.standaloneIndex).filter(index => index !== undefined);
const tokensToCapture = [];
for (let index = 0; index < query.tokens.length; index++) {
const token = query.tokens[index];
if ('operator' in token && token !== tokenOrGroup && !capturedTokenIndices.includes(index)) {
tokensToCapture.push(token);
}
}
const [tempReleasedTokens, setTempReleasedTokens] = useState([]);
tokensToCapture.push(...tempReleasedTokens);
return (React.createElement(FilteringToken, Object.assign({ ref: tokenRef, tokens: tokens.map(token => {
const formattedToken = i18nStrings.formatToken(token);
return {
content: (React.createElement("span", { className: clsx(styles['token-trigger'], analyticsSelectors['token-trigger']) },
React.createElement(TokenTrigger, { token: formattedToken, allProperties: token.property === null }))),
ariaLabel: formattedToken.formattedText,
dismissAriaLabel: i18nStrings.removeTokenButtonAriaLabel(token),
};
}), showOperation: !first && !hideOperations, operation: operation, andText: (_a = i18nStrings.operationAndText) !== null && _a !== void 0 ? _a : '', orText: (_b = i18nStrings.operationOrText) !== null && _b !== void 0 ? _b : '', operationAriaLabel: (_c = i18nStrings.tokenOperatorAriaLabel) !== null && _c !== void 0 ? _c : '', onChangeOperation: onUpdateOperation, onDismissToken: (removeIndex) => {
if (tokens.length === 1) {
onRemoveToken();
}
else {
const newTokens = tokens.filter((_, index) => index !== removeIndex);
const updatedToken = newTokens.length === 1 ? newTokens[0] : { operation: groupOperation, tokens: newTokens };
onUpdateToken(updatedToken, []);
}
}, disabled: disabled, editorContent: React.createElement(TokenEditor, { supportsGroups: enableTokenGroups, filteringProperties: filteringProperties, filteringOptions: filteringOptions, tempGroup: tempTokens, onChangeTempGroup: setTempTokens, tokensToCapture: tokensToCapture, onTokenCapture: capturedToken => setTempReleasedTokens(prev => prev.filter(token => token !== capturedToken)), onTokenRelease: releasedToken => {
if (releasedToken.standaloneIndex === undefined) {
setTempReleasedTokens(prev => [...prev, releasedToken]);
}
}, asyncProps: asyncProps, onLoadItems: onLoadItems, i18nStrings: i18nStrings, asyncProperties: asyncProperties, customGroupsText: customGroupsText, freeTextFiltering: freeTextFiltering, onDismiss: () => {
var _a;
(_a = tokenRef.current) === null || _a === void 0 ? void 0 : _a.closeEditor();
}, onSubmit: () => {
var _a;
const updatedToken = tempTokens.length === 1 ? tempTokens[0] : { operation: groupOperation, tokens: tempTokens };
onUpdateToken(updatedToken, tempReleasedTokens);
(_a = tokenRef.current) === null || _a === void 0 ? void 0 : _a.closeEditor();
} }), editorHeader: (_d = i18nStrings.editTokenHeader) !== null && _d !== void 0 ? _d : '', editorDismissAriaLabel: i18nStrings.dismissAriaLabel, editorExpandToViewport: !!expandToViewport, onEditorOpen: () => {
setTempTokens(tokens);
setTempReleasedTokens([]);
}, groupOperation: groupOperation, onChangeGroupOperation: operation => onUpdateToken({ operation, tokens }, []), groupAriaLabel: i18nStrings.groupAriaLabel({ operation: groupOperation, tokens }), groupEditAriaLabel: i18nStrings.groupEditAriaLabel({ operation: groupOperation, tokens }), hasGroups: hasGroups, popoverSize: enableTokenGroups ? 'content' : 'large' }, getAnalyticsMetadataAttribute({
detail: {
tokenPosition: `${tokenIndex + 1}`,
tokenLabel: `.${analyticsSelectors['token-trigger']}`,
},
}))));
};
const TokenTrigger = ({ token: { propertyLabel, operator, value }, allProperties, }) => {
if (propertyLabel) {
propertyLabel += ' ';
}
const freeTextContainsToken = operator === ':' && allProperties;
const operatorText = freeTextContainsToken ? '' : operator + ' ';
return (React.createElement(React.Fragment, null,
allProperties ? '' : propertyLabel,
React.createElement("span", { className: styles['token-operator'] }, operatorText),
value));
};
//# sourceMappingURL=token.js.map