Feature/more props (#4)

* add separator and animation props * add test for props * update examples and refactor * update readme * bump version
gusgard · Nov 22, 2017 · b712d3e · b712d3e
1 parent a24b9fc
commit b712d3e
Show file tree

Hide file tree

Showing 10 changed files with 316 additions and 87 deletions.
diff --git a/README.md b/README.md
@@ -73,17 +73,27 @@ const styles = StyleSheet.create({
 });
 ```
 
+Check the code [here](./example/README.md)
+
+You can use all the props from FlatList:
+http://facebook.github.io/react-native/docs/flatlist.html
+
 ## Props
 
-| Prop              |  Default   |      Type       | Description                                |
-| :---------------- | :--------: | :-------------: | :----------------------------------------- |
-| numColumns        |     3      |    `number`     | Number of elements in a row                |
-| data              | _required_ |     `array`     | Data used when render items                |
-| renderItem        | _required_ |     `func`      | Function that render each item of the grid |
-| itemStyle         |     {}     | `ViewPropTypes` | Style for the wrapper of item              |
-| showSeparator     |   false    |     `bool`      | Show a separator between items             |
-| showAnimation     |   false    |     `bool`      | Show an animation when load item           |
-| animationDuration |    500     |    `number`     | Duration of the animation                  |
+| Prop                            |  Default   |      Type       | Description                                |
+| :------------------------------ | :--------: | :-------------: | :----------------------------------------- |
+| numColumns                      |     3      |    `number`     | Number of elements in a row                |
+| data                            | _required_ |     `array`     | Data used when render items                |
+| renderItem                      | _required_ |     `func`      | Function that render each item of the grid |
+| itemStyle                       |     {}     | `ViewPropTypes` | Style for the wrapper of item              |
+| **Separator**                   |
+| showSeparator                   |   false    |     `bool`      | Show a separator between items             |
+| separatorBorderWidth            |     0      |    `number`     | Set separator width                        |
+| separatorBorderColor            |  'white'   |    `string`     | Set separator color                        |
+| **Animation**                   |
+| showAnimation                   |   false    |     `bool`      | Show an animation when load item           |
+| animationInitialBackgroundColor |  'white'   |    `string`     | Set initial backgroundColor for animation  |
+| animationDuration               |    500     |    `number`     | Duration of the animation                  |
 
 ## Author
 

diff --git a/demo.gif b/demo.gif
diff --git a/example/App.js b/example/App.js
@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { Image, StyleSheet, View } from 'react-native';
+import { Text, ScrollView, Image, StyleSheet, View } from 'react-native';
 import GridList from 'react-native-grid-list';
 
 const newImage = {
@@ -23,40 +23,98 @@ const image = index => ({
   },
 });
 
-const items = Array.from(Array(20)).map((_, index) => image(index));
+const itemsAnimationAndSeparator = Array.from(Array(5)).map((_, index) =>
+  image(index),
+);
+const itemsAnimation = Array.from(Array(6)).map((_, index) => image(index));
+const itemsSeparator = Array.from(Array(4)).map((_, index) => image(index));
 
 export default class App extends PureComponent {
-  renderItem = ({ item, stagger }) => (
+  renderItemAnimationAndSeparator = ({ item, animation }) => (
+    <Image
+      style={styles.imageRadius}
+      source={item.thumbnail}
+      onLoad={() => animation.start()}
+    />
+  );
+  renderItemAnimation = ({ item, animation }) => (
     <Image
       style={styles.image}
       source={item.thumbnail}
-      onLoad={() => stagger.start()}
+      onLoad={() => animation.start()}
     />
   );
+  renderItemSeparator = ({ item }) => (
+    <Image style={styles.image} source={item.thumbnail} />
+  );
 
   render() {
     return (
-      <View style={styles.container}>
-        <GridList
-          showAnimation
-          showSeparator
-          data={items}
-          numColumns={3}
-          renderItem={this.renderItem}
-        />
-      </View>
+      <ScrollView style={styles.container} showsVerticalScrollIndicator={false}>
+        {/* AnimationAndSeparator */}
+        <Text>Separator and animation when loading</Text>
+        <View style={styles.girdAnimationAndSeparator}>
+          <GridList
+            showAnimation
+            showSeparator
+            data={itemsAnimationAndSeparator}
+            numColumns={3}
+            renderItem={this.renderItemAnimationAndSeparator}
+            separatorBorderWidth={10}
+            separatorBorderColor={'black'}
+            animationInitialBackgroundColor={'white'}
+          />
+        </View>
+
+        {/* Animation */}
+        <Text>Animation when loading</Text>
+        <View style={styles.girdAnimation}>
+          <GridList
+            showAnimation
+            data={itemsAnimation}
+            numColumns={4}
+            renderItem={this.renderItemAnimation}
+          />
+        </View>
+
+        {/* Separator */}
+        <Text>Separator</Text>
+        <View style={styles.girdSeparator}>
+          <GridList
+            showSeparator
+            data={itemsSeparator}
+            numColumns={2}
+            renderItem={this.renderItemSeparator}
+            separatorBorderWidth={25}
+            separatorBorderColor={'white'}
+          />
+        </View>
+      </ScrollView>
     );
   }
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: 'white',
+    margin: '5%',
   },
-  image: {
+  girdAnimationAndSeparator: {
+    backgroundColor: 'black',
+  },
+  girdAnimation: {
+    backgroundColor: 'tomato',
+  },
+  girdSeparator: {
+    borderWidth: 1,
+  },
+  imageRadius: {
     width: '100%',
     height: '100%',
     borderRadius: 10,
   },
+  image: {
+    width: '100%',
+    height: '100%',
+  },
 });
diff --git a/example/README.md b/example/README.md
@@ -0,0 +1,17 @@
+# Installation
+
+## Setup
+
+Run `yarn install`
+
+## Start
+
+Run `yarn start`
+
+## Simulator
+
+For an Android device `yarn android`
+
+For an iOS device `yarn ios`
+
+![Demo](./demo.gif)
diff --git a/example/demo.gif b/example/demo.gif
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-grid-list",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "main": "index.js",
   "license": "Apache-2.0",
   "author": "Gustavo Gard <[email protected]> (https://gusgard.com)",
@@ -30,6 +30,7 @@
     "lint-fix": "eslint index.js src --fix",
     "test": "jest",
     "test-watch": "jest --watch",
+    "start": "echo ----- Check example folder  ----- 👻",
     "publish": "npm publish"
   },
   "dependencies": {

diff --git a/src/components/GridList/__snapshots__/test.js.snap b/src/components/GridList/__snapshots__/test.js.snap
@@ -4,6 +4,7 @@ exports[`grid list renders correctly 1`] = `
 <FlatList
   ItemSeparatorComponent={[Function]}
   animationDuration={500}
+  animationInitialBackgroundColor="#FFFFFF"
   contentContainerStyle={false}
   data={
     Array [
@@ -31,6 +32,8 @@ exports[`grid list renders correctly 1`] = `
   onEndReachedThreshold={2}
   renderItem={[Function]}
   scrollEventThrottle={50}
+  separatorBorderColor="#FFFFFF"
+  separatorBorderWidth={0}
   showAnimation={false}
   showsVerticalScrollIndicator={false}
   updateCellsBatchingPeriod={50}
@@ -42,11 +45,95 @@ exports[`grid list renders showAnimation 1`] = `
 <FlatList
   ItemSeparatorComponent={[Function]}
   animationDuration={500}
+  animationInitialBackgroundColor="#FFFFFF"
+  contentContainerStyle={false}
+  data={
+    Array [
+      Object {
+        "id": 1,
+        "thumbnail": Object {
+          "uri": "https://...",
+        },
+      },
+      Object {
+        "id": 2,
+        "thumbnail": Object {
+          "uri": "https://...",
+        },
+      },
+    ]
+  }
+  disableVirtualization={false}
+  horizontal={false}
+  initialNumToRender={10}
+  itemStyle={Object {}}
+  keyExtractor={[Function]}
+  maxToRenderPerBatch={10}
+  numColumns={3}
+  onEndReachedThreshold={2}
+  renderItem={[Function]}
+  scrollEventThrottle={50}
+  separatorBorderColor="#FFFFFF"
+  separatorBorderWidth={0}
+  showAnimation={true}
+  showsVerticalScrollIndicator={false}
+  updateCellsBatchingPeriod={50}
+  windowSize={21}
+/>
+`;
+
+exports[`grid list renders showAnimation with duration and initialBackground setted 1`] = `
+<FlatList
+  ItemSeparatorComponent={[Function]}
+  animationDuration={1000}
+  animationInitialBackgroundColor="beige"
+  contentContainerStyle={false}
+  data={
+    Array [
+      Object {
+        "id": 1,
+        "thumbnail": Object {
+          "uri": "https://...",
+        },
+      },
+      Object {
+        "id": 2,
+        "thumbnail": Object {
+          "uri": "https://...",
+        },
+      },
+    ]
+  }
+  disableVirtualization={false}
+  horizontal={false}
+  initialNumToRender={10}
+  itemStyle={Object {}}
+  keyExtractor={[Function]}
+  maxToRenderPerBatch={10}
+  numColumns={3}
+  onEndReachedThreshold={2}
+  renderItem={[Function]}
+  scrollEventThrottle={50}
+  separatorBorderColor="#FFFFFF"
+  separatorBorderWidth={0}
+  showAnimation={true}
+  showsVerticalScrollIndicator={false}
+  updateCellsBatchingPeriod={50}
+  windowSize={21}
+/>
+`;
+
+exports[`grid list renders showSeparator 1`] = `
+<FlatList
+  ItemSeparatorComponent={[Function]}
+  animationDuration={500}
+  animationInitialBackgroundColor="#FFFFFF"
   contentContainerStyle={
     Object {
-      "borderBottomWidth": 5,
+      "borderBottomWidth": 0,
       "borderColor": "#FFFFFF",
-      "borderTopWidth": 5,
+      "borderRightWidth": 0,
+      "borderTopWidth": 0,
     }
   }
   data={
@@ -75,21 +162,25 @@ exports[`grid list renders showAnimation 1`] = `
   onEndReachedThreshold={2}
   renderItem={[Function]}
   scrollEventThrottle={50}
-  showAnimation={true}
+  separatorBorderColor="#FFFFFF"
+  separatorBorderWidth={0}
+  showAnimation={false}
   showsVerticalScrollIndicator={false}
   updateCellsBatchingPeriod={50}
   windowSize={21}
 />
 `;
 
-exports[`grid list renders showSeparator 1`] = `
+exports[`grid list renders showSeparator with border and width setted 1`] = `
 <FlatList
   ItemSeparatorComponent={[Function]}
   animationDuration={500}
+  animationInitialBackgroundColor="#FFFFFF"
   contentContainerStyle={
     Object {
       "borderBottomWidth": 5,
-      "borderColor": "#FFFFFF",
+      "borderColor": "tomato",
+      "borderRightWidth": 5,
       "borderTopWidth": 5,
     }
   }
@@ -119,6 +210,8 @@ exports[`grid list renders showSeparator 1`] = `
   onEndReachedThreshold={2}
   renderItem={[Function]}
   scrollEventThrottle={50}
+  separatorBorderColor="tomato"
+  separatorBorderWidth={5}
   showAnimation={false}
   showsVerticalScrollIndicator={false}
   updateCellsBatchingPeriod={50}