@ozen-ui/kit/__inner__/esm/components/FieldControl/FieldControl.js

React component library

import { __assign, __read, __rest } from "tslib";
import './FieldControl.css';
import React, { useRef, useState } from 'react';
import { useHover } from '../../hooks/useHover';
import { useMultiRef } from '../../hooks/useMultiRef';
import { useThemeProps } from '../../hooks/useThemeProps';
import { cn } from '../../utils/classname';
import { polymorphicComponentWithRef, } from '../../utils/polymorphicComponentWithRef';
import { FieldControlContext } from './index';
export var FIELD_CONTROL_DEFAULT_TAG = 'div';
export var cnFieldControl = cn('FieldControl');
export var FieldControl = polymorphicComponentWithRef(function (inProps, ref) {
    var props = useThemeProps({
        props: inProps,
        name: 'FieldControl',
    });
    var innerRef = useRef(null);
    var hovered = useHover(innerRef);
    var _a = props.as, Tag = _a === void 0 ? FIELD_CONTROL_DEFAULT_TAG : _a, disableStrokeProp = props.disableStroke, sizeProp = props.size, disabledProp = props.disabled, requiredProp = props.required, errorProp = props.error, fullWidthProp = props.fullWidth, filledProp = props.filled, focusedProp = props.focused, children = props.children, className = props.className, otherProp = __rest(props, ["as", "disableStroke", "size", "disabled", "required", "error", "fullWidth", "filled", "focused", "children", "className"]);
    var focused = focusedProp;
    var filled = filledProp;
    var size = sizeProp;
    var required = requiredProp;
    var disabled = disabledProp;
    var error = errorProp;
    var fullWidth = fullWidthProp;
    var disableStroke = disableStrokeProp;
    var initialState = {
        size: size,
        filled: filled,
        focused: focused,
        disabled: disabled,
        required: required,
        error: error,
        fullWidth: fullWidth,
    };
    var _b = __read(useState(initialState), 2), state = _b[0], setState = _b[1];
    var label = state.label, value = state.value;
    if (size === undefined && state.size) {
        size = state.size;
    }
    if (focused === undefined && state.focused) {
        focused = state.focused;
    }
    if (filled === undefined && state.filled) {
        filled = state.filled;
    }
    if (disabled === undefined && state.disabled) {
        disabled = state.disabled;
    }
    if (required === undefined && state.required) {
        required = state.required;
    }
    if (error === undefined && state.error) {
        error = state.error;
    }
    if (fullWidth === undefined && state.fullWidth) {
        fullWidth = state.fullWidth;
    }
    if (disableStroke === undefined && state.disableStroke) {
        disableStroke = state.disableStroke;
    }
    return (React.createElement(Tag, __assign({ className: cnFieldControl({
            error: error,
            fullWidth: fullWidth,
            disabled: disabled,
            required: required,
            size: size,
            filled: filled,
            focused: focused,
            disableStroke: disableStroke,
            hasLabel: !!label,
        }, [className]) }, otherProp, { ref: useMultiRef([ref, innerRef]) }),
        React.createElement(FieldControlContext.Provider, { value: [
                {
                    error: error,
                    fullWidth: fullWidth,
                    disabled: disabled,
                    required: required,
                    label: label,
                    size: size,
                    filled: filled,
                    focused: focused,
                    hovered: hovered,
                    value: value,
                    disableStroke: disableStroke,
                },
                setState,
            ] }, children)));
});
FieldControl.displayName = 'FieldControl';