Added progress bar, progress modal and bubble loader

mobile/src/ui/BoundPhotoPanel.js

@@ -29,6 +29,7 @@ export class BoundPhotoPanel extends Component {
   static propTypes = {
     onUploadStarted: PropTypes.func,
     onUploadEnded: PropTypes.func,
+    onUploadProgress: PropTypes.func,
   }
 
   constructor(props) {
@@ -63,7 +64,7 @@ export class BoundPhotoPanel extends Component {
             onUploadStarted()
           }
           api
-            .upload(response.data)
+            .upload(response.data, this.props.onUploadProgress)
             .then((uploadData) => {
               if (onUploadEnded) {
                 onUploadEnded(true, uploadData)

mobile/src/ui/BubbleLoader.js

@@ -0,0 +1,77 @@
+import React from "react"
+import { View, Animated, Easing } from "react-native"
+import PropTypes from "prop-types"
+
+export class BubbleLoader extends React.Component {
+  static propTypes = {
+    size: PropTypes.number,
+  }
+
+  static defaultProps = {
+    size: 50,
+  }
+
+  constructor(props) {
+    super(props)
+    this.animatedScales = [0, 1, 2].map((i) => new Animated.Value(1.0))
+
+    Animated.loop(
+      Animated.parallel(
+        this.animatedScales.map((value, i) =>
+          Animated.sequence([
+            Animated.timing(value, {
+              toValue: 0.2,
+              duration: 800,
+              delay: 200 * i,
+              easing: Easing.out(Easing.sin),
+              useNativeDriver: true,
+            }),
+            Animated.timing(value, {
+              toValue: 1.0,
+              duration: 800,
+              easing: Easing.out(Easing.sin),
+              useNativeDriver: true,
+            }),
+            Animated.delay(200 * (2 - i)),
+          ])
+        )
+      )
+    ).start()
+  }
+
+  render() {
+    const { size } = this.props
+    const spacing = size / 5
+
+    return (
+      <View
+        style={{
+          flexDirection: "row",
+          justifyContent: "space-between",
+          height: size,
+          width: size * 3 + spacing * 2,
+        }}>
+        {[0, 1, 2].map((i) => (
+          <Animated.View
+            key={i}
+            style={{
+              width: size,
+              height: size,
+              backgroundColor: "#dddddd",
+              borderWidth: 0,
+              borderRadius: size / 2,
+              transform: [
+                {
+                  scaleX: this.animatedScales[i],
+                },
+                {
+                  scaleY: this.animatedScales[i],
+                },
+              ],
+            }}
+          />
+        ))}
+      </View>
+    )
+  }
+}

mobile/src/ui/ProgressBar.js

@@ -0,0 +1,86 @@
+import React from "react"
+import {
+  AppRegistry,
+  StyleSheet,
+  Text,
+  View,
+  Easing,
+  Animated,
+} from "react-native"
+import PropTypes from "prop-types"
+
+var style = StyleSheet.create({
+  container: {
+    width: "100%",
+    flexDirection: "row",
+    overflow: "hidden",
+    borderWidth: 2,
+    borderColor: "#555555",
+    borderRadius: 8,
+    marginBottom: 5,
+    backgroundColor: "#FFFFFF",
+  },
+  bar: {
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    alignItems: "center",
+    backgroundColor: "#3BB0FD",
+  },
+  value: {
+    position: "absolute",
+    right: 0,
+    paddingRight: 5,
+    backgroundColor: "#00000000",
+    color: "#FFFFFF",
+  },
+})
+
+export class ProgressBar extends React.Component {
+  static propInfo = {
+    height: PropTypes.number,
+    value: PropTypes.number,
+  }
+
+  static defaultProps = {
+    value: 0,
+  }
+
+  constructor(props) {
+    super(props)
+    this.state = {
+      animatedValue: new Animated.Value(props.value % 101),
+    }
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (this.props.value !== nextProps.value) {
+      Animated.timing(this.state.animatedValue, {
+        toValue: nextProps.value % 101,
+        easing: Easing.out(Easing.ease),
+        duration: 500,
+      }).start()
+    }
+  }
+
+  render() {
+    const { height } = this.props
+    const width = this.state.animatedValue.interpolate({
+      inputRange: [0, 100],
+      outputRange: ["0%", "100%"],
+    })
+
+    return (
+      <View style={[style.container, { height }]}>
+        <Animated.View
+          style={[
+            style.bar,
+            {
+              width,
+            },
+          ]}>
+          <Text style={style.value}>{this.props.value}%</Text>
+        </Animated.View>
+      </View>
+    )
+  }
+}

mobile/src/ui/index.js

@@ -1,6 +1,8 @@
 export { Icon } from "./Icon"
 export { Header } from "./Header"
 export { OptionStrip } from "./OptionStrip"
+export { BubbleLoader } from "./BubbleLoader"
+export { ProgressBar } from "./ProgressBar"
 export { BoundSwitch } from "./BoundSwitch"
 export { BoundInput } from "./BoundInput"
 export { FormStaticInput } from "./FormStaticInput"