provide-page/lib/components/Form.js

Provides automatic server-side rendering and actions (regardless of whether or not client has JavaScript enabled) to React components. Use in conjunction with `provide-router`.

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _createClass = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

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

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

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

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

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

var Form = function (_Component) {
  _inherits(Form, _Component);

  function Form() {
    var _ref;

    var _temp, _this, _ret;

    _classCallCheck(this, Form);

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

    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Form.__proto__ || Object.getPrototypeOf(Form)).call.apply(_ref, [this].concat(args))), _this), _this.onChange = function (event) {
      var _this$props = _this.props,
          onChange = _this$props.onChange,
          getFormData = _this$props.getFormData;


      if (onChange) {
        onChange(event, getFormData(_this.refs.form));
      }
    }, _this.onSubmit = function (event) {
      var _this$props2 = _this.props,
          formId = _this$props2.formId,
          submitForm = _this$props2.submitForm,
          serverSide = _this$props2.serverSide,
          ssrDisabled = _this$props2.ssrDisabled,
          onSubmit = _this$props2.onSubmit;

      var formData = _this.props.getFormData(_this.refs.form);

      if (event && event.stopPropagation) {
        event.stopPropagation();
        event.preventDefault();

        if (ssrDisabled === true || ssrDisabled && ssrDisabled[formId]) {
          if (onSubmit) {
            onSubmit(event, formData);
          }
        } else if (serverSide) {
          submitForm(formData, onSubmit);
        } else {
          submitForm(formData);

          if (onSubmit) {
            onSubmit(event, formData);
          }
        }
      } else if (onSubmit) {
        onSubmit(event, formData);
      }
    }, _temp), _possibleConstructorReturn(_this, _ret);
  }

  _createClass(Form, [{
    key: 'componentWillMount',
    value: function componentWillMount() {
      var _props = this.props,
          onSubmit = _props.onSubmit,
          formData = _props.formData;


      if (formData && !formData._formHandled) {
        formData._formHandled = onSubmit(null, formData) !== false;
      }
    }
  }, {
    key: 'render',
    value: function render() {
      var _props2 = this.props,
          formId = _props2.formId,
          formData = _props2.formData,
          serverSide = _props2.serverSide,
          ssrDisabled = _props2.ssrDisabled,
          submitForm = _props2.submitForm,
          getFormData = _props2.getFormData,
          onChange = _props2.onChange,
          onSubmit = _props2.onSubmit,
          formProps = _objectWithoutProperties(_props2, ['formId', 'formData', 'serverSide', 'ssrDisabled', 'submitForm', 'getFormData', 'onChange', 'onSubmit']);

      formProps.onChange = this.onChange;
      formProps.onSubmit = this.onSubmit;
      formProps.ref = 'form';

      return _react2.default.createElement(
        'form',
        formProps,
        formProps.children,
        _react2.default.createElement('input', { type: 'hidden', name: '_formId', value: formId })
      );
    }
  }]);

  return Form;
}(_react.Component);

Form.propTypes = {
  method: _propTypes2.default.string,
  formId: _propTypes2.default.string,
  formData: _propTypes2.default.object,
  serverSide: _propTypes2.default.bool,
  ssrDisabled: _propTypes2.default.any,
  submitForm: _propTypes2.default.func.isRequired,
  onChange: _propTypes2.default.func,
  onSubmit: _propTypes2.default.func,
  getFormData: _propTypes2.default.func.isRequired,
  children: _propTypes2.default.any
};
Form.defaultProps = {
  method: 'post',
  getFormData: function getFormData(form) {
    var elements = Array.prototype.slice.call(form.elements);
    var formData = {};

    var _iteratorNormalCompletion = true;
    var _didIteratorError = false;
    var _iteratorError = undefined;

    try {
      for (var _iterator = elements[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
        var element = _step.value;

        if (element.name) {
          if (element.getAttribute('data-json')) {
            try {
              formData[element.name] = JSON.parse(element.getAttribute('data-json'));
            } catch (error) {}
          } else if (!element.value && element.innerText) {
            formData[element.name] = element.innerText;
          } else if (element.type === 'checkbox') {
            formData[element.name] = element.checked ? element.value : '';
          } else if (element.type === 'radio') {
            if (element.checked) {
              formData[element.name] = element.value;
            }
          } else {
            formData[element.name] = element.value;
          }
        }
      }
    } catch (err) {
      _didIteratorError = true;
      _iteratorError = err;
    } finally {
      try {
        if (!_iteratorNormalCompletion && _iterator.return) {
          _iterator.return();
        }
      } finally {
        if (_didIteratorError) {
          throw _iteratorError;
        }
      }
    }

    return formData;
  }
};
exports.default = Form;