@ozen-ui/kit
Version:
React component library
58 lines (57 loc) • 3.3 kB
JavaScript
import { __assign, __read, __rest } from "tslib";
import React, { useCallback, useState } from 'react';
import { useControlled } from '../../hooks/useControlled';
import { useIsomorphicEffect } from '../../hooks/useIsomorphicEffect';
import { cn } from '../../utils/classname';
import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWithRef';
import { useFieldControl } from '../FieldControl';
import { FIELD_INPUT_DEFAULT_TAG } from './constants';
export var cnFieldInput = cn('FieldInput');
export var FieldInput = polymorphicComponentWithRef(function (_a, ref) {
var _b = _a.as, Tag = _b === void 0 ? FIELD_INPUT_DEFAULT_TAG : _b, className = _a.className, requiredProp = _a.required, disabledProp = _a.disabled, valueProp = _a.value, renderComponentProp = _a.renderComponent, onChange = _a.onChange, defaultValue = _a.defaultValue, children = _a.children, onFocus = _a.onFocus, onBlur = _a.onBlur, other = __rest(_a, ["as", "className", "required", "disabled", "value", "renderComponent", "onChange", "defaultValue", "children", "onFocus", "onBlur"]);
var _c = __read(useState(), 2), focused = _c[0], setFocused = _c[1];
var context = useFieldControl();
var _d = __read(context, 2), fieldControl = _d[0], setFieldControl = _d[1];
var _e = __read(useControlled({
value: valueProp,
name: 'FieldInput',
state: 'value',
defaultValue: defaultValue,
}), 3), valueState = _e[0], setValueState = _e[1], isControlled = _e[2];
var filled = !!valueState || valueState === 0;
var required = requiredProp;
var disabled = disabledProp;
if (fieldControl) {
if (required === undefined && fieldControl.required) {
required = fieldControl.required;
}
if (disabled === undefined && fieldControl.disabled) {
disabled = fieldControl.disabled;
}
}
useIsomorphicEffect(function () {
setFieldControl(function (prevState) { return (__assign(__assign({}, prevState), { filled: filled, focused: focused, value: valueState })); });
}, [filled, focused, valueState]);
var handleChange = useCallback(function (e) {
if (disabled)
return;
var value = e.target.value;
setValueState(value);
onChange === null || onChange === void 0 ? void 0 : onChange(e);
}, [onChange, disabled]);
var handleFocus = useCallback(function (e) {
setFocused(true);
onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
}, [onFocus]);
var handleBlur = useCallback(function (e) {
setFocused(false);
onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
}, [onBlur]);
var renderComponentDefault = function (props, ref) { return (React.createElement(Tag, __assign({}, props, { ref: ref }), children)); };
var renderComponent = renderComponentProp || renderComponentDefault;
var render = function () {
return renderComponent(__assign(__assign({ className: cnFieldInput({}, [className]), required: required, disabled: disabled, onBlur: handleBlur, onFocus: handleFocus, onChange: handleChange }, (isControlled ? { value: valueState } : { defaultValue: defaultValue })), other), ref);
};
return render();
});
FieldInput.displayName = 'FieldInput';