Fix for RN 0.26 + Adding higher order component to work w/ es6 classes

README.md

@@ -16,6 +16,49 @@ npm i --save react-native-progress-hud
 ```
 
 ## Usage
+
+### Stateless Components
+
+```jsx
+import ProgressHUD from 'react-native-progress-hud'
+
+const MyScreen = ({hudVisible, showProgressHUD, dismissProgressHUD} ) => (
+  <View>
+    <Button onPress={showProgressHUD}>Show</Button>
+    <Button onPress={dismissProgressHUD}>Dismiss</Button>
+    <ProgressHUD isVisible={hudVisible} isDismissble />
+  </View>
+)
+
+const MyScreenContainer = ProgressHUD.HOC(MyScreen)
+
+export default MyScreenContainer
+
+```
+
+### ES6 Classes w/ decorator
+
+```jsx
+import ProgressHUD from 'react-native-progress-hud'
+
+@ProgressHUD.HOC
+class MyScreen extends React.Component {
+  render() {
+    const {hudVisible, showProgressHUD, dismissProgressHUD} = this.props
+    return (
+      <View>
+        <Button onPress={showProgressHUD}>Show</Button>
+        <Button onPress={dismissProgressHUD}>Dismiss</Button>
+        <ProgressHUD isVisible={hudVisible} isDismissble />
+      </View>
+    )
+  }
+}
+```
+
+
+### React.createClass
+
 Using the HUD in your app will usually look like this:
 ```js
 var ProgressHUD = require('react-native-progress-hud');

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-progress-hud",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "A clean and lightweight progress HUD for your React Native app.",
   "main": "index.js",
   "scripts": {

src/__tests__/index-test.js

@@ -42,3 +42,34 @@ describe('Mixin', function() {
   });
 });
 
+describe('HOC', function() {
+  it('should expose a HOC', function() {
+    expect(ProgressHUD.HOC).toBeTruthy();
+  });
+
+  it('should expose a showProgressHUD method', function() {
+    class Component extends React.Component {
+      render() { 
+        const {hudVisible, showProgressHUD, dismissProgressHUD} = this.props
+        return <ProgressHUD isVisible={hudVisible} />; 
+      }
+    }
+    const WrappedComponent = ProgressHUD.HOC(Component)
+
+    const element = <WrappedComponent />
+    expect(TestUtils.isElement(element)).toBe(true)
+
+    var renderer = TestUtils.createRenderer();
+    renderer.render(element);
+    const result = renderer.getRenderOutput();
+
+    expect(result.props.showProgressHUD).toBeTruthy();
+    expect(result.props.dismissProgressHUD).toBeTruthy();
+    expect(result.props.hudVisible).toEqual(false);
+
+    result.props.showProgressHUD()
+    const result2 = renderer.getRenderOutput();
+    expect(result2.props.hudVisible).toEqual(true);
+  });
+
+});

src/index.js

@@ -1,14 +1,14 @@
 'use strict';
 
-var React = require('react-native');
+import React, { Component, } from 'react';
 var tweenState = require('react-tween-state');
 
-var {
+import {
   Image,
   StyleSheet,
   TouchableHighlight,
   View
-} = React;
+} from 'react-native';
 
 var styles = require('./styles');
 var images = require('./images');
@@ -18,45 +18,58 @@ var SPIN_DURATION = 1000;
 var ProgressHUDMixin = {
   getInitialState() {
     return {
-      is_hud_visible: false
+      is_hud_visible: false,
     };
   },
 
   showProgressHUD() {
     this.setState({
-      is_hud_visible: true
+      is_hud_visible: true,
     });
   },
 
   dismissProgressHUD() {
     this.setState({
-      is_hud_visible: false
+      is_hud_visible: false,
     });
   },
 
   childContextTypes: {
     showProgressHUD: React.PropTypes.func,
-    dismissProgressHUD: React.PropTypes.func
+    dismissProgressHUD: React.PropTypes.func,
   },
 
   getChildContext() {
     return {
       showProgressHUD: this.showProgressHUD,
-      dismissProgressHUD: this.dismissProgressHUD
+      dismissProgressHUD: this.dismissProgressHUD,
     };
   },
 };
 
+var ProgressHUDHOC = (Component) => React.createClass({
+  mixins: [ProgressHUD.Mixin],
+  render() {
+    return (
+      <Component {...this.props}
+        hudVisible={this.state.is_hud_visible}
+        showProgressHUD={this.showProgressHUD}
+        dismissProgressHUD={this.dismissProgressHUD} />
+    );
+  },
+});
+
 var ProgressHUD = React.createClass({
   mixins: [tweenState.Mixin],
 
   contextTypes: {
-    showProgressHUD: React.PropTypes.func.isRequired,
-    dismissProgressHUD: React.PropTypes.func
+    showProgressHUD: React.PropTypes.func,
+    dismissProgressHUD: React.PropTypes.func,
   },
 
   statics: {
-    Mixin: ProgressHUDMixin
+    Mixin: ProgressHUDMixin,
+    HOC: ProgressHUDHOC,
   },
 
   propTypes: {
@@ -98,12 +111,12 @@ var ProgressHUD = React.createClass({
     this.tweenState('rotate_deg', {
       easing: tweenState.easingTypes.linear,
       duration: SPIN_DURATION,
-      endValue: this.state.rotate_deg === 0 ? 360 : this.state.rotate_deg + 360
+      endValue: this.state.rotate_deg === 0 ? 360 : this.state.rotate_deg + 360,
     });
   },
 
   _clickHandler() {
-    if (this.props.isDismissible) {
+    if (this.props.isDismissible && this.context.dismissProgressHUD) {
       this.context.dismissProgressHUD();
     }
   },
@@ -124,27 +137,27 @@ var ProgressHUD = React.createClass({
       <TouchableHighlight
         key="ProgressHUD"
         style={[styles.overlay, {
-          backgroundColor: this.props.overlayColor
+          backgroundColor: this.props.overlayColor,
         }]}
         onPress={this._clickHandler}
         underlayColor={this.props.overlayColor}
         activeOpacity={1}
       >
         <View
           style={[styles.container, {
-            left: this.getTweeningValue('left')
+            left: this.getTweeningValue('left'),
           }]}
         >
           <Image
             style={[styles.spinner, {
               backgroundColor: this.props.color,
               transform: [
-                {rotate: deg}
-              ]
+                { rotate: deg },
+            ],
             }]}
             source={{
               uri: 'data:image/png;base64,' + images['1x'],
-              isStatic: true
+              isStatic: true,
             }}
           >
             <View style={styles.inner_spinner}>
@@ -154,7 +167,7 @@ var ProgressHUD = React.createClass({
       </TouchableHighlight>
       /*jshint ignore:end */
     );
-  }
+  },
 });
 
 

src/styles.js

@@ -1,8 +1,7 @@
 'use strict';
 
-var React = require('react-native');
 
-var { StyleSheet } = React;
+import { StyleSheet } from 'react-native';
 
 var styles = StyleSheet.create({
   overlay: {