AddSpinnerLoader extension

Author: bleonard

App/Components/SpinnerLoader.js

@@ -0,0 +1,96 @@
+import React from 'react';
+import {
+  StyleSheet,
+  PanResponder,
+  PixelRatio,
+  View,
+  PropTypes,
+} from 'react-native';
+
+import cssVar from '../Lib/cssVar';
+
+import ActivityIndicator from '../Platform/ActivityIndicator';
+
+const SpinnerLoader = React.createClass({
+  propTypes: {
+    spinning: React.PropTypes.bool,
+  },
+
+  getInitialState() {
+    return {
+      width: 0,
+      height: 0,
+    };
+  },
+
+  componentWillMount() {
+    this._panGesture = PanResponder.create({
+      onStartShouldSetPanResponder: (evt, gestureState) => { return false },
+      onStartShouldSetPanResponderCapture: (evt, gestureState) => { return false },
+      onMoveShouldSetPanResponder: (evt, gestureState) => { return false },
+      onMoveShouldSetPanResponderCapture: (evt, gestureState) => { return false },
+    });
+  },
+
+  overlayStyle() {
+    return {
+      top: 0,
+      left: 0,
+      height: this.state.height,
+      width: this.state.width,
+      backgroundColor: 'transparent',
+      alignItems: 'center',
+      justifyContent: 'center',
+      position: 'absolute',
+    };
+  },
+
+  onChildrenLayout(event) {
+    this.setState({
+      height: event.nativeEvent.layout.height,
+      width:  event.nativeEvent.layout.width,
+    });
+  },
+
+  renderSpinner() {
+    if (!this.props.spinning || this.state.height === 0) {
+      return null;
+    }
+
+    return (
+      <View style={this.overlayStyle()} {...this._panGesture.panHandlers}>
+        <View style={[styles.spinnerContainer, this.props.spinnerContainerStyles]}>
+          <ActivityIndicator style={styles.spinner} size="large" color={cssVar('blue50')} />
+        </View>
+      </View>
+    );
+  },
+
+  render() {
+    return (
+      <View style={{flex: 1}} onLayout={this.onChildrenLayout}>
+        {this.props.children}
+        {this.renderSpinner()}
+      </View>
+    );
+  },
+
+});
+
+var styles = StyleSheet.create({
+  spinnerContainer: {
+    width: 60,
+    height: 60,
+    backgroundColor: 'transparent',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 60 / PixelRatio.get(),
+    opacity: 0.70,
+  },
+  spinner: {
+    width: 32,
+    height: 32,
+  },
+});
+
+export default SpinnerLoader;

App/Extensions/AddSpinnerLoader.js

@@ -0,0 +1,44 @@
+import React from "react";
+
+import * as Extension from '../Extensions/Extension';
+
+import SpinnerLoader  from '../Components/SpinnerLoader';
+
+var AddSpinnerLoader = {
+  extensionName: 'AddSpinnerLoader',
+
+  optionalParams: {
+    spinnerContainerStyles: 'styles for the spinner loader',
+  },
+
+  exports: {
+    methods: ['start', 'stop']
+  },
+
+  getInitialState() {
+    return {
+      spinning: false,
+    }
+  },
+
+  start() {
+    this.setState({spinning: true})
+  },
+
+  stop() {
+    this.setState({spinning: false})
+  },
+
+  renderExtension() {
+    return (
+      <SpinnerLoader
+        spinning={this.state.spinning}
+        spinnerContainerStyles={this.params.spinnerContainerStyles}
+      >
+        {this.renderComponent()}
+      </SpinnerLoader>
+    )
+  }
+};
+
+export default Extension.create(AddSpinnerLoader);

App/Extensions/Extension.js

@@ -0,0 +1,91 @@
+import React from "react";
+import invariant from 'invariant';
+import _         from 'underscore';
+
+const create = ({extensionName, requiredParams = {}, exports = {}, optionalParams, ...BaseLib}) => {
+  invariant(
+    extensionName,
+    'extensionName required when defining an extension'
+  );
+
+  const Extension = (Component, params = {}) => {
+
+    const componentName = Component.displayName || Component.name;
+    const containerName = `${extensionName} (${componentName})`;
+
+    _.pairs(requiredParams).forEach(([key, text]) => {
+      invariant(
+        params[key],
+        `Extension params required ${containerName} ${key}: ${text}`
+      );
+    });
+
+    var ComponentContainer = React.createClass(Object.assign(params, {
+      mixins: [BaseLib],
+
+      displayName: containerName,
+
+      params: params,
+
+      getInitialState() {
+        return {};
+      },
+
+      originalComponent() {
+        if (!this.refs._ExtensionComponent) { return null; }
+
+        if (this.refs._ExtensionComponent.originalComponent) {
+          return this.refs._ExtensionComponent.originalComponent();
+        }
+        return this.refs._ExtensionComponent;
+      },
+
+      // Implement getExtensionProps if you want to add more behavior passed to the Component
+      // it will allow accessing in the Extended Component with this.props[ExtensionName]
+      getExtensionProps() {
+        return {
+          [extensionName]: Object.assign({variables: this.getExportedVariables()}, this.getExportedMethods())
+        }
+      },
+
+      getExportedVariables() {
+        var _variables = {};
+        (exports.variables || []).forEach((variableName) => _variables[variableName] = this.state[variableName]);
+
+        return _variables;
+      },
+
+      getExportedMethods() {
+        var _methods = {};
+        (exports.methods || []).forEach((methodName) => _methods[methodName] = this[methodName]);
+
+        return _methods;
+      },
+
+      renderComponent() {
+        return (
+          <Component
+            {...this.props}
+            {...this.getExtensionProps()}
+            ref="_ExtensionComponent"
+          />
+        );
+      },
+
+      render() {
+        if (this.renderExtension) {
+          return this.renderExtension();
+        }
+
+        return this.renderComponent();
+      },
+
+    }));
+
+    return ComponentContainer;
+  };
+
+  return Extension;
+};
+
+export {create};

App/Platform/ActivityIndicator.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import {
+  ActivityIndicatorIOS,
+} from 'react-native';
+
+const ActivityIndicator = ActivityIndicatorIOS;
+
+export default ActivityIndicator;

App/Screens/CreatePost.js

@@ -11,6 +11,8 @@ import AppActions  from '../Actions/AppActions';
 
 import KeyboardListener from '../Mixins/KeyboardListener';
 
+import AddSpinnerLoader from '../Extensions/AddSpinnerLoader';
+
 var CreatePost = React.createClass({
   mixins: [KeyboardListener],
 
@@ -21,7 +23,10 @@ var CreatePost = React.createClass({
   },
 
   onSubmitButton: function() {
+    this.props['AddSpinnerLoader'].start();
+
     PostActions.createPost(this.state.content, function(error) {
+      this.props['AddSpinnerLoader'].stop();
       if (error) {
         // TODO: better error handling
         alert(error.message);
@@ -76,4 +81,5 @@ var styles = StyleSheet.create({
   }
 });
 
+CreatePost = AddSpinnerLoader(CreatePost);
 export default CreatePost;