Feature/small fixes (#3)

* update animation every time component is re-renderer

* add more tests

Author: gusgard

.travis.yml

@@ -1,3 +1,7 @@
 language: node_js
 node_js:
   - "8"
+notifications:
+  email:
+    on_success: never
+    on_failure: always

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-grid-list",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "main": "index.js",
   "license": "Apache-2.0",
   "author": "Gustavo Gard <gusgard@gmail.com> (https://gusgard.com)",
@@ -62,10 +62,17 @@
   "jest": {
     "preset": "react-native",
     "setupTestFrameworkScriptFile": "./enzyme.js",
-    "modulePathIgnorePatterns": ["<rootDir>/example/node_modules/"],
-    "snapshotSerializers": ["./node_modules/enzyme-to-json/serializer"]
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules/"
+    ],
+    "snapshotSerializers": [
+      "./node_modules/enzyme-to-json/serializer"
+    ]
   },
   "pre-commit": {
-    "run": ["lint", "test"]
+    "run": [
+      "lint",
+      "test"
+    ]
   }
 }

src/components/GridList/__snapshots__/test.js.snap

@@ -1,6 +1,88 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders correctly 1`] = `
+exports[`grid list renders correctly 1`] = `
+<FlatList
+  ItemSeparatorComponent={[Function]}
+  animationDuration={500}
+  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}
+  showAnimation={false}
+  showsVerticalScrollIndicator={false}
+  updateCellsBatchingPeriod={50}
+  windowSize={21}
+/>
+`;
+
+exports[`grid list renders showAnimation 1`] = `
+<FlatList
+  ItemSeparatorComponent={[Function]}
+  animationDuration={500}
+  contentContainerStyle={
+    Object {
+      "borderBottomWidth": 5,
+      "borderColor": "#FFFFFF",
+      "borderTopWidth": 5,
+    }
+  }
+  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}
+  showAnimation={true}
+  showsVerticalScrollIndicator={false}
+  updateCellsBatchingPeriod={50}
+  windowSize={21}
+/>
+`;
+
+exports[`grid list renders showSeparator 1`] = `
 <FlatList
   ItemSeparatorComponent={[Function]}
   animationDuration={500}

src/components/GridList/index.js

@@ -31,6 +31,12 @@ export default class GridList extends PureComponent {
   };
 
   componentWillMount() {
+    this.animate();
+  }
+  componentWillUpdate() {
+    this.animate();
+  }
+  animate() {
     if (this.props.showAnimation) {
       const { data, numColumns, animationDuration } = this.props;
       this.animatedValue = [];
@@ -70,20 +76,15 @@ export default class GridList extends PureComponent {
       }
     }
 
-    return showAnimation ? (
-      <Animated.View
-        style={[
-          style,
-          this.itemDimension,
-          { opacity: this.animatedValue[index] },
-          itemStyle,
-        ]}
-      >
-        {renderItem({ item, index, stagger: this.stagger[index] })}
-      </Animated.View>
-    ) : (
+    return (
       <View style={[style, this.itemDimension, itemStyle]}>
-        {renderItem({ item, index })}
+        {showAnimation ? (
+          <Animated.View style={[{ opacity: this.animatedValue[index] }]}>
+            {renderItem({ item, index, stagger: this.stagger[index] })}
+          </Animated.View>
+        ) : (
+          renderItem({ item, index })
+        )}
       </View>
     );
   };
@@ -92,7 +93,7 @@ export default class GridList extends PureComponent {
     const { showSeparator, ...props } = this.props;
     return (
       <FlatList
-        contentContainerStyle={styles.container}
+        contentContainerStyle={showSeparator && styles.container}
         keyExtractor={this._keyExtractor}
         ItemSeparatorComponent={() =>
           showSeparator ? <View style={styles.separator} /> : null

src/components/GridList/test.js

@@ -7,12 +7,39 @@ import GridList from './index';
 const logo = { uri: 'https://...' };
 const items = [{ id: 1, thumbnail: logo }, { id: 2, thumbnail: logo }];
 
-it('renders correctly', () => {
-  const wrapper = shallow(
-    <GridList
-      data={items}
-      renderItem={({ item }) => <Image source={item.thumbnail} />}
-    />,
-  );
-  expect(wrapper).toMatchSnapshot();
+describe('grid list', () => {
+  it('renders correctly', () => {
+    const wrapper = shallow(
+      <GridList
+        data={items}
+        renderItem={({ item }) => <Image source={item.thumbnail} />}
+      />,
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('renders showSeparator', () => {
+    const wrapper = shallow(
+      <GridList
+        showSeparator
+        data={items}
+        renderItem={({ item }) => <Image source={item.thumbnail} />}
+      />,
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('renders showAnimation', () => {
+    const wrapper = shallow(
+      <GridList
+        showSeparator
+        showAnimation
+        data={items}
+        renderItem={({ item, stagger }) => (
+          <Image source={item.thumbnail} onLoad={() => stagger.start()} />
+        )}
+      />,
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
 });