From 9cda1b5e29f09fa242a6defc1521f680808116f7 Mon Sep 17 00:00:00 2001 From: Pratik Gode Date: Wed, 9 Oct 2019 17:13:53 +0530 Subject: [PATCH 1/5] onLastPageReached callback added --- src/components/pages/index.js | 28 +++++++++++++++++++++++++--- 1 file changed, 25 insertions(+), 3 deletions(-) diff --git a/src/components/pages/index.js b/src/components/pages/index.js index 864a63a..cbf927a 100644 --- a/src/components/pages/index.js +++ b/src/components/pages/index.js @@ -11,6 +11,11 @@ function equal(a, b) { return Math.abs(a - b) <= floatEpsilon * Math.max(Math.abs(a), Math.abs(b)); } +const position = { + next: 'next', + previous: 'previous' +} + export default class Pages extends PureComponent { static defaultProps = { pagingEnabled: true, @@ -26,6 +31,7 @@ export default class Pages extends PureComponent { horizontal: true, rtl: false, + onLastPageReached: () => {} }; static propTypes = { @@ -55,6 +61,7 @@ export default class Pages extends PureComponent { onLayout: PropTypes.func, onScrollEnd: PropTypes.func, + onLastPageReached: PropTypes.func, renderPager: PropTypes.func, }; @@ -140,9 +147,13 @@ export default class Pages extends PureComponent { if (1 === this.scrollState && equal(discreteProgress, this.progress)) { this.onScrollEnd(); - + this.currentChildNum = this.pageNumber(event.nativeEvent); this.scrollState = -1; } + + var currentOffset = offset; + this.direction = currentOffset > this.offset ? position.next : position.previous; + this.offset = currentOffset; } onScrollBeginDrag() { @@ -150,11 +161,15 @@ export default class Pages extends PureComponent { } onScrollEndDrag() { - let { horizontal } = this.props; + let { horizontal, children, onLastPageReached } = this.props; /* Vertical pagination is not working on android, scroll by hands */ - if ('android' === Platform.OS && !horizontal) { + /*if ('android' === Platform.OS && !horizontal) { this.scrollToPage(Math.round(this.progress)); + }*/ + + if(this.currentChildNum == Children.count(children) - 1 && this.direction == position.next) { + onLastPageReached(); } this.scrollState = 1; @@ -192,6 +207,13 @@ export default class Pages extends PureComponent { return 1 === this.scrollState; } + pageNumber = ({layoutMeasurement, contentOffset}) => { + let { horizontal } = this.props; + var position = !horizontal ? Math.ceil(contentOffset.y) : Math.ceil(contentOffset.x) + var dimension = !horizontal ? Math.ceil(layoutMeasurement.height) : Math.ceil(layoutMeasurement.width) + return Math.ceil(position/dimension) + } + renderPage(page, index) { let { width, height, progress } = this.state; let { children, horizontal, rtl } = this.props; From 8a1e55694903ecabf00bae066c425f151b7ce9f4 Mon Sep 17 00:00:00 2001 From: Pratik Gode Date: Wed, 9 Oct 2019 17:37:22 +0530 Subject: [PATCH 2/5] Linting issues fixed --- src/components/pages/index.js | 23 ++++++++--------------- 1 file changed, 8 insertions(+), 15 deletions(-) diff --git a/src/components/pages/index.js b/src/components/pages/index.js index 58e360a..bca8487 100644 --- a/src/components/pages/index.js +++ b/src/components/pages/index.js @@ -1,13 +1,6 @@ import PropTypes from 'prop-types'; import React, { PureComponent, Children } from 'react'; -import { - View, - ScrollView, - SafeAreaView, - Animated, - Platform, - ViewPropTypes, -} from 'react-native'; +import { View, ScrollView, Animated, ViewPropTypes } from 'react-native'; import Indicator from '../indicator'; import styles from './styles'; @@ -39,7 +32,7 @@ export default class Pages extends PureComponent { horizontal: true, rtl: false, - onLastPageReached: () => {} + onLastPageReached: () => {}, }; static propTypes = { @@ -167,14 +160,14 @@ export default class Pages extends PureComponent { } onScrollEndDrag() { - let { horizontal, children, onLastPageReached } = this.props; + let { children, onLastPageReached } = this.props; /* Vertical pagination is not working on android, scroll by hands */ /*if ('android' === Platform.OS && !horizontal) { this.scrollToPage(Math.round(this.progress)); }*/ - if(this.currentChildNum == Children.count(children) - 1 && this.direction == position.next) { + if (this.currentChildNum == Children.count(children) - 1 && this.direction == position.next) { onLastPageReached(); } @@ -224,11 +217,11 @@ export default class Pages extends PureComponent { return 1 === this.scrollState; } - pageNumber = ({layoutMeasurement, contentOffset}) => { + pageNumber = ( { layoutMeasurement, contentOffset } ) => { let { horizontal } = this.props; - var position = !horizontal ? Math.ceil(contentOffset.y) : Math.ceil(contentOffset.x) - var dimension = !horizontal ? Math.ceil(layoutMeasurement.height) : Math.ceil(layoutMeasurement.width) - return Math.ceil(position/dimension) + var position = !horizontal ? Math.ceil(contentOffset.y) : Math.ceil(contentOffset.x); + var dimension = !horizontal ? Math.ceil(layoutMeasurement.height) : Math.ceil(layoutMeasurement.width); + return Math.ceil(position/dimension); } renderPage(page, index) { From 5f74a0d4d47b9c6f47688f413f5f53da9dcfc903 Mon Sep 17 00:00:00 2001 From: Pratik Gode Date: Wed, 9 Oct 2019 17:42:56 +0530 Subject: [PATCH 3/5] Linting issues fixed 2 --- src/components/pages/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/pages/index.js b/src/components/pages/index.js index bca8487..02db8cf 100644 --- a/src/components/pages/index.js +++ b/src/components/pages/index.js @@ -1,6 +1,6 @@ import PropTypes from 'prop-types'; import React, { PureComponent, Children } from 'react'; -import { View, ScrollView, Animated, ViewPropTypes } from 'react-native'; +import { View, ScrollView, Animated, ViewPropTypes, SafeAreaView } from 'react-native'; import Indicator from '../indicator'; import styles from './styles'; @@ -217,7 +217,7 @@ export default class Pages extends PureComponent { return 1 === this.scrollState; } - pageNumber = ( { layoutMeasurement, contentOffset } ) => { + pageNumber =({ layoutMeasurement, contentOffset })=> { let { horizontal } = this.props; var position = !horizontal ? Math.ceil(contentOffset.y) : Math.ceil(contentOffset.x); var dimension = !horizontal ? Math.ceil(layoutMeasurement.height) : Math.ceil(layoutMeasurement.width); From 9d24602f3c3ac136d1bfc4a50eba7c65c4eb3b3b Mon Sep 17 00:00:00 2001 From: Pratik Gode Date: Wed, 9 Oct 2019 17:45:51 +0530 Subject: [PATCH 4/5] Linting issues fixed 3 --- src/components/pages/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/pages/index.js b/src/components/pages/index.js index 02db8cf..f11982c 100644 --- a/src/components/pages/index.js +++ b/src/components/pages/index.js @@ -13,7 +13,7 @@ function equal(a, b) { const position = { next: 'next', - previous: 'previous' + previous: 'previous', } export default class Pages extends PureComponent { From a42e284032e97f890ddac184f6f48feaf21c6d9c Mon Sep 17 00:00:00 2001 From: Pratik Gode Date: Wed, 9 Oct 2019 17:51:10 +0530 Subject: [PATCH 5/5] Linting issues fixed 4 --- src/components/pages/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/pages/index.js b/src/components/pages/index.js index f11982c..959c92d 100644 --- a/src/components/pages/index.js +++ b/src/components/pages/index.js @@ -223,7 +223,7 @@ export default class Pages extends PureComponent { var dimension = !horizontal ? Math.ceil(layoutMeasurement.height) : Math.ceil(layoutMeasurement.width); return Math.ceil(position/dimension); } - + renderPage(page, index) { let { width, height, progress } = this.state; let { children, horizontal, rtl } = this.props;