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

Awesome React UI Widgets

import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { classes } from '@eviljs/react/classes';
import { useMergeRefs } from '@eviljs/react/ref';
import { identity } from '@eviljs/std/fn-return';
import { useRef, useState } from 'react';
export { decoratingElement, decoratingElementAfter, decoratingElementBefore } from '@eviljs/react/children';
export function InputLabel(props) {
    const { children, className, labelClass, title, ...otherProps } = props;
    return (_jsxs("div", { ...otherProps, className: classes('InputLabel-5738', className), children: [_jsx("label", { className: classes('label-b082 std-text-body2 std-color-fg2', labelClass), children: title }), children] }));
}
export function Input(props) {
    const { className, decorate, disabled: disabledOptional, hostClass, hostProps, hostStyle, inputClass, inputProps, inputStyle, readOnly: readonlyOptional, ref: refOptional, required: requiredOptional, onChange, ...otherProps } = props;
    const inputRef = useRef(null);
    const inputRefMerged = useMergeRefs(inputRef, refOptional);
    const disabled = disabledOptional ?? false;
    const readonly = readonlyOptional ?? false;
    const required = requiredOptional ?? false;
    const renderInput = decorate ?? identity;
    return (_jsx("div", { "aria-disabled": disabled, "aria-readonly": readonly, "aria-required": required, ...hostProps, className: classes('Input-cc0a', className, hostClass, hostProps?.className), style: { ...hostStyle, ...hostProps?.style }, onClick: event => {
            hostProps?.onClick?.(event);
            inputRef.current?.focus();
        }, children: renderInput(_jsx("input", { ...otherProps, ref: inputRefMerged, className: classes('input-2d2b', inputClass, inputProps?.className), disabled: disabled, readOnly: readonly, required: required, style: { ...inputStyle, ...inputProps?.style }, onChange: event => onChange?.(event.currentTarget.value, event) })) }));
}
export function TextInput(props) {
    const { className, ...otherProps } = props;
    return (_jsx(Input, { type: "text", ...otherProps, className: classes('TextInput-1330', className) }));
}
export function SecretInput(props) {
    const { buttonClass, buttonProps, buttonStyle, className, decorate, hideIcon, showIcon, ...otherProps } = props;
    const [visible, setVisible] = useState(false);
    return (_jsx(Input, { ...otherProps, type: visible ? 'text' : 'password', className: classes('SecretInput-b91c', className), decorate: input => _jsxs(_Fragment, { children: [decorate?.(input) ?? input, _jsx("button", { type: "button", tabIndex: -1, ...buttonProps, className: classes('button-2bdf', buttonClass, buttonProps?.className), style: {
                        ...buttonStyle,
                        ...buttonProps?.style,
                    }, onClick: event => {
                        setVisible(!visible);
                        buttonProps?.onClick?.(event);
                    }, children: visible
                        ? hideIcon
                        : showIcon })] }) }));
}