@ozen-ui/kit
Version:
React component library
95 lines (94 loc) • 4.08 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FieldControl = exports.cnFieldControl = exports.FIELD_CONTROL_DEFAULT_TAG = void 0;
var tslib_1 = require("tslib");
require("./FieldControl.css");
var react_1 = tslib_1.__importStar(require("react"));
var useHover_1 = require("../../hooks/useHover");
var useMultiRef_1 = require("../../hooks/useMultiRef");
var useThemeProps_1 = require("../../hooks/useThemeProps");
var classname_1 = require("../../utils/classname");
var polymorphicComponentWithRef_1 = require("../../utils/polymorphicComponentWithRef");
var index_1 = require("./index");
exports.FIELD_CONTROL_DEFAULT_TAG = 'div';
exports.cnFieldControl = (0, classname_1.cn)('FieldControl');
exports.FieldControl = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
var props = (0, useThemeProps_1.useThemeProps)({
props: inProps,
name: 'FieldControl',
});
var innerRef = (0, react_1.useRef)(null);
var hovered = (0, useHover_1.useHover)(innerRef);
var _a = props.as, Tag = _a === void 0 ? exports.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 = tslib_1.__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 = tslib_1.__read((0, react_1.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_1.default.createElement(Tag, tslib_1.__assign({ className: (0, exports.cnFieldControl)({
error: error,
fullWidth: fullWidth,
disabled: disabled,
required: required,
size: size,
filled: filled,
focused: focused,
disableStroke: disableStroke,
hasLabel: !!label,
}, [className]) }, otherProp, { ref: (0, useMultiRef_1.useMultiRef)([ref, innerRef]) }),
react_1.default.createElement(index_1.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)));
});
exports.FieldControl.displayName = 'FieldControl';