@uimkit/uikit-react/dist/cjs/components/AutoCompleteTextarea/List.js

<img style="width:64px" src="https://mgmt.uimkit.chat/media/img/avatar.png"/>

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var tslib = require('tslib');
var React = require('react');
var clsx_m = require('../../node_modules/.pnpm/clsx@1.2.1/node_modules/clsx/dist/clsx.m.js');
var ComponentContext = require('../../context/ComponentContext.js');
var utils = require('../../utils.js');
var Item = require('./Item.js');
var Header = require('./Header.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

var List = function (_a) {
    var className = _a.className, component = _a.component, currentTrigger = _a.currentTrigger, dropdownScroll = _a.dropdownScroll, getSelectedItem = _a.getSelectedItem, getTextToReplace = _a.getTextToReplace, PropHeader = _a.Header, itemClassName = _a.itemClassName, itemStyle = _a.itemStyle, onSelect = _a.onSelect, selectionEnd = _a.selectionEnd, style = _a.style, PropSuggestionItem = _a.SuggestionItem, propValue = _a.value, values = _a.values;
    var _b = ComponentContext.useComponentContext('SuggestionList'), AutocompleteSuggestionHeader = _b.AutocompleteSuggestionHeader, AutocompleteSuggestionItem = _b.AutocompleteSuggestionItem;
    var SuggestionItem = PropSuggestionItem || AutocompleteSuggestionItem || Item.Item;
    var SuggestionHeader = PropHeader || AutocompleteSuggestionHeader || Header.DefaultSuggestionListHeader;
    var _c = React.useState(undefined), selectedItem = _c[0], setSelectedItem = _c[1];
    var itemsRef = [];
    var isSelected = function (item) {
        return selectedItem === values.findIndex(function (value) { return getId(value) === getId(item); });
    };
    var getId = function (item) {
        var textToReplace = getTextToReplace(item);
        if (textToReplace.key) {
            return textToReplace.key;
        }
        if (typeof item === 'string' || !item.key) {
            return textToReplace.text;
        }
        return item.key;
    };
    var modifyText = function (value) {
        if (!value)
            return;
        onSelect(getTextToReplace(value));
        if (getSelectedItem)
            getSelectedItem(value);
    };
    var handleClick = function (e) {
        e === null || e === void 0 ? void 0 : e.preventDefault();
        modifyText(values[selectedItem]);
    };
    var selectItem = React.useCallback(function (item) {
        var index = values.findIndex(function (value) {
            return value.id ? value.id === item.id : value.name === item.name;
        });
        setSelectedItem(index);
    }, [values]);
    var handleKeyDown = React.useCallback(function (event) {
        if (event.key === 'ArrowUp') {
            setSelectedItem(function (prevSelected) {
                if (prevSelected === undefined)
                    return 0;
                var newID = prevSelected === 0 ? values.length - 1 : prevSelected - 1;
                dropdownScroll(itemsRef[newID]);
                return newID;
            });
        }
        if (event.key === 'ArrowDown') {
            setSelectedItem(function (prevSelected) {
                if (prevSelected === undefined)
                    return 0;
                var newID = prevSelected === values.length - 1 ? 0 : prevSelected + 1;
                dropdownScroll(itemsRef[newID]);
                return newID;
            });
        }
        if ((event.key === 'Enter' || event.key === 'Tab') && selectedItem !== undefined) {
            handleClick(event);
        }
        return null;
    }, [selectedItem, values]);
    React.useEffect(function () {
        document.addEventListener('keydown', handleKeyDown, false);
        return function () { return document.removeEventListener('keydown', handleKeyDown); };
    }, [handleKeyDown]);
    React.useEffect(function () {
        if (values === null || values === void 0 ? void 0 : values.length)
            selectItem(values[0]);
    }, [values]); // eslint-disable-line
    var restructureItem = React.useCallback(function (item) {
        var matched = item.name || item.id;
        var textBeforeCursor = propValue.slice(0, selectionEnd);
        var triggerIndex = textBeforeCursor.lastIndexOf(currentTrigger);
        var editedPropValue = utils.escapeRegExp(textBeforeCursor.slice(triggerIndex + 1));
        var parts = matched.split(new RegExp("(".concat(editedPropValue, ")"), 'gi'));
        var itemNameParts = { match: editedPropValue, parts: parts };
        return tslib.__assign(tslib.__assign({}, item), { itemNameParts: itemNameParts });
    }, [propValue, selectionEnd, currentTrigger]);
    var restructuredValues = React.useMemo(function () { return values.map(restructureItem); }, [values, restructureItem]);
    return (React__default["default"].createElement("ul", { className: clsx_m.clsx('rta__list', className), style: style },
        React__default["default"].createElement("li", { className: 'rta__list-header' },
            React__default["default"].createElement(SuggestionHeader, { currentTrigger: currentTrigger, value: propValue })),
        restructuredValues.map(function (item, i) { return (React__default["default"].createElement(SuggestionItem, { className: itemClassName, component: component, item: item, key: getId(item), onClickHandler: handleClick, onSelectHandler: selectItem, ref: function (ref) {
                itemsRef[i] = ref;
            }, selected: isSelected(item), style: itemStyle, value: propValue })); })));
};

exports.List = List;
//# sourceMappingURL=List.js.map