adding support for js API's

SpruceExample/App.js

@@ -5,9 +5,16 @@
  */
 
 import React, { Component } from 'react';
-import { Platform, StyleSheet, Text, View, findNodeHandle } from "react-native";
+import {
+  Platform,
+  StyleSheet,
+  Text,
+  View,
+  findNodeHandle,
+  FlatList
+} from "react-native";
 
-import RNSpruce from 'react-native-spruce'
+import { Spruce, DefaultSort } from "react-native-spruce";
 
 const instructions = Platform.select({
   ios: 'Press Cmd+R to reload,\n' +
@@ -16,22 +23,73 @@ const instructions = Platform.select({
     'Shake or press menu button for dev menu',
 });
 
+const items = [
+  {
+    topicCat: "Wise",
+    topicCatData: [
+      {
+        topicName: "Quotes",
+        topicDescription: "Some quotes to inspire you",
+        topicSummary: "Simple motivational quotes",
+        imageurl: "imageurl",
+        topicCategory: "Wise",
+        topicId: 0
+      }
+    ]
+  },
+  {
+    topicCat: "Wise 1"
+  },
+  {
+    topicCat: "Wise 2"
+  },
+  {
+    topicCat: "Wise 3"
+  },
+  {
+    topicCat: "Wise 4"
+  },
+  {
+    topicCat: "Wise 5"
+  },
+  {
+    topicCat: "Wise 6"
+  }
+];
+
 export default class App extends Component<{}> {
 
   componentDidMount () {
     setTimeout(() => {
-      let viewId = findNodeHandle(this.ref);
-      RNSpruce.StartAnimator(viewId);
-    }, 1000);
+      let spruceBuilder = new Spruce.SpruceBuilder(this.ref);
+
+      let defaultSort = new DefaultSort()
+
+      spruceBuilder.sortWith(defaultSort)
+      spruceBuilder.start()
+    }, 0);
+  }
+
+  renderFlatListItem(item) {
+      return (
+        <View key={"parentView"+item.topicCat} style={{ flex: 1}}>
+          <Text key={"topicCat"+item.topicCat} style={{ flex: 1}}>{item.topicCat}</Text>
+        </View>
+      )
   }
 
   render() {
-    return <View style={styles.container} ref={ref => {
+    // return <View style={styles.container} ref={ref => {
+    //       this.ref = ref;
+    //     }}>
+    //     <Text style={styles.welcome}>Welcome to React Native!</Text>
+    //     <Text style={styles.instructions}>To get started, edit App.js</Text>
+    //     <Text style={styles.instructions}>{instructions}</Text>
+    //   </View>;
+    return <View>
+        <FlatList key={"flatlistexample"} data={items} renderItem={({ item }) => this.renderFlatListItem(item)} ref={ref => {
           this.ref = ref;
-        }}>
-        <Text style={styles.welcome}>Welcome to React Native!</Text>
-        <Text style={styles.instructions}>To get started, edit App.js</Text>
-        <Text style={styles.instructions}>{instructions}</Text>
+        }}/>
       </View>;
   }
 }

SpruceExample/android/build.gradle

@@ -5,7 +5,7 @@ buildscript {
         jcenter()
     }
     dependencies {
-        classpath 'com.android.tools.build:gradle:3.0.0'
+        classpath 'com.android.tools.build:gradle:3.0.1'
 
         // NOTE: Do not place your application dependencies here; they belong
         // in the individual module build.gradle files

index.js

@@ -1,6 +1,2 @@
 
-import { NativeModules } from 'react-native';
-
-const { RNSpruce } = NativeModules;
-
-export default RNSpruce;
+export * from './js'

js/Spruce.js

@@ -0,0 +1,25 @@
+
+import { NativeModules, findNodeHandle } from 'react-native'
+const { RNSpruce } = NativeModules;
+
+class Spruce {
+}
+
+Spruce.SpruceBuilder = (view) => {
+    this.view = findNodeHandle(view)
+
+    return {
+        sortWith: (sortWith) => {
+            this.sortWith = sortWith.toJSON()
+        },
+
+        start: () => {
+            RNSpruce.StartAnimator(
+                this.view,
+                this.sortWith
+            )
+        }
+    }
+}
+
+export { Spruce };

js/index.js

@@ -0,0 +1,3 @@
+export * from './sort'
+
+export * from './Spruce'

js/sort/CorneredSort.js

@@ -0,0 +1,25 @@
+
+class CorneredSort {
+  static Corner = {
+    TOP_LEFT: "TOP_LEFT",
+    TOP_RIGHT: "TOP_RIGHT",
+    BOTTOM_RIGHT: "BOTTOM_RIGHT",
+    BOTTOM_RIGHT: "BOTTOM_RIGHT"
+  };
+
+  constructor(interObjectDelay, reversed, corner) {
+      this.interObjectDelay = interObjectDelay
+      this.reversed = reversed
+      this.corner = corner
+
+    if (this.interObjectDelay === undefined) this.interObjectDelay = "50"
+    if (this.reversed === undefined) this.reversed = "false"
+    if (this.corner === undefined) this.corner = CorneredSort.Corner.TOP_LEFT;
+  }
+
+  toJSON() {
+    return { name: 'CorneredSort', interObjectDelay: this.interObjectDelay, reversed: this.reversed, corner: this.corner };
+  }
+}
+
+export { CorneredSort }; 

js/sort/DefaultSort.js

@@ -0,0 +1,16 @@
+
+const SORT = 'DefaultSort'
+
+class DefaultSort {
+  constructor(interObjectDelay) {
+    this.interObjectDelay = interObjectDelay
+
+    if (this.interObjectDelay === undefined) this.interObjectDelay = "50"
+  }
+
+  toJSON() {
+    return { name: 'DefaultSort', interObjectDelay: this.interObjectDelay }
+  }
+}
+
+export { DefaultSort  }

js/sort/LinearSort.js

@@ -0,0 +1,25 @@
+
+class LinearSort {
+  static Direction = {
+    TOP_TO_BOTTOM: "TOP_TO_BOTTOM",
+    BOTTOM_TO_TOP: "BOTTOM_TO_TOP",
+    LEFT_TO_RIGHT: "LEFT_TO_RIGHT",
+    RIGHT_TO_LEFT: "RIGHT_TO_LEFT"
+  };
+
+  constructor(interObjectDelay, reversed, direction) {
+      this.interObjectDelay = interObjectDelay;
+      this.reversed = reversed;
+      this.direction = direction;
+
+    if (this.interObjectDelay === undefined) this.interObjectDelay = "50";
+    if (this.reversed === undefined) this.reversed = "false";
+    if (this.direction === undefined) this.direction = LinearSort.Direction.TOP_TO_BOTTOM;
+  }
+
+  toJSON() {
+    return { name: "LinearSort", interObjectDelay: this.interObjectDelay, reversed: this.reversed, direction: this.direction };
+  }
+}
+
+export { LinearSort  }

js/sort/RadialSort.js

@@ -0,0 +1,30 @@
+
+class RadialSort {
+  static Position = {
+    TOP_LEFT: "TOP_LEFT",
+    TOP_MIDDLE: "TOP_MIDDLE",
+    TOP_RIGHT: "TOP_RIGHT",
+    LEFT: "LEFT",
+    MIDDLE: "MIDDLE",
+    RIGHT: "RIGHT",
+    BOTTOM_LEFT: "BOTTOM_LEFT",
+    BOTTOM_MIDDLE: "BOTTOM_MIDDLE",
+    BOTTOM_RIGHT: "BOTTOM_RIGHT"
+  };
+
+  constructor(interObjectDelay, reversed, position) {
+      this.interObjectDelay = interObjectDelay
+      this.reversed = reversed
+      this.position = position
+
+    if (this.interObjectDelay === undefined) this.interObjectDelay = "50";
+    if (this.reversed === undefined) this.reversed = "false";
+    if (this.position === undefined) this.position = RadialSort.Position.TOP_LEFT;
+  }
+
+  toJSON() {
+    return { name: "RadialSort", interObjectDelay: this.interObjectDelay, reversed: this.reversed, position: this.position };
+  }
+}
+
+export { RadialSort }

js/sort/RandomSort.js

@@ -0,0 +1,14 @@
+
+class RandomSort {
+  constructor(interObjectDelay) {
+      this.interObjectDelay = interObjectDelay
+
+    if (this.interObjectDelay === undefined) this.interObjectDelay = "50";
+  }
+
+  toJSON() {
+    return { interObjectDelay: this.interObjectDelay }
+  }
+}
+
+export { RandomSort }

js/sort/index.js

@@ -0,0 +1,6 @@
+
+export * from './CorneredSort'
+export * from './DefaultSort'
+export * from './LinearSort'
+export * from './RadialSort'
+export * from './RandomSort'