From 189050076699dcf75dc67ee7b4318c3318670c8e Mon Sep 17 00:00:00 2001 From: Daniel Hanover Date: Wed, 4 Jul 2018 14:28:32 -0700 Subject: [PATCH 1/4] Fixed LineHeight to center labels vertically --- src/fields/CountDownField.ios.js | 2 +- src/fields/DatePickerField.android.js | 2 +- src/fields/DatePickerField.ios.js | 2 +- src/fields/InputField.ios.js | 4 ++-- src/fields/LinkField.android.js | 2 +- src/fields/LinkField.ios.js | 2 +- src/fields/PickerField.android.js | 2 +- src/fields/PickerField.ios.js | 2 +- src/fields/SwitchField.ios.js | 2 +- src/fields/TimePickerField.android.js | 2 +- src/fields/TimePickerField.ios.js | 2 +- src/lib/DatePickerComponent.android.js | 2 +- src/lib/DatePickerComponent.ios.js | 2 +- src/lib/PickerComponent.android.js | 2 +- src/lib/PickerComponent.ios.js | 2 +- src/lib/SwitchComponent.js | 2 +- src/lib/TimePickerComponent.android.js | 2 +- 17 files changed, 18 insertions(+), 18 deletions(-) diff --git a/src/fields/CountDownField.ios.js b/src/fields/CountDownField.ios.js index 7a1459f..2e4a83b 100644 --- a/src/fields/CountDownField.ios.js +++ b/src/fields/CountDownField.ios.js @@ -92,7 +92,7 @@ export class CountDownField extends React.Component{ paddingLeft: 10, paddingRight: 10, justifyContent: 'center', - lineHeight: 32 + lineHeight: 45 }, input:{ paddingLeft: 10, diff --git a/src/fields/DatePickerField.android.js b/src/fields/DatePickerField.android.js index d47ba69..1f19f45 100644 --- a/src/fields/DatePickerField.android.js +++ b/src/fields/DatePickerField.android.js @@ -90,7 +90,7 @@ export class DatePickerField extends React.Component{ paddingLeft: 10, paddingRight: 10, justifyContent: 'center', - lineHeight: 32 + lineHeight: 45 }, input:{ paddingLeft: 10, diff --git a/src/fields/DatePickerField.ios.js b/src/fields/DatePickerField.ios.js index 043e064..fae1101 100644 --- a/src/fields/DatePickerField.ios.js +++ b/src/fields/DatePickerField.ios.js @@ -88,7 +88,7 @@ export class DatePickerField extends React.Component{ paddingLeft: 10, paddingRight: 10, justifyContent: 'center', - lineHeight: 32 + lineHeight: 45 }, input:{ paddingLeft: 10, diff --git a/src/fields/InputField.ios.js b/src/fields/InputField.ios.js index f5d50a1..efc9cfe 100644 --- a/src/fields/InputField.ios.js +++ b/src/fields/InputField.ios.js @@ -65,7 +65,7 @@ let formStyles = StyleSheet.create({ textAlign: 'right' }, multiline:{ - lineHeight: 32, + lineHeight: 45, fontSize: 34/2, paddingBottom:10 }, @@ -98,7 +98,7 @@ let formStyles = StyleSheet.create({ paddingLeft: 10, paddingRight: 10, justifyContent: 'center', - lineHeight: 32, + lineHeight: 45, }, input:{ diff --git a/src/fields/LinkField.android.js b/src/fields/LinkField.android.js index 36acb52..0f4c861 100644 --- a/src/fields/LinkField.android.js +++ b/src/fields/LinkField.android.js @@ -38,6 +38,6 @@ let formStyles = StyleSheet.create({ paddingLeft: 10, paddingRight: 10, justifyContent: 'center', - lineHeight: 32 + lineHeight: 45 }, }); diff --git a/src/fields/LinkField.ios.js b/src/fields/LinkField.ios.js index 786801b..853f81a 100644 --- a/src/fields/LinkField.ios.js +++ b/src/fields/LinkField.ios.js @@ -39,7 +39,7 @@ let formStyles = StyleSheet.create({ paddingLeft: 10, paddingRight: 10, justifyContent: 'center', - lineHeight: 32, + lineHeight: 45, flex:2 }, }); diff --git a/src/fields/PickerField.android.js b/src/fields/PickerField.android.js index e192537..070747b 100644 --- a/src/fields/PickerField.android.js +++ b/src/fields/PickerField.android.js @@ -91,7 +91,7 @@ export class PickerField extends React.Component{ paddingLeft: 10, paddingRight: 10, justifyContent: 'center', - lineHeight: 32 + lineHeight: 45 }, input:{ paddingLeft: 10, diff --git a/src/fields/PickerField.ios.js b/src/fields/PickerField.ios.js index cfa1aec..7fa09df 100644 --- a/src/fields/PickerField.ios.js +++ b/src/fields/PickerField.ios.js @@ -89,7 +89,7 @@ export class PickerField extends React.Component{ paddingLeft: 10, paddingRight: 10, justifyContent: 'center', - lineHeight: 32 + lineHeight: 45 }, input:{ paddingLeft: 10, diff --git a/src/fields/SwitchField.ios.js b/src/fields/SwitchField.ios.js index ac72a76..124b660 100644 --- a/src/fields/SwitchField.ios.js +++ b/src/fields/SwitchField.ios.js @@ -55,7 +55,7 @@ export class SwitchField extends React.Component{ paddingLeft: 10, paddingRight: 10, justifyContent: 'center', - lineHeight: 32 + lineHeight: 45 }, }); diff --git a/src/fields/TimePickerField.android.js b/src/fields/TimePickerField.android.js index fe26bdc..79c2f7d 100644 --- a/src/fields/TimePickerField.android.js +++ b/src/fields/TimePickerField.android.js @@ -92,7 +92,7 @@ export class TimePickerField extends React.Component{ paddingLeft: 10, paddingRight: 10, justifyContent: 'center', - lineHeight: 32 + lineHeight: 45 }, input:{ paddingLeft: 10, diff --git a/src/fields/TimePickerField.ios.js b/src/fields/TimePickerField.ios.js index e26b5c4..252c4fc 100644 --- a/src/fields/TimePickerField.ios.js +++ b/src/fields/TimePickerField.ios.js @@ -92,7 +92,7 @@ export class TimePickerField extends React.Component{ paddingLeft: 10, paddingRight: 10, justifyContent: 'center', - lineHeight: 32 + lineHeight: 45 }, input:{ paddingLeft: 10, diff --git a/src/lib/DatePickerComponent.android.js b/src/lib/DatePickerComponent.android.js index 422bf80..f37234f 100644 --- a/src/lib/DatePickerComponent.android.js +++ b/src/lib/DatePickerComponent.android.js @@ -176,7 +176,7 @@ import {Field} from './Field'; paddingLeft: 10, paddingRight: 10, justifyContent: 'center', - lineHeight: 32 + lineHeight: 45 }, input:{ paddingLeft: 10, diff --git a/src/lib/DatePickerComponent.ios.js b/src/lib/DatePickerComponent.ios.js index 459c89d..b5cf592 100644 --- a/src/lib/DatePickerComponent.ios.js +++ b/src/lib/DatePickerComponent.ios.js @@ -204,7 +204,7 @@ let formStyles = StyleSheet.create({ paddingLeft: 10, paddingRight: 10, justifyContent: 'center', - lineHeight: 32 + lineHeight: 45 }, input:{ paddingLeft: 10, diff --git a/src/lib/PickerComponent.android.js b/src/lib/PickerComponent.android.js index e227ce7..62e91ac 100644 --- a/src/lib/PickerComponent.android.js +++ b/src/lib/PickerComponent.android.js @@ -151,7 +151,7 @@ var PickerItem = Picker.Item; paddingLeft: 10, paddingRight: 10, justifyContent: 'center', - lineHeight: 32 + lineHeight: 45 }, input:{ paddingLeft: 10, diff --git a/src/lib/PickerComponent.ios.js b/src/lib/PickerComponent.ios.js index fcbfd62..823e4e3 100644 --- a/src/lib/PickerComponent.ios.js +++ b/src/lib/PickerComponent.ios.js @@ -220,7 +220,7 @@ export class PickerComponent extends React.Component{ paddingLeft: 10, paddingRight: 10, justifyContent: 'center', - lineHeight: 32 + lineHeight: 45 }, input:{ paddingLeft: 10, diff --git a/src/lib/SwitchComponent.js b/src/lib/SwitchComponent.js index 80f978f..5f748a0 100644 --- a/src/lib/SwitchComponent.js +++ b/src/lib/SwitchComponent.js @@ -106,7 +106,7 @@ SwitchComponent.propTypes = { paddingLeft: 10, paddingRight: 10, justifyContent: 'center', - lineHeight: 32 + lineHeight: 45 }, input:{ paddingLeft: 10, diff --git a/src/lib/TimePickerComponent.android.js b/src/lib/TimePickerComponent.android.js index 36e7559..4198ae8 100644 --- a/src/lib/TimePickerComponent.android.js +++ b/src/lib/TimePickerComponent.android.js @@ -167,7 +167,7 @@ import {Field} from './Field'; paddingLeft: 10, paddingRight: 10, justifyContent: 'center', - lineHeight: 32 + lineHeight: 45 }, input:{ paddingLeft: 10, From d62b06f6a38f83e3a84178ccdd5a4095ebbf01df Mon Sep 17 00:00:00 2001 From: Daniel Hanover Date: Wed, 4 Jul 2018 19:24:41 -0700 Subject: [PATCH 2/4] Captured initial values in getData() and made picker showing props not state --- src/Form.js | 4 ++-- src/fields/InputField.ios.js | 7 +++---- src/lib/DatePickerComponent.android.js | 4 ++++ src/lib/DatePickerComponent.ios.js | 9 ++++++++- src/lib/Field.js | 9 +++++---- src/lib/InputComponent.js | 5 +++++ src/lib/LinkComponent.js | 4 ++++ src/lib/PickerComponent.android.js | 4 ++++ src/lib/PickerComponent.ios.js | 6 +++++- src/lib/SwitchComponent.js | 5 +++++ src/lib/TimePickerComponent.android.js | 4 ++++ 11 files changed, 49 insertions(+), 12 deletions(-) diff --git a/src/Form.js b/src/Form.js index 5ad0090..81d0b7f 100644 --- a/src/Form.js +++ b/src/Form.js @@ -49,8 +49,8 @@ export class Form extends React.Component{ key: child.ref || child.type+i, fieldRef : child.ref, ref: child.ref, - onFocus:this.handleFieldFocused.bind(this), - onChange:this.handleFieldChange.bind(this, child.ref) + onFocus: this.handleFieldFocused.bind(this), + onChange: this.handleFieldChange.bind(this, child.ref) } )); }, this); diff --git a/src/fields/InputField.ios.js b/src/fields/InputField.ios.js index efc9cfe..34f1c7a 100644 --- a/src/fields/InputField.ios.js +++ b/src/fields/InputField.ios.js @@ -32,9 +32,9 @@ export class InputField extends React.Component{ this.props.style ]} containerStyle={[formStyles.fieldContainer, - formStyles.horizontalContainer, - this.props.containerStyle, - ]} + formStyles.horizontalContainer, + this.props.containerStyle, + ]} /> ) } @@ -99,7 +99,6 @@ let formStyles = StyleSheet.create({ paddingRight: 10, justifyContent: 'center', lineHeight: 45, - }, input:{ paddingLeft: 10, diff --git a/src/lib/DatePickerComponent.android.js b/src/lib/DatePickerComponent.android.js index f37234f..79a99ec 100644 --- a/src/lib/DatePickerComponent.android.js +++ b/src/lib/DatePickerComponent.android.js @@ -10,6 +10,10 @@ import {Field} from './Field'; export class DatePickerComponent extends React.Component{ constructor(props){ super(props); + if (props.value) { + // Ensure initial value is retrieved in Form.getData() + if(this.props.onChange) this.props.onChange(props.value, this.valid); + } this.state = { date: props.date? new Date(props.date) :'', isPickerVisible: false diff --git a/src/lib/DatePickerComponent.ios.js b/src/lib/DatePickerComponent.ios.js index b5cf592..68f0724 100644 --- a/src/lib/DatePickerComponent.ios.js +++ b/src/lib/DatePickerComponent.ios.js @@ -10,6 +10,10 @@ import {Field} from './Field'; export class DatePickerComponent extends React.Component{ constructor(props){ super(props); + if (props.value) { + // Ensure initial value is retrieved in Form.getData() + if(this.props.onChange) this.props.onChange(props.value, this.valid); + } this.state = { date: props.date? new Date(props.date) : '', isPickerVisible: false @@ -41,6 +45,9 @@ export class DatePickerComponent extends React.Component{ // this.refs.picker.measure(this.getPickerLayout.bind(this)); + _isPickerVisible() { + return this.state.isPickerVisible + } _togglePicker(event){ this.setState({isPickerVisible:!this.state.isPickerVisible}); @@ -107,7 +114,7 @@ export class DatePickerComponent extends React.Component{ - {(this.state.isPickerVisible)? + {(this.props.showing)? pickerWrapper : null } diff --git a/src/lib/Field.js b/src/lib/Field.js index 3171fa8..94def20 100644 --- a/src/lib/Field.js +++ b/src/lib/Field.js @@ -3,7 +3,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import {HelpText} from './HelpText'; -let { View, StyleSheet, Text, TouchableHighlight} = require('react-native'); +let { View, StyleSheet, Text, TouchableHighlight, TouchableOpacity} = require('react-native'); export class Field extends React.Component{ render(){ @@ -14,14 +14,15 @@ export class Field extends React.Component{ : null); if(this.props.onPress){ - return + return {this.props.children} {fieldHelpText} - + } - return + return {this.props.children} {fieldHelpText} ; diff --git a/src/lib/InputComponent.js b/src/lib/InputComponent.js index 4f65d8f..d9bf6d0 100644 --- a/src/lib/InputComponent.js +++ b/src/lib/InputComponent.js @@ -17,6 +17,11 @@ export class InputComponent extends React.Component{ constructor(props){ super(props); + if (props.value) { + // Ensure initial value is retrieved in Form.getData() + if(this.props.onChange) this.props.onChange(props.value, this.valid); + } + this.triggerValidation = this.triggerValidation.bind(this); // this.validate = this.validate.bind(this) this.validate(props.value); diff --git a/src/lib/LinkComponent.js b/src/lib/LinkComponent.js index c2c0d23..931c21e 100644 --- a/src/lib/LinkComponent.js +++ b/src/lib/LinkComponent.js @@ -8,6 +8,10 @@ import {Field} from './Field'; export class LinkComponent extends React.Component{ constructor(props){ super(props); + if (props.value) { + // Ensure initial value is retrieved in Form.getData() + if(this.props.onChange) this.props.onChange(props.value, this.valid); + } this.state = { } } diff --git a/src/lib/PickerComponent.android.js b/src/lib/PickerComponent.android.js index 62e91ac..1d1a5ad 100644 --- a/src/lib/PickerComponent.android.js +++ b/src/lib/PickerComponent.android.js @@ -10,6 +10,10 @@ var PickerItem = Picker.Item; export class PickerComponent extends React.Component{ constructor(props){ super(props); + if (props.value) { + // Ensure initial value is retrieved in Form.getData() + if(this.props.onChange) this.props.onChange(props.value, this.valid); + } this.state = { value: props.value || props.label, } diff --git a/src/lib/PickerComponent.ios.js b/src/lib/PickerComponent.ios.js index 823e4e3..2eb4af0 100644 --- a/src/lib/PickerComponent.ios.js +++ b/src/lib/PickerComponent.ios.js @@ -11,6 +11,10 @@ var PickerItem = Picker.Item; export class PickerComponent extends React.Component{ constructor(props){ super(props); + if (props.value) { + // Ensure initial value is retrieved in Form.getData() + if(this.props.onChange) this.props.onChange(props.value, this.valid); + } this.state = { value: props.value, isPickerVisible: false @@ -144,7 +148,7 @@ export class PickerComponent extends React.Component{ - {(this.state.isPickerVisible)? + {(this.props.showing)? pickerWrapper : null } diff --git a/src/lib/SwitchComponent.js b/src/lib/SwitchComponent.js index 5f748a0..ac41780 100644 --- a/src/lib/SwitchComponent.js +++ b/src/lib/SwitchComponent.js @@ -8,6 +8,10 @@ import {Field} from './Field'; export class SwitchComponent extends React.Component{ constructor(props){ super(props); + if (props.value) { + // Ensure initial value is retrieved in Form.getData() + if(this.props.onChange) this.props.onChange(props.value, this.valid); + } this.state = { value: props.value, } @@ -40,6 +44,7 @@ export class SwitchComponent extends React.Component{ {this.props.label} diff --git a/src/lib/TimePickerComponent.android.js b/src/lib/TimePickerComponent.android.js index 4198ae8..8821be4 100644 --- a/src/lib/TimePickerComponent.android.js +++ b/src/lib/TimePickerComponent.android.js @@ -10,6 +10,10 @@ import {Field} from './Field'; export class TimePickerComponent extends React.Component{ constructor(props){ super(props); + if (props.value) { + // Ensure initial value is retrieved in Form.getData() + if(this.props.onChange) this.props.onChange(props.value, this.valid); + } this.state = { date: props.date? new Date(props.date) :'', isPickerVisible: false From 62ab9d7599e89890f28972aaea5772c742453d62 Mon Sep 17 00:00:00 2001 From: Daniel Hanover Date: Thu, 5 Jul 2018 15:21:54 -0700 Subject: [PATCH 3/4] Version bump --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 3b39e71..4613e1d 100644 --- a/package.json +++ b/package.json @@ -70,5 +70,5 @@ "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, - "version": "0.9.10" + "version": "1.0.0" } From be3837fbc7fdd1be23e6e0708f471a0e651d18f3 Mon Sep 17 00:00:00 2001 From: Daniel Hanover Date: Thu, 5 Jul 2018 18:03:29 -0700 Subject: [PATCH 4/4] Fixed DatePicker initial value --- src/lib/DatePickerComponent.android.js | 4 ++-- src/lib/DatePickerComponent.ios.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/lib/DatePickerComponent.android.js b/src/lib/DatePickerComponent.android.js index 79a99ec..cc3d398 100644 --- a/src/lib/DatePickerComponent.android.js +++ b/src/lib/DatePickerComponent.android.js @@ -10,9 +10,9 @@ import {Field} from './Field'; export class DatePickerComponent extends React.Component{ constructor(props){ super(props); - if (props.value) { + if (props.date) { // Ensure initial value is retrieved in Form.getData() - if(this.props.onChange) this.props.onChange(props.value, this.valid); + if(this.props.onChange) this.props.onChange(props.date); } this.state = { date: props.date? new Date(props.date) :'', diff --git a/src/lib/DatePickerComponent.ios.js b/src/lib/DatePickerComponent.ios.js index 68f0724..059d3fd 100644 --- a/src/lib/DatePickerComponent.ios.js +++ b/src/lib/DatePickerComponent.ios.js @@ -10,9 +10,9 @@ import {Field} from './Field'; export class DatePickerComponent extends React.Component{ constructor(props){ super(props); - if (props.value) { + if (props.date) { // Ensure initial value is retrieved in Form.getData() - if(this.props.onChange) this.props.onChange(props.value, this.valid); + if(this.props.onChange) this.props.onChange(props.date); } this.state = { date: props.date? new Date(props.date) : '',