@ozen-ui/kit
Version:
React component library
48 lines (47 loc) • 2.09 kB
JavaScript
import { __assign, __read } from "tslib";
import './FieldLabel.css';
import React, { forwardRef } from 'react';
import { useIsomorphicEffect } from '../../hooks/useIsomorphicEffect';
import { cn } from '../../utils/classname';
import { useFieldControl } from '../FieldControl';
import { FIELD_LABEL_DEFAULT_TAG } from './constants';
export var cnFieldLabel = cn('FieldLabel');
export var FieldLabel = forwardRef(function (_a, ref) {
var focusedProp = _a.focused, children = _a.children, filledProp = _a.filled, shrink = _a.shrink, requiredProp = _a.required, disabledProp = _a.disabled, className = _a.className, sizeProp = _a.size;
var context = useFieldControl();
var _b = __read(context, 2), fieldControl = _b[0], setFieldControl = _b[1];
var Tag = FIELD_LABEL_DEFAULT_TAG;
var size = sizeProp;
var required = requiredProp;
var disabled = disabledProp;
var focused = focusedProp;
var filled = filledProp;
useIsomorphicEffect(function () {
setFieldControl(function (prevState) { return (__assign(__assign({}, prevState), { label: children })); });
}, [children]);
if (!children) {
return null;
}
if (fieldControl) {
if (size === undefined && fieldControl.size) {
size = fieldControl.size;
}
if (required === undefined && fieldControl.required) {
required = fieldControl.required;
}
if (disabled === undefined && fieldControl.disabled) {
disabled = fieldControl.disabled;
}
if (focused === undefined && fieldControl.focused) {
focused = fieldControl.focused;
}
if (filled === undefined && fieldControl.filled) {
filled = fieldControl.filled;
}
}
return (React.createElement(Tag, { className: cnFieldLabel({ filled: filled, shrink: shrink, focused: focused, disabled: disabled, size: size, required: required }, [className]), ref: ref },
children,
" ",
required && React.createElement("sup", null, "*")));
});
FieldLabel.displayName = 'FieldLabel';