@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
86 lines • 6.16 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React from 'react';
import InternalAutosuggest from '../autosuggest/internal.js';
import InternalMultiselect from '../multiselect/internal.js';
import InternalSelect from '../select/internal.js';
import { getAllowedOperators, getPropertySuggestions } from './controller.js';
import { operatorToDescription } from './i18n-utils.js';
import { useLoadItems } from './use-load-items.js';
import styles from './styles.css.js';
export function PropertyInput({ property, onChangePropertyKey, asyncProps, filteringProperties, onLoadItems, customGroupsText, i18nStrings, freeTextFiltering, }) {
var _a;
const propertySelectHandlers = useLoadItems(onLoadItems);
const asyncPropertySelectProps = asyncProps ? { ...asyncProps, ...propertySelectHandlers } : {};
const propertyOptions = getPropertySuggestions(filteringProperties, customGroupsText, i18nStrings, ({ propertyKey, propertyLabel }) => ({
value: propertyKey,
label: propertyLabel,
dontCloseOnSelect: true,
}));
const allPropertiesOption = {
label: i18nStrings.allPropertiesLabel,
value: undefined,
};
if (!freeTextFiltering.disabled) {
propertyOptions.unshift(allPropertiesOption);
}
return (React.createElement(InternalSelect, { filteringType: "auto", options: propertyOptions, selectedOption: property
? {
value: (_a = property.propertyKey) !== null && _a !== void 0 ? _a : undefined,
label: property.propertyLabel,
}
: allPropertiesOption, onChange: e => onChangePropertyKey(e.detail.selectedOption.value), ...asyncPropertySelectProps }));
}
export function OperatorInput({ property, operator, onChangeOperator, i18nStrings, freeTextFiltering, triggerVariant, }) {
const operatorOptions = (property ? getAllowedOperators(property) : freeTextFiltering.operators).map(operator => ({
value: operator,
label: operator,
description: operatorToDescription(operator, i18nStrings),
}));
return (React.createElement(InternalSelect, { options: operatorOptions, triggerVariant: triggerVariant, selectedOption: operator
? {
value: operator,
label: operator,
description: operatorToDescription(operator, i18nStrings),
}
: null, onChange: e => onChangeOperator(e.detail.selectedOption.value) }));
}
export function ValueInput(props) {
const { property, operator, value, onChangeValue } = props;
const OperatorForm = (property === null || property === void 0 ? void 0 : property.propertyKey) && operator && (property === null || property === void 0 ? void 0 : property.getValueFormRenderer(operator));
if (OperatorForm) {
return React.createElement(OperatorForm, { value: value, onChange: onChangeValue, operator: operator });
}
if (property && operator && property.getTokenType(operator) === 'enum') {
return React.createElement(ValueInputEnum, { ...props, property: property, operator: operator });
}
return React.createElement(ValueInputAuto, { ...props });
}
function ValueInputAuto({ property, operator, value: unknownValue, onChangeValue, asyncProps, filteringOptions, onLoadItems, i18nStrings, }) {
var _a;
const value = (unknownValue !== null && unknownValue !== void 0 ? unknownValue : '') + '';
const valueOptions = property
? filteringOptions
.filter(option => { var _a; return ((_a = option.property) === null || _a === void 0 ? void 0 : _a.propertyKey) === property.propertyKey; })
.map(({ label, value, tags, filteringTags }) => ({ label, value, tags, filteringTags }))
: [];
const valueAutosuggestHandlers = useLoadItems(onLoadItems, '', property === null || property === void 0 ? void 0 : property.externalProperty, value, operator);
const asyncValueAutosuggestProps = (property === null || property === void 0 ? void 0 : property.propertyKey)
? { ...valueAutosuggestHandlers, ...asyncProps }
: { empty: asyncProps.empty };
const [matchedOption] = valueOptions.filter(option => option.value === value);
return (React.createElement(InternalAutosuggest, { enteredTextLabel: i18nStrings.enteredTextLabel, value: (_a = matchedOption === null || matchedOption === void 0 ? void 0 : matchedOption.label) !== null && _a !== void 0 ? _a : value, clearAriaLabel: i18nStrings.clearAriaLabel, onChange: e => onChangeValue(e.detail.value), disabled: !operator, options: valueOptions, ...asyncValueAutosuggestProps, virtualScroll: true }));
}
function ValueInputEnum({ property, operator, value: unknownValue, onChangeValue, asyncProps, filteringOptions, onLoadItems, }) {
const valueOptions = filteringOptions
.filter(option => { var _a; return ((_a = option.property) === null || _a === void 0 ? void 0 : _a.propertyKey) === property.propertyKey; })
.map(({ label, value, tags, filteringTags }) => ({ label, value, tags, filteringTags }));
const valueAutosuggestHandlers = useLoadItems(onLoadItems, '', property.externalProperty, undefined, operator);
const asyncValueAutosuggestProps = { statusType: 'finished', ...valueAutosuggestHandlers, ...asyncProps };
const value = !unknownValue ? [] : Array.isArray(unknownValue) ? unknownValue : [unknownValue];
const selectedOptions = valueOptions.filter(option => value.includes(option.value));
return (React.createElement("div", { className: styles['token-editor-multiselect-wrapper'] },
React.createElement("div", { className: styles['token-editor-multiselect-wrapper-inner'] },
React.createElement(InternalMultiselect, { filteringType: "auto", selectedOptions: selectedOptions, onChange: e => onChangeValue(e.detail.selectedOptions.map(o => o.value)), options: valueOptions.length > 0 ? [{ options: valueOptions, label: property.groupValuesLabel }] : [], ...asyncValueAutosuggestProps, inlineTokens: true, hideTokens: true, keepOpen: true }))));
}
//# sourceMappingURL=token-editor-inputs.js.map