Form.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { withStyles } from 'material-ui/styles';
import Grid from 'material-ui/Grid';
import Loading from '~/Components/Loading';
import styles from './styles';

@withStyles(styles)
class Form extends Component {
  _onSubmit = e => {
    e.preventDefault();
    this.props.onSubmit();
  };

  render() {
    const { classes, className, loading, ...rest } = this.props;

    return (
      <form
        className={classnames(classes.form, className, { [classes.loading]: loading })}
        onSubmit={this._onSubmit}
        {...rest}
      >
        <If condition={loading}>
          <div className={classes.loading}>
            <Loading />
          </div>
        </If>
        <Grid container className={classes.formInnerGrid}>
          {this.props.children}
        </Grid>
      </form>
    );
  }
}

Form.propTypes = {
  classes: PropTypes.object,
  className: PropTypes.string,
  children: PropTypes.any,
  onSubmit: PropTypes.func,
  loading: PropTypes.bool,
};

Form.defaultProps = {
  className: '',
  loading: false,
  onSubmit() {},
};

export { Form };