@ozen-ui/kit
Version:
React component library
61 lines (60 loc) • 3.69 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.FieldInput = exports.cnFieldInput = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var useControlled_1 = require("../../hooks/useControlled");
var useIsomorphicEffect_1 = require("../../hooks/useIsomorphicEffect");
var classname_1 = require("../../utils/classname");
var polymorphicComponentWithRef_1 = require("../../utils/polymorphicComponentWithRef");
var FieldControl_1 = require("../FieldControl");
var constants_1 = require("./constants");
exports.cnFieldInput = (0, classname_1.cn)('FieldInput');
exports.FieldInput = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (_a, ref) {
var _b = _a.as, Tag = _b === void 0 ? constants_1.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 = tslib_1.__rest(_a, ["as", "className", "required", "disabled", "value", "renderComponent", "onChange", "defaultValue", "children", "onFocus", "onBlur"]);
var _c = tslib_1.__read((0, react_1.useState)(), 2), focused = _c[0], setFocused = _c[1];
var context = (0, FieldControl_1.useFieldControl)();
var _d = tslib_1.__read(context, 2), fieldControl = _d[0], setFieldControl = _d[1];
var _e = tslib_1.__read((0, useControlled_1.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;
}
}
(0, useIsomorphicEffect_1.useIsomorphicEffect)(function () {
setFieldControl(function (prevState) { return (tslib_1.__assign(tslib_1.__assign({}, prevState), { filled: filled, focused: focused, value: valueState })); });
}, [filled, focused, valueState]);
var handleChange = (0, react_1.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 = (0, react_1.useCallback)(function (e) {
setFocused(true);
onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
}, [onFocus]);
var handleBlur = (0, react_1.useCallback)(function (e) {
setFocused(false);
onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
}, [onBlur]);
var renderComponentDefault = function (props, ref) { return (react_1.default.createElement(Tag, tslib_1.__assign({}, props, { ref: ref }), children)); };
var renderComponent = renderComponentProp || renderComponentDefault;
var render = function () {
return renderComponent(tslib_1.__assign(tslib_1.__assign({ className: (0, exports.cnFieldInput)({}, [className]), required: required, disabled: disabled, onBlur: handleBlur, onFocus: handleFocus, onChange: handleChange }, (isControlled ? { value: valueState } : { defaultValue: defaultValue })), other), ref);
};
return render();
});
exports.FieldInput.displayName = 'FieldInput';