@eviljs/reactx/input-v1/input.js

Awesome React UI Widgets

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { classes } from '@eviljs/react/classes';
import { useMergeRefs } from '@eviljs/react/ref';
import { useLayoutEffect, useRef, useState } from 'react';
export function Input(props) {
    const { className, label, placeholder, ref, type, value, autoComplete, autoFocus, tabIndex, onChange, ...otherProps } = props;
    const [focus, setFocus] = useState(false);
    const [translateY, setTranslateY] = useState(0);
    const fieldRef = useRef(null);
    const labelRef = useRef(null);
    const inputRef = useRef(null);
    const inputRefMerged = useMergeRefs(inputRef, ref);
    const labelPlaceholder = !Boolean(value) && !focus;
    const labelScale = 1.4;
    useLayoutEffect(() => {
        const field = fieldRef.current;
        const label = labelRef.current;
        const fieldHeight = field?.getBoundingClientRect().height ?? 0;
        const fieldTop = field?.getBoundingClientRect().top ?? 0;
        const labelTop = label?.getBoundingClientRect().top ?? 0;
        const labelHeight = label?.clientHeight ?? 0;
        const offset = labelTop - fieldTop;
        const translateY = fieldHeight - offset * 2 - labelHeight * labelScale;
        setTranslateY(translateY);
    }, [Boolean(label)]);
    return (_jsxs("div", { ...otherProps, ref: fieldRef, className: classes('Input-i7ee', className), "data-focus": focus, "data-placeholder": labelPlaceholder, onClick: () => inputRef.current?.focus(), children: [label &&
                _jsx("label", { ref: labelRef, className: "label-id45 std-text-body2", style: {
                        transform: labelPlaceholder
                            ? `translateY(${translateY}px) scale(${labelScale})`
                            : undefined,
                    }, children: label }), _jsx("input", { ref: inputRefMerged, className: "field-ceba std-text-body1", type: type || 'text', value: value, autoComplete: autoComplete, autoFocus: autoFocus, tabIndex: tabIndex, placeholder: placeholder, onFocus: () => setFocus(true), onBlur: () => setFocus(false), onChange: event => onChange?.(event.currentTarget.value, event) })] }));
}