rn0.54+ - optionwidget properly centered

mixins/WidgetMixin.js

@@ -2,14 +2,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Image } from 'react-native';
 
-
 var GiftedFormManager = require('../GiftedFormManager');
 
 module.exports = {
-
   getInitialState() {
     return {
-      validationErrorMessage: null,
+      validationErrorMessage: null
     };
   },
 
@@ -27,7 +25,7 @@ module.exports = {
     onBlur: PropTypes.func,
     validateOnEmpty: PropTypes.bool,
     // If we want to store the state elsewhere (Redux store, for instance), we can use value and Form's onValueChange prop
-    value: PropTypes.any,
+    value: PropTypes.any
   },
 
   getDefaultProps() {
@@ -43,7 +41,7 @@ module.exports = {
       navigator: null,
       onFocus: () => {},
       onBlur: () => {},
-      validateOnEmpty: false,
+      validateOnEmpty: false
     };
   },
 
@@ -58,15 +56,18 @@ module.exports = {
     if (typeof formState !== 'undefined') {
       if (typeof formState.values[this.props.name] !== 'undefined') {
         this.setState({
-          value: formState.values[this.props.name],
+          value: formState.values[this.props.name]
         });
         this._validate(formState.values[this.props.name]);
       }
     }
   },
 
   componentWillReceiveProps(nextProps) {
-    if (typeof nextProps.value !== 'undefined' && nextProps.value !== this.props.value) {
+    if (
+      typeof nextProps.value !== 'undefined' &&
+      nextProps.value !== this.props.value
+    ) {
       this._onChange(nextProps.value);
     }
   },
@@ -92,7 +93,10 @@ module.exports = {
 
     for (let i = 0; i < styleNames.length; i++) {
       if (typeof this.props.formStyles[this.props.type] !== 'undefined') {
-        if (typeof this.props.formStyles[this.props.type][styleNames[i]] !== 'undefined') {
+        if (
+          typeof this.props.formStyles[this.props.type][styleNames[i]] !==
+          'undefined'
+        ) {
           styles.push(this.props.formStyles[this.props.type][styleNames[i]]);
         }
       }
@@ -108,7 +112,7 @@ module.exports = {
   },
 
   focus() {
-    this.refs.input && this.refs.input.focus()
+    this.refs.input && this.refs.input.focus();
   },
 
   _validate(value) {
@@ -117,10 +121,17 @@ module.exports = {
     }
 
     // @todo option for live validation ?
-    var validators = GiftedFormManager.getValidators(this.props.formName, this.props.name);
+    var validators = GiftedFormManager.getValidators(
+      this.props.formName,
+      this.props.name
+    );
     if (Array.isArray(validators.validate)) {
       if (validators.validate.length > 0) {
-        var validation = GiftedFormManager.validateAndParseOne(this.props.name, value, {validate: validators.validate, title: validators.title});
+        var validation = GiftedFormManager.validateAndParseOne(
+          this.props.name,
+          value,
+          { validate: validators.validate, title: validators.title }
+        );
         if (validation.isValid === false) {
           this.setState({
             validationErrorMessage: validation.message
@@ -158,7 +169,8 @@ module.exports = {
 
   // @todo options enable live checking
   _renderValidationError() {
-    let hasValue = typeof this.state.value !== 'undefined' && this.state.value !== '';
+    let hasValue =
+      typeof this.state.value !== 'undefined' && this.state.value !== '';
 
     if (this.props.validateOnEmpty) {
       hasValue = true;
@@ -168,7 +180,9 @@ module.exports = {
       return null;
     }
 
-    const hasValidationErrors = this.state.validationErrorMessage !== null && this.state.validationErrorMessage !== '';
+    const hasValidationErrors =
+      this.state.validationErrorMessage !== null &&
+      this.state.validationErrorMessage !== '';
 
     if (!hasValidationErrors) {
       return null;
@@ -187,9 +201,15 @@ module.exports = {
     var validators = null;
     if (this.props.displayValue) {
       // in case of modal widget
-      validators = GiftedFormManager.getValidators(this.props.formName, this.props.displayValue);
+      validators = GiftedFormManager.getValidators(
+        this.props.formName,
+        this.props.displayValue
+      );
     } else {
-      validators = GiftedFormManager.getValidators(this.props.formName, this.props.name);
+      validators = GiftedFormManager.getValidators(
+        this.props.formName,
+        this.props.name
+      );
     }
 
     let toValidate = false;
@@ -202,41 +222,50 @@ module.exports = {
     // @todo image delete_sign / checkmark should be editable via option
     // @todo options enable live validation
 
-    let hasValue = typeof this.state.value !== 'undefined' && this.state.value !== '';
+    let hasValue =
+      typeof this.state.value !== 'undefined' && this.state.value !== '';
 
     if (this.props.validateOnEmpty) {
       hasValue = true;
     }
 
     const hasValidationErrors = this.state.validationErrorMessage !== null;
     const hasImageProp = this.props.image !== null;
-    const isOptionWidget = this.props.type === 'OptionWidget'
+    const isOptionWidget = this.props.type === 'OptionWidget';
     const shouldShowValidationImage = this.props.validationImage === true;
 
-    if (hasValue && hasImageProp && !isOptionWidget && shouldShowValidationImage && toValidate) {
-      const imageSrc = hasValidationErrors ? require('../icons/delete_sign.png'):require('../icons/checkmark.png');
+    if (
+      hasValue &&
+      hasImageProp &&
+      !isOptionWidget &&
+      shouldShowValidationImage &&
+      toValidate
+    ) {
+      const imageSrc = hasValidationErrors
+        ? require('../icons/delete_sign.png')
+        : require('../icons/checkmark.png');
 
       return (
         <Image
           style={this.getStyle('rowImage')}
-          resizeMode={Image.resizeMode.contain}
+          resizeMode="contain"
           source={imageSrc}
         />
       );
     } else if (hasImageProp) {
       if (typeof this.props.image === 'object') {
-        return(this.props.image);
+        return this.props.image;
       }
 
       return (
         <Image
           style={this.getStyle('rowImage')}
-          resizeMode={Image.resizeMode.contain}
+          resizeMode="contain"
           source={this.props.image}
         />
       );
     }
 
     return null;
-  },
+  }
 };

package.json

@@ -1,14 +1,14 @@
 {
-  "name": "react-native-gifted-form",
-  "version": "0.1.1",
+  "name": "@ptrang/react-native-gifted-form",
+  "version": "0.1.7",
   "description": "Form component for React Native",
   "main": "GiftedForm.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/FaridSafi/react-native-gifted-form.git"
+    "url": "git+https://github.com/ptrang/react-native-gifted-form.git"
   },
   "keywords": [
     "form",
@@ -18,12 +18,12 @@
     "ios",
     "android"
   ],
-  "author": "Farid from Safi",
+  "author": "clone of farid",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/FaridSafi/react-native-gifted-form/issues"
+    "url": "https://github.com/ptrang/react-native-gifted-form/issues"
   },
-  "homepage": "https://github.com/FaridSafi/react-native-gifted-form#readme",
+  "homepage": "https://github.com/ptrang/react-native-gifted-form#readme",
   "dependencies": {
     "apsl-react-native-button": "^3.1.0",
     "create-react-class": "^15.6.2",
@@ -34,5 +34,8 @@
     "react-native-google-places-autocomplete": "^1.3.6",
     "react-timer-mixin": "~0.13.3",
     "validator": "^9.0.0"
+  },
+  "directories": {
+    "example": "example"
   }
 }

widgets/GooglePlacesWidget.js

@@ -3,29 +3,34 @@ import createReactClass from 'create-react-class';
 
 var WidgetMixin = require('../mixins/WidgetMixin.js');
 
-var {GooglePlacesAutocomplete} = require('react-native-google-places-autocomplete');
-
+var {
+  GooglePlacesAutocomplete
+} = require('react-native-google-places-autocomplete');
 
 module.exports = createReactClass({
   mixins: [WidgetMixin],
 
   getDefaultProps() {
     return {
-      type: 'GooglePlacesWidget',
+      type: 'GooglePlacesWidget'
     };
   },
 
   render() {
-    const everywhere = {description: 'Everywhere', geometry: { location: { lat: 0, lng: 0 } }};
-
+    const everywhere = {
+      description: 'Everywhere',
+      geometry: { location: { lat: 0, lng: 0 } }
+    };
 
     return (
       <GooglePlacesAutocomplete
-        placeholder='Type a city name'
+        ref="googlePlacesAutocomplete"
+        placeholder="Type a city name"
         minLength={2} // minimum length of text to search
         autoFocus={false}
         fetchDetails={true}
-        onPress={(data, details = {}) => { // details is provided when fetchDetails = true
+        onPress={(data, details = {}) => {
+          // details is provided when fetchDetails = true
           // console.log(details);
           this._onChange({
             name: details.formatted_address,
@@ -42,33 +47,33 @@ module.exports = createReactClass({
         query={this.props.query}
         styles={{
           description: {
-            fontWeight: 'bold',
+            fontWeight: 'bold'
           },
           predefinedPlacesDescription: {
-            color: '#1faadb',
-          },
+            color: '#1faadb'
+          }
         }}
-
         currentLocation={true} // Will add a 'Current location' button at the top of the predefined places list
         currentLocationLabel="Current location"
-        currentLocationAPI='GoogleReverseGeocoding' // Which API to use: GoogleReverseGeocoding or GooglePlacesSearch
-        GoogleReverseGeocodingQuery={{
-          // available options for GoogleReverseGeocoding API : https://developers.google.com/maps/documentation/geocoding/intro
-        }}
+        currentLocationAPI="GoogleReverseGeocoding" // Which API to use: GoogleReverseGeocoding or GooglePlacesSearch
+        GoogleReverseGeocodingQuery={
+          {
+            // available options for GoogleReverseGeocoding API : https://developers.google.com/maps/documentation/geocoding/intro
+          }
+        }
         GooglePlacesSearchQuery={{
           // available options for GooglePlacesSearch API : https://developers.google.com/places/web-service/search
           rankby: 'distance',
-          types: 'food',
+          types: 'food'
         }}
-
-
-        filterReverseGeocodingByTypes={['locality', 'administrative_area_level_3']} // filter the reverse geocoding results by types - ['locality', 'administrative_area_level_3'] if you want to display only cities
-
+        filterReverseGeocodingByTypes={[
+          'locality',
+          'administrative_area_level_3'
+        ]} // filter the reverse geocoding results by types - ['locality', 'administrative_area_level_3'] if you want to display only cities
         // predefinedPlaces={[everywhere]}
 
-
         {...this.props} // @todo test sans (need for 'name')
       />
     );
-  },
+  }
 });