@platformbuilders/fluid-react/dist/components/TextInput/index.js

Builders React for Fluid Design System

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef, useRef, useState, } from 'react';
import Icons from '../Icons';
import { Fieldset, IconWrapperLeft, IconWrapperRight, Input, InputWrapper, Label, Message, PlaceholderLabel, StyledIMaskInput, Wrapper, } from './styles';
const TextInput = forwardRef(({ message, error, onChange, onBlur, onFocus, onClickIconLeft, onClickIconRight, style, label, textInputStyle, value, id, name, maxLength, autoFocus, maskOptions, iconRight, iconLeft, variant = 'default', ...rest }, ref) => {
    const [isFocused, setIsFocused] = useState(false);
    const hasValue = value?.length > 0;
    const hasError = error ? error.length > 0 : false;
    const hasFocus = isFocused || hasValue;
    const RightIconComponent = typeof iconRight === 'string' && iconRight in Icons
        ? Icons[iconRight]
        : null;
    const LeftIconComponent = iconLeft && Icons[iconLeft];
    const ErrorIconComponent = Icons['ExclamationTriangleIcon'];
    const onAccept = (value) => {
        if (onChange) {
            onChange({
                target: {
                    name,
                    value,
                },
            });
        }
    };
    const handleFocus = () => {
        setIsFocused(true);
    };
    const handleBlur = (event) => {
        if (event.target.value === '') {
            setIsFocused(false);
        }
    };
    const inputRef = useRef(null);
    return (_jsxs(Wrapper, { style: style, "$variant": variant, children: [variant === 'outlined' && (_jsx(Label, { htmlFor: id, "$hasFocus": hasFocus, "$hasError": hasError, "$hasIconLeft": !!iconLeft, "$hasIconRight": !!iconRight, "$isDisabled": rest.disabled, children: label })), _jsxs(InputWrapper, { "$hasFocus": hasFocus, "$hasError": hasError, "$variant": variant, "$isDisabled": rest.disabled, children: [iconLeft && (_jsx(IconWrapperLeft, { "$clickable": !!onClickIconLeft, "$hasError": hasError, onClick: onClickIconLeft, children: _jsx(LeftIconComponent, { id: `${id}-left-icon`, accessibility: "\u00EDcone do bot\u00E3o" }) })), maskOptions ? (_jsx(StyledIMaskInput, { ...maskOptions, id: id, name: name, "data-testid": id, style: textInputStyle, ref: ref, inputRef: inputRef, onAccept: onAccept, autoFocus: autoFocus, hasError: hasError, onFocus: (event) => {
                            handleFocus();
                            onFocus?.(event);
                        }, onBlur: (event) => {
                            handleBlur(event);
                            onBlur?.(event);
                        }, mask: hasFocus ? maskOptions?.mask : '', defaultValue: value, "$hasIconLeft": !!iconLeft, "$hasIconRight": !!iconRight, "$hasError": hasError, "$variant": variant, "$isDisabled": rest.disabled, ...rest })) : (_jsx(Input, { id: id, "data-testid": id, name: name, value: value, style: textInputStyle, ref: ref, onFocus: (event) => {
                            handleFocus();
                            onFocus?.(event);
                        }, onBlur: (event) => {
                            handleBlur(event);
                            onBlur?.(event);
                        }, onChange: onChange, maxLength: maxLength, autoFocus: autoFocus, "$hasError": hasError, "$hasIconLeft": !!iconLeft, "$hasIconRight": !!iconRight, "$variant": variant, "$isDisabled": rest.disabled, ...rest })), iconRight && (_jsx(IconWrapperRight, { "$clickable": !!onClickIconRight, "$hasError": hasError, onClick: onClickIconRight, children: RightIconComponent ? (_jsx(RightIconComponent, { id: `${id}-right-icon`, accessibility: "\u00EDcone do bot\u00E3o" })) : (iconRight) })), variant === 'outlined' && (_jsx(Fieldset, { "$hasFocus": hasFocus, "$hasError": hasError, "$isDisabled": rest.disabled, children: _jsx("legend", { children: _jsx("span", { children: label }) }) }))] }), variant !== 'outlined' && (_jsx(PlaceholderLabel, { className: "text-input-label", "$hasIconLeft": !!iconLeft, "$hasIconRight": !!iconRight, "$hasError": hasError, "$hasValue": hasValue, children: label })), error || message ? (_jsxs(Message, { className: "error-text-input", "$hasError": hasError, "$variant": variant, children: [variant === 'outlined' && _jsx(ErrorIconComponent, {}), error || message] })) : null] }));
});
export default TextInput;