From a119faa115bf0b96cbbcd5f5cb91d01ec81ac7dc Mon Sep 17 00:00:00 2001 From: bietkul Date: Wed, 12 Jul 2017 23:55:12 +0530 Subject: [PATCH 01/33] Solved dependency issue --- package.json | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index e87fe1d..a0dbfd1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name":"react-native-form-builder", - "version":"1.0.5", + "version":"1.0.7", "description":"Generate Awesome Forms In an easy way", "main":"src/index.js", "scripts":{ @@ -43,5 +43,10 @@ "react":"15.4.2", "react-native":"0.41.1", "native-base":"^2.0.6" - } + }, + "peerDependencies": { + "react-native": ">=0.41.1", + "react": ">=15.4.2-alpha.3", + "native-base": "^2.0.6" + } } From 9dc803384e8b8330d9e8742313c37bbec93e92e9 Mon Sep 17 00:00:00 2001 From: bietkul Date: Fri, 22 Sep 2017 16:39:38 +0530 Subject: [PATCH 02/33] Added props support in custom components --- src/formBuilder/index.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/formBuilder/index.js b/src/formBuilder/index.js index 1c8987f..5d0bd95 100644 --- a/src/formBuilder/index.js +++ b/src/formBuilder/index.js @@ -216,12 +216,15 @@ export default class FormBuilder extends Component { updateValue: this.onValueChange, }; if (customComponents) { - const CustomComponent = customComponents[field.type]; - if (CustomComponent) { + const CustomComponentObj = customComponents[field.type]; + if (CustomComponentObj) { + const CustomComponent = CustomComponentObj.component; + const CustomComponentProps = CustomComponentObj.props; return ( { this[field.name] = c; }} {... commonProps} + {...CustomComponentProps} onSummitTextInput={this.onSummitTextInput} /> ); From 2b3d837ab5857063151a8b52294c7e6e8afd0ced Mon Sep 17 00:00:00 2001 From: bietkul Date: Fri, 22 Sep 2017 16:40:56 +0530 Subject: [PATCH 03/33] Added version 1.0.8 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index a0dbfd1..785f748 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name":"react-native-form-builder", - "version":"1.0.7", + "version":"1.0.8", "description":"Generate Awesome Forms In an easy way", "main":"src/index.js", "scripts":{ From ec30c080ddccfccf744056f7ca404e5133bf2830 Mon Sep 17 00:00:00 2001 From: Kuldeep Saxena Date: Fri, 22 Sep 2017 16:44:13 +0530 Subject: [PATCH 04/33] Update README.md --- README.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 4c29140..31db615 100644 --- a/README.md +++ b/README.md @@ -395,12 +395,13 @@ Build your custom type's components & handle them easily with the help of form b Use the `customComponents` prop of form builder. ### Prototype It's an object of key value pair where key will be the `type` of the component & value will be your custom Component.

-```customComponents = { type1: ComponentName1, type2: ComponentName2 .....}``` +```customComponents = { type1: {component: ComponentName1, props: Props }, type2: {component: ComponentName2} .....}``` ### How To Use - Define your custom `type` in field's object. - Form builder extends the props of your component by adding some extra props. -- In you component you can access these props to handle the state of the field. +- You can also pass some extra props in your custom components. +- In your component you can access these props to handle the state of the field. | Props | Type | Description | | :------------| :------| :-----| From 3d600698848aff57c7e10d30c3551bdbcd232898 Mon Sep 17 00:00:00 2001 From: bietkul Date: Fri, 22 Sep 2017 16:56:05 +0530 Subject: [PATCH 05/33] Minor Fixes --- package.json | 2 +- src/utils/methods.js | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index 785f748..ee37b79 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name":"react-native-form-builder", - "version":"1.0.8", + "version":"1.0.9", "description":"Generate Awesome Forms In an easy way", "main":"src/index.js", "scripts":{ diff --git a/src/utils/methods.js b/src/utils/methods.js index 1dd5ef4..11f35b0 100644 --- a/src/utils/methods.js +++ b/src/utils/methods.js @@ -16,16 +16,16 @@ export function autoValidate(field) { let errorMsg = ''; if (field.required) { switch (field.type) { - case 'text': case 'email': if (isEmpty(field.value)) { error = true; errorMsg = `${field.label} is required`; } else if (!isEmail(field.value)) { error = true; - errorMsg = 'Please Enter a valid Email'; + errorMsg = 'Please enter a valid email'; } break; + case 'text': case 'url': case 'password': if (isEmpty(field.value)) { @@ -39,7 +39,7 @@ export function autoValidate(field) { error = true; errorMsg = `${field.label} is required`; } else if (isNaN(field.value)) { - errorMsg = `${field.label} Should be a number`; + errorMsg = `${field.label} should be a number`; } } break; From b34b57b7394d3b13b407d00f3f397d82c9418691 Mon Sep 17 00:00:00 2001 From: bietkul Date: Fri, 22 Sep 2017 17:56:05 +0530 Subject: [PATCH 06/33] Added ScrollViewProps --- package.json | 2 +- src/formBuilder/index.js | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index ee37b79..7f55ecd 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name":"react-native-form-builder", - "version":"1.0.9", + "version":"1.0.10", "description":"Generate Awesome Forms In an easy way", "main":"src/index.js", "scripts":{ diff --git a/src/formBuilder/index.js b/src/formBuilder/index.js index 5d0bd95..5979595 100644 --- a/src/formBuilder/index.js +++ b/src/formBuilder/index.js @@ -15,6 +15,7 @@ export default class FormBuilder extends Component { static propTypes = { fields: React.PropTypes.array, theme: React.PropTypes.object, + scrollViewProps: React.PropTypes.object, customComponents: React.PropTypes.object, formData: React.PropTypes.object, autoValidation: React.PropTypes.bool, @@ -291,6 +292,7 @@ export default class FormBuilder extends Component { {this.generateFields() || } From b331042c4b10222cc3a190d2cf0d62e42b2c5160 Mon Sep 17 00:00:00 2001 From: Kuldeep Saxena Date: Fri, 22 Sep 2017 17:58:56 +0530 Subject: [PATCH 07/33] Update README.md --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 31db615..2cd25d8 100644 --- a/README.md +++ b/README.md @@ -133,6 +133,7 @@ AppRegistry.registerComponent('FormGenerator', () => FormGenerator); | customComponents | N/A | `object` | To define your custom type of components.| | formData | N/A | `object` | To prefill the form values.| | fields | `required` | `array` | Array of form fields. | +| scrollViewProps | N/A | `object` | Scrollview custom props. | ### Methods: Currently, these methods are available in FormBuilder, you can access them by using ref property. From 667d66393667449df77f710f366a4d54ff1295a8 Mon Sep 17 00:00:00 2001 From: bietkul Date: Mon, 25 Sep 2017 14:36:47 +0530 Subject: [PATCH 08/33] Added Custom Error Component --- src/fields/date/index.js | 9 ++++--- src/fields/picker/index.js | 8 +++--- src/fields/select/index.js | 6 ++++- src/fields/switch/index.js | 49 +++++++++++++++++++---------------- src/fields/textInput/index.js | 8 +++--- src/formBuilder/index.js | 19 +++++++++++--- src/theme.js | 1 + 7 files changed, 62 insertions(+), 38 deletions(-) diff --git a/src/fields/date/index.js b/src/fields/date/index.js index 777a1c5..5ea0307 100644 --- a/src/fields/date/index.js +++ b/src/fields/date/index.js @@ -13,6 +13,7 @@ export default class DatePickerField extends Component { updateValue: React.PropTypes.func, timeZoneOffsetInHours: React.PropTypes.number, theme: React.PropTypes.object, + ErrorComponent: React.PropTypes.func, } constructor(props) { super(props); @@ -69,7 +70,7 @@ export default class DatePickerField extends Component { } }; render() { - const { theme, attributes } = this.props; + const { theme, attributes, ErrorComponent } = this.props; const value = (attributes.value && new Date(attributes.value)) || null; const mode = attributes.mode || 'datetime'; return ( @@ -132,6 +133,7 @@ export default class DatePickerField extends Component { } + { this.panel = c; }} > @@ -196,11 +198,10 @@ export default class DatePickerField extends Component { } + - - } + } - ); } } diff --git a/src/fields/picker/index.js b/src/fields/picker/index.js index 6bba4bb..678effb 100644 --- a/src/fields/picker/index.js +++ b/src/fields/picker/index.js @@ -10,13 +10,14 @@ export default class PickerField extends Component { attributes: React.PropTypes.object, theme: React.PropTypes.object, updateValue: React.PropTypes.func, + ErrorComponent: React.PropTypes.func, } handleChange(value) { const attributes = this.props.attributes; this.props.updateValue(attributes.name, attributes.options[value]); } render() { - const { theme, attributes } = this.props; + const { theme, attributes, ErrorComponent } = this.props; const isValueValid = attributes.options.indexOf(attributes.value) > -1; const pickerValue = attributes.options.indexOf(attributes.value).toString(); if (Platform.OS !== 'ios') { @@ -42,12 +43,12 @@ export default class PickerField extends Component { >{ attributes.options.map((item, index) => ( - )) + )) } + - ); } return ( @@ -75,6 +76,7 @@ export default class PickerField extends Component { {isValueValid ? attributes.value : 'None'} + { this.panel = c; }} diff --git a/src/fields/select/index.js b/src/fields/select/index.js index ec3f85c..ea9fa86 100644 --- a/src/fields/select/index.js +++ b/src/fields/select/index.js @@ -23,6 +23,7 @@ export default class SelectField extends Component { attributes: React.PropTypes.object, updateValue: React.PropTypes.func, theme: React.PropTypes.object, + ErrorComponent: React.PropTypes.func, } constructor(props) { super(props); @@ -53,7 +54,7 @@ export default class SelectField extends Component { }, () => this.props.updateValue(this.props.attributes.name, newSelected)); } render() { - const { attributes } = this.props; + const { theme, attributes, ErrorComponent } = this.props; const selectedText = attributes.multiple ? attributes.value.length || 'None' : attributes.objectType ? @@ -73,6 +74,9 @@ export default class SelectField extends Component { + + + - {attributes.label} - this.handleChange(value)} - value={attributes.value} - /> + + + {attributes.label} + this.handleChange(value)} + value={attributes.value} + /> + + + + ); } diff --git a/src/fields/textInput/index.js b/src/fields/textInput/index.js index 0fb1aef..b6e64fa 100644 --- a/src/fields/textInput/index.js +++ b/src/fields/textInput/index.js @@ -9,12 +9,13 @@ export default class TextInputField extends Component { theme: React.PropTypes.object, updateValue: React.PropTypes.func, onSummitTextInput: React.PropTypes.func, + ErrorComponent: React.PropTypes.func, } handleChange(text) { this.props.updateValue(this.props.attributes.name, text); } render() { - const { theme, attributes } = this.props; + const { theme, attributes, ErrorComponent } = this.props; const inputProps = attributes.props; const keyboardType = getKeyboardType(attributes.type); return ( @@ -48,12 +49,9 @@ export default class TextInputField extends Component { : null} - - {attributes.errorMsg} - + - ); } } diff --git a/src/formBuilder/index.js b/src/formBuilder/index.js index 5979595..774dbf9 100644 --- a/src/formBuilder/index.js +++ b/src/formBuilder/index.js @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import { View, Keyboard } from 'react-native'; +import { View, Keyboard, Text } from 'react-native'; import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'; import TextInputField from '../fields/textInput'; import PickerField from '../fields/picker'; @@ -10,7 +10,18 @@ import FormField from '../fields/form'; import baseTheme from '../theme'; import { autoValidate, getInitState, getDefaultValue, getResetValue } from '../utils/methods'; - +const DefaultErrorComponent = (props) => { + const attributes = props.attributes; + const theme = props.theme; + if (attributes.error) { + return ( + + { attributes.errorMsg } + + ); + } + return null; +}; export default class FormBuilder extends Component { static propTypes = { fields: React.PropTypes.array, @@ -18,6 +29,7 @@ export default class FormBuilder extends Component { scrollViewProps: React.PropTypes.object, customComponents: React.PropTypes.object, formData: React.PropTypes.object, + errorComponent: React.PropTypes.func, autoValidation: React.PropTypes.bool, customValidation: React.PropTypes.func, onValueChange: React.PropTypes.func, @@ -206,7 +218,7 @@ export default class FormBuilder extends Component { } generateFields() { const theme = Object.assign(baseTheme, this.props.theme); - const { customComponents } = this.props; + const { customComponents, errorComponent } = this.props; const renderFields = Object.keys(this.state).map((fieldName, index) => { const field = this.state[fieldName]; if (!field.hidden) { @@ -215,6 +227,7 @@ export default class FormBuilder extends Component { theme, attributes: this.state[field.name], updateValue: this.onValueChange, + ErrorComponent: errorComponent || DefaultErrorComponent, }; if (customComponents) { const CustomComponentObj = customComponents[field.type]; diff --git a/src/theme.js b/src/theme.js index f241030..6523fdb 100644 --- a/src/theme.js +++ b/src/theme.js @@ -14,4 +14,5 @@ export default { inputColor: '#575757', inputFontSize: 15, labelActiveColor: '#575757', + errorMsgColor: '#ed2f2f', }; From 6c66781b1e1fc853681797da92d5124f9785391c Mon Sep 17 00:00:00 2001 From: bietkul Date: Mon, 25 Sep 2017 14:37:18 +0530 Subject: [PATCH 09/33] Vesrion Update --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 7f55ecd..65c3ca0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name":"react-native-form-builder", - "version":"1.0.10", + "version":"1.0.11", "description":"Generate Awesome Forms In an easy way", "main":"src/index.js", "scripts":{ From 65c8cd2fd5b36bfc970042c732795830145e52f0 Mon Sep 17 00:00:00 2001 From: bietkul Date: Mon, 25 Sep 2017 15:41:32 +0530 Subject: [PATCH 10/33] Added Customization For Error Icon --- src/fields/textInput/index.js | 6 +++--- src/theme.js | 2 ++ 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/fields/textInput/index.js b/src/fields/textInput/index.js index b6e64fa..530d6d4 100644 --- a/src/fields/textInput/index.js +++ b/src/fields/textInput/index.js @@ -22,7 +22,7 @@ export default class TextInputField extends Component { - + { attributes.icon && } @@ -45,8 +45,8 @@ export default class TextInputField extends Component { onChangeText={text => this.handleChange(text)} {...inputProps} /> - { attributes.error ? - : null} + { theme.textInputErrorIcon && attributes.error ? + : null} diff --git a/src/theme.js b/src/theme.js index 6523fdb..0c258c5 100644 --- a/src/theme.js +++ b/src/theme.js @@ -15,4 +15,6 @@ export default { inputFontSize: 15, labelActiveColor: '#575757', errorMsgColor: '#ed2f2f', + changeTextInputColorOnError: true, + textInputErrorIcon: 'close-circle', }; From 803d47e2501ee88812249776590727af22b3bdc8 Mon Sep 17 00:00:00 2001 From: Kuldeep Saxena Date: Mon, 25 Sep 2017 15:53:44 +0530 Subject: [PATCH 11/33] Update README.md --- README.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/README.md b/README.md index 2cd25d8..65eec03 100644 --- a/README.md +++ b/README.md @@ -30,6 +30,7 @@ + [Add Custom Validations](#add-custom-validations) + [Customize Your Form](#customize-your-form) + [Add custom components](#add-custom-components) + + [Add custome error component](#add-custom-error-component) - [Example](#example) ## Installation @@ -134,6 +135,7 @@ AppRegistry.registerComponent('FormGenerator', () => FormGenerator); | formData | N/A | `object` | To prefill the form values.| | fields | `required` | `array` | Array of form fields. | | scrollViewProps | N/A | `object` | Scrollview custom props. | +| errorComponent | N/A | `React Component` | Custom error display component. | ### Methods: Currently, these methods are available in FormBuilder, you can access them by using ref property. @@ -411,6 +413,10 @@ It's an object of key value pair where key will be the `type` of the component & | onSummitTextInput(fieldName) | `function`| If you're using TextInput then you can use this function to automatically manage the text input focus.For example you can define it in the `onSubmitEditing` prop of TextInput | theme | `object` | Use the theme variables to style your component +## Add Custom Error Component +- Now you can use your custom error component to display error messages. +- In your custom component you will receive two props `attributes` & `theme` variables. +- You can access the error & error message as a property of the attributes object. ## Example From 3056612bd66f632c51fd7b533cc336b4db0c13d2 Mon Sep 17 00:00:00 2001 From: Kuldeep Saxena Date: Wed, 27 Sep 2017 15:58:39 +0530 Subject: [PATCH 12/33] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 65eec03..982b42a 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,7 @@ - Automatically manages focus to next field on submit (TextInput) - Handle all keyboard related problems smartly - Supports custom validations & nested forms -- Uses Nativebase components +- Uses Nativebase components ## Getting Started From 4548964db11a6ddf049517a916b5f286652bdd1b Mon Sep 17 00:00:00 2001 From: tristan-secord Date: Wed, 11 Oct 2017 11:16:57 -0400 Subject: [PATCH 13/33] Allow grouping of custom components --- src/fields/form/index.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/fields/form/index.js b/src/fields/form/index.js index b920f63..21d0b97 100644 --- a/src/fields/form/index.js +++ b/src/fields/form/index.js @@ -9,6 +9,7 @@ export default class FormField extends Component { updateValue: React.PropTypes.func, autoValidation: React.PropTypes.bool, customValidation: React.PropTypes.func, + customComponents: React.PropTypes.object, } constructor(props) { super(props); @@ -31,6 +32,7 @@ export default class FormField extends Component { theme, autoValidation, customValidation, + customComponents, } = this.props; return ( @@ -43,6 +45,7 @@ export default class FormField extends Component { onValueChange={this.onValueChange} autoValidation={autoValidation} customValidation={customValidation} + customComponents={customComponents} showErrors fields={attributes.fields} theme={theme} From 9f771b0a0f66e19acbd69c8c61f6ed45a55916a5 Mon Sep 17 00:00:00 2001 From: bietkul Date: Thu, 12 Oct 2017 00:20:39 +0530 Subject: [PATCH 14/33] version update --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 65c3ca0..fd3e85d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name":"react-native-form-builder", - "version":"1.0.11", + "version":"1.0.12", "description":"Generate Awesome Forms In an easy way", "main":"src/index.js", "scripts":{ From 4cbb02040460c897ba4405590160a6104ce93c69 Mon Sep 17 00:00:00 2001 From: Carlos Vega Date: Wed, 31 Jan 2018 10:58:43 -0600 Subject: [PATCH 15/33] Applying codemod to remove React.PropTypes --- package-lock.json | 119 ++++++++++++++++++++++++++++++++++ package.json | 59 ++++++++--------- src/components/panel/index.js | 5 +- src/fields/date/index.js | 13 ++-- src/fields/form/index.js | 15 +++-- src/fields/picker/index.js | 11 ++-- src/fields/select/index.js | 11 ++-- src/fields/switch/index.js | 11 ++-- src/fields/textInput/index.js | 13 ++-- src/formBuilder/index.js | 21 +++--- 10 files changed, 203 insertions(+), 75 deletions(-) create mode 100644 package-lock.json diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..cea62bc --- /dev/null +++ b/package-lock.json @@ -0,0 +1,119 @@ +{ + "name": "react-native-form-builder", + "version": "1.0.12", + "lockfileVersion": 1, + "requires": true, + "dependencies": { + "asap": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz", + "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=" + }, + "core-js": { + "version": "1.2.7", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz", + "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=" + }, + "encoding": { + "version": "0.1.12", + "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz", + "integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=", + "requires": { + "iconv-lite": "0.4.19" + } + }, + "fbjs": { + "version": "0.8.16", + "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.16.tgz", + "integrity": "sha1-XmdDL1UNxBtXK/VYR7ispk5TN9s=", + "requires": { + "core-js": "1.2.7", + "isomorphic-fetch": "2.2.1", + "loose-envify": "1.3.1", + "object-assign": "4.1.1", + "promise": "7.3.1", + "setimmediate": "1.0.5", + "ua-parser-js": "0.7.17" + } + }, + "iconv-lite": { + "version": "0.4.19", + "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.19.tgz", + "integrity": "sha512-oTZqweIP51xaGPI4uPa56/Pri/480R+mo7SeU+YETByQNhDG55ycFyNLIgta9vXhILrxXDmF7ZGhqZIcuN0gJQ==" + }, + "is-stream": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz", + "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=" + }, + "isomorphic-fetch": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz", + "integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=", + "requires": { + "node-fetch": "1.7.3", + "whatwg-fetch": "2.0.3" + } + }, + "js-tokens": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz", + "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls=" + }, + "loose-envify": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.3.1.tgz", + "integrity": "sha1-0aitM/qc4OcT1l/dCsi3SNR4yEg=", + "requires": { + "js-tokens": "3.0.2" + } + }, + "node-fetch": { + "version": "1.7.3", + "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz", + "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==", + "requires": { + "encoding": "0.1.12", + "is-stream": "1.1.0" + } + }, + "object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=" + }, + "promise": { + "version": "7.3.1", + "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz", + "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==", + "requires": { + "asap": "2.0.6" + } + }, + "prop-types": { + "version": "15.6.0", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.0.tgz", + "integrity": "sha1-zq8IMCL8RrSjX2nhPvda7Q1jmFY=", + "requires": { + "fbjs": "0.8.16", + "loose-envify": "1.3.1", + "object-assign": "4.1.1" + } + }, + "setimmediate": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz", + "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=" + }, + "ua-parser-js": { + "version": "0.7.17", + "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.17.tgz", + "integrity": "sha512-uRdSdu1oA1rncCQL7sCj8vSyZkgtL7faaw9Tc9rZ3mGgraQ7+Pdx7w5mnOSF3gw9ZNG6oc+KXfkon3bKuROm0g==" + }, + "whatwg-fetch": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-2.0.3.tgz", + "integrity": "sha1-nITsLc9oGH/wC8ZOEnS0QhduHIQ=" + } + } +} diff --git a/package.json b/package.json index fd3e85d..092244b 100644 --- a/package.json +++ b/package.json @@ -1,26 +1,26 @@ { - "name":"react-native-form-builder", - "version":"1.0.12", - "description":"Generate Awesome Forms In an easy way", - "main":"src/index.js", - "scripts":{ - "test":"echo \"Error: no test specified\" && exit 1" + "name": "react-native-form-builder", + "version": "1.0.12", + "description": "Generate Awesome Forms In an easy way", + "main": "src/index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" }, - "repository":{ - "type":"git", - "url":"git+https://github.com/bietkul/react-native-form-builder.git" + "repository": { + "type": "git", + "url": "git+https://github.com/bietkul/react-native-form-builder.git" }, - "_npmUser":{ - "name":"anjuma", - "email":"kuldepsaxena@155@gmail.com" + "_npmUser": { + "name": "anjuma", + "email": "kuldepsaxena@155@gmail.com" }, - "author":"Kuldeep Saxena", - "license":"MIT", - "bugs":{ - "url":"https://github.com/bietkul/react-native-form-builder/issues" + "author": "Kuldeep Saxena", + "license": "MIT", + "bugs": { + "url": "https://github.com/bietkul/react-native-form-builder/issues" }, - "homepage":"https://github.com/bietkul/react-native-form-builder#readme", - "keywords":[ + "homepage": "https://github.com/bietkul/react-native-form-builder#readme", + "keywords": [ "android", "ios", "react", @@ -32,21 +32,22 @@ "generator", "builder" ], - "dependencies":{ - "fs-extra":"^3.0.1", - "print-message":"^2.1.0", - "lodash":"^4.17.4", - "react-native-keyboard-aware-scroll-view":"^0.2.7", - "react-native-i18n":"^1.0.0" + "dependencies": { + "fs-extra": "^3.0.1", + "lodash": "^4.17.4", + "print-message": "^2.1.0", + "prop-types": "^15.6.0", + "react-native-i18n": "^1.0.0", + "react-native-keyboard-aware-scroll-view": "^0.2.7" }, - "devDependencies":{ - "react":"15.4.2", - "react-native":"0.41.1", - "native-base":"^2.0.6" + "devDependencies": { + "react": "15.4.2", + "react-native": "0.41.1", + "native-base": "^2.0.6" }, "peerDependencies": { "react-native": ">=0.41.1", "react": ">=15.4.2-alpha.3", "native-base": "^2.0.6" - } + } } diff --git a/src/components/panel/index.js b/src/components/panel/index.js index 6cf7e8c..96938ea 100644 --- a/src/components/panel/index.js +++ b/src/components/panel/index.js @@ -1,3 +1,4 @@ +import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { Animated, Dimensions, View, Easing, Keyboard } from 'react-native'; import styles from './styles'; @@ -5,7 +6,7 @@ import styles from './styles'; class Panel extends Component { static propTypes = { - children: React.PropTypes.object, + children: PropTypes.object, } constructor(props) { @@ -55,4 +56,4 @@ class Panel extends Component { ); } } -export default Panel; +export default Panel; \ No newline at end of file diff --git a/src/fields/date/index.js b/src/fields/date/index.js index 5ea0307..b5d8e01 100644 --- a/src/fields/date/index.js +++ b/src/fields/date/index.js @@ -1,3 +1,4 @@ +import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { View, Text } from 'native-base'; import I18n from 'react-native-i18n'; @@ -9,11 +10,11 @@ export default class DatePickerField extends Component { timeZoneOffsetInHours: (-1) * ((new Date()).getTimezoneOffset() / 60), }; static propTypes = { - attributes: React.PropTypes.object, - updateValue: React.PropTypes.func, - timeZoneOffsetInHours: React.PropTypes.number, - theme: React.PropTypes.object, - ErrorComponent: React.PropTypes.func, + attributes: PropTypes.object, + updateValue: PropTypes.func, + timeZoneOffsetInHours: PropTypes.number, + theme: PropTypes.object, + ErrorComponent: PropTypes.func, } constructor(props) { super(props); @@ -204,4 +205,4 @@ export default class DatePickerField extends Component { ); } -} +} \ No newline at end of file diff --git a/src/fields/form/index.js b/src/fields/form/index.js index 21d0b97..7bc5532 100644 --- a/src/fields/form/index.js +++ b/src/fields/form/index.js @@ -1,15 +1,16 @@ +import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { View, Text } from 'native-base'; import GenerateForm from '../../formBuilder'; export default class FormField extends Component { static propTypes = { - attributes: React.PropTypes.object, - theme: React.PropTypes.object, - updateValue: React.PropTypes.func, - autoValidation: React.PropTypes.bool, - customValidation: React.PropTypes.func, - customComponents: React.PropTypes.object, + attributes: PropTypes.object, + theme: PropTypes.object, + updateValue: PropTypes.func, + autoValidation: PropTypes.bool, + customValidation: PropTypes.func, + customComponents: PropTypes.object, } constructor(props) { super(props); @@ -54,4 +55,4 @@ export default class FormField extends Component { ); } -} +} \ No newline at end of file diff --git a/src/fields/picker/index.js b/src/fields/picker/index.js index 678effb..ddcff7d 100644 --- a/src/fields/picker/index.js +++ b/src/fields/picker/index.js @@ -1,3 +1,4 @@ +import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { View, Text } from 'native-base'; import { Platform, Picker, TouchableOpacity } from 'react-native'; @@ -7,10 +8,10 @@ import styles from './../../styles'; const Item = Picker.Item; export default class PickerField extends Component { static propTypes = { - attributes: React.PropTypes.object, - theme: React.PropTypes.object, - updateValue: React.PropTypes.func, - ErrorComponent: React.PropTypes.func, + attributes: PropTypes.object, + theme: PropTypes.object, + updateValue: PropTypes.func, + ErrorComponent: PropTypes.func, } handleChange(value) { const attributes = this.props.attributes; @@ -99,4 +100,4 @@ export default class PickerField extends Component { ); } -} +} \ No newline at end of file diff --git a/src/fields/select/index.js b/src/fields/select/index.js index ea9fa86..bfa59cb 100644 --- a/src/fields/select/index.js +++ b/src/fields/select/index.js @@ -1,3 +1,4 @@ +import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { Modal, Dimensions } from 'react-native'; import { @@ -20,10 +21,10 @@ const deviceWidth = Dimensions.get('window').width; export default class SelectField extends Component { static propTypes = { - attributes: React.PropTypes.object, - updateValue: React.PropTypes.func, - theme: React.PropTypes.object, - ErrorComponent: React.PropTypes.func, + attributes: PropTypes.object, + updateValue: PropTypes.func, + theme: PropTypes.object, + ErrorComponent: PropTypes.func, } constructor(props) { super(props); @@ -132,4 +133,4 @@ export default class SelectField extends Component { ); } -} +} \ No newline at end of file diff --git a/src/fields/switch/index.js b/src/fields/switch/index.js index 55ad7bd..9a172b7 100644 --- a/src/fields/switch/index.js +++ b/src/fields/switch/index.js @@ -1,12 +1,13 @@ +import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { View, Text, Switch } from 'native-base'; export default class SwitchField extends Component { static propTypes = { - attributes: React.PropTypes.object, - theme: React.PropTypes.object, - updateValue: React.PropTypes.func, - ErrorComponent: React.PropTypes.func, + attributes: PropTypes.object, + theme: PropTypes.object, + updateValue: PropTypes.func, + ErrorComponent: PropTypes.func, } handleChange(value) { this.props.updateValue(this.props.attributes.name, value); @@ -42,4 +43,4 @@ export default class SwitchField extends Component { ); } -} +} \ No newline at end of file diff --git a/src/fields/textInput/index.js b/src/fields/textInput/index.js index 530d6d4..1b560ea 100644 --- a/src/fields/textInput/index.js +++ b/src/fields/textInput/index.js @@ -1,3 +1,4 @@ +import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { View, Item, Input, Icon, ListItem, Text } from 'native-base'; import { Platform } from 'react-native'; @@ -5,11 +6,11 @@ import { getKeyboardType } from '../../utils/methods'; export default class TextInputField extends Component { static propTypes = { - attributes: React.PropTypes.object, - theme: React.PropTypes.object, - updateValue: React.PropTypes.func, - onSummitTextInput: React.PropTypes.func, - ErrorComponent: React.PropTypes.func, + attributes: PropTypes.object, + theme: PropTypes.object, + updateValue: PropTypes.func, + onSummitTextInput: PropTypes.func, + ErrorComponent: PropTypes.func, } handleChange(text) { this.props.updateValue(this.props.attributes.name, text); @@ -54,4 +55,4 @@ export default class TextInputField extends Component { ); } -} +} \ No newline at end of file diff --git a/src/formBuilder/index.js b/src/formBuilder/index.js index 774dbf9..2a8ba80 100644 --- a/src/formBuilder/index.js +++ b/src/formBuilder/index.js @@ -1,3 +1,4 @@ +import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { View, Keyboard, Text } from 'react-native'; import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'; @@ -24,15 +25,15 @@ const DefaultErrorComponent = (props) => { }; export default class FormBuilder extends Component { static propTypes = { - fields: React.PropTypes.array, - theme: React.PropTypes.object, - scrollViewProps: React.PropTypes.object, - customComponents: React.PropTypes.object, - formData: React.PropTypes.object, - errorComponent: React.PropTypes.func, - autoValidation: React.PropTypes.bool, - customValidation: React.PropTypes.func, - onValueChange: React.PropTypes.func, + fields: PropTypes.array, + theme: PropTypes.object, + scrollViewProps: PropTypes.object, + customComponents: PropTypes.object, + formData: PropTypes.object, + errorComponent: PropTypes.func, + autoValidation: PropTypes.bool, + customValidation: PropTypes.func, + onValueChange: PropTypes.func, } constructor(props) { super(props); @@ -314,4 +315,4 @@ export default class FormBuilder extends Component { ); } -} +} \ No newline at end of file From e640692d7137bdbe3b473e6346fba7e7ab8a9c1f Mon Sep 17 00:00:00 2001 From: Carlos Vega Date: Wed, 31 Jan 2018 11:03:30 -0600 Subject: [PATCH 16/33] Updating react versions --- package-lock.json | 23 +++++++++++++++++++++++ package.json | 8 ++++---- 2 files changed, 27 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index cea62bc..1e05ef0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -100,6 +100,29 @@ "object-assign": "4.1.1" } }, + "react": { + "version": "15.5.0", + "resolved": "https://registry.npmjs.org/react/-/react-15.5.0.tgz", + "integrity": "sha1-H45LSS3Pv3dHnrT9/EjaQlAC5QU=", + "dev": true, + "requires": { + "fbjs": "0.8.16", + "loose-envify": "1.3.1", + "object-assign": "4.1.1", + "prop-types": "15.5.0-alpha.0" + }, + "dependencies": { + "prop-types": { + "version": "15.5.0-alpha.0", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.5.0-alpha.0.tgz", + "integrity": "sha1-o0IQhnglbbEl7uPRri+ImvNTG9c=", + "dev": true, + "requires": { + "fbjs": "0.8.16" + } + } + } + }, "setimmediate": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz", diff --git a/package.json b/package.json index 092244b..2dc4260 100644 --- a/package.json +++ b/package.json @@ -41,13 +41,13 @@ "react-native-keyboard-aware-scroll-view": "^0.2.7" }, "devDependencies": { - "react": "15.4.2", - "react-native": "0.41.1", - "native-base": "^2.0.6" + "native-base": "^2.0.6", + "react": "^15.5.0", + "react-native": "0.41.1" }, "peerDependencies": { "react-native": ">=0.41.1", - "react": ">=15.4.2-alpha.3", + "react": ">=15.5.0", "native-base": "^2.0.6" } } From 6cb54b22a881309c9e09b1c188d75e882fe40727 Mon Sep 17 00:00:00 2001 From: Kuldeep Saxena Date: Wed, 31 Jan 2018 22:52:34 +0530 Subject: [PATCH 17/33] Update package.json --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 2dc4260..cc2d8c3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-native-form-builder", - "version": "1.0.12", + "version": "1.0.13", "description": "Generate Awesome Forms In an easy way", "main": "src/index.js", "scripts": { From ed721612eccc25530deea9ff495a3dcf6ef4416c Mon Sep 17 00:00:00 2001 From: Kuldeep Saxena Date: Wed, 28 Mar 2018 13:04:01 +0530 Subject: [PATCH 18/33] Update README.md --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 982b42a..354fcec 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,8 @@ # react-native-form-builder ![alt text](http://g.recordit.co/7PqX8Ft7VO.gif) ![alt text](http://g.recordit.co/RWFvqi5tXG.gif) +# Note: +If you're looking for a better form management library with more advanced features, Please check out [React Reactive Form](https://github.com/bietkul/react-reactive-form). ## Features - Generate Form Fields UI - Manage, track state & values of fields From 4155d2ff32eda0a924a0e4e14afca08c888b913d Mon Sep 17 00:00:00 2001 From: Dmitry Kalinin Date: Mon, 23 Apr 2018 09:10:36 +0300 Subject: [PATCH 19/33] Improve react-native-keyboard-aware-scroll-view --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index cc2d8c3..07b684c 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,7 @@ "print-message": "^2.1.0", "prop-types": "^15.6.0", "react-native-i18n": "^1.0.0", - "react-native-keyboard-aware-scroll-view": "^0.2.7" + "react-native-keyboard-aware-scroll-view": "^0.5.0" }, "devDependencies": { "native-base": "^2.0.6", From 7ee827efdf338074004466aa9101c405c6117785 Mon Sep 17 00:00:00 2001 From: Kuldeep Saxena Date: Mon, 23 Apr 2018 12:48:54 +0530 Subject: [PATCH 20/33] Update package.json --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 07b684c..bef3f76 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-native-form-builder", - "version": "1.0.13", + "version": "1.0.14", "description": "Generate Awesome Forms In an easy way", "main": "src/index.js", "scripts": { From b25d7d6077a1e88b2bd0b4c2324351aea30668c5 Mon Sep 17 00:00:00 2001 From: Kuldeep Saxena Date: Mon, 23 Apr 2018 12:52:29 +0530 Subject: [PATCH 21/33] Update README.md --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 354fcec..6d39d17 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,4 @@ +[![NPM Version](https://img.shields.io/npm/v/react-native-form-builder.svg?style=flat)](https://www.npmjs.com/package/react-native-form-builder) # react-native-form-builder ![alt text](http://g.recordit.co/7PqX8Ft7VO.gif) ![alt text](http://g.recordit.co/RWFvqi5tXG.gif) From bfad42e3082216831009e35d905e8bea0ebbf104 Mon Sep 17 00:00:00 2001 From: Edward Akerboom Date: Thu, 10 May 2018 09:45:53 +0200 Subject: [PATCH 22/33] Remove missing 'color' module that made build fail This module is not installed, causing the build to fail. However, it is also not used in this file. Therefore it can safely be removed. --- src/theme.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/theme.js b/src/theme.js index 0c258c5..0e7ba01 100644 --- a/src/theme.js +++ b/src/theme.js @@ -1,5 +1,3 @@ -import Color from 'color'; - import { Platform } from 'react-native'; export default { From 888aa9fa039fb6d9307e359d364b9f73d1acf2e9 Mon Sep 17 00:00:00 2001 From: Mark Terence Tiglao Date: Tue, 22 May 2018 17:12:11 +0800 Subject: [PATCH 23/33] Combined `styles.pickerMainAndroid` and the inline stylesheet using spread operator. --- src/fields/picker/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/fields/picker/index.js b/src/fields/picker/index.js index ddcff7d..655d700 100644 --- a/src/fields/picker/index.js +++ b/src/fields/picker/index.js @@ -24,11 +24,11 @@ export default class PickerField extends Component { if (Platform.OS !== 'ios') { return ( {attributes.label} From 34ba4534a6ed6e5fa8ccbfb50af35d467c1aba4e Mon Sep 17 00:00:00 2001 From: bietkul Date: Wed, 6 Jun 2018 17:47:55 +0530 Subject: [PATCH 24/33] 1.0.15 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index bef3f76..3a0287e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-native-form-builder", - "version": "1.0.14", + "version": "1.0.15", "description": "Generate Awesome Forms In an easy way", "main": "src/index.js", "scripts": { From af82ed5fae8ae0f2f608dd762516f961b1527128 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lu=C3=ADs?= Date: Fri, 9 Nov 2018 12:13:37 +0000 Subject: [PATCH 25/33] Add possibility to update Form fields (hidden, options, ...) --- src/formBuilder/index.js | 127 +++++++++++++++++++++++++++++---------- 1 file changed, 96 insertions(+), 31 deletions(-) diff --git a/src/formBuilder/index.js b/src/formBuilder/index.js index 2a8ba80..913515a 100644 --- a/src/formBuilder/index.js +++ b/src/formBuilder/index.js @@ -2,6 +2,7 @@ import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { View, Keyboard, Text } from 'react-native'; import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'; +import _ from 'lodash'; import TextInputField from '../fields/textInput'; import PickerField from '../fields/picker'; import SwitchField from '../fields/switch'; @@ -39,7 +40,9 @@ export default class FormBuilder extends Component { super(props); const initialState = getInitState(props.fields); this.state = { - ...initialState, + fields: { + ...initialState, + }, errorStatus: false, }; // Supports Nested @@ -52,6 +55,8 @@ export default class FormBuilder extends Component { this.setValues = this.setValues.bind(this); // forcefully set default values for particular fields this.setToDefault = this.setToDefault.bind(this); + // update the form fields + this.updateState = this.updateState.bind(this); /* forcefully set errors for a particular field this.setErrors = this.setErrors.bind(this); @@ -70,17 +75,44 @@ export default class FormBuilder extends Component { const { formData } = this.props; this.setValues(formData); } + componentDidUpdate(prevProps) { + if (!_.isEqual(prevProps.fields, this.props.fields)) { + const { formData } = this.props; + const nextState = this.updateState(this.props.fields); + + let fields = Object.assign({}, this.state.fields, nextState.fields); + fields = _.omit(fields, nextState.hiddenFields); + + this.setState({ fields }, () => this.setValues(formData)); + } + } + updateState(fields) { + const newFields = {}; + const hiddenFields = []; + _.forEach(fields, (field) => { + const fieldObj = field; + if (!field.hidden && field.type) { + const stateField = this.state.fields[field.name]; + fieldObj.value = stateField && stateField.value ? stateField.value : getDefaultValue(field); + newFields[field.name] = fieldObj; + } else if (field.hidden) { + hiddenFields.push(field.name); + } + }); + return { fields: newFields, hiddenFields }; + } onSummitTextInput(name) { - const index = Object.keys(this.state).indexOf(name); - if (index !== -1 && this[Object.keys(this.state)[index + 1]] - && this[Object.keys(this.state)[index + 1]].textInput) { - this[Object.keys(this.state)[index + 1]].textInput._root.focus(); + const { fields } = this.state; + const index = Object.keys(fields).indexOf(name); + if (index !== -1 && this[Object.keys(fields)[index + 1]] + && this[Object.keys(fields)[index + 1]].textInput) { + this[Object.keys(fields)[index + 1]].textInput._root.focus(); } else { Keyboard.dismiss(); } } onValueChange(name, value) { - const valueObj = this.state[name]; + const valueObj = this.state.fields[name]; if (valueObj) { valueObj.value = value; // Not Validate fields only when autoValidation prop is false @@ -89,7 +121,7 @@ export default class FormBuilder extends Component { } // Validate through customValidation if it is present in props if (this.props.customValidation - && typeof this.props.customValidation === 'function') { + && typeof this.props.customValidation === 'function') { Object.assign(valueObj, this.props.customValidation(valueObj)); } const newField = {}; @@ -97,17 +129,27 @@ export default class FormBuilder extends Component { // this.props.customValidation(valueObj); if (this.props.onValueChange && typeof this.props.onValueChange === 'function') { - this.setState({ ...newField }, () => this.props.onValueChange()); + this.setState({ + fields: { + ...this.state.fields, + ...newField, + } + }, () => this.props.onValueChange()); } else { - this.setState({ ...newField }); + this.setState({ + fields: { + ...this.state.fields, + ...newField, + } + }); } } } // Returns the values of the fields getValues() { const values = {}; - Object.keys(this.state).forEach((fieldName) => { - const field = this.state[fieldName]; + Object.keys(this.state.fields).forEach((fieldName) => { + const field = this.state.fields[fieldName]; if (field) { values[field.name] = field.value; } @@ -119,7 +161,7 @@ export default class FormBuilder extends Component { const field = fieldObj; if (field.type === 'group') { const allFields = []; - this.state[field.name].fields.forEach((item) => { + this.state.fields[field.name].fields.forEach((item) => { allFields.push(item.name); }); this[field.name].group.setToDefault(allFields); @@ -141,19 +183,29 @@ export default class FormBuilder extends Component { if (typeof args[0] === 'object') { const newFields = {}; args[0].forEach((item) => { - const field = this.state[item]; + const field = this.state.fields[item]; if (field) { field.value = getDefaultValue(field); newFields[field.name] = this.getFieldDefaultValue(field); } }); - this.setState({ ...newFields }); + this.setState({ + fields: { + ...this.state.fields, + ...newFields, + } + }); } else { - const field = this.state[args[0]]; + const field = this.state.fields[args[0]]; if (field) { const newField = {}; newField[field.name] = this.getFieldDefaultValue(field); - this.setState({ ...newField }); + this.setState({ + fields: { + ...this.state.fields, + ...newFields, + } + }); } } } @@ -164,20 +216,22 @@ export default class FormBuilder extends Component { if (field.type === 'group') { const subFields = {}; Object.keys(value).forEach((fieldName) => { - subFields[fieldName] = value[fieldName]; + const stateField = this.state.fields[fieldName]; + subFields[fieldName] = stateField && stateField.value ? stateField.value : value[fieldName]; }); this[field.name].group.setValues(subFields); field.value = this[field.name].group.getValues(); // Remaing thing is error Handling Here } else { - field.value = value; - // also check for errors + const stateField = this.state.fields[field.name]; + subFields[fieldName] = stateField && stateField.value ? stateField.value : value; + // also check for errors if (this.props.autoValidation === undefined || this.props.autoValidation) { Object.assign(field, autoValidate(field)); } - // Validate through customValidation if it is present in props + // Validate through customValidation if it is present in props if (this.props.customValidation - && typeof this.props.customValidation === 'function') { + && typeof this.props.customValidation === 'function') { Object.assign(field, this.props.customValidation(field)); } } @@ -190,19 +244,24 @@ export default class FormBuilder extends Component { if (args && args.length && args[0]) { const newFields = {}; Object.keys(args[0]).forEach((fieldName) => { - const field = this.state[fieldName]; + const field = this.state.fields[fieldName]; if (field) { newFields[field.name] = this.getFieldValue(field, args[0][fieldName]); } }); - this.setState({ ...newFields }); + this.setState({ + fields: { + ...this.state.fields, + ...newFields, + } + }); } } // Reset Form values & errors NESTED SUPPORTED resetForm() { const newFields = {}; - Object.keys(this.state).forEach((fieldName) => { - const field = this.state[fieldName]; + Object.keys(this.state.fields).forEach((fieldName) => { + const field = this.state.fields[fieldName]; if (field) { field.value = (field.editable !== undefined && !field.editable) ? getDefaultValue(field) : @@ -215,18 +274,24 @@ export default class FormBuilder extends Component { newFields[field.name] = field; } }); - this.setState({ ...newFields }); + this.setState({ + fields: { + ...this.state.fields, + ...newFields, + } + }); } generateFields() { const theme = Object.assign(baseTheme, this.props.theme); - const { customComponents, errorComponent } = this.props; - const renderFields = Object.keys(this.state).map((fieldName, index) => { - const field = this.state[fieldName]; - if (!field.hidden) { + const { customComponents, errorComponent, fields } = this.props; + // Use fields from props to maintain the order of the props if the hidden prop is changed + const renderFields = fields.map(({ name: fieldName }, index) => { + const field = this.state.fields[fieldName]; + if (field && !field.hidden) { const commonProps = { key: index, theme, - attributes: this.state[field.name], + attributes: this.state.fields[field.name], updateValue: this.onValueChange, ErrorComponent: errorComponent || DefaultErrorComponent, }; From 51dd411c1913c8486de9c5f633bdd5d898f6687d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lu=C3=ADs?= Date: Fri, 9 Nov 2018 14:05:56 +0000 Subject: [PATCH 26/33] Fix wrong variable name in getFieldValue --- src/formBuilder/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/formBuilder/index.js b/src/formBuilder/index.js index 913515a..03cde79 100644 --- a/src/formBuilder/index.js +++ b/src/formBuilder/index.js @@ -224,7 +224,7 @@ export default class FormBuilder extends Component { // Remaing thing is error Handling Here } else { const stateField = this.state.fields[field.name]; - subFields[fieldName] = stateField && stateField.value ? stateField.value : value; + field.value = stateField && stateField.value ? stateField.value : value; // also check for errors if (this.props.autoValidation === undefined || this.props.autoValidation) { Object.assign(field, autoValidate(field)); From 0ff4cf2dc10251d74e0c97905bfdcda03c365452 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lu=C3=ADs?= Date: Mon, 12 Nov 2018 11:47:35 +0000 Subject: [PATCH 27/33] Fix setting values with setValues --- src/formBuilder/index.js | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/src/formBuilder/index.js b/src/formBuilder/index.js index 03cde79..30f41d9 100644 --- a/src/formBuilder/index.js +++ b/src/formBuilder/index.js @@ -77,13 +77,12 @@ export default class FormBuilder extends Component { } componentDidUpdate(prevProps) { if (!_.isEqual(prevProps.fields, this.props.fields)) { - const { formData } = this.props; const nextState = this.updateState(this.props.fields); let fields = Object.assign({}, this.state.fields, nextState.fields); fields = _.omit(fields, nextState.hiddenFields); - this.setState({ fields }, () => this.setValues(formData)); + this.setState({ fields }); } } updateState(fields) { @@ -216,15 +215,13 @@ export default class FormBuilder extends Component { if (field.type === 'group') { const subFields = {}; Object.keys(value).forEach((fieldName) => { - const stateField = this.state.fields[fieldName]; - subFields[fieldName] = stateField && stateField.value ? stateField.value : value[fieldName]; + subFields[fieldName] = value[fieldName]; }); this[field.name].group.setValues(subFields); field.value = this[field.name].group.getValues(); // Remaing thing is error Handling Here } else { - const stateField = this.state.fields[field.name]; - field.value = stateField && stateField.value ? stateField.value : value; + field.value = value; // also check for errors if (this.props.autoValidation === undefined || this.props.autoValidation) { Object.assign(field, autoValidate(field)); From 8439dd13e378d904e22d8683f59775099e43083c Mon Sep 17 00:00:00 2001 From: Kuldeep Saxena Date: Thu, 22 Nov 2018 04:46:02 +0530 Subject: [PATCH 28/33] release 1.0.16 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 3a0287e..86183cd 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-native-form-builder", - "version": "1.0.15", + "version": "1.0.16", "description": "Generate Awesome Forms In an easy way", "main": "src/index.js", "scripts": { From a1da51dae20beb219fa7e3d74c67d1f2b4a05fb7 Mon Sep 17 00:00:00 2001 From: Akshay Avinash Date: Mon, 18 Feb 2019 12:10:00 +0530 Subject: [PATCH 29/33] Added missing quote --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 6d39d17..d9f56b0 100644 --- a/README.md +++ b/README.md @@ -270,7 +270,7 @@ If you're using array of objects then please don't forget to define these proper ```jsx objectType: true, labelKey: 'name', // For Below example -primaryKey: 'id, // For Below example +primaryKey: 'id', // For Below example ``` For e.g. ``` From 5eb77f507bf375be36be4e358a40453141e84be5 Mon Sep 17 00:00:00 2001 From: Muhammad Umer Waheed Date: Fri, 15 Mar 2019 04:52:32 +0500 Subject: [PATCH 30/33] icon color change works with this text icon color theme was not working. it works when i do this. --- src/fields/textInput/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/fields/textInput/index.js b/src/fields/textInput/index.js index 1b560ea..9a2715a 100644 --- a/src/fields/textInput/index.js +++ b/src/fields/textInput/index.js @@ -25,7 +25,7 @@ export default class TextInputField extends Component { { attributes.icon && - + } ); } -} \ No newline at end of file +} From 1539d17943f955ac20372ea90dbd2694002f9403 Mon Sep 17 00:00:00 2001 From: Rohit Bhatia Date: Thu, 20 Jun 2019 16:36:39 +0530 Subject: [PATCH 31/33] Installation instruction updated --- README.md | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/README.md b/README.md index d9f56b0..a04f28f 100644 --- a/README.md +++ b/README.md @@ -38,6 +38,21 @@ If you're looking for a better form management library with more advanced featur ## Installation +`react-native-form-builder` requires a peer of [`native-base`](https://github.com/GeekyAnts/NativeBase) + + +To Install the peer dependecy +``` +$ npm i native-base --save + +``` +link the peer dependecy using + +``` +react-native link +``` +and then insteall `react-native-form-builder` + ```bash $ npm i react-native-form-builder --save ``` From e2a11f6400a9738e71aecff8ce149428754586e3 Mon Sep 17 00:00:00 2001 From: cludy-me <33969313+cludy-me@users.noreply.github.com> Date: Thu, 4 Jul 2019 17:24:07 +0300 Subject: [PATCH 32/33] Delete package-lock.json --- package-lock.json | 142 ---------------------------------------------- 1 file changed, 142 deletions(-) delete mode 100644 package-lock.json diff --git a/package-lock.json b/package-lock.json deleted file mode 100644 index 1e05ef0..0000000 --- a/package-lock.json +++ /dev/null @@ -1,142 +0,0 @@ -{ - "name": "react-native-form-builder", - "version": "1.0.12", - "lockfileVersion": 1, - "requires": true, - "dependencies": { - "asap": { - "version": "2.0.6", - "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz", - "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=" - }, - "core-js": { - "version": "1.2.7", - "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz", - "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=" - }, - "encoding": { - "version": "0.1.12", - "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz", - "integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=", - "requires": { - "iconv-lite": "0.4.19" - } - }, - "fbjs": { - "version": "0.8.16", - "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.16.tgz", - "integrity": "sha1-XmdDL1UNxBtXK/VYR7ispk5TN9s=", - "requires": { - "core-js": "1.2.7", - "isomorphic-fetch": "2.2.1", - "loose-envify": "1.3.1", - "object-assign": "4.1.1", - "promise": "7.3.1", - "setimmediate": "1.0.5", - "ua-parser-js": "0.7.17" - } - }, - "iconv-lite": { - "version": "0.4.19", - "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.19.tgz", - "integrity": "sha512-oTZqweIP51xaGPI4uPa56/Pri/480R+mo7SeU+YETByQNhDG55ycFyNLIgta9vXhILrxXDmF7ZGhqZIcuN0gJQ==" - }, - "is-stream": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz", - "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=" - }, - "isomorphic-fetch": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz", - "integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=", - "requires": { - "node-fetch": "1.7.3", - "whatwg-fetch": "2.0.3" - } - }, - "js-tokens": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz", - "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls=" - }, - "loose-envify": { - "version": "1.3.1", - "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.3.1.tgz", - "integrity": "sha1-0aitM/qc4OcT1l/dCsi3SNR4yEg=", - "requires": { - "js-tokens": "3.0.2" - } - }, - "node-fetch": { - "version": "1.7.3", - "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz", - "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==", - "requires": { - "encoding": "0.1.12", - "is-stream": "1.1.0" - } - }, - "object-assign": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", - "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=" - }, - "promise": { - "version": "7.3.1", - "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz", - "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==", - "requires": { - "asap": "2.0.6" - } - }, - "prop-types": { - "version": "15.6.0", - "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.0.tgz", - "integrity": "sha1-zq8IMCL8RrSjX2nhPvda7Q1jmFY=", - "requires": { - "fbjs": "0.8.16", - "loose-envify": "1.3.1", - "object-assign": "4.1.1" - } - }, - "react": { - "version": "15.5.0", - "resolved": "https://registry.npmjs.org/react/-/react-15.5.0.tgz", - "integrity": "sha1-H45LSS3Pv3dHnrT9/EjaQlAC5QU=", - "dev": true, - "requires": { - "fbjs": "0.8.16", - "loose-envify": "1.3.1", - "object-assign": "4.1.1", - "prop-types": "15.5.0-alpha.0" - }, - "dependencies": { - "prop-types": { - "version": "15.5.0-alpha.0", - "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.5.0-alpha.0.tgz", - "integrity": "sha1-o0IQhnglbbEl7uPRri+ImvNTG9c=", - "dev": true, - "requires": { - "fbjs": "0.8.16" - } - } - } - }, - "setimmediate": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz", - "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=" - }, - "ua-parser-js": { - "version": "0.7.17", - "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.17.tgz", - "integrity": "sha512-uRdSdu1oA1rncCQL7sCj8vSyZkgtL7faaw9Tc9rZ3mGgraQ7+Pdx7w5mnOSF3gw9ZNG6oc+KXfkon3bKuROm0g==" - }, - "whatwg-fetch": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-2.0.3.tgz", - "integrity": "sha1-nITsLc9oGH/wC8ZOEnS0QhduHIQ=" - } - } -} From 509fff739136e0bde20839749b3370c07cf9eb26 Mon Sep 17 00:00:00 2001 From: cludy-me <33969313+cludy-me@users.noreply.github.com> Date: Thu, 4 Jul 2019 17:26:37 +0300 Subject: [PATCH 33/33] Update package.json --- package.json | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/package.json b/package.json index 86183cd..edfced1 100644 --- a/package.json +++ b/package.json @@ -37,17 +37,17 @@ "lodash": "^4.17.4", "print-message": "^2.1.0", "prop-types": "^15.6.0", - "react-native-i18n": "^1.0.0", - "react-native-keyboard-aware-scroll-view": "^0.5.0" + "react-native-i18n": "^2.0.0", + "react-native-keyboard-aware-scroll-view": "^0.8.0" }, "devDependencies": { - "native-base": "^2.0.6", - "react": "^15.5.0", - "react-native": "0.41.1" + "native-base": "^2.12.0", + "react": "^16.8.0", + "react-native": "0.60.0" }, "peerDependencies": { - "react-native": ">=0.41.1", + "react-native": ">=0.60.0", "react": ">=15.5.0", - "native-base": "^2.0.6" + "native-base": "^2.12.0" } }