Merge pull request #4 from BBB/feature/redux-form-6

Add support for redux form 6.*
BBB · Sep 6, 2016 · d37c492 · d37c492
2 parents 6d4e79d + 929fe2c
commit d37c492
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 30 deletions.
diff --git a/package.json b/package.json
@@ -11,7 +11,7 @@
     "react-dropzone": "^3.5.3",
     "react-redux": "^4.4.5",
     "redux": "^3.5.2",
-    "redux-form": "^5.3.2"
+    "redux-form": "^6.0.2"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/src/App.js b/src/App.js
@@ -1,21 +1,40 @@
 import React, { Component, PropTypes, } from 'react';
-import { reduxForm, } from 'redux-form';
+import { reduxForm, Field } from 'redux-form';
 
 import Dropzone from 'react-dropzone';
 
 const FILE_FIELD_NAME = 'files';
 
-export const fields = [FILE_FIELD_NAME,];
+const renderDropzoneInput = (field) => {
+  const files = field.input.value;
+  return (
+    <div>
+      <Dropzone
+        name={field.name}
+        onDrop={( filesToUpload, e ) => field.input.onChange(filesToUpload)}
+      >
+        <div>Try dropping some files here, or click to select files to upload.</div>
+      </Dropzone>
+      {field.meta.touched &&
+        field.meta.error &&
+        <span className="error">{field.meta.error}</span>}
+      {files && Array.isArray(files) && (
+        <ul>
+          { files.map((file, i) => <li key={i}>{file.name}</li>) }
+        </ul>
+      )}
+    </div>
+  );
+}
 
 class App extends Component {
 
   static propTypes = {
-    fields: PropTypes.object.isRequired,
     handleSubmit: PropTypes.func.isRequired,
-    resetForm: PropTypes.func.isRequired,
+    reset: PropTypes.func.isRequired,
   };
 
-  handleSubmit(data) {
+  onSubmit(data) {
     var body = new FormData();
     Object.keys(data).forEach(( key ) => {
       body.append(key, data[ key ]);
@@ -34,37 +53,23 @@ class App extends Component {
 
   render() {
     const {
-      fields,
       handleSubmit,
-      resetForm,
+      reset,
     } = this.props;
-    const files = fields[FILE_FIELD_NAME];
     return (
-      <form onSubmit={ handleSubmit }>
+      <form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
         <div>
-          <label>Files</label>
-          <div>
-            <Dropzone
-              onDrop={ ( filesToUpload, e ) => files.onChange(filesToUpload)}
-            >
-              <div>Try dropping some files here, or click to select files to upload.</div>
-            </Dropzone>
-            { files && Array.isArray(files.value) && (
-              <ul>
-                { files.value.map((file, i) => <li key={i}>{file.name}</li>) }
-              </ul>
-            ) }
-          </div>
+          <label htmlFor={FILE_FIELD_NAME}>Files</label>
+          <Field
+            name={FILE_FIELD_NAME}
+            component={renderDropzoneInput}
+          />
         </div>
         <div>
-          <button
-            onClick={ handleSubmit(this.handleSubmit.bind(this)) }
-          >
+          <button type="submit">
             Submit
           </button>
-          <button
-            onClick={ resetForm }
-          >
+          <button onClick={reset}>
             Clear Values
           </button>
         </div>
@@ -75,5 +80,4 @@ class App extends Component {
 
 export default reduxForm({
   form: 'simple',
-  fields,
 })(App);