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

React design system, components, and utilities

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Input = void 0;
const React = require("react");
const nano_theme_1 = require("nano-theme");
const SpinnerBars_1 = require("../SpinnerBars");
const NotchedOutline_1 = require("../NotchedOutline");
const Split_1 = require("../../3-list-item/Split");
const styles_1 = require("../../styles");
const context_1 = require("../../styles/context");
const inpClass = (0, nano_theme_1.rule)({
    ...styles_1.fonts.get('ui', 'bold', 1),
    fz: '15px',
    lh: '1.4em',
    d: 'block',
    w: '100%',
    bxz: 'border-box',
    bd: 0,
    bdrad: '4px',
    mr: 0,
    pd: '4px 5px',
    out: 0,
    bg: 'transparent',
    '&:disabled': {
        bg: 'transparent',
    },
});
const { useState, useCallback, useRef, useEffect } = React;
const noop = () => { };
const Input = (props) => {
    const { disabled, value = '', placeholder, onPaste, onEsc, label, size, readOnly, type = 'text', waiting, right, } = props;
    const [focus, setFocus] = useState(false);
    const ref = useRef(null);
    const styles = (0, context_1.useStyles)();
    useEffect(() => {
        if (!ref.current)
            return;
        if (!props.focus)
            return;
        if (props.focus)
            ref.current.focus();
        if (props.select)
            ref.current.select();
    }, [ref.current]);
    const onFocus = useCallback(() => {
        setFocus(true);
        (props.onFocus || noop)();
    }, [props.onFocus]);
    const onBlur = useCallback(() => {
        setFocus(false);
        (props.onBlur || noop)();
    }, [props.onBlur]);
    const onKeyDown = useCallback((e) => {
        if (!ref.current)
            return;
        if (props.isInForm && e.key === 'Enter') {
            ref.current.blur();
        }
        else if (e.key === 'Escape')
            onEsc?.(e);
    }, [ref.current]);
    let rightElement = null;
    if (right) {
        rightElement = right;
    }
    else if (waiting) {
        rightElement = React.createElement(SpinnerBars_1.SpinnerBars, null);
    }
    const style = {
        color: !value && !!placeholder ? styles.g(0.6) : styles.g(0.1),
    };
    if (size) {
        const factor = size < 0 ? 1 : 2;
        style.fontSize = `${16 + size * factor}px`;
        style.paddingTop = `${4 + size * factor}px`;
        style.paddingBottom = `${4 + size * factor}px`;
        if (size < 0) {
            style.fontWeight = styles_1.fonts.get('ui', 'mid', 1).fw;
        }
    }
    const inputAttr = {
        ref: (input) => {
            ref.current = input;
            props.inp?.(input);
        },
        className: inpClass,
        style,
        disabled,
        value,
        placeholder: placeholder || '',
        type,
        readOnly,
        onFocus,
        onBlur,
        onKeyDown,
        onPaste,
    };
    return (React.createElement(NotchedOutline_1.NotchedOutline, { label: label, active: focus, disabled: disabled || readOnly, style: { background: focus ? styles.col.map('bg') : 'transparent' } },
        React.createElement(Split_1.Split, { style: { alignItems: 'center' } },
            React.createElement("input", { ...inputAttr, onChange: (e) => (props.onChange || noop)(e.target.value) }),
            rightElement)));
};
exports.Input = Input;