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

Re-Flex ui library

import { TextFieldContainer, TextFieldContent, TextFieldFieldSet, TextFieldFieldSetLegend, TextFieldLabel, TextFieldTrailing, } from "@re-flex/styled";
import { css, useTheme } from "@re-flex/styles";
import { convertUnit2Rem } from "@re-flex/utils";
import clsx from "clsx";
import React, { useMemo, useRef } from "react";
const FieldBase = ({ label, children, startAdornment, endAdornment, isFocused, isActive, mode = "outlined", size = 14, htmlFor, className, disabled, ...rest }) => {
    const theme = useTheme();
    const startAdornmentRef = useRef(null);
    const startAdornmentWidth = useMemo(() => {
        if (!startAdornmentRef.current) {
            return 0;
        }
        return startAdornmentRef.current?.clientWidth || 0;
    }, [startAdornmentRef.current]);
    return (React.createElement(TextFieldContainer, { overflow: "visible", className: clsx(`${theme.prefix}-textfield-mode-${mode}`, className), active: isFocused || isActive, variant: mode, size: size, disabled: disabled, ...rest },
        !!startAdornment && (React.createElement(TextFieldTrailing, { ref: startAdornmentRef, className: "textfield-leading" }, startAdornment)),
        React.createElement(TextFieldContent, { className: clsx("textfield-content") },
            React.createElement(TextFieldLabel, { className: clsx(mode === "outlined" && css({ marginLeft: "4px" })), active: isFocused || isActive, variant: mode, size: size, htmlFor: htmlFor }, label),
            children),
        mode === "outlined" && (React.createElement(TextFieldFieldSet, { className: "textfield-fieldset", active: isFocused || isActive, variant: mode, size: size },
            React.createElement(TextFieldFieldSetLegend, { className: clsx("textfield-legend", css({
                    marginLeft: convertUnit2Rem(startAdornmentWidth),
                })), active: isFocused || isActive, variant: mode, size: size }, label))),
        !!endAdornment && (React.createElement(TextFieldTrailing, { className: "textfield-trailing" }, endAdornment))));
};
export default FieldBase;