Initial commit.

Author: oblador

.editorconfig

@@ -0,0 +1,13 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.flowconfig

@@ -0,0 +1,38 @@
+[ignore]
+.*/Example/*
+
+# We fork some components by platform.
+.*/*.web.js
+.*/*.android.js
+
+# Some modules have their own node_modules with overlap
+.*/node_modules/node-haste/.*
+
+# Ignore react-tools where there are overlaps, but don't ignore anything that
+# react-native relies on
+.*/node_modules/react-tools/src/vendor/core/ExecutionEnvironment.js
+.*/node_modules/react-tools/src/browser/eventPlugins/ResponderEventPlugin.js
+.*/node_modules/react-tools/src/browser/ui/React.js
+.*/node_modules/react-tools/src/core/ReactInstanceHandles.js
+.*/node_modules/react-tools/src/event/EventPropagators.js
+
+# Ignore commoner tests
+.*/node_modules/react-tools/node_modules/commoner/test/.*
+
+# See https://github.com/facebook/flow/issues/442
+.*/react-tools/node_modules/commoner/lib/reader.js
+
+# Ignore jest
+.*/react-native/node_modules/jest-cli/.*
+
+
+[include]
+
+[libs]
+node_modules/react-native/Libraries/react-native/react-native-interface.js
+
+[options]
+module.system=haste
+
+[version]
+0.11.0

.gitignore

@@ -0,0 +1,27 @@
+# Logs
+logs
+*.log
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directory
+# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
+node_modules

index.js

@@ -0,0 +1,131 @@
+/**
+ * @providesModule ImageProgress
+ */
+'use strict';
+
+var _ = require('lodash');
+var React = require('react-native');
+var {
+  Image,
+  View,
+  StyleSheet,
+} = React
+var flattenStyle = require('react-native/Libraries/StyleSheet/flattenStyle');
+
+var BAR_WIDTH = 150;
+var BAR_HEIGHT = 6;
+var MIN_PADDING = 10;
+
+var ImageProgress = React.createClass({
+  getInitialState: function() {
+    return {
+      loading: false,
+      error: false,
+      progress: 0,
+    };
+  },
+
+  setNativeProps: function(nativeProps) {
+    this._root.setNativeProps(nativeProps);
+  },
+
+  handleLayoutChange: function(event) {
+    this.setState({ layout: event.nativeEvent.layout });
+  },
+
+  handleLoadStart: function() {
+    this.setState({
+      error: false,
+      loading: true,
+      progress: 0,
+    });
+  },
+
+  handleLoadProgress: function(event) {
+    this.setState({
+      progress: event.nativeEvent.written / event.nativeEvent.total,
+    });
+  },
+
+  handleLoaded: function() {
+    this.setState({
+      loading: false,
+      progress: 1,
+    });
+  },
+
+  handleLoadAbort: function() {
+    this.setState({
+      loading: false,
+    });
+  },
+
+  handleLoadError: function() {
+    this.setState({
+      error: true,
+      loading: false,
+    });
+  },
+
+  render: function() {
+    var indicator = false;
+    var props = _.omit(this.props, 'onLoadStart', 'onLoadProgress', 'onLoaded', 'onLoadAbort', 'onLoadError', 'handleLayoutChange');
+
+    if(this.state.loading) {
+      props.style = flattenStyle([styles.container, props.style]);
+      switch(props.indicator) {
+        case 'circle': throw new Error('Not yet implemented'); break;
+
+        default: {
+          var barWidth = BAR_WIDTH;
+          if(this.state.layout) {
+            barWidth = Math.min(BAR_WIDTH, this.state.layout.width - MIN_PADDING * 2);
+          }
+
+          var barWidthStyle = { width: barWidth };
+          var barProgressStyle = { width: (barWidth - 2) * this.state.progress };
+
+          indicator = (
+            <View style={[styles.barContainer, barWidthStyle]}>
+              <View style={[styles.bar, barProgressStyle]}></View>
+            </View>)
+          break;
+        }
+      }
+    }
+    return (
+      <Image
+        {...props}
+        ref={component => this._root = component}
+        onLoadStart={this.handleLoadStart}
+        onLoadProgress={this.handleLoadProgress}
+        onLoaded={this.handleLoaded}
+        onLoadAbort={this.handleLoadAbort}
+        onLoadError={this.handleLoadError}
+        onLayout={this.handleLayoutChange}
+      >
+        {indicator}
+      </Image>
+    );
+  }
+});
+
+var styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  barContainer: {
+    height: BAR_HEIGHT,
+    borderRadius: BAR_HEIGHT/2,
+    backgroundColor: 'rgba(255, 255, 255, 0.5)',
+  },
+  bar: {
+    margin: 1,
+    backgroundColor: 'black',
+    borderRadius: BAR_HEIGHT/2 - 1,
+    height: BAR_HEIGHT - 2,
+  }
+});
+
+module.exports = ImageProgress;

package.json

@@ -0,0 +1,32 @@
+{
+  "name": "react-native-image-progress",
+  "version": "0.1.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "react-native",
+    "react-component",
+    "react-native-component",
+    "react",
+    "mobile",
+    "ios",
+    "ui",
+    "image",
+    "progress",
+    "bar",
+    "progressbar",
+    "loading",
+    "indicator"
+  ],
+  "author": "Joel Arvidsson",
+  "license": "MIT",
+  "peerDependencies": {
+    "react-native": "=> 0.8.0 || 0.8.0-rc"
+  },
+  "dependencies": {
+    "lodash": "^3.10.0"
+  }
+}