react-chloroform

Checkbox integration and custom input.

by darrikonn

HTML

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>
<script src="https://rawgit.com/darrikonn/react-chloroform/master/dist/react-chloroform.js"></script>
<script src="https://rawgit.com/CognizantStudio/react-loader/master/lib/react-loader.js"></script>
  <title>ESNextbin Sketch</title>
  <!-- put additional styles and scripts here -->
</head>
<body>
  <!-- put markup and other contents here -->
  <div id="root"></div>
</body>
</html>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

label {
  margin-right: 5px;
}

#root {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

.fieldError {
  color: #a94442;
}

.react-chloroform-error {
  border-color: #a94442 !important;
}

.submitButton {
  transition: all ease 1.8s;
}

.loading:after {
  content: ' .';
  animation: dots 1s steps(5, end) infinite;
}

@keyframes dots {
  0%,
  20% {
    color: rgba(0, 0, 0, 0);
    text-shadow: .25em 0 0 rgba(0, 0, 0, 0), .5em 0 0 rgba(0, 0, 0, 0);
  }
  40% {
    color: white;
    text-shadow: .25em 0 0 rgba(0, 0, 0, 0), .5em 0 0 rgba(0, 0, 0, 0);
  }
  60% {
    text-shadow: .25em 0 0 white, .5em 0 0 rgba(0, 0, 0, 0);
  }
  80%,
  100% {
    text-shadow: .25em 0 0 white, .5em 0 0 white;
  }
}

React

const {
  Form,
  Button,
  ChloroformError,
  Checkbox,
  withReactChloroform,
} = ReactChloroform;

const isRequired = val => (val && val.length > 0) || "You must have a favourite pet!";

class SubmitButton extends React.Component {
	constructor(props) {
  	super(props);
    this.state = {
    	success: false,
      failure: false,
      text: 'Submit',
    };
  }
	componentDidUpdate(oldProps) {
    if (this.props.chloroformStatus && oldProps.chloroformStatus !== this.props.chloroformStatus) {
      this.onFormSubmit(this.props.chloroformStatus);
    }
  }
  
  onFormSubmit = result => {
    this.setState({
      success: result === 'submitted',
      failure: result === 'failed',
      text: this.renderText(),
    });
    setTimeout(() => {
      this.setState({
        success: false,
        failure: false,
        text: 'Submit',
      });
    }, 2000);
  };
  
  renderText = () => {
  	const {chloroformStatus} = this.props;
    if (chloroformStatus === 'submitted') {
    	return 'Submitted';
    } else if (chloroformStatus === 'failed') {
    	return 'Failed';
    } else if (chloroformStatus === 'submitting') {
    	return <div className="loading" />;
    }
    return 'Submit';
  };
  
  getClassName = () => {
    const {success, failure} = this.state;
    let buttonClass = 'btn-primary';
    if (success) {
    	buttonClass = 'btn-success';
    } else if (failure) {
    	buttonClass = 'btn-danger';
    }
  	
    return `btn btn-block ${buttonClass} submitButton`;
  };
  
	render() {
  	const {chloroformStatus} = this.props;

    return (
      <button
        type="submit"
        className={this.getClassName()}
        disabled={['hasErrors', 'submitting'].includes(chloroformStatus)}
      >
        {this.state.text}
      </button>
    );
  }
}

const CustomSubmitButton = withReactChloroform(SubmitButton);

class App extends React.Component {
  sleep = ms => new Promise(resolve => setTimeout(resolve, ms));

  handleSubmit = model => 
 ...