Update code for React v16 compatibility (#115)

FaridSafi · Nov 15, 2017 · a7c93e2 · a7c93e2
1 parent 220ffc0
commit a7c93e2
Show file tree

Hide file tree

Showing 25 changed files with 246 additions and 121 deletions.
diff --git a/GiftedForm.js b/GiftedForm.js
@@ -1,4 +1,6 @@
 import React from 'react';
+import PropTypes from 'prop-types';
+import createReactClass from 'create-react-class';
 
 const GiftedFormManager = require('./GiftedFormManager');
 
@@ -25,7 +27,7 @@ const LoadingWidget = require('./widgets/LoadingWidget');
 const HiddenWidget = require('./widgets/HiddenWidget');
 const ErrorsWidget = require('./widgets/ErrorsWidget');
 
-const GiftedForm = React.createClass({
+const GiftedForm = createReactClass({
   mixins: [ ContainerMixin ],
 
   statics: {
@@ -62,11 +64,11 @@ const GiftedForm = React.createClass({
   },
 
   propTypes: {
-    isModal: React.PropTypes.bool,
-    clearOnClose: React.PropTypes.bool,
-    validators: React.PropTypes.object,
-    defaults: React.PropTypes.object,
-    openModal: React.PropTypes.func,
+    isModal: PropTypes.bool,
+    clearOnClose: PropTypes.bool,
+    validators: PropTypes.object,
+    defaults: PropTypes.object,
+    openModal: PropTypes.func,
   },
 
   componentWillUnmount() {
@@ -96,7 +98,7 @@ const GiftedForm = React.createClass({
   },
 });
 
-var GiftedFormModal = React.createClass({
+var GiftedFormModal = createReactClass({
   mixins: [ ContainerMixin ],
 
   getDefaultProps() {
@@ -106,7 +108,7 @@ var GiftedFormModal = React.createClass({
   },
 
   propTypes: {
-    isModal: React.PropTypes.bool,
+    isModal: PropTypes.bool,
   },
 
   render() {

diff --git a/README.md b/README.md
@@ -13,7 +13,7 @@ Form component for React Native.
 ```js
 var { GiftedForm, GiftedFormManager } = require('react-native-gifted-form');
 
-var FormComponent = React.createClass({
+var FormComponent = createReactClass({
   render() {
     return (
       <GiftedForm

diff --git a/mixins/ContainerMixin.js b/mixins/ContainerMixin.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import {
   ScrollView,
   View,
@@ -11,10 +12,10 @@ var GiftedFormManager = require('../GiftedFormManager');
 module.exports = {
 
   propTypes: {
-    formName: React.PropTypes.string,
-    scrollOnTap: React.PropTypes.bool,
-    scrollEnabled: React.PropTypes.bool,
-    formStyles: React.PropTypes.object,
+    formName: PropTypes.string,
+    scrollOnTap: PropTypes.bool,
+    scrollEnabled: PropTypes.bool,
+    formStyles: PropTypes.object,
     // navigator: ,
   },
 

diff --git a/mixins/WidgetMixin.js b/mixins/WidgetMixin.js
@@ -1,7 +1,6 @@
-var React = require('react');
-var {
-  Image
-} = require('react-native')
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Image } from 'react-native';
 
 
 var GiftedFormManager = require('../GiftedFormManager');
@@ -15,20 +14,20 @@ module.exports = {
   },
 
   propTypes: {
-    name: React.PropTypes.string,
-    title: React.PropTypes.string,
-    formName: React.PropTypes.string,
+    name: PropTypes.string,
+    title: PropTypes.string,
+    formName: PropTypes.string,
     // image: ,
-    widgetStyles: React.PropTypes.object,
-    formStyles: React.PropTypes.object,
-    validationImage: React.PropTypes.bool,
-    openModal: React.PropTypes.func,
+    widgetStyles: PropTypes.object,
+    formStyles: PropTypes.object,
+    validationImage: PropTypes.bool,
+    openModal: PropTypes.func,
     // navigator: ,
-    onFocus: React.PropTypes.func,
-    onBlur: React.PropTypes.func,
-    validateOnEmpty: React.PropTypes.bool,
+    onFocus: PropTypes.func,
+    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: React.PropTypes.any,
+    value: PropTypes.any,
   },
 
   getDefaultProps() {

diff --git a/package.json b/package.json
@@ -25,12 +25,14 @@
   },
   "homepage": "https://github.com/FaridSafi/react-native-gifted-form#readme",
   "dependencies": {
-    "apsl-react-native-button": "~3.0.0",
-    "moment": "~2.18.1",
-    "react-native-button": "~1.8.2",
+    "apsl-react-native-button": "^3.1.0",
+    "create-react-class": "^15.6.2",
+    "moment": "^2.19.1",
+    "prop-types": "^15.6.0",
+    "react-native-button": "^2.1.0",
     "react-native-gifted-spinner": "~0.1.0",
-    "react-native-google-places-autocomplete": "~1.2.0",
+    "react-native-google-places-autocomplete": "^1.3.6",
     "react-timer-mixin": "~0.13.3",
-    "validator": "~7.1.0"
+    "validator": "^9.0.0"
   }
 }
diff --git a/widgets/DatePickerIOSWidget.js b/widgets/DatePickerIOSWidget.js
@@ -1,14 +1,15 @@
-var React = require('react');
-var {
+import React from 'react';
+import createReactClass from 'create-react-class';
+import {
   View,
   DatePickerIOS,
   PixelRatio
-} = require('react-native')
+} from 'react-native';
 
 var WidgetMixin = require('../mixins/WidgetMixin.js');
 
 
-module.exports = React.createClass({
+module.exports = createReactClass({
   mixins: [WidgetMixin],
 
   getDefaultProps() {

diff --git a/widgets/ErrorsWidget.js b/widgets/ErrorsWidget.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import createReactClass from 'create-react-class';
 import {
   View,
   Text,
@@ -7,7 +8,7 @@ import {
 
 const WidgetMixin = require('../mixins/WidgetMixin.js');
 
-module.exports = React.createClass({
+module.exports = createReactClass({
   mixins: [WidgetMixin],
 
   render() {

diff --git a/widgets/GooglePlacesWidget.js b/widgets/GooglePlacesWidget.js
@@ -1,11 +1,12 @@
-var React = require('react');
+import React from 'react';
+import createReactClass from 'create-react-class';
 
 var WidgetMixin = require('../mixins/WidgetMixin.js');
 
 var {GooglePlacesAutocomplete} = require('react-native-google-places-autocomplete');
 
 
-module.exports = React.createClass({
+module.exports = createReactClass({
   mixins: [WidgetMixin],
 
   getDefaultProps() {

diff --git a/widgets/GroupWidget.js b/widgets/GroupWidget.js
@@ -1,12 +1,13 @@
 import React from 'react';
+import createReactClass from 'create-react-class';
 import {
   View,
   Text
 } from 'react-native';
 
 var WidgetMixin = require('../mixins/WidgetMixin');
 
-module.exports = React.createClass({
+module.exports = createReactClass({
   mixins: [WidgetMixin],
 
   getDefaultProps() {

diff --git a/widgets/HiddenWidget.js b/widgets/HiddenWidget.js
@@ -1,12 +1,13 @@
-var React = require('react');
-var {
+import React from 'react';
+import createReactClass from 'create-react-class';
+import {
   View
-} = require('react-native')
+} from 'react-native';
 
 var WidgetMixin = require('../mixins/WidgetMixin.js');
 
 
-module.exports = React.createClass({
+module.exports = createReactClass({
   mixins: [WidgetMixin],
 
   componentDidMount() {

diff --git a/widgets/LoadingWidget.js b/widgets/LoadingWidget.js
@@ -1,16 +1,17 @@
-var React = require('react');
-var {
+import React from 'react';
+import createReactClass from 'create-react-class';
+import {
   View,
   Text,
   TouchableHighlight,
   Image,
   PixelRatio
-} = require('react-native')
+} from 'react-native';
 
 var WidgetMixin = require('../mixins/WidgetMixin.js');
 var GiftedSpinner = require('react-native-gifted-spinner');
 
-module.exports = React.createClass({
+module.exports = createReactClass({
   mixins: [WidgetMixin],
 
   getDefaultProps() {

diff --git a/widgets/ModalWidget.js b/widgets/ModalWidget.js
@@ -1,4 +1,6 @@
 import React from 'react';
+import createReactClass from 'create-react-class';
+import PropTypes from 'prop-types';
 import {
   View,
   Text,
@@ -16,7 +18,7 @@ var TimerMixin = require('react-timer-mixin');
 
 var moment = require('moment');
 
-module.exports = React.createClass({
+module.exports = createReactClass({
   mixins: [TimerMixin, WidgetMixin],
 
   getDefaultProps() {
@@ -31,12 +33,12 @@ module.exports = React.createClass({
   },
 
   propTypes: {
-    type: React.PropTypes.string,
-    scrollEnabled: React.PropTypes.bool,
-    disclosure: React.PropTypes.bool,
-    cancelable: React.PropTypes.bool,
-    displayValue: React.PropTypes.string,
-    onClose: React.PropTypes.func
+    type: PropTypes.string,
+    scrollEnabled: PropTypes.bool,
+    disclosure: PropTypes.bool,
+    cancelable: PropTypes.bool,
+    displayValue: PropTypes.string,
+    onClose: PropTypes.func
   },
 
   getInitialState() {

diff --git a/widgets/NoticeWidget.js b/widgets/NoticeWidget.js
@@ -1,14 +1,15 @@
-var React = require('react');
-var {
+import React from 'react';
+import createReactClass from 'create-react-class';
+import {
   View,
   Text
-} = require('react-native')
+} from 'react-native';
 
 var WidgetMixin = require('../mixins/WidgetMixin.js');
 
 
 
-module.exports = React.createClass({
+module.exports = createReactClass({
   mixins: [WidgetMixin],
 
   getDefaultProps() {

diff --git a/widgets/OptionWidget.js b/widgets/OptionWidget.js
@@ -1,17 +1,18 @@
-var React = require('react');
-var {
+import React from 'react';
+import createReactClass from 'create-react-class';
+import {
   View,
   Text,
   TouchableHighlight,
   Image,
   PixelRatio
-} = require('react-native')
+} from 'react-native';
 
 var WidgetMixin = require('../mixins/WidgetMixin.js');
 
 
 
-module.exports = React.createClass({
+module.exports = createReactClass({
   mixins: [WidgetMixin],
 
   getDefaultProps() {

diff --git a/widgets/RowValueWidget.js b/widgets/RowValueWidget.js
@@ -1,17 +1,18 @@
-var React = require('react');
-var {
+import React from 'react';
+import createReactClass from 'create-react-class';
+import {
   View,
   Text,
   TouchableHighlight,
   Image,
   PixelRatio
-} = require('react-native')
+} from 'react-native';
 
 var WidgetMixin = require('../mixins/WidgetMixin.js');
 var TimerMixin = require('react-timer-mixin');
 
 
-module.exports = React.createClass({
+module.exports = createReactClass({
   mixins: [TimerMixin, WidgetMixin],
 
   getDefaultProps() {

diff --git a/widgets/RowWidget.js b/widgets/RowWidget.js
@@ -1,17 +1,18 @@
-var React = require('react');
-var {
+import React from 'react';
+import createReactClass from 'create-react-class';
+import {
   View,
   Text,
   TouchableHighlight,
   Image,
   PixelRatio
-} = require('react-native')
+} from 'react-native';
 
 var WidgetMixin = require('../mixins/WidgetMixin.js');
 var TimerMixin = require('react-timer-mixin');
 
 
-module.exports = React.createClass({
+module.exports = createReactClass({
   mixins: [TimerMixin, WidgetMixin],
 
   getDefaultProps() {

diff --git a/widgets/SelectCountryWidget.js b/widgets/SelectCountryWidget.js
@@ -1,7 +1,8 @@
-var React = require('react');
-var {
+import React from 'react';
+import createReactClass from 'create-react-class';
+import {
   View, ListView, Text, TouchableHighlight, TextInput, Image, PixelRatio
-} = require('react-native')
+} from 'react-native';
 
 var WidgetMixin = require('../mixins/WidgetMixin.js');
 var OptionWidget = require('./OptionWidget.js');
@@ -260,7 +261,7 @@ var countries =
 ];
 
 
-module.exports = React.createClass({
+module.exports = createReactClass({
   mixins: [WidgetMixin],
 
   statics: {