Fixing erroneous div component for LocalForm and passing of invalid proptypes

Author: davidkpiano

examples/quick-start/app.js

@@ -1,68 +1,22 @@
-import React, { Component, PropTypes } from 'react';
+import React from 'react';
 import ReactDOM from 'react-dom';
-import {
-  createStore,
-  combineReducers,
-  applyMiddleware
-} from 'redux';
-import { connect, Provider } from 'react-redux';
-import {
-  Form,
-  Control,
-  Errors,
-  actions,
-  combineForms,
-} from 'react-redux-form';
-import thunk from 'redux-thunk';
-import createLogger from 'redux-logger';
-// import isEmpty from 'validator/lib/isEmpty';
 
-const store = createStore(combineForms({
-  user: {
-    name1: '',
-    name2: '',
-  },
-}), applyMiddleware(thunk, createLogger()));
+import { Provider } from 'react-redux';
 
-const isRequired = value => !!value && value.length;
-const namesNotEqual = ({name1, name2}) => {
-  console.log("namesNotEqual(): Name1: %s, Name2: %s", name1, name2);
-  return name1 !== name2;
-};
+// We'll create this in Step 5.
+import store from './store.js';
 
-class App extends Component {
-  handleSubmit(vals) {
-    console.log("handleSubmit(): %O", vals);
-  }
-  
+// We'll create this in Step 6.
+import UserForm from './components/user-form.js';
+
+class App extends React.Component {
   render() {
     return (
-      <Form
-        model="user"
-        onSubmit={(vals) => this.handleSubmit(vals)}
-        validators={{'': {namesNotEqual}}}
-      >
-        <Errors show={true} model="user" messages={{namesNotEqual: "No equal names allowed!"}} />
-        <br />
-        
-        <label>Name1:</label>
-        <Control.text model=".name1" validators={{isRequired}} />
-        <Errors show={true} model=".name1" messages={{isRequired: "Please enter a name!"}}/>
-        <br />
-        
-        <label>Name2:</label>
-        <Control.text model=".name2" validators={{isRequired}} />
-        <Errors show={true} model=".name2" messages={{isRequired: "Please enter a name!"}}/>
-        <br />
-        
-        <button>Submit!</button>
-      </Form>
+      <Provider store={store}>
+        <UserForm />
+      </Provider>
     );
   }
 }
 
-ReactDOM.render(
-  <Provider store={store}>
-    <App />
-  </Provider>
-, document.querySelector('#app'));
+ReactDOM.render(<App />, document.getElementById('app'));

src/components/control-component.js

@@ -30,7 +30,7 @@ const findDOMNode = !isNative
   ? require('react-dom').findDOMNode
   : null;
 
-const disallowedProps = ['changeAction', 'getFieldFromState'];
+const disallowedProps = ['changeAction', 'getFieldFromState', 'store'];
 
 function getReadOnlyValue(props) {
   const { modelValue, controlProps } = props;
@@ -96,6 +96,11 @@ const propTypes = {
     PropTypes.string,
   ]),
   dynamic: PropTypes.bool,
+  store: PropTypes.shape({
+    subscribe: PropTypes.func,
+    dispatch: PropTypes.func,
+    getState: PropTypes.func,
+  }),
 };
 
 const defaultStrategy = {

src/components/local-form-component.js

@@ -2,6 +2,7 @@ import React, { PropTypes } from 'react';
 import Form from './form-component';
 import combineForms from '../reducers/forms-reducer';
 import { createStore } from 'redux';
+import omit from 'lodash/omit';
 
 class LocalForm extends React.Component {
   constructor(props) {
@@ -13,8 +14,10 @@ class LocalForm extends React.Component {
   }
 
   render() {
+    const allowedProps = omit(this.props, ['store', 'initialState']);
+
     return (
-      <Form store={this.store} {...this.props} component="div" />
+      <Form store={this.store} {...allowedProps} />
     );
   }
 }