@awsui/components-react/tag-editor/internal.js

AWS UI is a collection of [React](https://reactjs.org/) components that help create intuitive, responsive, and accessible user experiences for web applications. It is developed by Amazon Web Services (AWS). This work is available under the terms of the [A

import { __assign } from "tslib";
import React, { useEffect, useRef, useState } from 'react';
import Autosuggest from '../autosuggest';
import useFocusVisible from '../internal/hooks/focus-visible';
import { KeyCode } from '../internal/keycode';
import { makeCancellable, PromiseCancelledSignal } from './utils';
import styles from './styles.css.js';
export var TagControl = React.forwardRef(function (_a, ref) {
    var row = _a.row, value = _a.value, readOnly = _a.readOnly, defaultOptions = _a.defaultOptions, placeholder = _a.placeholder, errorText = _a.errorText, loadingText = _a.loadingText, suggestionText = _a.suggestionText, tooManySuggestionText = _a.tooManySuggestionText, limit = _a.limit, filteringKey = _a.filteringKey, enteredTextLabel = _a.enteredTextLabel, onChange = _a.onChange, onBlur = _a.onBlur, onRequest = _a.onRequest, initialOptionsRef = _a.initialOptionsRef;
    var _b = useState(defaultOptions), options = _b[0], setOptions = _b[1];
    var _c = useState(), statusType = _c[0], setStatusType = _c[1];
    var requestCancelFnRef = useRef({
        cancel: function () { },
        isCancelled: function () { return false; }
    });
    var latestFilteringQuery = useRef({ key: undefined, value: undefined });
    var isSameQuery = function (key, value) {
        return latestFilteringQuery.current.key === key && latestFilteringQuery.current.value === value;
    };
    useEffect(function () { return function () { return requestCancelFnRef.current.cancel(); }; }, []);
    var onLoadItems = function (filteringText) {
        if (!onRequest || isSameQuery(filteringKey, filteringText) || requestCancelFnRef.current.isCancelled()) {
            return;
        }
        requestCancelFnRef.current.cancel();
        if (filteringText === '' && (initialOptionsRef === null || initialOptionsRef === void 0 ? void 0 : initialOptionsRef.current) && initialOptionsRef.current.length > 0) {
            setOptions(initialOptionsRef.current);
        }
        if (latestFilteringQuery.current.key !== filteringKey) {
            setOptions([]);
        }
        setStatusType('loading');
        latestFilteringQuery.current = { key: filteringKey, value: filteringText };
        var _a = makeCancellable(onRequest(filteringText)), promise = _a.promise, cancel = _a.cancel, isCancelled = _a.isCancelled;
        promise
            .then(function (newValues) {
            var newOptions = newValues.map(function (value) { return ({ value: value }); });
            setStatusType(undefined);
            setOptions(newOptions);
            if (initialOptionsRef) {
                initialOptionsRef.current = newOptions;
            }
        })["catch"](function (err) {
            if (!(err instanceof PromiseCancelledSignal)) {
                setStatusType('error');
            }
        });
        requestCancelFnRef.current = { cancel: cancel, isCancelled: isCancelled };
    };
    return (React.createElement(Autosuggest, { ref: ref, value: value, readOnly: readOnly, statusType: statusType, options: options.length < limit ? options : [], empty: options.length < limit ? suggestionText : tooManySuggestionText, placeholder: placeholder, errorText: errorText, loadingText: loadingText, enteredTextLabel: enteredTextLabel, onChange: function (_a) {
            var detail = _a.detail;
            return onChange(detail.value, row);
        }, onBlur: function () { return onBlur === null || onBlur === void 0 ? void 0 : onBlur(row); }, onFocus: function () {
            onLoadItems('');
        }, onLoadItems: function (_a) {
            var detail = _a.detail;
            onLoadItems(detail.filteringText);
        } }));
});
export var UndoButton = React.forwardRef(function (_a, ref) {
    var children = _a.children, onClick = _a.onClick;
    var focusVisible = useFocusVisible();
    return (React.createElement("a", __assign({}, focusVisible, { ref: ref, role: "button", tabIndex: 0, className: styles['undo-button'], onClick: onClick, onKeyDown: function (event) {
            if (event.keyCode === KeyCode.space || event.keyCode === KeyCode.enter) {
                event.preventDefault();
            }
            if (event.keyCode === KeyCode.enter) {
                onClick();
            }
        }, onKeyUp: function (event) {
            if (event.keyCode === KeyCode.space) {
                onClick();
            }
        } }), children));
});