SHARE
TWEET

Untitled

a guest Jan 11th, 2017 68 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { Component } from 'react';
  2. import {
  3.     clearErrorOnChange,
  4.     validateAndUpdateErrorsOnBlur
  5. } from '../../shared/formFunctions';
  6. /**
  7.  * @param fields (array) fields = ['username', 'password']
  8.  * @param validation (object) validation = { username: { minLength: 10 } }
  9.  * @returns {{ childComponent }}
  10.  * @constructor
  11.  */
  12. const MakeForm = (fields = [], validation = {}) => (ChildComponent) => {
  13.  
  14.     if (fields.length === 0) {
  15.         throw new Error('Must supply fields to FormHOC');
  16.     }
  17.  
  18.     if (typeof validation !== 'object') {
  19.         throw new Error('Validation must be an object');
  20.     }
  21.  
  22.     return class extends Component {
  23.         constructor(props) {
  24.             super(props);
  25.             this.validation = validation;
  26.             this.state = {
  27.                 fields: fields.reduce((prev, curr) => {
  28.                     prev[curr] = '';
  29.                     return prev;
  30.                 }, {}),
  31.                 errors: {}
  32.             };
  33.         }
  34.  
  35.         onChange(event) {
  36.             const { name, value } = event.target;
  37.             const fields = Object.assign({}, this.state.fields, { [name]: value });
  38.             const errors = clearErrorOnChange(event, this.state.errors);
  39.             this.setState({ fields, errors });
  40.         }
  41.  
  42.         onBlur(event) {
  43.             const errors = validateAndUpdateErrorsOnBlur(
  44.                 event,
  45.                 this.validation,
  46.                 this.state.errors
  47.             );
  48.  
  49.             if (errors) {
  50.                 this.setState({ errors});
  51.             }
  52.         }
  53.  
  54.         getFields() {
  55.             return Object.assign({}, this.state.fields);
  56.         }
  57.  
  58.         setFields(newFields) {
  59.             const fields = Object.assign({}, this.state.fields, newFields);
  60.             this.setState({ fields });
  61.         }
  62.  
  63.         render() {
  64.             return (
  65.                 <ChildComponent
  66.                     onChange={this.onChange.bind(this)}
  67.                     onBlur={this.onBlur.bind(this)}
  68.                     getFields={this.getFields.bind(this)}
  69.                     setFields={this.setFields.bind(this)}
  70.                     {...this.state}
  71.                     {...this.props}
  72.                 />
  73.             );
  74.         }
  75.     }
  76. };
RAW Paste Data
Pastebin PRO Summer Special!
Get 60% OFF on Pastebin PRO accounts!
Top