Merge pull request #13 from mprzodala/listFieldFix

List field fix
rstgroup · Apr 24, 2017 · 44e6caf · 44e6caf
2 parents 445b383 + e2a7d17
commit 44e6caf
Show file tree

Hide file tree

Showing 8 changed files with 46 additions and 28 deletions.
diff --git a/Bootstrap.js b/Bootstrap.js
diff --git a/README.md b/README.md
@@ -3,7 +3,7 @@
 <img src="https://img.shields.io/badge/build-passing-brightgreen.svg" />
 <img src="https://img.shields.io/badge/coverage-100%25-brightgreen.svg" />
 <img src="https://img.shields.io/badge/license-MIT-blue.svg" />
-<img src="https://img.shields.io/badge/npm-v1.8.3-blue.svg" />
+<img src="https://img.shields.io/badge/npm-v1.8.6-blue.svg" />
 
 1. [Installation](#installation)
 2. [Description](#description)

diff --git a/Separate.js b/Separate.js
diff --git a/main.js b/main.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-components-form",
-  "version": "1.8.5",
+  "version": "1.8.6",
   "description": "React form components",
   "main": "main.js",
   "jsnext:main": "src/index.js",
@@ -40,7 +40,7 @@
     "css-loader": "^0.26.1",
     "enzyme": "^2.7.1",
     "extract-text-webpack-plugin": "^1.0.1",
-    "form-schema-validation": "^1.3.0",
+    "form-schema-validation": "^1.6.0",
     "jest": "^18.1.0",
     "jsdom": "^9.11.0",
     "react": "^15.4.1",

diff --git a/src/components/ListField.jsx b/src/components/ListField.jsx
@@ -2,12 +2,14 @@ import React, { PropTypes } from 'react';
 import FieldConnect from './FieldConnect';
 
 export class ListField extends React.Component {
+    static generateItemId() {
+        return Math.random().toString(36).substring(7);
+    }
     constructor(props, { getSchema }) {
         super(props);
         this.state = {
             schema: getSchema(props.name),
-            model: props.value || [],
-            listLength: props.value ? props.value.length : 1,
+            model: this.getModelFromProps(props),
             errors: {}
         };
         this.setModel = this.setModel.bind(this);
@@ -19,17 +21,27 @@ export class ListField extends React.Component {
         this.getErrors = this.getErrors.bind(this);
     }
 
+    getModelFromProps(props) {
+        if (props.value) {
+            return props.value.map(item => ({
+                id: ListField.generateItemId(),
+                value: item
+            }));
+        }
+        return [{ id: ListField.generateItemId() }];
+    }
+
     setModel(name, value, callback) {
         const [fieldName, key] = name.split('-');
         const model = Array.from(this.state.model);
-        model[parseInt(key)] = value;
+        model[parseInt(key)].value = value;
         this.setState({ model }, callback);
-        this.props.onChange(model);
+        this.props.onChange(model.map(item => item.value));
     }
 
     getModel(name) {
         const [fieldName, key] = name.split('-');
-        return this.state.model[key];
+        return this.state.model[key].value;
     }
 
     getSchema() {
@@ -44,14 +56,18 @@ export class ListField extends React.Component {
     }
 
     addListElement(){
-        this.setState({ listLength: this.state.listLength + 1 });
+        const model = Array.from(this.state.model);
+        model.push({
+            id: ListField.generateItemId()
+        });
+        this.setState({ model });
     }
 
     removeListElement(key) {
         const model = Array.from(this.state.model);
         model.splice(key, 1);
-        this.setState({ model, listLength: this.state.listLength - 1 });
-        this.props.onChange(model);
+        this.setState({ model });
+        this.props.onChange(model.map(item => item.value));
     }
 
     getChildContext() {
@@ -64,26 +80,26 @@ export class ListField extends React.Component {
     }
 
     getList(children) {
-        const list = [];
         const {
             name,
             removeButton: {
                 wrapperClassName,
                 className,
                 value
             } = {},
-            hideRemoveButton
+            hideRemoveButton,
+            itemWrapperClassName
         } = this.props;
 
-        for(let key = 0; key < this.state.listLength; key += 1){
+        return this.state.model.map((item, key) => {
             const child = React.cloneElement(children, {
                 name: `${name}-${key}`,
-                value: this.state.model[key],
-                key
+                value: item.value,
+                key: item.id
             });
 
-            list.push(
-               <div key={`${name}-${key}`}>
+            return (
+               <div key={item.id} className={itemWrapperClassName}>
                    <div>{child}</div>
                    {!hideRemoveButton && <div className={wrapperClassName}>
                        <span
@@ -95,8 +111,7 @@ export class ListField extends React.Component {
                    </div>}
                </div>
             );
-        }
-        return list;
+        });
     }
 
     render() {
@@ -139,6 +154,7 @@ ListField.childContextTypes = {
 ListField.propTypes = {
     className: PropTypes.string,
     wrapperClassName: PropTypes.string,
+    itemWrapperClassName: PropTypes.string,
     label: PropTypes.string,
     addButton: PropTypes.shape({
         className: PropTypes.string,

diff --git a/src/components/TextField.jsx b/src/components/TextField.jsx
@@ -19,7 +19,7 @@ export const TextField = ({
     <div className={wrapperClassName}>
         {label && <label>{label}</label>}
         <input
-            type={type}
+            type={type === String ? 'text' : type}
             name={name}
             onChange={(e) => onChange(e.target.value)}
             value={value}

diff --git a/src/demo/login/index.jsx b/src/demo/login/index.jsx
@@ -30,7 +30,7 @@ const LoginForm  = () => {
                 <SubmitField value="Login" />
             </Form>
             <h5>This is example of submit form outside form context</h5>
-            <button onClick={() => console.log(eventsListener.callEvent('submit'))}>Outside submit button</button>
+            <button onClick={() => eventsListener.callEvent('submit')}>Outside submit button</button>
             <button onClick={() => eventsListener.callEvent('validate')}>Outside validate button</button>
         </div>
     );