@data-driven-forms/react-form-renderer/form-renderer/form-renderer.js

React Form Renderer. Data Driven Forms converts JSON form definitions into fully functional React forms.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _typeof3 = require("@babel/runtime/helpers/typeof");

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

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));

var _finalFormArrays = _interopRequireDefault(require("final-form-arrays"));

var _finalFormFocus = _interopRequireDefault(require("final-form-focus"));

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

var _defaultSchemaValidator = _interopRequireDefault(require("../default-schema-validator"));

var _validatorMapper = _interopRequireDefault(require("../validator-mapper"));

var _form = _interopRequireDefault(require("../form"));

var _rendererContext = _interopRequireDefault(require("../renderer-context"));

var _renderForm = _interopRequireDefault(require("./render-form"));

var _schemaErrorComponent = _interopRequireDefault(require("./schema-error-component"));

var _excluded = ["actionMapper", "children", "clearedValue", "clearOnUnmount", "componentMapper", "conditionMapper", "decorators", "FormTemplate", "FormTemplateProps", "mutators", "onCancel", "onError", "onReset", "onSubmit", "schema", "schemaValidatorMapper", "subscription", "validatorMapper", "initialValues"],
    _excluded2 = ["reset", "mutators", "getState", "submit"];

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof3(key) === "symbol" ? key : String(key); }

function _toPrimitive(input, hint) { if (_typeof3(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof3(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

var isFunc = function isFunc(fn) {
  return typeof fn === 'function';
};

var renderChildren = function renderChildren(children, props) {
  if (isFunc(children)) {
    return children(props);
  }

  var childElement = children;

  if (Array.isArray(children)) {
    /**
     * Only permit one child element
     */
    if (children.length !== 1) {
      throw new Error('FormRenderer expects only one child element!');
    }

    childElement = children[0];
  }

  if ((0, _typeof2["default"])(childElement) === 'object') {
    /**
     * Clone react element, pass form fields and schema as props, but override them with child props if present
     */
    return /*#__PURE__*/(0, _react.cloneElement)(children, _objectSpread(_objectSpread({}, props), childElement.props));
  }

  throw new Error("Invalid children prop! Expected one of [null, Function, object], got ".concat((0, _typeof2["default"])(children)));
};

var FormRenderer = function FormRenderer(_ref) {
  var actionMapper = _ref.actionMapper,
      children = _ref.children,
      clearedValue = _ref.clearedValue,
      _ref$clearOnUnmount = _ref.clearOnUnmount,
      clearOnUnmount = _ref$clearOnUnmount === void 0 ? false : _ref$clearOnUnmount,
      componentMapper = _ref.componentMapper,
      _ref$conditionMapper = _ref.conditionMapper,
      conditionMapper = _ref$conditionMapper === void 0 ? {} : _ref$conditionMapper,
      decorators = _ref.decorators,
      FormTemplate = _ref.FormTemplate,
      FormTemplateProps = _ref.FormTemplateProps,
      mutators = _ref.mutators,
      onCancel = _ref.onCancel,
      onError = _ref.onError,
      onReset = _ref.onReset,
      onSubmit = _ref.onSubmit,
      schema = _ref.schema,
      schemaValidatorMapper = _ref.schemaValidatorMapper,
      subscription = _ref.subscription,
      validatorMapper = _ref.validatorMapper,
      _ref$initialValues = _ref.initialValues,
      initialValues = _ref$initialValues === void 0 ? {} : _ref$initialValues,
      props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);

  var _useState = (0, _react.useState)([]),
      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
      fileInputs = _useState2[0],
      setFileInputs = _useState2[1];

  var formFields = (0, _react.useMemo)(function () {
    return (0, _renderForm["default"])(schema.fields);
  }, [schema]);
  var registeredFields = (0, _react.useRef)({});
  var focusDecorator = (0, _react.useRef)((0, _finalFormFocus["default"])());
  var validatorMapperMerged = (0, _react.useMemo)(function () {
    return _objectSpread(_objectSpread({}, _validatorMapper["default"]), validatorMapper);
  }, [validatorMapper]);
  var mutatorsMerged = (0, _react.useMemo)(function () {
    return _objectSpread(_objectSpread({}, _finalFormArrays["default"]), mutators);
  }, [mutators]);
  var decoratorsMerged = (0, _react.useMemo)(function () {
    return [focusDecorator.current].concat((0, _toConsumableArray2["default"])(Array.isArray(decorators) ? decorators : []));
  }, [decorators]);
  var handleSubmitCallback = (0, _react.useCallback)(function (values, formApi) {
    for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
      args[_key - 2] = arguments[_key];
    }

    return !isFunc(onSubmit) ? undefined : onSubmit.apply(void 0, [values, _objectSpread(_objectSpread({}, formApi), {}, {
      fileInputs: fileInputs
    })].concat(args));
  }, [onSubmit, fileInputs]);
  var handleCancelCallback = (0, _react.useCallback)(function (getState) {
    return function () {
      for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
        args[_key2] = arguments[_key2];
      }

      return onCancel.apply(void 0, [getState().values].concat(args));
    };
  }, [onCancel]);
  var handleResetCallback = (0, _react.useCallback)(function (reset) {
    return function () {
      reset();
      return !isFunc(onReset) ? void 0 : onReset.apply(void 0, arguments);
    };
  }, [onReset]);
  var handleErrorCallback = (0, _react.useCallback)(function () {
    var _console;

    // eslint-disable-next-line no-console
    (_console = console).error.apply(_console, arguments);

    return !isFunc(onError) ? void 0 : onError.apply(void 0, arguments);
  }, [onError]);
  var registerInputFile = (0, _react.useCallback)(function (name) {
    setFileInputs(function (prevFiles) {
      return [].concat((0, _toConsumableArray2["default"])(prevFiles), [name]);
    });
  }, []);
  var unRegisterInputFile = (0, _react.useCallback)(function (name) {
    setFileInputs(function (prevFiles) {
      return (0, _toConsumableArray2["default"])(prevFiles.splice(prevFiles.indexOf(name)));
    });
  }, []);
  var setRegisteredFields = (0, _react.useCallback)(function (fn) {
    return registeredFields.current = fn(_objectSpread({}, registeredFields.current));
  }, []);
  var internalRegisterField = (0, _react.useCallback)(function (name) {
    setRegisteredFields(function (prev) {
      return prev[name] ? _objectSpread(_objectSpread({}, prev), {}, (0, _defineProperty2["default"])({}, name, prev[name] + 1)) : _objectSpread(_objectSpread({}, prev), {}, (0, _defineProperty2["default"])({}, name, 1));
    });
  }, []);
  var internalUnRegisterField = (0, _react.useCallback)(function (name) {
    setRegisteredFields(function (_ref2) {
      var currentField = _ref2[name],
          prev = (0, _objectWithoutProperties2["default"])(_ref2, [name].map(_toPropertyKey));
      return currentField && currentField > 1 ? _objectSpread((0, _defineProperty2["default"])({}, name, currentField - 1), prev) : prev;
    });
  }, []);
  var internalGetRegisteredFields = (0, _react.useCallback)(function () {
    var fields = registeredFields.current;
    return Object.entries(fields).reduce(function (acc, _ref3) {
      var _ref4 = (0, _slicedToArray2["default"])(_ref3, 2),
          name = _ref4[0],
          value = _ref4[1];

      return value > 0 ? [].concat((0, _toConsumableArray2["default"])(acc), [name]) : acc;
    }, []);
  }, []);

  try {
    var validatorTypes = Object.keys(validatorMapperMerged);
    var actionTypes = actionMapper ? Object.keys(actionMapper) : [];
    (0, _defaultSchemaValidator["default"])(schema, componentMapper, validatorTypes, actionTypes, schemaValidatorMapper);
  } catch (error) {
    handleErrorCallback('schema-error', error);
    return /*#__PURE__*/_react["default"].createElement(_schemaErrorComponent["default"], {
      name: error.name,
      message: error.message
    });
  }

  return /*#__PURE__*/_react["default"].createElement(_form["default"], (0, _extends2["default"])({
    onSubmit: handleSubmitCallback,
    mutators: mutatorsMerged,
    decorators: decoratorsMerged,
    subscription: _objectSpread({
      pristine: true,
      submitting: true,
      valid: true
    }, subscription),
    render: function render(_ref5) {
      var handleSubmit = _ref5.handleSubmit,
          pristine = _ref5.pristine,
          valid = _ref5.valid,
          _ref5$form = _ref5.form,
          reset = _ref5$form.reset,
          mutators = _ref5$form.mutators,
          getState = _ref5$form.getState,
          submit = _ref5$form.submit,
          form = (0, _objectWithoutProperties2["default"])(_ref5$form, _excluded2);
      return /*#__PURE__*/_react["default"].createElement(_rendererContext["default"].Provider, {
        value: {
          componentMapper: componentMapper,
          validatorMapper: validatorMapperMerged,
          actionMapper: actionMapper,
          conditionMapper: conditionMapper,
          formOptions: _objectSpread(_objectSpread(_objectSpread({
            registerInputFile: registerInputFile,
            unRegisterInputFile: unRegisterInputFile,
            pristine: pristine,
            onSubmit: onSubmit,
            onCancel: isFunc(onCancel) ? handleCancelCallback(getState) : undefined,
            onReset: handleResetCallback(reset),
            onError: handleErrorCallback,
            getState: getState,
            valid: valid,
            clearedValue: clearedValue,
            submit: submit,
            handleSubmit: handleSubmit,
            reset: reset,
            clearOnUnmount: clearOnUnmount,
            renderForm: _renderForm["default"],
            internalRegisterField: internalRegisterField,
            internalUnRegisterField: internalUnRegisterField
          }, mutators), form), {}, {
            ffGetRegisteredFields: form.getRegisteredFields,
            getRegisteredFields: internalGetRegisteredFields,
            initialValues: initialValues,
            schema: schema
          })
        }
      }, FormTemplate && /*#__PURE__*/_react["default"].createElement(FormTemplate, (0, _extends2["default"])({
        formFields: formFields,
        schema: schema
      }, FormTemplateProps)), children && renderChildren(children, {
        formFields: formFields,
        schema: schema
      }));
    }
  }, props, {
    initialValues: initialValues
  }));
};

var _default = FormRenderer;
exports["default"] = _default;