@heycar-uikit/core/input/modern/Input.js

The React UI library from HeyCar

import React, { useState, useCallback } from 'react';
import cn from 'classnames';
import FormControl from '../../form-control/modern';

var styles = {"input":"input__input_1otyp","hasLeftIcon":"input__hasLeftIcon_1otyp","hasRightIcon":"input__hasRightIcon_1otyp"};
 require('./styles/default.css');

const Input = React.forwardRef(({ value, type = 'text', hint, pattern, error, label, fullWidth = false, disabled, readOnly, rightIcon, rightAddons, leftIcon, onFocus, onBlur, onChange, onInput, className, dataTestId, ...restProps }, ref) => {
    const inputClassNames = cn(styles.input, className, {
        [styles.hasLeftIcon]: leftIcon,
        [styles.hasRightIcon]: rightIcon || rightAddons,
    });
    const ariaLabel = typeof label === 'string' ? label : undefined;
    const [isFocused, setFocused] = useState(restProps.autoFocus);
    const isFilled = Boolean(value ? value : false);
    const handleInputFocus = useCallback((event) => {
        if (!readOnly)
            setFocused(true);
        if (onFocus)
            onFocus(event);
    }, [onFocus, readOnly]);
    const handleInputBlur = useCallback((event) => {
        setFocused(false);
        if (onBlur)
            onBlur(event);
    }, [onBlur]);
    return (React.createElement(FormControl, { disabled: disabled, error: error, filled: isFilled || isFocused, focused: isFocused, fullWidth: fullWidth, hint: hint, label: label, leftIcon: leftIcon, rightAddons: rightAddons, rightIcon: rightIcon },
        React.createElement("input", { ...restProps, "aria-label": ariaLabel, className: inputClassNames, "data-test-id": dataTestId, disabled: disabled, onBlur: handleInputBlur, onChange: onChange, onFocus: handleInputFocus, onInput: onInput, pattern: pattern, readOnly: readOnly, ref: ref, type: type, value: value })));
});
Input.displayName = 'Input';

export { Input as default };