react-pro-form/dist/esm/bundle.js

react-progressive-form ui

import { jsx, Fragment } from 'react/jsx-runtime';
import React, { useRef, useState, useEffect } from '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 = useRef(null);
  var _useState = useState({}),
    _useState2 = _slicedToArray(_useState, 2),
    formState = _useState2[0],
    setFormState = _useState2[1];
  // 노드가 바뀔 수 있으니 이벤트 재등록
  // 대신 formstate이 값이 바뀔 때 마다 갱신되지 않음
  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 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 jsx(Fragment, {
    children: children
  });
}

export { ProgressiveForm };
//# sourceMappingURL=bundle.js.map