react-emoji-popup-lister/dist/components/EmojiInput.jsx

React emoji search & select by colon syntax, with keyboard navigation

var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import React from "react";
import emojiSubstring from "../util/emoji-substring";
var EmojiInput = function (_a) {
    var input = _a.input, value = _a.value, setValue = _a.setValue, active = _a.active, setActive = _a.setActive, list = _a.list, emoji = _a.emoji, setEmoji = _a.setEmoji, selStart = _a.selStart, setSelStart = _a.setSelStart, setMouseNav = _a.setMouseNav, placeholder = _a.placeholder, ariaLabel = _a.ariaLabel, strict = _a.strict, props = __rest(_a, ["input", "value", "setValue", "active", "setActive", "list", "emoji", "setEmoji", "selStart", "setSelStart", "setMouseNav", "placeholder", "ariaLabel", "strict"]);
    var InputField = input;
    // Main input event interactivity on Keydown
    var handleKeyDown = function (e) {
        var _a;
        // User-passed event
        (_a = props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, e);
        setMouseNav(false);
        if (!active)
            return;
        var prevent = ["Enter", "ArrowDown", "ArrowUp", "Tab", "Home", "End"];
        if (prevent.indexOf(e.key) > -1)
            e.preventDefault();
        if (e.key === "ArrowUp") {
            list.prev();
        }
        else if (e.key === "ArrowDown") {
            list.next();
        }
        else if (e.key === "Enter" || e.key === "Tab") {
            list.select();
        }
        else if (e.key === "Home") {
            list.index(0);
        }
        else if (e.key === "End") {
            list.index(emoji.list.length - 1);
        }
        else if (e.key === "Escape") {
            setEmoji(__assign(__assign({}, emoji), { search: "" }));
            setActive(false);
        }
    };
    // Determine emoji search and visibility on Keyup
    var handleKeyUp = function (e) {
        var _a;
        // User-passed event
        (_a = props.onKeyUp) === null || _a === void 0 ? void 0 : _a.call(props, e);
        setMouseNav(false);
        var start = selStart - 1;
        var _active = active;
        if (e.key === "Escape") {
            setEmoji(__assign(__assign({}, emoji), { search: "" }));
            setActive(false);
            return;
        }
        // Possible state change cases
        if (e.key === ":") {
            _active = true;
        }
        else if (e.key === " ") {
            _active = false;
        }
        else if (e.key === "Backspace" && value && value[start] === ":") {
            _active = false;
        }
        var str = emojiSubstring(value, start, strict);
        _active = str.length ? true : false;
        setEmoji(__assign(__assign({}, emoji), { search: str }));
        setActive(_active);
    };
    // Controlled input change
    var handleChange = function (e) {
        var _a;
        // User-passed event
        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, e);
        if (e.target.selectionStart)
            setSelStart(e.target.selectionStart);
        setValue(e.target.value);
    };
    // User-passed event only
    var handleClick = function (e) {
        var _a;
        (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
    };
    var handleFocus = function (e) {
        var _a;
        (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
    };
    var handleBlur = function (e) {
        var _a;
        (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
    };
    return (<>
			{input ? (<InputField value={value} onClick={handleClick} onChange={handleChange} onKeyUp={handleKeyUp} onKeyDown={handleKeyDown} onFocus={handleFocus} onBlur={handleBlur} placeholder={placeholder || ""} aria-label={ariaLabel || "Generic input with emoji support"} className="input"/>) : (<input value={value} onClick={handleClick} onChange={handleChange} onKeyUp={handleKeyUp} onKeyDown={handleKeyDown} placeholder={placeholder || ""} aria-label={ariaLabel || "Generic input with emoji support"} onFocus={handleFocus} onBlur={handleBlur} className="input"></input>)}

			<style>{"\n\t\t\t\t.input,\n\t\t\t\t.wrapper > input,\n\t\t\t\t.wrapper > textarea {\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\tbox-sizing: border-box;\n\t\t\t\t\tfont-size: inherit;\n\t\t\t\t\tfont-family: inherit;\n\t\t\t\t}\n\t\t\t"}</style>

		</>);
};
export default EmojiInput;
//# sourceMappingURL=EmojiInput.jsx.map