@re-flex/ui/TextField/index.js

Re-Flex ui library

import TextFieldBase from "@re-flex/styled/TextFieldBase";
import { css, useTheme } from "@re-flex/styles";
import clsx from "clsx";
import React, { useMemo, useState } from "react";
import ButtonBase from "../ButtonBase";
import Text from "../Typography";
import FieldBase from "./FieldBase";
import InputBase from "./InputBase";
const TextField = ({ variant = "standart", startAdornment, endAdornment, tag = "input", size = "md", label = "TextField", fieldProps = {}, readOnly = false, value, onChange, disabled = false, inputProps, htmlFor, wrapperClassName, fullWidth, onFocus, onBlur, name, id, required, defaultValue, defaultChecked, error, type, helperText, ...wrapperProps }) => {
    const [isFocused, setIsFocused] = useState(false);
    const theme = useTheme();
    htmlFor = useMemo(() => {
        if (id) {
            return id;
        }
        const uniqId = Number(Date.now()).toString(16);
        if (htmlFor === undefined) {
            return uniqId;
        }
        return htmlFor;
    }, [htmlFor, id]);
    value = value || defaultValue;
    return (React.createElement(TextFieldBase, { className: clsx(theme.prefix + "-textfield", theme.prefix + "-textfield-" + variant, css({ width: fullWidth ? "100%" : "auto" })), error: error, size: size, disabled: disabled, ...fieldProps, ...wrapperProps },
        React.createElement(FieldBase, { className: wrapperClassName, label: label, startAdornment: startAdornment, endAdornment: endAdornment, mode: variant, isFocused: isFocused, size: size, htmlFor: htmlFor, error: error, disabled: disabled, isActive: !!value || !!defaultValue },
            React.createElement(InputBase, { component: tag === "button" ? ButtonBase : tag, ...inputProps, className: clsx(inputProps?.className, theme.prefix + "-input-base"), size: size, id: htmlFor, defaultValue: defaultValue, defaultChecked: defaultChecked, required: required, name: name, type: type, value: value, variant: variant, ...(tag === "div"
                    ? {
                        contentEditable: !readOnly && !disabled && true,
                        children: value,
                    }
                    : tag === "input"
                        ? { value: value || defaultValue }
                        : { children: value || defaultValue }), onFocus: (e) => {
                    if (typeof onFocus === "function") {
                        onFocus(e);
                    }
                    setIsFocused(true);
                }, onBlur: (e) => {
                    if (typeof onBlur === "function") {
                        onBlur(e);
                    }
                    setIsFocused(false);
                }, readOnly: readOnly, disabled: disabled, onChange: !readOnly && onChange })),
        helperText && (React.createElement(Text, { color: error ? "error.main" : "text.secondary", sx: { "--typography-opacity": 0.7, my: 0.2 }, variant: "caption" }, helperText))));
};
export default TextField;