@bootstrap-styled/ra-ui/lib/components/form/TabbedForm.js

UI components for react-admin

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

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

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

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

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

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

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

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

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

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

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

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

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

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

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

var _propTypes = _interopRequireDefault(require("prop-types"));

var _classnames = _interopRequireDefault(require("classnames"));

var _reduxForm = require("redux-form");

var _reactRedux = require("react-redux");

var _reactRouterDom = require("react-router-dom");

var _compose = _interopRequireDefault(require("recompose/compose"));

var _Form = _interopRequireDefault(require("@bootstrap-styled/v4/lib/Form"));

var _Divider = _interopRequireDefault(require("@material-ui/core/Divider"));

var _Tabs = _interopRequireDefault(require("@material-ui/core/Tabs"));

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

var _raCore = require("ra-core");

var _Toolbar = _interopRequireDefault(require("./Toolbar"));

var _CardContentInner = _interopRequireDefault(require("../layout/CardContentInner"));

var styles = function styles(theme) {
  return {
    errorTabButton: {
      color: theme.palette.error.main
    }
  };
};

var sanitizeRestProps = function sanitizeRestProps(_ref) {
  var anyTouched = _ref.anyTouched,
      array = _ref.array,
      asyncBlurFields = _ref.asyncBlurFields,
      asyncValidate = _ref.asyncValidate,
      asyncValidating = _ref.asyncValidating,
      autofill = _ref.autofill,
      blur = _ref.blur,
      change = _ref.change,
      clearAsyncError = _ref.clearAsyncError,
      clearFields = _ref.clearFields,
      clearSubmit = _ref.clearSubmit,
      clearSubmitErrors = _ref.clearSubmitErrors,
      destroy = _ref.destroy,
      dirty = _ref.dirty,
      dispatch = _ref.dispatch,
      form = _ref.form,
      handleSubmit = _ref.handleSubmit,
      initialize = _ref.initialize,
      initialized = _ref.initialized,
      initialValues = _ref.initialValues,
      pristine = _ref.pristine,
      pure = _ref.pure,
      redirect = _ref.redirect,
      reset = _ref.reset,
      resetSection = _ref.resetSection,
      save = _ref.save,
      staticContext = _ref.staticContext,
      submit = _ref.submit,
      submitFailed = _ref.submitFailed,
      submitSucceeded = _ref.submitSucceeded,
      submitting = _ref.submitting,
      touch = _ref.touch,
      translate = _ref.translate,
      triggerSubmit = _ref.triggerSubmit,
      undoable = _ref.undoable,
      untouch = _ref.untouch,
      valid = _ref.valid,
      validate = _ref.validate,
      props = (0, _objectWithoutProperties2.default)(_ref, ["anyTouched", "array", "asyncBlurFields", "asyncValidate", "asyncValidating", "autofill", "blur", "change", "clearAsyncError", "clearFields", "clearSubmit", "clearSubmitErrors", "destroy", "dirty", "dispatch", "form", "handleSubmit", "initialize", "initialized", "initialValues", "pristine", "pure", "redirect", "reset", "resetSection", "save", "staticContext", "submit", "submitFailed", "submitSucceeded", "submitting", "touch", "translate", "triggerSubmit", "undoable", "untouch", "valid", "validate"]);
  return props;
};

var getTabFullPath = function getTabFullPath(tab, index, baseUrl) {
  return "".concat(baseUrl).concat(tab.props.path ? "/".concat(tab.props.path) : index > 0 ? "/".concat(index) : '');
};

var TabbedForm = function (_Component) {
  (0, _inherits2.default)(TabbedForm, _Component);

  function TabbedForm() {
    var _getPrototypeOf2;

    var _this;

    (0, _classCallCheck2.default)(this, TabbedForm);

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

    _this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(TabbedForm)).call.apply(_getPrototypeOf2, [this].concat(args)));
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleSubmitWithRedirect", function () {
      var redirect = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.props.redirect;
      return _this.props.handleSubmit(function (values) {
        return _this.props.save(values, redirect);
      });
    });
    return _this;
  }

  (0, _createClass2.default)(TabbedForm, [{
    key: "render",
    value: function render() {
      var _this$props = this.props,
          basePath = _this$props.basePath,
          children = _this$props.children,
          className = _this$props.className,
          _this$props$classes = _this$props.classes,
          classes = _this$props$classes === void 0 ? {} : _this$props$classes,
          invalid = _this$props.invalid,
          location = _this$props.location,
          match = _this$props.match,
          pristine = _this$props.pristine,
          record = _this$props.record,
          redirect = _this$props.redirect,
          resource = _this$props.resource,
          saving = _this$props.saving,
          submitOnEnter = _this$props.submitOnEnter,
          tabsWithErrors = _this$props.tabsWithErrors,
          toolbar = _this$props.toolbar,
          translate = _this$props.translate,
          undoable = _this$props.undoable,
          value = _this$props.value,
          version = _this$props.version,
          rest = (0, _objectWithoutProperties2.default)(_this$props, ["basePath", "children", "className", "classes", "invalid", "location", "match", "pristine", "record", "redirect", "resource", "saving", "submitOnEnter", "tabsWithErrors", "toolbar", "translate", "undoable", "value", "version"]);

      var validTabPaths = _react.Children.toArray(children).map(function (tab, index) {
        return getTabFullPath(tab, index, match.url);
      });

      var tabsValue = validTabPaths.indexOf(location.pathname) !== -1 ? location.pathname : validTabPaths[0];
      return _react.default.createElement(_Form.default, (0, _extends2.default)({
        className: (0, _classnames.default)('tabbed-form', className),
        key: version
      }, sanitizeRestProps(rest)), _react.default.createElement(_Tabs.default, {
        value: tabsValue,
        indicatorColor: "primary"
      }, _react.Children.map(children, function (tab, index) {
        if (!(0, _react.isValidElement)(tab)) return null;
        var tabPath = getTabFullPath(tab, index, match.url);
        return _react.default.cloneElement(tab, {
          context: 'header',
          value: tabPath,
          className: tabsWithErrors.indexOf(tab.props.label) !== -1 && location.pathname !== tabPath ? classes.errorTabButton : null
        });
      })), _react.default.createElement(_Divider.default, null), _react.default.createElement(_CardContentInner.default, null, _react.Children.map(children, function (tab, index) {
        return tab && _react.default.createElement(_reactRouterDom.Route, {
          exact: true,
          path: getTabFullPath(tab, index, match.url)
        }, function (routeProps) {
          return (0, _react.isValidElement)(tab) ? _react.default.cloneElement(tab, {
            context: 'content',
            resource: resource,
            record: record,
            basePath: basePath,
            hidden: !routeProps.match,
            key: "".concat(index, "_").concat(!routeProps.match)
          }) : null;
        });
      })), toolbar && _react.default.cloneElement(toolbar, {
        basePath: basePath,
        className: 'toolbar',
        handleSubmitWithRedirect: this.handleSubmitWithRedirect,
        handleSubmit: this.props.handleSubmit,
        invalid: invalid,
        pristine: pristine,
        record: record,
        redirect: redirect,
        resource: resource,
        saving: saving,
        submitOnEnter: submitOnEnter,
        undoable: undoable
      }));
    }
  }]);
  return TabbedForm;
}(_react.Component);

exports.TabbedForm = TabbedForm;
TabbedForm.propTypes = {
  basePath: _propTypes.default.string,
  children: _propTypes.default.node,
  className: _propTypes.default.string,
  classes: _propTypes.default.object,
  defaultValue: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.func]),
  handleSubmit: _propTypes.default.func,
  invalid: _propTypes.default.bool,
  location: _propTypes.default.object,
  match: _propTypes.default.object,
  pristine: _propTypes.default.bool,
  record: _propTypes.default.object,
  redirect: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool, _propTypes.default.func]),
  resource: _propTypes.default.string,
  save: _propTypes.default.func,
  saving: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.bool]),
  submitOnEnter: _propTypes.default.bool,
  tabsWithErrors: _propTypes.default.arrayOf(_propTypes.default.string),
  toolbar: _propTypes.default.element,
  translate: _propTypes.default.func,
  undoable: _propTypes.default.bool,
  validate: _propTypes.default.func,
  value: _propTypes.default.number,
  version: _propTypes.default.number
};
TabbedForm.defaultProps = {
  submitOnEnter: true,
  toolbar: _react.default.createElement(_Toolbar.default, null)
};

var collectErrors = function collectErrors(state, props) {
  var syncErrors = (0, _reduxForm.getFormSyncErrors)(props.form)(state);
  var asyncErrors = (0, _reduxForm.getFormAsyncErrors)(props.form)(state);
  var submitErrors = (0, _reduxForm.getFormSubmitErrors)(props.form)(state);
  return (0, _objectSpread2.default)({}, syncErrors, asyncErrors, submitErrors);
};

var findTabsWithErrors = function findTabsWithErrors(state, props) {
  var collectErrorsImpl = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : collectErrors;
  var errors = collectErrorsImpl(state, props);
  return _react.Children.toArray(props.children).reduce(function (acc, child) {
    if (!(0, _react.isValidElement)(child)) {
      return acc;
    }

    var inputs = _react.Children.toArray(child.props.children);

    if (inputs.some(function (input) {
      return (0, _react.isValidElement)(input) && errors[input.props.source];
    })) {
      return [].concat((0, _toConsumableArray2.default)(acc), [child.props.label]);
    }

    return acc;
  }, []);
};

exports.findTabsWithErrors = findTabsWithErrors;
var enhance = (0, _compose.default)(_reactRouterDom.withRouter, (0, _reactRedux.connect)(function (state, props) {
  var children = _react.Children.toArray(props.children).reduce(function (acc, child) {
    return [].concat((0, _toConsumableArray2.default)(acc), (0, _toConsumableArray2.default)((0, _react.isValidElement)(child) ? _react.Children.toArray(child.props.children) : []));
  }, []);

  return {
    form: props.form || _raCore.REDUX_FORM_NAME,
    initialValues: (0, _raCore.getDefaultValues)(state, (0, _objectSpread2.default)({}, props, {
      children: children
    })),
    saving: props.saving || state.admin.saving,
    tabsWithErrors: findTabsWithErrors(state, (0, _objectSpread2.default)({
      form: _raCore.REDUX_FORM_NAME
    }, props))
  };
}), _raCore.translate, (0, _reduxForm.reduxForm)({
  destroyOnUnmount: false,
  enableReinitialize: true,
  keepDirtyOnReinitialize: true
}), (0, _styles.withStyles)(styles));

var _default = enhance(TabbedForm);

exports.default = _default;