@cloudscape-design/components 3.0.33 → 3.0.34
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/internal/environment.js
CHANGED
package/package.json
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { AutosuggestProps } from '../autosuggest/interfaces';
|
|
3
3
|
import { PropertyFilterProps } from './interfaces';
|
|
4
|
+
declare type AsyncProps = Pick<AutosuggestProps, 'empty' | 'loadingText' | 'finishedText' | 'errorText' | 'recoveryText' | 'statusType'>;
|
|
4
5
|
interface TokenEditorProps extends Pick<PropertyFilterProps, 'filteringProperties' | 'filteringOptions' | 'onLoadItems' | 'i18nStrings' | 'asyncProperties' | 'customGroupsText' | 'disableFreeTextFiltering' | 'disabled' | 'expandToViewport'> {
|
|
5
6
|
token: PropertyFilterProps.Token;
|
|
6
7
|
triggerComponent?: React.ReactNode;
|
|
7
8
|
setToken: (newToken: PropertyFilterProps.Token) => void;
|
|
8
|
-
asyncProps:
|
|
9
|
+
asyncProps: AsyncProps;
|
|
9
10
|
}
|
|
10
|
-
export declare const TokenEditor: (
|
|
11
|
+
export declare const TokenEditor: ({ asyncProperties, asyncProps, customGroupsText, disableFreeTextFiltering, expandToViewport, filteringOptions, filteringProperties, i18nStrings, onLoadItems, setToken, token, triggerComponent, }: TokenEditorProps) => JSX.Element;
|
|
11
12
|
export {};
|
|
12
13
|
//# sourceMappingURL=token-editor.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"token-editor.d.ts","sourceRoot":"","sources":["../../../src/property-filter/token-editor.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAOhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAK7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"token-editor.d.ts","sourceRoot":"","sources":["../../../src/property-filter/token-editor.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAOhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAK7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAanD,aAAK,UAAU,GAAG,IAAI,CACpB,gBAAgB,EAChB,OAAO,GAAG,aAAa,GAAG,cAAc,GAAG,WAAW,GAAG,cAAc,GAAG,YAAY,CACvF,CAAC;AAEF,UAAU,gBACR,SAAQ,IAAI,CACV,mBAAmB,EACjB,qBAAqB,GACrB,kBAAkB,GAClB,aAAa,GACb,aAAa,GACb,iBAAiB,GACjB,kBAAkB,GAClB,0BAA0B,GAC1B,UAAU,GACV,kBAAkB,CACrB;IACD,KAAK,EAAE,mBAAmB,CAAC,KAAK,CAAC;IACjC,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,QAAQ,EAAE,CAAC,QAAQ,EAAE,mBAAmB,CAAC,KAAK,KAAK,IAAI,CAAC;IACxD,UAAU,EAAE,UAAU,CAAC;CACxB;AAsKD,eAAO,MAAM,WAAW,uMAarB,gBAAgB,gBAiGlB,CAAC"}
|
|
@@ -12,16 +12,12 @@ import { useUniqueId } from '../internal/hooks/use-unique-id/index';
|
|
|
12
12
|
import styles from './styles.css.js';
|
|
13
13
|
import { useLoadItems } from './use-load-items';
|
|
14
14
|
import { getAllowedOperators, getPropertyOptions, getPropertyByKey, operatorToDescription, getPropertySuggestions, } from './controller';
|
|
15
|
-
var
|
|
16
|
-
|
|
17
|
-
var
|
|
18
|
-
var
|
|
19
|
-
var property = temporaryToken.propertyKey !== undefined
|
|
20
|
-
? getPropertyByKey(filteringProperties, temporaryToken.propertyKey)
|
|
21
|
-
: undefined;
|
|
15
|
+
var freeTextOperators = [':', '!:'];
|
|
16
|
+
function PropertyInput(_a) {
|
|
17
|
+
var propertyKey = _a.propertyKey, onChangePropertyKey = _a.onChangePropertyKey, asyncProps = _a.asyncProps, filteringProperties = _a.filteringProperties, onLoadItems = _a.onLoadItems, customGroupsText = _a.customGroupsText, i18nStrings = _a.i18nStrings, disableFreeTextFiltering = _a.disableFreeTextFiltering;
|
|
18
|
+
var property = propertyKey !== undefined ? getPropertyByKey(filteringProperties, propertyKey) : undefined;
|
|
22
19
|
var propertySelectHandlers = useLoadItems(onLoadItems);
|
|
23
|
-
var asyncPropertySelectProps =
|
|
24
|
-
? __assign(__assign({}, asyncProps), propertySelectHandlers) : {};
|
|
20
|
+
var asyncPropertySelectProps = asyncProps ? __assign(__assign({}, asyncProps), propertySelectHandlers) : {};
|
|
25
21
|
var propertyOptions = getPropertySuggestions(filteringProperties, customGroupsText, i18nStrings, function (_a) {
|
|
26
22
|
var propertyLabel = _a.propertyLabel, key = _a.key;
|
|
27
23
|
return ({
|
|
@@ -37,90 +33,84 @@ var EditingFields = function (_a) {
|
|
|
37
33
|
if (!disableFreeTextFiltering) {
|
|
38
34
|
propertyOptions.unshift(allPropertiesOption);
|
|
39
35
|
}
|
|
40
|
-
var
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
var operator = temporaryToken.operator;
|
|
55
|
-
if (temporaryToken.operator && allowedOperators.indexOf(temporaryToken.operator) === -1) {
|
|
56
|
-
operator = allowedOperators[0];
|
|
57
|
-
}
|
|
58
|
-
setTemporaryToken(__assign(__assign({}, temporaryToken), { operator: operator, propertyKey: e.detail.selectedOption.value }));
|
|
59
|
-
} }, asyncPropertySelectProps)));
|
|
60
|
-
fields.push({
|
|
61
|
-
text: i18nStrings.propertyText,
|
|
62
|
-
className: styles['property-selector'],
|
|
63
|
-
control: propertySelect,
|
|
64
|
-
controlId: propertyControlId
|
|
65
|
-
});
|
|
66
|
-
var operatorText = temporaryToken.operator;
|
|
36
|
+
var controlId = useUniqueId('property');
|
|
37
|
+
return (React.createElement("div", { className: clsx(styles['token-editor-line'], styles['property-selector']), key: i18nStrings.propertyText },
|
|
38
|
+
React.createElement("label", { className: styles['token-editor-label'], htmlFor: controlId }, i18nStrings.propertyText),
|
|
39
|
+
React.createElement("div", { className: styles['token-editor-field'] },
|
|
40
|
+
React.createElement(InternalSelect, __assign({ controlId: controlId, options: propertyOptions, selectedOption: property
|
|
41
|
+
? {
|
|
42
|
+
value: propertyKey !== null && propertyKey !== void 0 ? propertyKey : undefined,
|
|
43
|
+
label: property.propertyLabel
|
|
44
|
+
}
|
|
45
|
+
: allPropertiesOption, onChange: function (e) { return onChangePropertyKey(e.detail.selectedOption.value); } }, asyncPropertySelectProps)))));
|
|
46
|
+
}
|
|
47
|
+
function OperatorInput(_a) {
|
|
48
|
+
var propertyKey = _a.propertyKey, operator = _a.operator, onChangeOperator = _a.onChangeOperator, filteringProperties = _a.filteringProperties, i18nStrings = _a.i18nStrings;
|
|
49
|
+
var property = propertyKey !== undefined ? getPropertyByKey(filteringProperties, propertyKey) : undefined;
|
|
67
50
|
var freeTextOperators = [':', '!:'];
|
|
68
51
|
var operatorOptions = (property ? getAllowedOperators(property) : freeTextOperators).map(function (operator) { return ({
|
|
69
52
|
value: operator,
|
|
70
53
|
label: operator,
|
|
71
54
|
description: operatorToDescription(operator, i18nStrings)
|
|
72
55
|
}); });
|
|
73
|
-
var
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
});
|
|
56
|
+
var contorlId = useUniqueId('operator');
|
|
57
|
+
return (React.createElement("div", { className: clsx(styles['token-editor-line'], styles['operator-selector']), key: i18nStrings.operatorText },
|
|
58
|
+
React.createElement("label", { className: styles['token-editor-label'], htmlFor: contorlId }, i18nStrings.operatorText),
|
|
59
|
+
React.createElement("div", { className: styles['token-editor-field'] },
|
|
60
|
+
React.createElement(InternalSelect, { controlId: contorlId, options: operatorOptions, triggerVariant: "option", selectedOption: operator
|
|
61
|
+
? {
|
|
62
|
+
value: operator,
|
|
63
|
+
label: operator,
|
|
64
|
+
description: operatorToDescription(operator, i18nStrings)
|
|
65
|
+
}
|
|
66
|
+
: null, onChange: function (e) { return onChangeOperator(e.detail.selectedOption.value); } }))));
|
|
67
|
+
}
|
|
68
|
+
function ValueInput(_a) {
|
|
69
|
+
var _b;
|
|
70
|
+
var propertyKey = _a.propertyKey, operator = _a.operator, value = _a.value, onChangeValue = _a.onChangeValue, asyncProps = _a.asyncProps, filteringProperties = _a.filteringProperties, filteringOptions = _a.filteringOptions, onLoadItems = _a.onLoadItems, i18nStrings = _a.i18nStrings;
|
|
71
|
+
var property = propertyKey !== undefined ? getPropertyByKey(filteringProperties, propertyKey) : undefined;
|
|
90
72
|
var valueOptions = property ? (_b = getPropertyOptions(property, filteringOptions)) === null || _b === void 0 ? void 0 : _b.map(function (_a) {
|
|
91
73
|
var value = _a.value;
|
|
92
74
|
return ({ value: value });
|
|
93
75
|
}) : [];
|
|
94
76
|
var valueAutosuggestHandlers = useLoadItems(onLoadItems, '', property);
|
|
95
|
-
var asyncValueAutosuggesProps =
|
|
77
|
+
var asyncValueAutosuggesProps = propertyKey
|
|
96
78
|
? __assign(__assign({}, valueAutosuggestHandlers), asyncProps) : { empty: asyncProps.empty };
|
|
97
|
-
var
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
});
|
|
107
|
-
return (React.createElement("div", null,
|
|
108
|
-
React.createElement(InternalSpaceBetween, { size: "l" }, fields.map(function (_a) {
|
|
109
|
-
var text = _a.text, control = _a.control, className = _a.className, controlId = _a.controlId;
|
|
110
|
-
return (React.createElement("div", { className: clsx(styles['token-editor-line'], className), key: text },
|
|
111
|
-
React.createElement("label", { className: styles['token-editor-label'], htmlFor: controlId }, text),
|
|
112
|
-
React.createElement("div", { className: styles['token-editor-field'] }, control)));
|
|
113
|
-
}))));
|
|
114
|
-
};
|
|
115
|
-
export var TokenEditor = function (props) {
|
|
116
|
-
var token = props.token, triggerComponent = props.triggerComponent, setToken = props.setToken, i18nStrings = props.i18nStrings, expandToViewport = props.expandToViewport;
|
|
117
|
-
var _a = useState(token), temporaryToken = _a[0], setTemporaryToken = _a[1];
|
|
79
|
+
var controlId = useUniqueId('value');
|
|
80
|
+
return (React.createElement("div", { className: clsx(styles['token-editor-line'], styles['value-selector']), key: i18nStrings.valueText },
|
|
81
|
+
React.createElement("label", { className: styles['token-editor-label'], htmlFor: controlId }, i18nStrings.valueText),
|
|
82
|
+
React.createElement("div", { className: styles['token-editor-field'] },
|
|
83
|
+
React.createElement(InternalAutosuggest, __assign({ controlId: controlId, enteredTextLabel: i18nStrings.enteredTextLabel, value: value !== null && value !== void 0 ? value : '', onChange: function (e) { return onChangeValue(e.detail.value); }, disabled: !operator, options: valueOptions }, asyncValueAutosuggesProps, { virtualScroll: true })))));
|
|
84
|
+
}
|
|
85
|
+
export var TokenEditor = function (_a) {
|
|
86
|
+
var asyncProperties = _a.asyncProperties, asyncProps = _a.asyncProps, customGroupsText = _a.customGroupsText, disableFreeTextFiltering = _a.disableFreeTextFiltering, expandToViewport = _a.expandToViewport, filteringOptions = _a.filteringOptions, filteringProperties = _a.filteringProperties, i18nStrings = _a.i18nStrings, onLoadItems = _a.onLoadItems, setToken = _a.setToken, token = _a.token, triggerComponent = _a.triggerComponent;
|
|
87
|
+
var _b = useState(token), temporaryToken = _b[0], setTemporaryToken = _b[1];
|
|
118
88
|
var popoverRef = useRef(null);
|
|
119
89
|
var closePopover = function () {
|
|
120
90
|
popoverRef.current && popoverRef.current.dismissPopover();
|
|
121
91
|
};
|
|
92
|
+
var propertyKey = temporaryToken.propertyKey;
|
|
93
|
+
var onChangePropertyKey = function (newPropertyKey) {
|
|
94
|
+
var filteringProperty = filteringProperties.reduce(function (acc, property) { return (property.key === newPropertyKey ? property : acc); }, undefined);
|
|
95
|
+
var allowedOperators = filteringProperty ? getAllowedOperators(filteringProperty) : freeTextOperators;
|
|
96
|
+
var operator = temporaryToken.operator && allowedOperators.indexOf(temporaryToken.operator) !== -1
|
|
97
|
+
? temporaryToken.operator
|
|
98
|
+
: allowedOperators[0];
|
|
99
|
+
setTemporaryToken(__assign(__assign({}, temporaryToken), { propertyKey: newPropertyKey, operator: operator }));
|
|
100
|
+
};
|
|
101
|
+
var operator = temporaryToken.operator;
|
|
102
|
+
var onChangeOperator = function (newOperator) {
|
|
103
|
+
setTemporaryToken(__assign(__assign({}, temporaryToken), { operator: newOperator }));
|
|
104
|
+
};
|
|
105
|
+
var value = temporaryToken.value;
|
|
106
|
+
var onChangeValue = function (newValue) {
|
|
107
|
+
setTemporaryToken(__assign(__assign({}, temporaryToken), { value: newValue }));
|
|
108
|
+
};
|
|
122
109
|
return (React.createElement(InternalPopover, { ref: popoverRef, className: styles['token-label'], triggerType: "text", header: i18nStrings.editTokenHeader, size: "large", position: "right", dismissAriaLabel: i18nStrings.dismissAriaLabel, __onOpen: function () { return setTemporaryToken(token); }, renderWithPortal: expandToViewport, content: React.createElement("div", { className: styles['token-editor'] },
|
|
123
|
-
React.createElement(
|
|
110
|
+
React.createElement(InternalSpaceBetween, { size: "l" },
|
|
111
|
+
React.createElement(PropertyInput, { propertyKey: propertyKey, onChangePropertyKey: onChangePropertyKey, asyncProps: asyncProperties ? asyncProps : null, filteringProperties: filteringProperties, onLoadItems: onLoadItems, customGroupsText: customGroupsText, i18nStrings: i18nStrings, disableFreeTextFiltering: disableFreeTextFiltering }),
|
|
112
|
+
React.createElement(OperatorInput, { propertyKey: propertyKey, operator: operator, onChangeOperator: onChangeOperator, filteringProperties: filteringProperties, i18nStrings: i18nStrings }),
|
|
113
|
+
React.createElement(ValueInput, { propertyKey: propertyKey, operator: operator, value: value, onChangeValue: onChangeValue, asyncProps: asyncProps, filteringProperties: filteringProperties, filteringOptions: filteringOptions, onLoadItems: onLoadItems, i18nStrings: i18nStrings })),
|
|
124
114
|
React.createElement("div", { className: styles['token-editor-actions'] },
|
|
125
115
|
React.createElement(InternalButton, { variant: "link", className: styles['token-editor-cancel'], onClick: closePopover }, i18nStrings.cancelActionText),
|
|
126
116
|
React.createElement(InternalButton, { className: styles['token-editor-submit'], onClick: function () {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"token-editor.js","sourceRoot":"","sources":["../../../src/property-filter/token-editor.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useState, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { SelectProps } from '../select/interfaces';\nimport InternalSelect from '../select/internal';\nimport InternalSpaceBetween from '../space-between/internal';\nimport InternalAutosuggest from '../autosuggest/internal';\nimport { AutosuggestProps } from '../autosuggest/interfaces';\nimport InternalPopover, { InternalPopoverRef } from '../popover/internal';\nimport { InternalButton } from '../button/internal';\nimport { useUniqueId } from '../internal/hooks/use-unique-id/index';\n\nimport { PropertyFilterProps } from './interfaces';\nimport styles from './styles.css.js';\nimport { useLoadItems } from './use-load-items';\nimport {\n getAllowedOperators,\n getPropertyOptions,\n getPropertyByKey,\n operatorToDescription,\n getPropertySuggestions,\n} from './controller';\n\ninterface TokenEditorProps\n extends Pick<\n PropertyFilterProps,\n | 'filteringProperties'\n | 'filteringOptions'\n | 'onLoadItems'\n | 'i18nStrings'\n | 'asyncProperties'\n | 'customGroupsText'\n | 'disableFreeTextFiltering'\n | 'disabled'\n | 'expandToViewport'\n > {\n token: PropertyFilterProps.Token;\n triggerComponent?: React.ReactNode;\n setToken: (newToken: PropertyFilterProps.Token) => void;\n asyncProps: Pick<\n AutosuggestProps,\n 'empty' | 'loadingText' | 'finishedText' | 'errorText' | 'recoveryText' | 'statusType'\n >;\n}\n\nconst EditingFields = ({\n temporaryToken,\n setTemporaryToken,\n asyncProps,\n asyncProperties,\n filteringProperties,\n filteringOptions,\n onLoadItems,\n customGroupsText,\n i18nStrings,\n disableFreeTextFiltering,\n}: TokenEditorProps & {\n temporaryToken: PropertyFilterProps.Token;\n setTemporaryToken: (token: PropertyFilterProps.Token) => void;\n}) => {\n const fields = [];\n const property =\n temporaryToken.propertyKey !== undefined\n ? getPropertyByKey(filteringProperties, temporaryToken.propertyKey)\n : undefined;\n const propertySelectHandlers = useLoadItems(onLoadItems);\n const asyncPropertySelectProps = asyncProperties\n ? {\n ...asyncProps,\n ...propertySelectHandlers,\n }\n : {};\n const propertyOptions: (SelectProps.Option | SelectProps.OptionGroup)[] = getPropertySuggestions(\n filteringProperties,\n customGroupsText,\n i18nStrings,\n ({ propertyLabel, key }) => ({\n value: key,\n label: propertyLabel,\n dontCloseOnSelect: true,\n })\n );\n const allPropertiesOption = {\n label: i18nStrings.allPropertiesLabel,\n value: undefined,\n };\n if (!disableFreeTextFiltering) {\n propertyOptions.unshift(allPropertiesOption);\n }\n\n const propertyControlId = useUniqueId('property');\n const propertySelect = (\n <InternalSelect\n controlId={propertyControlId}\n options={propertyOptions}\n selectedOption={\n property\n ? {\n value: temporaryToken.propertyKey,\n label: property.propertyLabel,\n }\n : allPropertiesOption\n }\n onChange={e => {\n const filteringProperty = e.detail.selectedOption?.value\n ? filteringProperties.reduce<PropertyFilterProps.FilteringProperty | undefined>(\n (acc, property) => (property.key === e.detail.selectedOption.value ? property : acc),\n undefined\n )\n : undefined;\n const allowedOperators: PropertyFilterProps.ComparisonOperator[] = filteringProperty\n ? getAllowedOperators(filteringProperty)\n : freeTextOperators;\n let operator = temporaryToken.operator;\n if (temporaryToken.operator && allowedOperators.indexOf(temporaryToken.operator) === -1) {\n operator = allowedOperators[0];\n }\n setTemporaryToken({\n ...temporaryToken,\n operator,\n propertyKey: e.detail.selectedOption.value,\n });\n }}\n {...asyncPropertySelectProps}\n />\n );\n fields.push({\n text: i18nStrings.propertyText,\n className: styles['property-selector'],\n control: propertySelect,\n controlId: propertyControlId,\n });\n\n const operatorText = temporaryToken.operator;\n const freeTextOperators: PropertyFilterProps.ComparisonOperator[] = [':', '!:'];\n const operatorOptions = (property ? getAllowedOperators(property) : freeTextOperators).map(operator => ({\n value: operator,\n label: operator,\n description: operatorToDescription(operator, i18nStrings),\n }));\n const operatorControlId = useUniqueId('operator');\n const operatorSelect = temporaryToken && (\n <InternalSelect\n controlId={operatorControlId}\n options={operatorOptions}\n triggerVariant=\"option\"\n selectedOption={\n operatorText\n ? {\n value: operatorText,\n label: operatorText,\n description: operatorToDescription(operatorText, i18nStrings),\n }\n : null\n }\n onChange={e => {\n e.detail.selectedOption.value &&\n setTemporaryToken({\n ...temporaryToken,\n operator: e.detail.selectedOption.value as PropertyFilterProps.ComparisonOperator,\n });\n }}\n disabled={!temporaryToken}\n />\n );\n fields.push({\n text: i18nStrings.operatorText,\n className: styles['operator-selector'],\n control: operatorSelect,\n controlId: operatorControlId,\n });\n\n const valueOptions = property ? getPropertyOptions(property, filteringOptions)?.map(({ value }) => ({ value })) : [];\n const valueAutosuggestHandlers = useLoadItems(onLoadItems, '', property);\n const asyncValueAutosuggesProps = temporaryToken.propertyKey\n ? {\n ...valueAutosuggestHandlers,\n ...asyncProps,\n }\n : { empty: asyncProps.empty };\n const valueControlId = useUniqueId('value');\n const valueAutosuggest = temporaryToken && (\n <InternalAutosuggest\n controlId={valueControlId}\n enteredTextLabel={i18nStrings.enteredTextLabel}\n value={temporaryToken.value || ''}\n onChange={e => {\n setTemporaryToken({\n ...temporaryToken,\n value: e.detail.value,\n });\n }}\n disabled={!operatorText}\n options={valueOptions}\n {...asyncValueAutosuggesProps}\n virtualScroll={true}\n />\n );\n fields.push({\n text: i18nStrings.valueText,\n className: styles['value-selector'],\n control: valueAutosuggest,\n controlId: valueControlId,\n });\n return (\n <div>\n <InternalSpaceBetween size=\"l\">\n {fields.map(({ text, control, className, controlId }) => (\n <div className={clsx(styles['token-editor-line'], className)} key={text}>\n <label className={styles['token-editor-label']} htmlFor={controlId}>\n {text}\n </label>\n <div className={styles['token-editor-field']}>{control}</div>\n </div>\n ))}\n </InternalSpaceBetween>\n </div>\n );\n};\n\nexport const TokenEditor = (props: TokenEditorProps) => {\n const { token, triggerComponent, setToken, i18nStrings, expandToViewport } = props;\n const [temporaryToken, setTemporaryToken] = useState<PropertyFilterProps.Token>(token);\n const popoverRef = useRef<InternalPopoverRef>(null);\n const closePopover = () => {\n popoverRef.current && popoverRef.current.dismissPopover();\n };\n return (\n <InternalPopover\n ref={popoverRef}\n className={styles['token-label']}\n triggerType=\"text\"\n header={i18nStrings.editTokenHeader}\n size=\"large\"\n position=\"right\"\n dismissAriaLabel={i18nStrings.dismissAriaLabel}\n __onOpen={() => setTemporaryToken(token)}\n renderWithPortal={expandToViewport}\n content={\n <div className={styles['token-editor']}>\n <EditingFields {...props} temporaryToken={temporaryToken} setTemporaryToken={setTemporaryToken} />\n <div className={styles['token-editor-actions']}>\n <InternalButton variant=\"link\" className={styles['token-editor-cancel']} onClick={closePopover}>\n {i18nStrings.cancelActionText}\n </InternalButton>\n <InternalButton\n className={styles['token-editor-submit']}\n onClick={() => {\n setToken(temporaryToken as PropertyFilterProps.Token);\n closePopover();\n }}\n >\n {i18nStrings.applyActionText}\n </InternalButton>\n </div>\n </div>\n }\n >\n {triggerComponent}\n </InternalPopover>\n );\n};\n"]}
|
|
1
|
+
{"version":3,"file":"token-editor.js","sourceRoot":"","sources":["../../../src/property-filter/token-editor.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useState, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { SelectProps } from '../select/interfaces';\nimport InternalSelect from '../select/internal';\nimport InternalSpaceBetween from '../space-between/internal';\nimport InternalAutosuggest from '../autosuggest/internal';\nimport { AutosuggestProps } from '../autosuggest/interfaces';\nimport InternalPopover, { InternalPopoverRef } from '../popover/internal';\nimport { InternalButton } from '../button/internal';\nimport { useUniqueId } from '../internal/hooks/use-unique-id/index';\n\nimport { PropertyFilterProps } from './interfaces';\nimport styles from './styles.css.js';\nimport { useLoadItems } from './use-load-items';\nimport {\n getAllowedOperators,\n getPropertyOptions,\n getPropertyByKey,\n operatorToDescription,\n getPropertySuggestions,\n} from './controller';\n\nconst freeTextOperators: PropertyFilterProps.ComparisonOperator[] = [':', '!:'];\n\ntype AsyncProps = Pick<\n AutosuggestProps,\n 'empty' | 'loadingText' | 'finishedText' | 'errorText' | 'recoveryText' | 'statusType'\n>;\n\ninterface TokenEditorProps\n extends Pick<\n PropertyFilterProps,\n | 'filteringProperties'\n | 'filteringOptions'\n | 'onLoadItems'\n | 'i18nStrings'\n | 'asyncProperties'\n | 'customGroupsText'\n | 'disableFreeTextFiltering'\n | 'disabled'\n | 'expandToViewport'\n > {\n token: PropertyFilterProps.Token;\n triggerComponent?: React.ReactNode;\n setToken: (newToken: PropertyFilterProps.Token) => void;\n asyncProps: AsyncProps;\n}\n\ninterface PropertyInputProps\n extends Pick<\n PropertyFilterProps,\n 'filteringProperties' | 'onLoadItems' | 'i18nStrings' | 'customGroupsText' | 'disableFreeTextFiltering'\n > {\n propertyKey: undefined | string;\n onChangePropertyKey: (propertyKey: undefined | string) => void;\n asyncProps: null | AsyncProps;\n}\n\nfunction PropertyInput({\n propertyKey,\n onChangePropertyKey,\n asyncProps,\n filteringProperties,\n onLoadItems,\n customGroupsText,\n i18nStrings,\n disableFreeTextFiltering,\n}: PropertyInputProps) {\n const property = propertyKey !== undefined ? getPropertyByKey(filteringProperties, propertyKey) : undefined;\n const propertySelectHandlers = useLoadItems(onLoadItems);\n const asyncPropertySelectProps = asyncProps ? { ...asyncProps, ...propertySelectHandlers } : {};\n const propertyOptions: (SelectProps.Option | SelectProps.OptionGroup)[] = getPropertySuggestions(\n filteringProperties,\n customGroupsText,\n i18nStrings,\n ({ propertyLabel, key }) => ({\n value: key,\n label: propertyLabel,\n dontCloseOnSelect: true,\n })\n );\n const allPropertiesOption = {\n label: i18nStrings.allPropertiesLabel,\n value: undefined,\n };\n if (!disableFreeTextFiltering) {\n propertyOptions.unshift(allPropertiesOption);\n }\n const controlId = useUniqueId('property');\n\n return (\n <div className={clsx(styles['token-editor-line'], styles['property-selector'])} key={i18nStrings.propertyText}>\n <label className={styles['token-editor-label']} htmlFor={controlId}>\n {i18nStrings.propertyText}\n </label>\n <div className={styles['token-editor-field']}>\n <InternalSelect\n controlId={controlId}\n options={propertyOptions}\n selectedOption={\n property\n ? {\n value: propertyKey ?? undefined,\n label: property.propertyLabel,\n }\n : allPropertiesOption\n }\n onChange={e => onChangePropertyKey(e.detail.selectedOption.value)}\n {...asyncPropertySelectProps}\n />\n </div>\n </div>\n );\n}\n\ninterface OperatorInputProps extends Pick<PropertyFilterProps, 'filteringProperties' | 'i18nStrings'> {\n propertyKey: undefined | string;\n operator: undefined | PropertyFilterProps.ComparisonOperator;\n onChangeOperator: (operator: PropertyFilterProps.ComparisonOperator) => void;\n}\n\nfunction OperatorInput({\n propertyKey,\n operator,\n onChangeOperator,\n filteringProperties,\n i18nStrings,\n}: OperatorInputProps) {\n const property = propertyKey !== undefined ? getPropertyByKey(filteringProperties, propertyKey) : undefined;\n const freeTextOperators: PropertyFilterProps.ComparisonOperator[] = [':', '!:'];\n const operatorOptions = (property ? getAllowedOperators(property) : freeTextOperators).map(operator => ({\n value: operator,\n label: operator,\n description: operatorToDescription(operator, i18nStrings),\n }));\n const contorlId = useUniqueId('operator');\n\n return (\n <div className={clsx(styles['token-editor-line'], styles['operator-selector'])} key={i18nStrings.operatorText}>\n <label className={styles['token-editor-label']} htmlFor={contorlId}>\n {i18nStrings.operatorText}\n </label>\n <div className={styles['token-editor-field']}>\n <InternalSelect\n controlId={contorlId}\n options={operatorOptions}\n triggerVariant=\"option\"\n selectedOption={\n operator\n ? {\n value: operator,\n label: operator,\n description: operatorToDescription(operator, i18nStrings),\n }\n : null\n }\n onChange={e => onChangeOperator(e.detail.selectedOption.value as PropertyFilterProps.ComparisonOperator)}\n />\n </div>\n </div>\n );\n}\n\ninterface ValueInputProps\n extends Pick<PropertyFilterProps, 'filteringProperties' | 'filteringOptions' | 'onLoadItems' | 'i18nStrings'> {\n propertyKey: undefined | string;\n operator: undefined | PropertyFilterProps.ComparisonOperator;\n value: undefined | string;\n onChangeValue: (value: string) => void;\n asyncProps: AsyncProps;\n}\n\nfunction ValueInput({\n propertyKey,\n operator,\n value,\n onChangeValue,\n asyncProps,\n filteringProperties,\n filteringOptions,\n onLoadItems,\n i18nStrings,\n}: ValueInputProps) {\n const property = propertyKey !== undefined ? getPropertyByKey(filteringProperties, propertyKey) : undefined;\n const valueOptions = property ? getPropertyOptions(property, filteringOptions)?.map(({ value }) => ({ value })) : [];\n const valueAutosuggestHandlers = useLoadItems(onLoadItems, '', property);\n const asyncValueAutosuggesProps = propertyKey\n ? { ...valueAutosuggestHandlers, ...asyncProps }\n : { empty: asyncProps.empty };\n const controlId = useUniqueId('value');\n\n return (\n <div className={clsx(styles['token-editor-line'], styles['value-selector'])} key={i18nStrings.valueText}>\n <label className={styles['token-editor-label']} htmlFor={controlId}>\n {i18nStrings.valueText}\n </label>\n <div className={styles['token-editor-field']}>\n <InternalAutosuggest\n controlId={controlId}\n enteredTextLabel={i18nStrings.enteredTextLabel}\n value={value ?? ''}\n onChange={e => onChangeValue(e.detail.value)}\n disabled={!operator}\n options={valueOptions}\n {...asyncValueAutosuggesProps}\n virtualScroll={true}\n />\n </div>\n </div>\n );\n}\n\nexport const TokenEditor = ({\n asyncProperties,\n asyncProps,\n customGroupsText,\n disableFreeTextFiltering,\n expandToViewport,\n filteringOptions,\n filteringProperties,\n i18nStrings,\n onLoadItems,\n setToken,\n token,\n triggerComponent,\n}: TokenEditorProps) => {\n const [temporaryToken, setTemporaryToken] = useState<PropertyFilterProps.Token>(token);\n const popoverRef = useRef<InternalPopoverRef>(null);\n const closePopover = () => {\n popoverRef.current && popoverRef.current.dismissPopover();\n };\n\n const propertyKey = temporaryToken.propertyKey;\n const onChangePropertyKey = (newPropertyKey: undefined | string) => {\n const filteringProperty = filteringProperties.reduce<PropertyFilterProps.FilteringProperty | undefined>(\n (acc, property) => (property.key === newPropertyKey ? property : acc),\n undefined\n );\n const allowedOperators = filteringProperty ? getAllowedOperators(filteringProperty) : freeTextOperators;\n const operator =\n temporaryToken.operator && allowedOperators.indexOf(temporaryToken.operator) !== -1\n ? temporaryToken.operator\n : allowedOperators[0];\n setTemporaryToken({ ...temporaryToken, propertyKey: newPropertyKey, operator });\n };\n\n const operator = temporaryToken.operator;\n const onChangeOperator = (newOperator: PropertyFilterProps.ComparisonOperator) => {\n setTemporaryToken({ ...temporaryToken, operator: newOperator });\n };\n\n const value = temporaryToken.value;\n const onChangeValue = (newValue: string) => {\n setTemporaryToken({ ...temporaryToken, value: newValue });\n };\n\n return (\n <InternalPopover\n ref={popoverRef}\n className={styles['token-label']}\n triggerType=\"text\"\n header={i18nStrings.editTokenHeader}\n size=\"large\"\n position=\"right\"\n dismissAriaLabel={i18nStrings.dismissAriaLabel}\n __onOpen={() => setTemporaryToken(token)}\n renderWithPortal={expandToViewport}\n content={\n <div className={styles['token-editor']}>\n <InternalSpaceBetween size=\"l\">\n <PropertyInput\n propertyKey={propertyKey}\n onChangePropertyKey={onChangePropertyKey}\n asyncProps={asyncProperties ? asyncProps : null}\n filteringProperties={filteringProperties}\n onLoadItems={onLoadItems}\n customGroupsText={customGroupsText}\n i18nStrings={i18nStrings}\n disableFreeTextFiltering={disableFreeTextFiltering}\n />\n\n <OperatorInput\n propertyKey={propertyKey}\n operator={operator}\n onChangeOperator={onChangeOperator}\n filteringProperties={filteringProperties}\n i18nStrings={i18nStrings}\n />\n\n <ValueInput\n propertyKey={propertyKey}\n operator={operator}\n value={value}\n onChangeValue={onChangeValue}\n asyncProps={asyncProps}\n filteringProperties={filteringProperties}\n filteringOptions={filteringOptions}\n onLoadItems={onLoadItems}\n i18nStrings={i18nStrings}\n />\n </InternalSpaceBetween>\n\n <div className={styles['token-editor-actions']}>\n <InternalButton variant=\"link\" className={styles['token-editor-cancel']} onClick={closePopover}>\n {i18nStrings.cancelActionText}\n </InternalButton>\n <InternalButton\n className={styles['token-editor-submit']}\n onClick={() => {\n setToken(temporaryToken as PropertyFilterProps.Token);\n closePopover();\n }}\n >\n {i18nStrings.applyActionText}\n </InternalButton>\n </div>\n </div>\n }\n >\n {triggerComponent}\n </InternalPopover>\n );\n};\n"]}
|