add pagination colors (#3)

* add pagination colors * add test for children
gusgard · Dec 6, 2017 · 0235b7b · 0235b7b
1 parent 12f93dc
commit 0235b7b
Show file tree

Hide file tree

Showing 6 changed files with 125 additions and 50 deletions.
diff --git a/README.md b/README.md
@@ -70,41 +70,43 @@ export const { width, height } = Dimensions.get('window');
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: 'white'
+    backgroundColor: 'white',
   },
   child: {
     height: height * 0.5,
     width,
-    justifyContent: 'center'
+    justifyContent: 'center',
   },
   text: {
     fontSize: width * 0.5,
-    textAlign: 'center'
-  }
+    textAlign: 'center',
+  },
 });
 ```
 
 [Example](./example/README.md)
 
 ## Props
 
-| Prop                |              Default               |   Type   | Description                                           |
-| :------------------ | :--------------------------------: | :------: | :---------------------------------------------------- |
-| data                | _not required if children is used_ | `array`  | Data to use in renderItem                             |
-| children            |                 -                  |  `node`  | Children elements                                     |
-| renderItem          | _not required if children is used_ |  `func`  | Takes an item from data and renders it into the list. |
-| onMomentumScrollEnd |                 -                  |  `func`  | Called after scroll end                               |
-| showPagination      |               false                |  `bool`  | Show pagination                                       |
-| horizontal          |               false                |  `bool`  | Show                                                  |
-| index               |                 0                  | `number` | Index to start                                        |
-| renderAll           |               false                |  `bool`  | Render all the items before display it                |
-| **Autoplay**        |
-| autoplay            |               false                |  `bool`  | Change index automatically                            |
-| autoplayDelay       |                 3                  | `number` | Delay between every page                              |
-| autoplayLoop        |               false                |  `bool`  | Continue playing after reach end                      |
-
-<!-- paginationActiveColor: PropTypes.string,
-paginationColor: PropTypes.string,
+| Prop                   |              Default               |   Type   | Description                                           |
+| :--------------------- | :--------------------------------: | :------: | :---------------------------------------------------- |
+| data                   | _not required if children is used_ | `array`  | Data to use in renderItem                             |
+| children               |                 -                  |  `node`  | Children elements                                     |
+| renderItem             | _not required if children is used_ |  `func`  | Takes an item from data and renders it into the list. |
+| onMomentumScrollEnd    |                 -                  |  `func`  | Called after scroll end                               |
+| vertical               |               false                |  `bool`  | Show vertical swiper                                  |
+| index                  |                 0                  | `number` | Index to start                                        |
+| renderAll              |               false                |  `bool`  | Render all the items before display it                |
+| **Pagination**         |
+| showPagination         |               false                |  `bool`  | Show pagination                                       |
+| paginationDefaultColor |                gray                | `string` | Pagination color                                      |
+| paginationActiveColor  |               white                | `string` | Pagination color                                      |
+| **Autoplay**           |
+| autoplay               |               false                |  `bool`  | Change index automatically                            |
+| autoplayDelay          |                 3                  | `number` | Delay between every page                              |
+| autoplayLoop           |               false                |  `bool`  | Continue playing after reach end                      |
+
+<!-- 
 autoplayDirection: PropTypes.bool.isRequired,  -->
 
 ## Limitations

diff --git a/example/src/App.js b/example/src/App.js
@@ -44,6 +44,8 @@ export default class App extends PureComponent {
             autoplayLoop
             index={3}
             showPagination
+            paginationActiveColor="black"
+            paginationDefaultColor="white"
           >
             <View style={[styles.child, { backgroundColor: 'tomato' }]}>
               <Text style={styles.text}>1</Text>

diff --git a/src/components/SwiperFlatList/__snapshots__/test.js.snap b/src/components/SwiperFlatList/__snapshots__/test.js.snap
@@ -1,5 +1,52 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`swiper flatlist renders children 1`] = `
+<View>
+  <FlatList
+    autoplay={false}
+    autoplayDelay={3}
+    autoplayDirection={true}
+    autoplayLoop={false}
+    data={
+      Array [
+        <Image
+          source={
+            Object {
+              "uri": "https://...",
+            }
+          }
+        />,
+        <Image
+          source={
+            Object {
+              "uri": "https://...",
+            }
+          }
+        />,
+      ]
+    }
+    disableVirtualization={false}
+    horizontal={true}
+    index={0}
+    initialNumToRender={1}
+    keyExtractor={[Function]}
+    maxToRenderPerBatch={10}
+    numColumns={1}
+    onEndReachedThreshold={2}
+    onMomentumScrollEnd={[Function]}
+    onScrollToIndexFailed={[Function]}
+    pagingEnabled={true}
+    renderAll={false}
+    renderItem={[Function]}
+    scrollEventThrottle={50}
+    showsHorizontalScrollIndicator={false}
+    showsVerticalScrollIndicator={false}
+    updateCellsBatchingPeriod={50}
+    windowSize={21}
+  />
+</View>
+`;
+
 exports[`swiper flatlist renders correctly 1`] = `
 <View>
   <FlatList

diff --git a/src/components/SwiperFlatList/index.js b/src/components/SwiperFlatList/index.js
@@ -2,25 +2,27 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { TouchableOpacity, View, FlatList } from 'react-native';
 
+import { colors } from '../../themes';
 import styles from './styles';
 
 export default class SwiperFlatList extends Component {
   static propTypes = {
     data: PropTypes.array.isRequired,
     onMomentumScrollEnd: PropTypes.func,
-    showPagination: PropTypes.bool.isRequired,
-    // paginationActiveColor: PropTypes.string,
-    // paginationColor: PropTypes.string,
-    horizontal: PropTypes.bool.isRequired,
+    vertical: PropTypes.bool.isRequired,
     index: PropTypes.number.isRequired,
+
+    showPagination: PropTypes.bool.isRequired,
+    paginationActiveColor: PropTypes.string,
+    paginationDefaultColor: PropTypes.string,
+
     autoplayDelay: PropTypes.number.isRequired,
     autoplay: PropTypes.bool.isRequired,
     autoplayDirection: PropTypes.bool.isRequired,
     autoplayLoop: PropTypes.bool.isRequired,
 
     renderAll: PropTypes.bool,
     renderItem: PropTypes.func,
-    // scrollToIndex: PropTypes.func,
 
     // Only is allowed children or data not both
     children(props, propName) {
@@ -32,7 +34,7 @@ export default class SwiperFlatList extends Component {
         return new Error('Invalid props, `renderItem` is required');
       }
       return undefined;
-    }
+    },
   };
 
   static defaultProps = {
@@ -43,8 +45,8 @@ export default class SwiperFlatList extends Component {
     autoplayLoop: false,
     autoplay: false,
     showPagination: false,
-    horizontal: true,
-    renderAll: false
+    vertical: false,
+    renderAll: false,
   };
 
   componentWillMount() {
@@ -63,8 +65,6 @@ export default class SwiperFlatList extends Component {
     }
   }
 
-  componentWillReceiveProps() {}
-
   shouldComponentUpdate(nextProps, nextState) {
     // TODO improve shouldComponentUpdate
     const { paginationIndex } = this.state;
@@ -79,7 +79,7 @@ export default class SwiperFlatList extends Component {
       autoplayLoop,
       autoplay,
       showPagination,
-      horizontal
+      vertical,
     } = this.props;
     const {
       children: newChildren,
@@ -91,7 +91,7 @@ export default class SwiperFlatList extends Component {
       autoplayLoop: newAutoplayLoop,
       autoplay: newAutoplay,
       showPagination: newShowPagination,
-      horizontal: newHorizontal
+      vertical: newVertical,
     } = nextProps;
     let shouldUpdate =
       nextPaginationIndex !== paginationIndex ||
@@ -102,7 +102,7 @@ export default class SwiperFlatList extends Component {
       autoplayLoop !== newAutoplayLoop ||
       autoplay !== newAutoplay ||
       showPagination !== newShowPagination ||
-      horizontal !== newHorizontal;
+      vertical !== newVertical;
     if (children) {
       shouldUpdate = shouldUpdate || children.length !== newChildren.length;
     }
@@ -118,7 +118,15 @@ export default class SwiperFlatList extends Component {
     }
   }
 
-  setup = ({ children, data, renderItem, renderAll }) => {
+  setup = props => {
+    const {
+      children,
+      data,
+      renderItem,
+      renderAll,
+      paginationActiveColor,
+      paginationDefaultColor,
+    } = props;
     if (children) {
       this._data = children;
       this._renderItem = this.renderChildren;
@@ -128,6 +136,15 @@ export default class SwiperFlatList extends Component {
     }
     // Items to render in the initial batch.
     this._initialNumToRender = renderAll ? this._data.length : 1;
+
+    this.pagination = {
+      default: {
+        backgroundColor: paginationDefaultColor || colors.gray,
+      },
+      active: {
+        backgroundColor: paginationActiveColor || colors.white,
+      },
+    };
   };
 
   _autoplay = index => {
@@ -148,7 +165,7 @@ export default class SwiperFlatList extends Component {
       setTimeout(() => {
         this.autoplayTimer = setTimeout(
           () => this._scrollToIndex(1, true),
-          autoplayDelay * 1000
+          autoplayDelay * 1000,
         );
       }, autoplayDelay * 1000);
     }
@@ -163,14 +180,14 @@ export default class SwiperFlatList extends Component {
   };
 
   _onMomentumScrollEnd = e => {
-    const { autoplay, horizontal, onMomentumScrollEnd } = this.props;
+    const { autoplay, vertical, onMomentumScrollEnd } = this.props;
     const { contentOffset, layoutMeasurement } = e.nativeEvent;
     let index;
-    if (horizontal) {
+    if (vertical) {
+      index = Math.floor(contentOffset.y / layoutMeasurement.height);
+    } else {
       // Divide the horizontal offset by the width of the view to see which page is visible
       index = Math.floor(contentOffset.x / layoutMeasurement.width);
-    } else {
-      index = Math.floor(contentOffset.y / layoutMeasurement.height);
     }
 
     if (autoplay) {
@@ -197,7 +214,9 @@ export default class SwiperFlatList extends Component {
         <TouchableOpacity
           style={[
             styles.pagination,
-            this.state.paginationIndex === index && styles.paginationActive
+            this.state.paginationIndex === index
+              ? this.pagination.active
+              : this.pagination.default,
           ]}
           key={index}
           onPress={() => this._scrollToIndex(index, true)}
@@ -207,15 +226,15 @@ export default class SwiperFlatList extends Component {
   );
 
   render() {
-    const { horizontal, showPagination, children, ...props } = this.props;
+    const { vertical, showPagination, children, ...props } = this.props;
     return (
       <View>
         <FlatList
           ref={component => {
             this.flatListRef = component;
           }}
           keyExtractor={this._keyExtractor}
-          horizontal={horizontal}
+          horizontal={!vertical}
           showsHorizontalScrollIndicator={false}
           showsVerticalScrollIndicator={false}
           pagingEnabled

diff --git a/src/components/SwiperFlatList/styles.js b/src/components/SwiperFlatList/styles.js
@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native';
 
-import { vertical, colors, horizontal, width } from '../../themes';
+import { vertical, horizontal, width } from '../../themes';
 
 export default StyleSheet.create({
   paginationContainer: {
@@ -10,16 +10,12 @@ export default StyleSheet.create({
     justifyContent: 'center',
     bottom: 0,
     left: width * 0.25,
-    right: width * 0.25
+    right: width * 0.25,
   },
   pagination: {
     width: horizontal.small,
     height: horizontal.small,
-    backgroundColor: colors.gray,
     borderRadius: 25,
-    marginHorizontal: horizontal.xSmall
+    marginHorizontal: horizontal.xSmall,
   },
-  paginationActive: {
-    backgroundColor: colors.primaryDark
-  }
 });
diff --git a/src/components/SwiperFlatList/test.js b/src/components/SwiperFlatList/test.js
@@ -17,4 +17,13 @@ describe('swiper flatlist', () => {
     );
     expect(wrapper).toMatchSnapshot();
   });
+  it('renders children', () => {
+    const wrapper = shallow(
+      <SwiperFlatList>
+        <Image source={items[0].thumbnail} />
+        <Image source={items[1].thumbnail} />
+      </SwiperFlatList>,
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
 });