fieldAttributes and fieldsRestyle documentation

rstgroup · Mar 9, 2017 · 3e1113c · 3e1113c
1 parent 0644b3b
commit 3e1113c
Show file tree

Hide file tree

Showing 11 changed files with 124 additions and 23 deletions.
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 
 <img src="https://img.shields.io/badge/build-passing-brightgreen.svg" />
 <img src="https://img.shields.io/badge/license-MIT-blue.svg" />
-<img src="https://img.shields.io/badge/npm-v1.1.2-blue.svg" />
+<img src="https://img.shields.io/badge/npm-v1.2.0-blue.svg" />
 
 1. [Installation](#installation)
 2. [Description](#description)
@@ -74,6 +74,7 @@ Now go to http://localhost:8080 in your browser.
 | model | Object |
 | onSubmit | Function(model) |
 | onError | Function(errors, model) |
+| className | String |
 
 ###Fields
 
@@ -103,6 +104,7 @@ You can use current fields or create new fields. Here You have list of fields.
 | placeholder | String |
 | options | [String], [{label: String, value: String}] |
 | errorStyles | {className, itemClassName, ErrorComponent} |
+| fieldAttributes | Object with html attributes for input |
 
 ####How create new field
 If You want create Your own custom field You must create component that use onChange method from props when value is changed and on export use FieldConnect method. FieldConnect will wrap Your field component and give props from form to Your field. Abow You have example of custom text field that have icon.
@@ -121,6 +123,7 @@ const CustomTextField = ({
     label,
     placeholder,
     errorStyles = {}
+    fieldAttributes = {}
 }) => (
     <div className={wrapperClassName}>
         {label && <label>{label}</label>}
@@ -131,6 +134,7 @@ const CustomTextField = ({
             value={value}
             placeholder={placeholder}
             className={className}
+            {...fieldAttributes}
         />
         <icon className="some-icon-class" />
         {error && <ErrorField errors={errors} {...errorStyles} />}
@@ -321,6 +325,9 @@ export default CompanyForm;
 ```
 
 ####Example of use ObjectField
+
+You can group fields as object by using ObjectField component.
+
 ```js
 import React from 'react';
 import { Form, TextField, ObjectField, SubmitField } from 'react-components-form';
@@ -366,6 +373,9 @@ export default CompanyForm;
 ```
 
 ####Example of use ListField
+
+You can use ListField to create list of fields or groups of fields
+
 ```js
 import React from 'react';
 import { Form, TextField, ListField, SubmitField } from 'react-components-form';
@@ -402,6 +412,73 @@ const MemberForm  = () => (
 export default MemberForm;
 ```
 
+####Example of use FieldsRestyle
+
+You can restyle all fields by FieldRestyle method
+
+```js
+import { FieldsRestyle } from 'react-components-form';
+
+const errorStyles = {
+    className: 'alert alert-danger'
+};
+
+const Fields = FieldsRestyle({
+    TextField: {
+        className: 'form-control',
+        errorStyles
+    },
+    DateField: {
+        className: 'form-control',
+        errorStyles
+    },
+    TextareaField: {
+        className: 'form-control',
+        errorStyles
+    },
+    NumberField: {
+        className: 'form-control',
+        errorStyles
+    },
+    SubmitField: {
+        className: 'btn btn-primary',
+        errorStyles
+    },
+    SelectField: {
+        className: 'form-control',
+        errorStyles
+    },
+    CheckboxField: {
+        wrapperClassName: 'checkbox',
+        errorStyles
+    },
+    ListField: {
+        className: 'form-control',
+        errorStyles,
+        addButton: {
+            className: 'btn btn-success btn-xs'
+        },
+        removeButton: {
+            className: 'btn btn-danger btn-xs pull-right'
+        }
+    }
+});
+
+export const Form = Fields.Form;
+export const TextField = Fields.TextField;
+export const DateField = Fields.DateField;
+export const TextareaField = Fields.TextareaField;
+export const NumberField = Fields.NumberField;
+export const SubmitField = Fields.SubmitField;
+export const SelectField = Fields.SelectField;
+export const CheckboxField = Fields.CheckboxField;
+export const ObjectField = Fields.ObjectField;
+export const ListField = Fields.ListField;
+export default Fields;
+```
+
+
+
 ####Separate fields
 
 You can use fields without Form context by import it from "react-components-form/Separate"
@@ -415,7 +492,7 @@ const exampleSearchComponent = ({onSearch}) => (
     </div>
 );
 
-export default exampleComponent;
+export default exampleSearchComponent;
 ```
 
 ####Bootstrap fields

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-components-form",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "React form components",
   "main": "main.js",
   "jsnext:main": "src/index.js",

diff --git a/src/components/CheckboxField.jsx b/src/components/CheckboxField.jsx
@@ -30,7 +30,8 @@ export class CheckboxField extends React.Component {
             error,
             label,
             placeholder,
-            errorStyles = {}
+            errorStyles = {},
+            fieldAttributes = {}
         } = this.props;
         return (
             <div className={wrapperClassName}>
@@ -42,6 +43,7 @@ export class CheckboxField extends React.Component {
                         onChange={this.toggleValue}
                         placeholder={placeholder}
                         className={className}
+                        {...fieldAttributes}
                     />
                     {label}
                 </label>
@@ -68,7 +70,8 @@ CheckboxField.propTypes = {
     errorStyles: PropTypes.shape({
         className: PropTypes.string,
         itemClassName: PropTypes.string
-    })
+    }),
+    fieldAttributes: PropTypes.shape({})
 };
 
 export default FieldConnect(CheckboxField);
diff --git a/src/components/DateField.jsx b/src/components/DateField.jsx
@@ -23,7 +23,8 @@ export const DateField = ({
     value,
     label,
     placeholder,
-    errorStyles = {}
+    errorStyles = {},
+    fieldAttributes = {}
 }) => (
     <div className={wrapperClassName}>
         {label && <label>{label}</label>}
@@ -34,6 +35,7 @@ export const DateField = ({
             value={getDateString(value)}
             placeholder={placeholder}
             className={className}
+            {...fieldAttributes}
         />
         {error && <ErrorField errors={errors} {...errorStyles} />}
     </div>
@@ -55,7 +57,8 @@ DateField.propTypes = {
     errorStyles: PropTypes.shape({
         className: PropTypes.string,
         itemClassName: PropTypes.string
-    })
+    }),
+    fieldAttributes: PropTypes.shape({})
 };
 
 export default FieldConnect(DateField);
diff --git a/src/components/ListField.jsx b/src/components/ListField.jsx
@@ -105,12 +105,13 @@ export class ListField extends React.Component {
             className,
             wrapperClassName,
             label,
-            addButton = {}
+            addButton = {},
+            fieldAttributes = {}
         } = this.props;
         return (
             <div className={wrapperClassName}>
                 {label && <label>{label}</label>}
-                <div className={className}>{this.getList(children)}</div>
+                <div className={className} {...fieldAttributes}>{this.getList(children)}</div>
                 <span
                     onClick={this.addListElement}
                     className={addButton.className}
@@ -144,7 +145,8 @@ ListField.propTypes = {
     }),
     onChange: PropTypes.func.isRequired,
     name: PropTypes.string,
-    value: PropTypes.any
+    value: PropTypes.any,
+    fieldAttributes: PropTypes.shape({})
 };
 
 export default FieldConnect(ListField);
diff --git a/src/components/NumberField.jsx b/src/components/NumberField.jsx
@@ -12,7 +12,8 @@ export const NumberField = ({
     value,
     label,
     placeholder,
-    errorStyles = {}
+    errorStyles = {},
+    fieldAttributes = {}
 }) => (
     <div className={wrapperClassName}>
         {label && <label>{label}</label>}
@@ -23,6 +24,7 @@ export const NumberField = ({
             value={value}
             placeholder={placeholder}
             className={className}
+            {...fieldAttributes}
         />
         {error && <ErrorField errors={errors} {...errorStyles} />}
     </div>
@@ -44,7 +46,8 @@ NumberField.propTypes = {
     errorStyles: PropTypes.shape({
         className: PropTypes.string,
         itemClassName: PropTypes.string
-    })
+    }),
+    fieldAttributes: PropTypes.shape({})
 };
 
 export default FieldConnect(NumberField);
diff --git a/src/components/ObjectField.jsx b/src/components/ObjectField.jsx
@@ -60,9 +60,9 @@ export class ObjectField extends React.Component {
     }
 
     render() {
-        const { children, wrapperClassName } = this.props;
+        const { children, wrapperClassName, fieldAttributes } = this.props;
         return (
-            <div className={wrapperClassName}>
+            <div className={wrapperClassName} {...fieldAttributes}>
                 {children}
             </div>
         );
@@ -86,7 +86,8 @@ ObjectField.propTypes = {
     name: PropTypes.string,
     onChange: PropTypes.func.isRequired,
     children: PropTypes.node,
-    wrapperClassName: PropTypes.string
+    wrapperClassName: PropTypes.string,
+    fieldAttributes: PropTypes.shape({})
 };
 
 export default FieldConnect(ObjectField);
diff --git a/src/components/SelectField.jsx b/src/components/SelectField.jsx
@@ -13,7 +13,8 @@ export const SelectField = ({
     value,
     label,
     placeholder,
-    errorStyles = {}
+    errorStyles = {},
+    fieldAttributes = {}
 }) => (
     <div className={wrapperClassName}>
         {label && <label>{label}</label>}
@@ -23,6 +24,7 @@ export const SelectField = ({
             value={value}
             placeholder={placeholder}
             className={className}
+            {...fieldAttributes}
         >
             {options.map(option => (
                 <option
@@ -61,7 +63,8 @@ SelectField.propTypes = {
     errorStyles: PropTypes.shape({
         className: PropTypes.string,
         itemClassName: PropTypes.string
-    })
+    }),
+    fieldAttributes: PropTypes.shape({})
 };
 
 export default FieldConnect(SelectField);
diff --git a/src/components/SubmitField.jsx b/src/components/SubmitField.jsx
@@ -5,12 +5,14 @@ export const SubmitField = ({
     wrapperClassName,
     className,
     submit,
-    value
+    value,
+    fieldAttributes = {}
 }) => (
     <div className={wrapperClassName}>
         <button
             onClick={submit}
             className={className}
+            {...fieldAttributes}
         >
             {value}
         </button>
@@ -21,7 +23,8 @@ SubmitField.propTypes = {
     wrapperClassName: PropTypes.string,
     className: PropTypes.string,
     submit: PropTypes.func.isRequired,
-    value: PropTypes.string
+    value: PropTypes.string,
+    fieldAttributes: PropTypes.shape({})
 };
 
 export default FieldConnect(SubmitField);
diff --git a/src/components/TextField.jsx b/src/components/TextField.jsx
@@ -13,7 +13,8 @@ export const TextField = ({
     value,
     label,
     placeholder,
-    errorStyles = {}
+    errorStyles = {},
+    fieldAttributes = {}
 }) => (
     <div className={wrapperClassName}>
         {label && <label>{label}</label>}
@@ -24,6 +25,7 @@ export const TextField = ({
             value={value}
             placeholder={placeholder}
             className={className}
+            {...fieldAttributes}
         />
         {error && <ErrorField errors={errors} {...errorStyles} />}
     </div>
@@ -46,7 +48,8 @@ TextField.propTypes = {
     errorStyles: PropTypes.shape({
         className: PropTypes.string,
         itemClassName: PropTypes.string
-    })
+    }),
+    fieldAttributes: PropTypes.shape({})
 };
 
 export default FieldConnect(TextField);