@mobx-json/mui-form/dist/useMuiJsonForm.js

create material-ui forms by json & mobx

"use strict";

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

var _Grid2 = _interopRequireDefault(require("@material-ui/core/Grid"));

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

var _styles = require("@material-ui/core/styles");

var _form = require("@mobx-json/form");

var _domFocusByName = _interopRequireDefault(require("./lib/domFocusByName"));

var _SmoothScroll = _interopRequireDefault(require("./common/SmoothScroll"));

var _MsgErrorBoundary = _interopRequireDefault(require("./common/MsgErrorBoundary"));

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

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }

function _iterableToArrayLimit(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) { return; } var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

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

var useStyles = (0, _styles.makeStyles)({
  form: {
    width: '100%'
  }
});

function useMuiJsonForm(_ref) {
  var blueprint = _ref.blueprint,
      blueprintExtra = _ref.blueprintExtra,
      formUniqName = _ref.formUniqName,
      data = _ref.data,
      _ref$options = _ref.options,
      options = _ref$options === void 0 ? {} : _ref$options;
  var _options$smoothScroll = options.smoothScroll,
      smoothScroll = _options$smoothScroll === void 0 ? true : _options$smoothScroll,
      gridContainerProps = options.gridContainerProps;
  var classes = useStyles(); // change of innerBlueprint will re-render all components

  var _React$useState = _react["default"].useState(null),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      innerBlueprint = _React$useState2[0],
      setBlueprint = _React$useState2[1]; // if (!formUniqName) {
  //   throw new Error('formUniqName must be defined.');
  // }
  // initialize mobx store


  var store = _react["default"].useMemo(function () {
    return new _form.JsonFormStore(innerBlueprint || blueprint, blueprintExtra); // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [innerBlueprint, formUniqName || blueprint]); // load default data only once


  _react["default"].useEffect(function () {
    store.setData(data); // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [store]);

  var form = _react["default"].useMemo(function () {
    return _react["default"].createElement(_react["default"].Fragment, null, smoothScroll ? _react["default"].createElement(_SmoothScroll["default"], null) : null, _react["default"].createElement(_MsgErrorBoundary["default"], {
      store: store
    }, _react["default"].createElement("div", {
      "aria-label": formUniqName,
      className: classes.form
    }, _react["default"].createElement(_Grid2["default"], _extends({
      container: true,
      spacing: 2
    }, gridContainerProps), _react["default"].createElement(_form.JsonForm, {
      store: store
    })))));
  }, // eslint-disable-next-line react-hooks/exhaustive-deps
  [formUniqName, gridContainerProps, smoothScroll, blueprint, store]);

  var getDataWithCheck = _react["default"].useCallback(function () {
    if (store.checkAllOnSubmit()) {
      return store.getData();
    }

    var errFieldName = store.getFirstErrFieldName();

    if (errFieldName != null) {
      (0, _domFocusByName["default"])(errFieldName, formUniqName); // domFocusByName(errFieldName);
    }

    return false;
  }, [formUniqName, store]);

  var clearAll = _react["default"].useCallback(function () {
    store.clearAllErrors();
    store.clearAllData();
  }, [store]);

  return {
    form: form,
    store: store,
    setBlueprint: setBlueprint,
    getDataWithCheck: getDataWithCheck,
    clearAll: clearAll,
    setData: store.setData,
    getData: store.getData,
    clearError: store.clearAllErrors,
    clearData: store.clearAllData,
    revertToInit: store.revertToInit,
    changeFieldAttrs: store.changeFieldAttrs
  };
}

var _default = useMuiJsonForm;
exports["default"] = _default;
module.exports = exports.default;