react-pro-form
Version:
react-progressive-form ui
160 lines (154 loc) • 5.21 kB
JavaScript
;
var jsxRuntime = require('react/jsx-runtime');
var React = require('react');
function _arrayLikeToArray(r, a) {
(null == a || a > r.length) && (a = r.length);
for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
return n;
}
function _arrayWithHoles(r) {
if (Array.isArray(r)) return r;
}
function _defineProperty(e, r, t) {
return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
value: t,
enumerable: !0,
configurable: !0,
writable: !0
}) : e[r] = t, e;
}
function _iterableToArrayLimit(r, l) {
var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
if (null != t) {
var e,
n,
i,
u,
a = [],
f = !0,
o = !1;
try {
if (i = (t = t.call(r)).next, 0 === l) ; else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
} catch (r) {
o = !0, n = r;
} finally {
try {
if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
} finally {
if (o) throw n;
}
}
return a;
}
}
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _slicedToArray(r, e) {
return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
}
function _toPrimitive(t, r) {
if ("object" != typeof t || !t) return t;
var e = t[Symbol.toPrimitive];
if (void 0 !== e) {
var i = e.call(t, r || "default");
if ("object" != typeof i) return i;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return ("string" === r ? String : Number)(t);
}
function _toPropertyKey(t) {
var i = _toPrimitive(t, "string");
return "symbol" == typeof i ? i : i + "";
}
function _typeof(o) {
"@babel/helpers - typeof";
return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
return typeof o;
} : function (o) {
return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
}, _typeof(o);
}
function _unsupportedIterableToArray(r, a) {
if (r) {
if ("string" == typeof r) return _arrayLikeToArray(r, a);
var t = {}.toString.call(r).slice(8, -1);
return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
}
}
function ProgressiveFormRoot(_ref) {
var children = _ref.children;
// children의 deponds에 값들이 tocued 되었는지에 따라서 보여줅지 말지 확인
var ref = React.useRef(null);
var _useState = React.useState({}),
_useState2 = _slicedToArray(_useState, 2),
formState = _useState2[0],
setFormState = _useState2[1];
// 노드가 바뀔 수 있으니 이벤트 재등록
// 대신 formstate이 값이 바뀔 때 마다 갱신되지 않음
React.useEffect(function () {
var handleChage = function handleChage(element) {
setFormState(function (prev) {
return Object.assign(Object.assign({}, prev), _defineProperty({}, element.name, element.value));
});
};
if (ref.current) {
for (var i = 0; i < ref.current.elements.length; i++) {
var element = ref.current.elements[i];
element.addEventListener("change", function (event) {
handleChage(event.target);
});
}
}
return function () {
if (ref.current) {
for (var _i = 0; _i < ref.current.elements.length; _i++) {
var _element = ref.current.elements[_i];
_element.removeEventListener("change", function (event) {
handleChage(event.target);
});
}
}
};
}, [formState]);
return jsxRuntime.jsx("form", {
ref: ref,
children: React.Children.toArray(children).filter(function (child) {
if (! /*#__PURE__*/React.isValidElement(child)) return false;
if (child.type !== Step) return false;
var depends = child.props.depends;
// depends 의 값이 특정 조건을 만족하는지 확인
if (depends === undefined) return true;
if (Array.isArray(depends)) {
return depends.every(function (depend) {
if (formState[depend]) return true;
return false;
});
}
if (typeof depends === "string") {
if (formState[depends]) return true;
return false;
}
if (_typeof(depends) === "object") {
return Object.keys(depends).every(function (key) {
if (formState[key] === depends[key]) return true;
return false;
});
}
return false;
})
});
}
var ProgressiveForm = Object.assign(ProgressiveFormRoot, {
Step: Step
});
function Step(_ref2) {
_ref2.depends;
_ref2.isError;
var children = _ref2.children;
return jsxRuntime.jsx(jsxRuntime.Fragment, {
children: children
});
}
exports.ProgressiveForm = ProgressiveForm;
//# sourceMappingURL=bundle.js.map