Merge pull request phil-r#24 from jarredwitt/master

Added pageInfo Pill
aranda-adapptor · Mar 18, 2016 · 5db36bb · 5db36bb
2 parents 9e2bb05 + 79621a8
commit 5db36bb
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 7 deletions.
diff --git a/index.js b/index.js
@@ -24,13 +24,20 @@ var Carousel = React.createClass({
     pageStyle: View.propTypes.style,
     contentContainerStyle: View.propTypes.style,
     autoplay: React.PropTypes.bool,
+    pageInfo: React.PropTypes.bool,
+    pageInfoBackgroundColor: React.PropTypes.string,
+    pageInfoTextStyle: Text.propTypes.style,
+    pageInfoTextSeparator: React.PropTypes.string,
     onAnimateNextPage: React.PropTypes.func
   },
   mixins: [TimerMixin],
   getDefaultProps() {
     return {
       delay: PAGE_CHANGE_DELAY,
-      autoplay: true
+      autoplay: true,
+      pageInfo: false,
+      pageInfoBackgroundColor: 'rgba(0, 0, 0, 0.25)',
+      pageInfoTextSeparator: ' / ',
     };
   },
   getInitialState() {
@@ -99,7 +106,7 @@ var Carousel = React.createClass({
         this.props.onAnimateNextPage(this.state.currentPage)
       }
     })
-    this.refs.scrollView.scrollTo(0, k*size.width);
+    this.refs.scrollView.scrollTo({ y: 0, x: k*size.width });
     this._setUpTimer();
   },
   _calculateCurrentPage(offset) {
@@ -111,6 +118,17 @@ var Carousel = React.createClass({
       }
     });
   },
+  _renderPageInfo(pageLength) {
+    return (
+      <View style={styles.pageInfoBottomContainer} pointerEvents="none">
+        <View style={styles.pageInfoContainer}>
+          <View style={[styles.pageInfoPill, { backgroundColor: this.props.pageInfoBackgroundColor }]}>
+            <Text style={[styles.pageInfoText, this.props.pageInfoTextStyle]}>{`${this.state.currentPage}${this.props.pageInfoTextSeparator}${pageLength}`}</Text>
+          </View>
+        </View>
+      </View>
+    );
+  },
   //TODO: add optional `dots` for displaying current page (like pageControl)
   render() {
     var pages = [],
@@ -152,9 +170,8 @@ var Carousel = React.createClass({
     }
 
     pages = pages.map((page, i) =>
-        <View
-          style={[{width: size.width, height: size.height}, this.props.pageStyle]}
-          key={"page"+i}>{page}
+        <View style={[{width: size.width, height: size.height}, this.props.pageStyle]} key={"page"+i}>
+          {page}
         </View>
     );
 
@@ -186,14 +203,37 @@ var Carousel = React.createClass({
       return (
         <View {...containerProps}>
           {contents}
+          {this.props.pageInfo && this._renderPageInfo(children.length)}
         </View>
       );
   },
 });
 
 var styles = StyleSheet.create({
   horizontalScroll: {
-    position:'absolute'
+    position:'absolute',
+  },
+  pageInfoBottomContainer: {
+    position: 'absolute',
+    bottom: 20,
+    left: 0,
+    right: 0,
+    backgroundColor: 'transparent',
+  },
+  pageInfoContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'transparent'
+  },
+  pageInfoPill: {
+    width: 80,
+    height: 20,
+    borderRadius: 10,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  pageInfoText: {
+    textAlign: 'center',
   }
 });
 

diff --git a/package.json b/package.json
@@ -32,7 +32,7 @@
   ],
   "license": "MIT",
   "peerDependencies": {
-    "react-native": ">=0.16.0 <=0.17.0"
+    "react-native": ">=0.16.0 <=0.21.0"
   },
   "dependencies": {
     "react-timer-mixin": "^0.13.3"