@shopify/react-form-state/build/cjs/FormState.js

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));

var _react = _interopRequireDefault(require("react"));

var _utilities = require("./utilities");

var _components = require("./components");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }

function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }

function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }

function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

var FormState = /*#__PURE__*/function (_React$PureComponent) {
  _inherits(FormState, _React$PureComponent);

  var _super = _createSuper(FormState);

  function FormState() {
    var _this;

    _classCallCheck(this, FormState);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _super.call.apply(_super, [this].concat(args));
    _this.state = createFormState(_this.props.initialValues, _this.props.externalErrors);
    _this.mounted = false;
    _this.fieldsWithHandlers = new WeakMap();

    _this.reset = function () {
      return new Promise(function (resolve) {
        _this.setState(function (_state, props) {
          return createFormState(props.initialValues, props.externalErrors);
        }, function () {
          return resolve();
        });
      });
    };

    _this.submit = /*#__PURE__*/function () {
      var _ref = _asyncToGenerator( /*#__PURE__*/_regenerator["default"].mark(function _callee(event) {
        var _this$props, onSubmit, validateOnSubmit, _assertThisInitialize, formData, clientErrors, errors;

        return _regenerator["default"].wrap(function _callee$(_context) {
          while (1) {
            switch (_context.prev = _context.next) {
              case 0:
                _this$props = _this.props, onSubmit = _this$props.onSubmit, validateOnSubmit = _this$props.validateOnSubmit;
                _assertThisInitialize = _assertThisInitialized(_this), formData = _assertThisInitialize.formData;

                if (_this.mounted) {
                  _context.next = 4;
                  break;
                }

                return _context.abrupt("return");

              case 4:
                if (event && event.preventDefault && !event.defaultPrevented) {
                  event.preventDefault();
                }

                if (!(onSubmit == null)) {
                  _context.next = 7;
                  break;
                }

                return _context.abrupt("return");

              case 7:
                _this.setState({
                  submitting: true
                });

                if (!validateOnSubmit) {
                  _context.next = 15;
                  break;
                }

                _context.next = 11;
                return _this.validateForm();

              case 11:
                clientErrors = _this.clientErrors;

                if (!(clientErrors.length > 0)) {
                  _context.next = 15;
                  break;
                }

                _this.setState({
                  submitting: false,
                  errors: clientErrors
                });

                return _context.abrupt("return");

              case 15:
                _context.next = 17;
                return onSubmit(formData);

              case 17:
                _context.t0 = _context.sent;

                if (_context.t0) {
                  _context.next = 20;
                  break;
                }

                _context.t0 = [];

              case 20:
                errors = _context.t0;

                if (_this.mounted) {
                  _context.next = 23;
                  break;
                }

                return _context.abrupt("return");

              case 23:
                if (errors.length > 0) {
                  _this.updateRemoteErrors(errors);

                  _this.setState({
                    submitting: false
                  });
                } else {
                  _this.setState({
                    submitting: false,
                    errors: errors
                  });
                }

              case 24:
              case "end":
                return _context.stop();
            }
          }
        }, _callee);
      }));

      return function (_x) {
        return _ref.apply(this, arguments);
      };
    }();

    _this.fieldWithHandlers = function (field, fieldPath) {
      if (_this.fieldsWithHandlers.has(field)) {
        return _this.fieldsWithHandlers.get(field);
      }

      var result = _objectSpread(_objectSpread({}, field), {}, {
        name: String(fieldPath),
        onChange: _this.updateField.bind(_assertThisInitialized(_this), fieldPath),
        onBlur: _this.blurField.bind(_assertThisInitialized(_this), fieldPath)
      });

      _this.fieldsWithHandlers.set(field, result);

      return result;
    };

    return _this;
  }

  _createClass(FormState, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.mounted = true;
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      this.mounted = false;
    }
  }, {
    key: "render",
    value: function render() {
      var children = this.props.children;
      var submitting = this.state.submitting;
      var submit = this.submit,
          reset = this.reset,
          formData = this.formData;
      return children(_objectSpread(_objectSpread({}, formData), {}, {
        submit: submit,
        reset: reset,
        submitting: submitting
      }));
    } // eslint-disable-next-line @shopify/react-prefer-private-members

  }, {
    key: "validateForm",
    value: function validateForm() {
      var _this2 = this;

      return new Promise(function (resolve) {
        _this2.setState(runAllValidators, function () {
          return resolve();
        });
      });
    } // eslint-disable-next-line @shopify/react-prefer-private-members

  }, {
    key: "updateField",
    value: function updateField(fieldPath, value) {
      var _this3 = this;

      this.setState(function (_ref2) {
        var fields = _ref2.fields,
            dirtyFields = _ref2.dirtyFields;
        var field = fields[fieldPath];
        var newValue = typeof value === 'function' ? value(field.value) : value;
        var dirty = !(0, _utilities.isEqual)(newValue, field.initialValue);

        var updatedField = _this3.getUpdatedField({
          fieldPath: fieldPath,
          field: field,
          value: newValue,
          dirty: dirty
        });

        return {
          dirtyFields: _this3.getUpdatedDirtyFields({
            fieldPath: fieldPath,
            dirty: dirty,
            dirtyFields: dirtyFields
          }),
          fields: updatedField === field ? fields : _objectSpread(_objectSpread({}, fields), {}, _defineProperty({}, fieldPath, updatedField))
        };
      });
    }
  }, {
    key: "getUpdatedDirtyFields",
    value: function getUpdatedDirtyFields(_ref3) {
      var fieldPath = _ref3.fieldPath,
          dirty = _ref3.dirty,
          dirtyFields = _ref3.dirtyFields;
      var dirtyFieldsSet = new Set(dirtyFields);

      if (dirty) {
        dirtyFieldsSet.add(fieldPath);
      } else {
        dirtyFieldsSet["delete"](fieldPath);
      }

      var newDirtyFields = Array.from(dirtyFieldsSet);
      return dirtyFields.length === newDirtyFields.length ? dirtyFields : newDirtyFields;
    }
  }, {
    key: "getUpdatedField",
    value: function getUpdatedField(_ref4) {
      var fieldPath = _ref4.fieldPath,
          field = _ref4.field,
          value = _ref4.value,
          dirty = _ref4.dirty;
      // We only want to update errors as the user types if they already have an error.
      // https://polaris.shopify.com/patterns/error-messages#section-form-validation
      var skipValidation = field.error == null;
      var error = skipValidation ? field.error : this.validateFieldValue(fieldPath, {
        value: value,
        dirty: dirty
      });

      if (value === field.value && error === field.error) {
        return field;
      }

      return _objectSpread(_objectSpread({}, field), {}, {
        value: value,
        dirty: dirty,
        error: error
      });
    }
  }, {
    key: "blurField",
    value: function blurField(fieldPath) {
      var fields = this.state.fields;
      var field = fields[fieldPath];
      var error = this.validateFieldValue(fieldPath, field);

      if (error == null) {
        return;
      }

      this.setState(function (state) {
        return {
          fields: _objectSpread(_objectSpread({}, state.fields), {}, _defineProperty({}, fieldPath, _objectSpread(_objectSpread({}, state.fields[fieldPath]), {}, {
            error: error
          })))
        };
      });
    }
  }, {
    key: "validateFieldValue",
    value: function validateFieldValue(fieldPath, _ref5) {
      var value = _ref5.value,
          dirty = _ref5.dirty;

      if (!dirty) {
        return;
      }

      var _this$props$validator = this.props.validators,
          validators = _this$props$validator === void 0 ? {} : _this$props$validator;
      var fields = this.state.fields;
      return runValidator(validators[fieldPath], value, fields);
    }
  }, {
    key: "updateRemoteErrors",
    value: function updateRemoteErrors(errors) {
      this.setState(function (_ref6) {
        var fields = _ref6.fields,
            externalErrors = _ref6.externalErrors;
        return {
          errors: errors,
          fields: fieldsWithErrors(fields, [].concat(_toConsumableArray(errors), _toConsumableArray(externalErrors)))
        };
      });
    }
  }, {
    key: "formData",
    get: function get() {
      var errors = this.state.errors;
      var _this$props$externalE = this.props.externalErrors,
          externalErrors = _this$props$externalE === void 0 ? [] : _this$props$externalE;
      var fields = this.fields,
          dirty = this.dirty,
          valid = this.valid;
      return {
        dirty: dirty,
        valid: valid,
        errors: [].concat(_toConsumableArray(errors), _toConsumableArray(externalErrors)),
        fields: fields
      };
    }
  }, {
    key: "dirty",
    get: function get() {
      return this.state.dirtyFields.length > 0;
    }
  }, {
    key: "valid",
    get: function get() {
      var _this$state = this.state,
          errors = _this$state.errors,
          externalErrors = _this$state.externalErrors;
      return !this.hasClientErrors && errors.length === 0 && externalErrors.length === 0;
    }
  }, {
    key: "hasClientErrors",
    get: function get() {
      var fields = this.state.fields;
      return Object.keys(fields).some(function (fieldPath) {
        var field = fields[fieldPath];
        return field.error != null;
      });
    }
  }, {
    key: "clientErrors",
    get: function get() {
      var fields = this.state.fields;
      return (0, _utilities.flatMap)(Object.values(fields), function (_ref7) {
        var error = _ref7.error;
        return collectErrors(error);
      });
    }
  }, {
    key: "fields",
    get: function get() {
      var fields = this.state.fields;
      var fieldDescriptors = (0, _utilities.mapObject)(fields, this.fieldWithHandlers);
      return fieldDescriptors;
    }
  }], [{
    key: "getDerivedStateFromProps",
    value: function getDerivedStateFromProps(newProps, oldState) {
      var initialValues = newProps.initialValues,
          onInitialValuesChange = newProps.onInitialValuesChange,
          _newProps$externalErr = newProps.externalErrors,
          externalErrors = _newProps$externalErr === void 0 ? [] : _newProps$externalErr;
      var externalErrorsChanged = !(0, _utilities.isEqual)(externalErrors, oldState.externalErrors);
      var updatedExternalErrors = externalErrorsChanged ? {
        externalErrors: externalErrors,
        fields: fieldsWithErrors(oldState.fields, [].concat(_toConsumableArray(externalErrors), _toConsumableArray(oldState.errors)))
      } : null;

      switch (onInitialValuesChange) {
        case 'ignore':
          return updatedExternalErrors;

        case 'reset-where-changed':
          return reconcileFormState(initialValues, oldState, externalErrors);

        case 'reset-all':
        default:
          var oldInitialValues = initialValuesFromFields(oldState.fields);
          var valuesMatch = (0, _utilities.isEqual)(oldInitialValues, initialValues);

          if (valuesMatch) {
            return updatedExternalErrors;
          }

          return createFormState(initialValues, externalErrors);
      }
    }
  }]);

  return FormState;
}(_react["default"].PureComponent);

exports["default"] = FormState;
FormState.List = _components.List;
FormState.Nested = _components.Nested;

function fieldsWithErrors(fields, errors) {
  var errorDictionary = errors.reduce(function (accumulator, _ref8) {
    var field = _ref8.field,
        message = _ref8.message;

    if (field == null) {
      return accumulator;
    }

    return (0, _utilities.set)(accumulator, field, message);
  }, {});
  return (0, _utilities.mapObject)(fields, function (field, path) {
    if (!errorDictionary[path]) {
      return field;
    }

    return _objectSpread(_objectSpread({}, field), {}, {
      error: errorDictionary[path]
    });
  });
}

function reconcileFormState(values, oldState) {
  var externalErrors = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
  var oldFields = oldState.fields;
  var dirtyFields = new Set(oldState.dirtyFields);
  var fields = (0, _utilities.mapObject)(values, function (value, key) {
    var oldField = oldFields[key];

    if ((0, _utilities.isEqual)(value, oldField.initialValue)) {
      return oldField;
    }

    dirtyFields["delete"](key);
    return {
      value: value,
      initialValue: value,
      dirty: false
    };
  });
  return _objectSpread(_objectSpread({}, oldState), {}, {
    dirtyFields: Array.from(dirtyFields),
    fields: fieldsWithErrors(fields, externalErrors)
  });
}

function createFormState(values) {
  var externalErrors = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
  var fields = (0, _utilities.mapObject)(values, function (value) {
    return {
      value: value,
      initialValue: value,
      dirty: false
    };
  });
  return {
    dirtyFields: [],
    errors: [],
    submitting: false,
    externalErrors: externalErrors,
    fields: fieldsWithErrors(fields, externalErrors)
  };
}

function initialValuesFromFields(fields) {
  return (0, _utilities.mapObject)(fields, function (_ref9) {
    var initialValue = _ref9.initialValue;
    return initialValue;
  });
}

function runValidator() {
  var validate = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : function () {};
  var value = arguments.length > 1 ? arguments[1] : undefined;
  var fields = arguments.length > 2 ? arguments[2] : undefined;

  if (typeof validate === 'function') {
    return validate(value, fields);
  }

  if (!Array.isArray(validate)) {
    return;
  }

  var errors = validate.map(function (validator) {
    return validator(value, fields);
  }).filter(function (input) {
    return input != null;
  });

  if (errors.length === 0) {
    return;
  }

  return errors;
}

function runAllValidators(state, props) {
  var fields = state.fields;
  var validators = props.validators;

  if (!validators) {
    return null;
  }

  var updatedFields = (0, _utilities.mapObject)(fields, function (field, path) {
    return _objectSpread(_objectSpread({}, field), {}, {
      error: runValidator(validators[path], field.value, fields)
    });
  });
  return _objectSpread(_objectSpread({}, state), {}, {
    fields: updatedFields
  });
}

function collectErrors(message) {
  if (!message) {
    return [];
  }

  if (typeof message === 'string') {
    return [{
      message: message
    }];
  }

  if (Array.isArray(message)) {
    return (0, _utilities.flatMap)(message, function (itemError) {
      return collectErrors(itemError);
    });
  }

  return (0, _utilities.flatMap)(Object.values(message), function (nestedError) {
    return collectErrors(nestedError);
  });
}