add more options, readme, etc

gusgard · Nov 19, 2017 · aebd236 · aebd236
1 parent 68cb30c
commit aebd236
Show file tree

Hide file tree

Showing 12 changed files with 145 additions and 94 deletions.
diff --git a/README.md b/README.md
@@ -6,6 +6,8 @@
   <img alt="npm version" src="https://travis-ci.org/gusgard/react-native-grid-list.svg?branch=master">
 </p>
 
+![Demo](./demo.gif)
+
 ## Installation
 
 ```
@@ -22,41 +24,46 @@ npm install react-native-grid-list --save
 
 ```js
 import React, { Component } from 'react';
-import {
-  StyleSheet,
-  Image,
-} from 'react-native';
+import { StyleSheet, Image } from 'react-native';
 
 import GridList from 'react-native-grid-list';
 
 const items = [
-  { thumbnail: { uri:'http://lorempixel.com/640/480/animals'} },
-  { thumbnail: {uri: 'https://facebook.github.io/react-native/img/favicon.png'} },
-  { thumbnail: {uri: 'http://lorempixel.com/640/480/nature'} },
+  { thumbnail: { uri: 'https://lorempixel.com/200/200/animals' } },
+  { thumbnail: { uri: 'https://lorempixel.com/200/200/city' } },
+  { thumbnail: { uri: 'https://lorempixel.com/200/200/nature' } },
+  { thumbnail: { uri: 'https://lorempixel.com/200/200/cats' } },
 ];
 
-export default class ExampleGrid extends Component {
-
+export default class App extends PureComponent {
   renderItem = ({ item, index }) => (
-    <Image
-      style={styles.image}
-      source={item.thumbnail}
-    />
-  )
+    <Image style={styles.image} source={item.thumbnail} />
+  );
 
   render() {
     return (
-      <GridList
-        renderItem={this.renderItem}
-        data={items}
-        numColumns={3}
-      />
+      <View style={styles.container}>
+        <ListGrid
+          showSeparator
+          data={items}
+          numColumns={3}
+          renderItem={this.renderItem}
+        />
+      </View>
     );
   }
 }
 
 const styles = StyleSheet.create({
-  ...
+  container: {
+    flex: 1,
+    backgroundColor: 'white',
+  },
+  image: {
+    width: '100%',
+    height: '100%',
+    borderRadius: 10,
+  },
 });
 ```
 
@@ -66,11 +73,13 @@ const styles = StyleSheet.create({
 
 ## 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 |
+| 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             |
 
 ## Author
 

diff --git a/demo.gif b/demo.gif
diff --git a/example/App.js b/example/App.js
@@ -1,21 +1,44 @@
-import React, { Component } from 'react';
-import { StyleSheet, View } from 'react-native';
+import React, { PureComponent } from 'react';
+import { Image, StyleSheet, View } from 'react-native';
 import ListGrid from 'react-native-grid-list';
 
-const logo = {
-  uri: 'https://facebook.github.io/react-native/img/opengraph.png',
+const newImage = {
+  0: 'business',
+  1: 'cats',
+  2: 'city',
+  3: 'food',
+  4: 'nightlife',
+  5: 'fashion',
+  6: 'people',
+  7: 'nature',
+  8: 'animals',
+  9: 'imageUrl',
 };
-const items = [
-  { id: 1, thumbnail: logo },
-  { id: 2, thumbnail: logo },
-  { id: 3, thumbnail: logo },
-];
 
-export default class App extends Component {
+const image = index => ({
+  thumbnail: {
+    uri: `https://lorempixel.com/200/200/${
+      newImage[index % (Object.keys(newImage).length - 1)]
+    }`,
+  },
+});
+
+const items = Array.from(Array(30)).map((_, index) => image(index));
+
+export default class App extends PureComponent {
+  renderItem = ({ item }) => (
+    <Image style={styles.image} source={item.thumbnail} />
+  );
+
   render() {
     return (
       <View style={styles.container}>
-        <ListGrid data={items} />
+        <ListGrid
+          showSeparator
+          data={items}
+          numColumns={3}
+          renderItem={this.renderItem}
+        />
       </View>
     );
   }
@@ -24,6 +47,11 @@ export default class App extends Component {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#F5FCFF',
+    backgroundColor: 'white',
+  },
+  image: {
+    width: '100%',
+    height: '100%',
+    borderRadius: 10,
   },
 });
diff --git a/example/ios/GridListExample/Info.plist b/example/ios/GridListExample/Info.plist
@@ -51,6 +51,8 @@
 				<true/>
 			</dict>
 		</dict>
+    <key>NSAllowsArbitraryLoads</key>
+		<true/>
 	</dict>
 </dict>
 </plist>
diff --git a/package.json b/package.json
@@ -8,6 +8,18 @@
     "type": "git",
     "url": "git+https://github.com/gusgard/react-native-grid-list.git"
   },
+  "keywords": [
+    "grid list",
+    "grid",
+    "grid view",
+    "grid component",
+    "grid layout",
+    "react native",
+    "react-native",
+    "react",
+    "flatlist",
+    "flatlist grid"
+  ],
   "scripts": {
     "lint": "eslint index.js src",
     "lint-fix": "eslint index.js src --fix",

diff --git a/src/components/ListGrid/__snapshots__/test.js.snap b/src/components/ListGrid/__snapshots__/test.js.snap
@@ -3,6 +3,13 @@
 exports[`renders correctly 1`] = `
 <FlatList
   ItemSeparatorComponent={[Function]}
+  contentContainerStyle={
+    Object {
+      "borderBottomWidth": 5,
+      "borderColor": "#FFFFFF",
+      "borderTopWidth": 5,
+    }
+  }
   data={
     Array [
       Object {
@@ -22,6 +29,7 @@ exports[`renders correctly 1`] = `
   disableVirtualization={false}
   horizontal={false}
   initialNumToRender={10}
+  itemStyle={Object {}}
   keyExtractor={[Function]}
   maxToRenderPerBatch={10}
   numColumns={3}

diff --git a/src/components/ListGrid/index.js b/src/components/ListGrid/index.js
@@ -1,65 +1,67 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import { View, FlatList, Image } from 'react-native';
+import { ViewPropTypes, View, FlatList } from 'react-native';
 
-import { width, horizontal } from '../../themes';
+import { width } from '../../themes';
 
 import styles from './styles';
 
-const space = horizontal.xxSmall;
 const calcGridDimension = numColumns => ({
-  height: width / numColumns - space,
-  width: width / numColumns - space,
+  height: width / numColumns,
+  width: width / numColumns,
 });
 
 export default class ListGrid extends PureComponent {
   static propTypes = {
     data: PropTypes.array.isRequired,
     numColumns: PropTypes.number.isRequired,
+    renderItem: PropTypes.func.isRequired,
+    showSeparator: PropTypes.bool,
+    itemStyle: ViewPropTypes.style,
   };
 
   static defaultProps = {
     numColumns: 3,
-  };
-
-  state = {
-    index: 0,
+    itemStyle: {},
+    showSeparator: false,
   };
 
   itemDimension = calcGridDimension(this.props.numColumns);
 
-  keyExtractor = item => item.id;
+  _keyExtractor = (item, index) => index;
 
-  renderItem = ({ item, index }) => {
-    const { numColumns } = this.props;
-    const position = index % numColumns;
-    let style = styles.imageCenter;
-    if (position === 0) {
-      style = styles.imageRight;
-    } else if (position === numColumns - 1) {
-      style = styles.imageLeft;
+  _renderItem = ({ item, index }) => {
+    const { showSeparator, renderItem, numColumns, itemStyle } = this.props;
+    let style = {};
+    if (showSeparator) {
+      const position = index % numColumns;
+      if (position === 0 && numColumns !== 1) {
+        style = styles.imageLeft;
+      } else if (position === numColumns - 1) {
+        style = styles.imageRight;
+      } else {
+        style = styles.imageCenter;
+      }
     }
     return (
-      <View style={style}>
-        <Image
-          style={[styles.image, this.itemDimension]}
-          source={item.thumbnail}
-          resizeMethod="resize"
-        />
+      <View style={[style, this.itemDimension, itemStyle]}>
+        {renderItem({ item, index })}
       </View>
     );
   };
 
   render() {
-    const { data, numColumns } = this.props;
+    const { showSeparator, ...props } = this.props;
     return (
       <FlatList
-        numColumns={numColumns}
-        data={data}
-        keyExtractor={this.keyExtractor}
-        renderItem={this.renderItem}
+        contentContainerStyle={styles.container}
+        keyExtractor={this._keyExtractor}
+        ItemSeparatorComponent={() =>
+          showSeparator ? <View style={styles.separator} /> : null
+        }
         showsVerticalScrollIndicator={false}
-        ItemSeparatorComponent={() => <View style={styles.separator} />}
+        {...props}
+        renderItem={this._renderItem}
       />
     );
   }

diff --git a/src/components/ListGrid/styles.js b/src/components/ListGrid/styles.js
@@ -2,27 +2,30 @@ import { StyleSheet } from 'react-native';
 
 import { colors } from '../../themes';
 
-const borderWidth = 2;
+const borderWidth = 5;
 
 export default StyleSheet.create({
   imageLeft: {
     borderLeftWidth: borderWidth,
     borderColor: colors.white,
   },
   imageRight: {
+    borderLeftWidth: borderWidth,
     borderRightWidth: borderWidth,
     borderColor: colors.white,
   },
   imageCenter: {
-    borderRightWidth: borderWidth,
     borderLeftWidth: borderWidth,
     borderColor: colors.white,
   },
-  image: {
-    alignSelf: 'center',
-  },
   separator: {
     borderColor: colors.white,
-    borderWidth,
+    // paddingVertical: borderWidth * 0.5,
+    borderWidth: borderWidth * 0.5,
+  },
+  container: {
+    borderTopWidth: borderWidth,
+    borderBottomWidth: borderWidth,
+    borderColor: colors.white,
   },
 });
diff --git a/src/components/ListGrid/test.js b/src/components/ListGrid/test.js
@@ -1,12 +1,18 @@
 import { shallow } from 'enzyme';
 import React from 'react';
+import { Image } from 'react-native';
 
 import ListGrid from './index';
 
 const logo = { uri: 'https://...' };
 const items = [{ id: 1, thumbnail: logo }, { id: 2, thumbnail: logo }];
 
 it('renders correctly', () => {
-  const wrapper = shallow(<ListGrid data={items} />);
+  const wrapper = shallow(
+    <ListGrid
+      data={items}
+      renderItem={({ item }) => <Image source={item.thumbnail} />}
+    />,
+  );
   expect(wrapper).toMatchSnapshot();
 });
diff --git a/src/themes/colors.js b/src/themes/colors.js
@@ -1,8 +1,6 @@
 export const colors = {
   white: '#FFFFFF',
   primary: 'rgb(90, 170, 200)',
-  primaryDark: 'rgb(15, 45, 90)',
-  primaryLight: 'rgb(45, 120, 210)',
   transparent: 'rgba(0, 0, 0, 0)',
   black: '#000000',
 };
diff --git a/src/themes/index.js b/src/themes/index.js
@@ -1,2 +1,2 @@
 export { colors } from './colors';
-export { horizontal, vertical, width, height } from './layout';
+export { width, height } from './layout';
-Original file line number
+Diff line change
@@ Expand Up / @@ -51,6 +51,8 @@ @@
     				<true/>
     			</dict>
     		</dict>
+        <key>NSAllowsArbitraryLoads</key>
+    		<true/>
     	</dict>
     </dict>
     </plist>