Merge branch 'master' of github.com:davidkpiano/react-redux-form

davidkpiano · davidkpiano · commit 7911e15a8770 · 2017-09-24T08:37:14.000-04:00
diff --git a/docs/api/Control.md b/docs/api/Control.md
@@ -216,7 +216,7 @@ For example, this control validates that a username exists and is longer than 4
 />
 ```
 
-### `parser={() => ...}` {#prop-parser}
+## `parser={() => ...}` {#prop-parser}
 _(Function)_: A function that _parses_ the view value of the control before it is changed. It takes in two arguments:
 - `value` - the view value that represents the _next_ model value
 - `previous` (optional) - the current model value _before_ it is changed
diff --git a/examples/immutable-track/app.js b/examples/immutable-track/app.js
@@ -0,0 +1,109 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+
+import { Provider } from 'react-redux';
+import { createStore, applyMiddleware, compose } from 'redux';
+
+import { fromJS } from 'immutable';
+
+import {
+  Field,
+  Control,
+  Form,
+  Fieldset,
+  track,
+  combineForms,
+} from 'react-redux-form/immutable';
+
+const initialUserState = fromJS({
+  firstName: '',
+  lastName: '',
+  groups: [
+    {
+      id: 5,
+      name: 'Group A',
+    },
+    {
+      id: 6,
+      name: 'Group B',
+    },
+  ],
+});
+
+const store = createStore(
+  combineForms({
+    user: initialUserState,
+  }),
+);
+
+class UserForm extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      groupIndex: 0,
+      groupId: 5,
+    };
+  }
+
+  render() {
+    return (
+      <Form model="user" onSubmit={v => console.log(v.toJS())}>
+        <div className="field">
+          <label>First name:</label>
+          <Control.text model=".firstName" />
+        </div>
+
+        <div className="field">
+          <label>Last name:</label>
+          <Control.text model=".lastName" />
+        </div>
+
+        <div className="field">
+          <label>Group index</label>
+          <input
+            type="number"
+            value={this.state.groupIndex}
+            onChange={event =>
+              this.setState({ groupIndex: event.target.value })}
+          />
+        </div>
+
+        <div className="field">
+          <label>Select Group by ID: </label>
+          <input
+            type="number"
+            value={this.state.groupId}
+            onChange={event => this.setState({ groupId: parseInt(event.target.value, 10) })}
+          />
+        </div>
+
+        <Fieldset model={track(`.groups[]`, { id: this.state.groupId })}>
+          <div className="field">
+            <label>Group: </label>
+            <div>
+              ID: <Control.text model=".id" />
+              <br />
+              Name: <Control.text model=".name" />
+            </div>
+          </div>
+        </Fieldset>
+
+        <button type="submit">
+          Submit (check console)
+        </button>
+      </Form>
+    );
+  }
+}
+
+class App extends React.Component {
+  render() {
+    return (
+      <Provider store={store}>
+        <UserForm />
+      </Provider>
+    );
+  }
+}
+
+ReactDOM.render(<App />, document.getElementById('app'));
diff --git a/examples/immutable-track/index.html b/examples/immutable-track/index.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<link href="/global.css" rel="stylesheet"/>
+<title>Immutable track() - react redux form examples</title>
+<body>
+<h1 class="breadcrumbs"><a href="/">react redux form examples</a> / Immutable track()</h1>
+<div id="app" />
+<script src="/__build__/shared.js"></script>
+<script src="/__build__/immutable-track.js"></script>
+</body>
diff --git a/examples/index.html b/examples/index.html
@@ -7,6 +7,7 @@ <h1>react redux form examples</h1>
     <li><a href="quick-start/">Quick Start</a></li>
     <li><a href="validation/">Validation</a></li>
     <li><a href="immutable/">Immutable</a></li>
+    <li><a href="immutable-track/">Immutable track()</a></li>
     <li><a href="stress-test/">stress-test</a></li>
     <li><a href="scheduling/">Scheduling</a></li>
   </ul>
diff --git a/src/utils/find-key.js b/src/utils/find-key.js
@@ -1,17 +1,22 @@
+import { List } from 'immutable';
 
 export default function findKey(object, predicate) {
   let resultKey;
 
-  Object.keys(object).some((key) => {
-    const isKey = predicate(object[key], key, object);
+  if (List.isList(object)) {
+    resultKey = object.findKey(predicate);
+  } else {
+    Object.keys(object).some((key) => {
+      const isKey = predicate(object[key], key, object);
 
-    if (isKey) {
-      resultKey = key;
-      return true;
-    }
+      if (isKey) {
+        resultKey = key;
+        return true;
+      }
 
-    return false;
-  });
+      return false;
+    });
+  }
 
   return resultKey;
 }
