@carrot-farm/mongsil-ui
Version:
react ui library
147 lines (146 loc) • 6.41 kB
JavaScript
import * as React from 'react';
import { useCallback, useEffect, useContext, useState, memo } from 'react';
import FormItemLabel from '../FormItemLabel';
import CloneComponent from '../CloneComponent/CloneComponent';
import { FormContext } from '../../contexts/formContext';
import { validate } from '../../utils/validator';
function FormItem(_a) {
var className = _a.className, itemId = _a.itemId, label = _a.label, helper = _a.helper, name = _a.name, defaultValue = _a.defaultValue, value = _a.value, checked = _a.checked, _b = _a.stateBind, stateBind = _b === void 0 ? 'both' : _b, _c = _a.direction, direction = _c === void 0 ? 'y' : _c, disabled = _a.disabled, children = _a.children, rules = _a.rules, onChange = _a.onChange;
var _d = useContext(FormContext), values = _d.values, errors = _d.errors, setFormValue = _d.setValue, setModel = _d.setModel, addError = _d.addError, setError = _d.setError;
// console.log('> FormItem', name);
var id = useState(function () { return itemId !== null && itemId !== void 0 ? itemId : (name !== null && name !== void 0 ? name : '') + Math.random().toString(32).substr(2); })[0];
var _e = useState(false), required = _e[0], setRequired = _e[1];
/** 값 변경 */
var handleChange = useCallback(function (newValue, name) {
// # 유효성 검사(change에서는 required를 검사하지 않는다.)
if (rules) {
if (newValue) {
var result = validate(rules, newValue);
if (result.pass === false && result.message) {
setError(id, result.message);
}
else {
setError(id, null);
}
}
else {
setError(id, null);
}
}
// # 이벤트 전달
if ((onChange && onChange(newValue, name) === false) ||
stateBind === 'stateOnly') {
return;
}
// console.log('> formItem: ', stateBind, name, newValue);
// # 값 변경
if (name) {
setFormValue(name, newValue);
}
return undefined;
}, [stateBind, id, rules, onChange, setFormValue, setError]);
// console.log('> Fo: ', values);
/** 기본 값 */
useEffect(function () {
if (name === undefined ||
defaultValue === undefined ||
values[name] !== undefined) {
return;
}
setFormValue(name, defaultValue);
}, [name, values, defaultValue, setFormValue]);
/** 상태에 따라 변환 */
useEffect(function () {
if (stateBind !== 'none' && name) {
setFormValue(name, value !== null && value !== void 0 ? value : checked);
}
}, [name, value, checked, stateBind, setFormValue]);
/** rules에 `required` 가 있을 경우 처리 */
useEffect(function () {
var isRequired = !!(rules === null || rules === void 0 ? void 0 : rules.some(function (_a) {
var rule = _a.rule;
return rule[0] === 'required';
}));
if (isRequired === true) {
setRequired(isRequired);
}
}, [rules]);
/** 모델 셋 */
useEffect(function () {
var model = {
id: id,
className: className,
name: name,
label: label,
helper: helper,
stateBind: stateBind,
direction: direction,
required: required,
disabled: disabled,
rules: rules,
};
setModel(model);
}, [
id,
className,
name,
label,
helper,
stateBind,
direction,
required,
disabled,
rules,
setModel,
]);
/** 에러 추가 */
useEffect(function () {
addError(id);
}, [id, addError]);
// console.log('> ', errors);
/** 랜더링 */
return (React.createElement("div", { className: "Mongsil-form_item-root " + (direction === 'y' ? 'flex-col' : 'flex-row') + " " + (disabled === true ? 'disabled' : '') + " " + (className !== null && className !== void 0 ? className : '') },
label && (React.createElement(FormItemLabel, { disabled: disabled, label: label, required: required })),
React.createElement("div", { className: "Mongsil-form_item-container " + (direction === 'x' ? 'flex-grow' : '') },
React.Children.map(children, function (child) {
if (React.isValidElement(child)) {
var _type = child.type;
var displayName = _type.type.displayName;
var newValue = name && values[name] ? values[name] : undefined;
var _checked = (displayName === 'Checkbox' || displayName === 'Switch') &&
name &&
values[name]
? values[name]
: undefined;
if (name && values[name] === undefined) {
if (displayName === 'Checkbox' || displayName === 'Switch') {
_checked = initialValues.route(displayName);
}
else {
newValue = initialValues.route(displayName);
}
}
return (React.createElement(CloneComponent, { name: name, value: newValue, checked: _checked, className: className, child: child, disabled: disabled, onChange: handleChange }));
}
else {
return child;
}
}),
!errors[id] && helper && (React.createElement("div", { className: "Mongsil-form_item-helper_text" }, helper)),
errors[id] && (React.createElement("div", { className: "Mongsil-form_item-error_message" }, errors[id])))));
}
/** 컴포넌트별 초기값 */
var initialValues = {
Input: function () { return ''; },
TextArea: function () { return ''; },
Checkbox: function () { return false; },
CheckboxCreator: function () { return []; },
Switch: function () { return false; },
Select: function () { return ''; },
SelectCreator: function () { return ''; },
RadioCreator: function () { return ''; },
route: function (displayName) {
return this[displayName]();
},
};
export default memo(FormItem);