react-selector-input/dist/SelectInput/select-input.js

a React input component with selector and filter

"use strict";

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

var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

require("./select-input.css");

var _icons = require("@ant-design/icons");

var _searchAllSubstrings = require("../StringsFunc/search-all-substrings");

var _searchAllSubstrings2 = _interopRequireDefault(_searchAllSubstrings);

var _stringsRender = require("../StringsFunc/strings-render");

var _stringsRender2 = _interopRequireDefault(_stringsRender);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function SelectInput(props) {
    var _useState = (0, _react.useState)(false),
        _useState2 = _slicedToArray(_useState, 2),
        isExpand = _useState2[0],
        setIsExpand = _useState2[1];

    var _useState3 = (0, _react.useState)(props.defaultValue),
        _useState4 = _slicedToArray(_useState3, 2),
        inputValue = _useState4[0],
        setInputValue = _useState4[1];

    var _useState5 = (0, _react.useState)(false),
        _useState6 = _slicedToArray(_useState5, 2),
        showClear = _useState6[0],
        setShowClear = _useState6[1];

    var inputRef = (0, _react.useRef)();
    var listRef = (0, _react.useRef)();
    var select_list = (0, _react.useMemo)(function () {
        return props.options.filter(function (item) {
            return !!(!inputValue || item.label.includes(inputValue));
        }).map(function (item) {
            var itemContent = void 0;
            if (inputValue) {
                itemContent = (0, _stringsRender2.default)(item.label, (0, _searchAllSubstrings2.default)(item.label, inputValue), inputValue.length);
            } else {
                itemContent = item.label;
            }
            return _react2.default.createElement(
                "div",
                { className: "select-list-item",
                    style: { fontSize: props.listFontSize, padding: props.listPadding },
                    onClick: function onClick() {
                        setInputValue(item.label);
                    } },
                itemContent
            );
        });
    }, [props.options, inputValue]);
    var closeList = function closeList() {
        setIsExpand(false);
        setTimeout(function () {
            listRef.current.style.display = 'none';
        }, 200);
    };
    var openList = function openList() {
        listRef.current.style.display = 'block';
        setTimeout(function () {
            setIsExpand(true);
        }, 10);
    };
    var suffixIcon = (0, _react.useMemo)(function () {
        if (props.showClear && showClear && inputValue) {
            return _react2.default.createElement(
                "span",
                { className: "react-select-input-close", onClick: function onClick() {
                        setInputValue('');
                    } },
                _react2.default.createElement(_icons.DeleteOutlined, null)
            );
        } else {
            if (isExpand) return _react2.default.createElement(_icons.SearchOutlined, null);else return _react2.default.createElement(_icons.DownOutlined, null);
        }
    }, [isExpand, showClear, inputValue]);
    return _react2.default.createElement(
        "div",
        { className: "react-select-input-wrapper", style: { width: props.width } },
        props.disabled ? _react2.default.createElement(
            "div",
            { className: "react-select-input-container disabled" },
            _react2.default.createElement("input", { className: "react-select-input disabled",
                style: { padding: props.inputPadding, fontSize: props.inputFontSize },
                ref: inputRef,
                value: inputValue,
                disabled: true }),
            _react2.default.createElement(
                "span",
                { className: "down-arrow disabled" },
                suffixIcon
            )
        ) : _react2.default.createElement(
            "div",
            null,
            _react2.default.createElement(
                "div",
                { className: "react-select-input-container",
                    onMouseOver: function onMouseOver() {
                        setShowClear(true);
                    },
                    onMouseOut: function onMouseOut() {
                        setShowClear(false);
                    } },
                _react2.default.createElement("input", { className: "react-select-input",
                    style: { padding: props.inputPadding, fontSize: props.inputFontSize },
                    ref: inputRef,
                    placeholder: props.placeholder,
                    value: inputValue,
                    onBlur: function onBlur() {
                        closeList();
                    },
                    onChange: function onChange(e) {
                        setInputValue(e.target.value);
                        props.onChange(e);
                    },
                    onFocus: function onFocus() {
                        openList();
                    } }),
                _react2.default.createElement(
                    "span",
                    { className: "down-arrow" },
                    suffixIcon
                )
            ),
            _react2.default.createElement(
                "div",
                { style: select_list.length > 0 ? {} : { display: 'none' } },
                _react2.default.createElement(
                    "div",
                    { ref: listRef, className: 'react-select-input-select-list',
                        style: isExpand ? { width: props.width, height: props.listHeight } : {
                            opacity: 0,
                            width: props.width,
                            height: props.listHeight
                        } },
                    select_list
                )
            )
        )
    );
}

exports.default = SelectInput;