nice-ui/lib/2-inline-block/Typeahead/index.js

React design system, components, and utilities

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Typeahead = void 0;
const React = require("react");
const nano_theme_1 = require("nano-theme");
const blockClass = (0, nano_theme_1.rule)({
    pos: 'relative',
    w: '100%',
    h: '100%',
});
const mainInputClass = (0, nano_theme_1.rule)({
    zIndex: 10,
    w: '100%',
    h: '100%',
    pd: 0,
    mr: 0,
    bd: 0,
    out: 0,
    op: 1,
    bg: 'none',
});
const shadowInputClass = (0, nano_theme_1.rule)({
    pe: 'none',
    us: 'none',
    pos: 'absolute',
    z: 5,
    w: '100%',
    h: '100%',
    t: 0,
    l: 0,
    r: 0,
    b: 0,
    pd: 0,
    mr: 0,
    bd: 0,
    out: 0,
    bg: 'none',
    op: 0.35,
    '&:disabled': {
        bg: 'none',
        op: 0.35,
    },
});
const Typeahead = ({ value, placeholder, autoFocus, disabled, onInput, onChange, onDeleteBefore, onKeyUp, onKeyDown, onTab, onTabBack, onEnter, }) => {
    const theme = (0, nano_theme_1.useTheme)();
    const ref = React.useRef();
    // Set focus on mount.
    React.useEffect(() => {
        if (ref.current)
            ref.current.focus();
    }, [autoFocus]);
    // Return ref to parent.
    React.useEffect(() => {
        if (onInput && ref.current)
            onInput(ref.current);
    }, [onInput]);
    const dynamicBlockClass = (0, nano_theme_1.useRule)((theme) => ({
        input: {
            col: theme.g(0, 0.8),
        },
    }));
    const handleChange = onChange
        ? (e) => onChange(e.target.value)
        : undefined;
    const handleKeyDown = (e) => {
        if (onDeleteBefore && !value && e.key === 'Backspace') {
            e.preventDefault();
            e.stopPropagation();
            onDeleteBefore();
            return;
        }
        if (onKeyUp && (e.key === 'ArrowUp' || e.key === 'ArrowLeft')) {
            e.preventDefault();
            e.stopPropagation();
            onKeyUp();
            return;
        }
        if (onKeyDown && (e.key === 'ArrowDown' || e.key === 'ArrowRight')) {
            e.preventDefault();
            e.stopPropagation();
            onKeyDown();
            return;
        }
        if (onTabBack && e.key === 'Tab' && e.shiftKey) {
            e.preventDefault();
            e.stopPropagation();
            onTabBack();
            return;
        }
        if (onTab && e.key === 'Tab') {
            e.preventDefault();
            e.stopPropagation();
            onTab();
            return;
        }
    };
    const handleKeyUp = (e) => {
        if (onEnter && e.key === 'Enter')
            onEnter();
    };
    return (React.createElement("div", { className: blockClass + dynamicBlockClass },
        React.createElement("input", { ref: ref, disabled: disabled, className: mainInputClass, value: value, style: { textShadow: disabled ? `0 0 2px ${theme.g(0.2, 0.8)}` : undefined }, readOnly: !handleChange, onChange: handleChange, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp }),
        !!placeholder && React.createElement("input", { disabled: true, className: shadowInputClass, value: placeholder, readOnly: true })));
};
exports.Typeahead = Typeahead;