@carrot-farm/mongsil-ui
Version:
react ui library
171 lines (170 loc) • 7.69 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = __importStar(require("react"));
var react_1 = require("react");
var FormItemLabel_1 = __importDefault(require("../FormItemLabel"));
var CloneComponent_1 = __importDefault(require("../CloneComponent/CloneComponent"));
var formContext_1 = require("../../contexts/formContext");
var validator_1 = require("../../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 = (0, react_1.useContext)(formContext_1.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 = (0, react_1.useState)(function () { return itemId !== null && itemId !== void 0 ? itemId : (name !== null && name !== void 0 ? name : '') + Math.random().toString(32).substr(2); })[0];
var _e = (0, react_1.useState)(false), required = _e[0], setRequired = _e[1];
/** 값 변경 */
var handleChange = (0, react_1.useCallback)(function (newValue, name) {
// # 유효성 검사(change에서는 required를 검사하지 않는다.)
if (rules) {
if (newValue) {
var result = (0, validator_1.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);
/** 기본 값 */
(0, react_1.useEffect)(function () {
if (name === undefined ||
defaultValue === undefined ||
values[name] !== undefined) {
return;
}
setFormValue(name, defaultValue);
}, [name, values, defaultValue, setFormValue]);
/** 상태에 따라 변환 */
(0, react_1.useEffect)(function () {
if (stateBind !== 'none' && name) {
setFormValue(name, value !== null && value !== void 0 ? value : checked);
}
}, [name, value, checked, stateBind, setFormValue]);
/** rules에 `required` 가 있을 경우 처리 */
(0, react_1.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]);
/** 모델 셋 */
(0, react_1.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,
]);
/** 에러 추가 */
(0, react_1.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_1.default, { 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_1.default, { 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]();
},
};
exports.default = (0, react_1.memo)(FormItem);