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

React design system, components, and utilities

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.InputLine = void 0;
const React = require("react");
const nano_theme_1 = require("nano-theme");
const Close_1 = require("../../icons/svg/Close");
const SpinnerBars_1 = require("../SpinnerBars");
const { createElement: h, useState, useCallback, useMemo, useRef, useEffect } = React;
const noop = () => { };
let idCounter = 0;
const blockClass = (0, nano_theme_1.rule)({
    pos: 'relative',
    ov: 'hidden',
    '&.disabled': {
        op: 0.7,
    },
    '&>input': {
        w: '100%',
        mar: 0,
        bd: 0,
        out: 0,
        ff: nano_theme_1.lightTheme.font.ui3.mid.ff,
        fw: nano_theme_1.lightTheme.font.ui3.mid.fw,
    },
    '&>label': {
        pos: 'absolute',
        left: 0,
        top: '20px',
        fz: '20px',
        ff: nano_theme_1.lightTheme.font.sans.lite.ff,
        fw: nano_theme_1.lightTheme.font.sans.lite.fw,
        trs: 'top 0.2s, font-size 0.2s',
        transitionDelay: '0.2s',
        pe: 'none',
    },
    '&>label.small': {
        top: '7px',
        fz: '14px',
    },
    '&>label.focus': {
        top: 0,
        fz: '12px',
        col: nano_theme_1.lightTheme.g(0.5),
    },
    '&>label.small.focus': {
        top: '-1px',
        fz: '9px',
    },
    '&>.rightIcon': {
        pos: 'absolute',
        d: 'block',
        w: '16px',
        h: '16px',
        pad: '20px',
        top: 0,
        right: 0,
        cur: 'pointer',
    },
    '&>svg': {
        pos: 'absolute',
        top: 0,
        left: 0,
        w: '300%',
        h: '100%',
        fill: 'transparent',
        pe: 'none',
        trs: 'transform 0.8s, stroke-width 0.8s, stroke 0.8s',
    },
});
const InputLine = (props) => {
    const { disabled, value = '', onPaste, small, label, readOnly, type = 'text', waiting } = props;
    const id = useMemo(() => 'InputLine-' + idCounter++, []);
    const [focus, setFocus] = useState(false);
    const ref = useRef(null);
    const theme = (0, nano_theme_1.useTheme)();
    const dynamicClass = (0, nano_theme_1.useRule)((theme) => ({
        '&>svg': {
            stroke: theme.g(0, 0.15),
        },
    }));
    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();
        }
    }, [ref.current]);
    const onCancelClick = useCallback((e) => {
        e.preventDefault();
        if (props.onCancelClick)
            props.onCancelClick();
    }, [props.onCancelClick]);
    const showClose = value && !!props.onCancelClick;
    let style = {
        background: theme.bg,
        padding: small ? '10px 0 8px' : '19px 0 17px',
        fontSize: 18 * (small ? 0.9 : 1.3) + 'px',
        color: theme.g(0),
    };
    if (showClose) {
        style.paddingRight = 50;
    }
    if (props.style) {
        style = { ...style, ...props.style };
    }
    let rightIcon = null;
    if (waiting) {
        rightIcon = h('a', { className: 'rightIcon' }, h(SpinnerBars_1.SpinnerBars));
    }
    else if (showClose) {
        rightIcon = h('a', { className: 'rightIcon', onClick: onCancelClick }, h(Close_1.default));
    }
    const svgAttr = {
        viewBox: '0 0 1200 60',
        preserveAspectRatio: 'none',
    };
    if (focus) {
        svgAttr.style = {
            transform: 'translate3d(-66%, 0, 0)',
            stroke: theme.color.sem.positive[1],
            strokeWidth: small ? '2px' : '3px',
        };
    }
    const inputAttr = {
        ref,
        disabled,
        value,
        type,
        readOnly,
        style,
        onFocus,
        onBlur,
        onKeyDown,
        onPaste,
    };
    let labelElement = null;
    if (label) {
        inputAttr.id = id;
        labelElement = (React.createElement("label", { htmlFor: id, className: '' + (small ? ' small' : '') + (value || focus ? ' focus' : ''), style: { color: theme.g(0, 0.6) } }, label));
    }
    return (React.createElement("div", { className: blockClass + dynamicClass },
        React.createElement("input", { ...inputAttr, onChange: (e) => (props.onChange || noop)(e.target.value) }),
        labelElement,
        rightIcon,
        React.createElement("svg", { ...svgAttr },
            React.createElement("path", { d: "M0,56.5c0,0,298.666,0,399.333,0C448.336,56.5,513.994,46,597,46c77.327,0,135,10.5,200.999,10.5c95.996,0,402.001,0,402.001,0" }))));
};
exports.InputLine = InputLine;