From 6a4c81a1a078a62245a9ac66b85aa40bb701253e Mon Sep 17 00:00:00 2001 From: Suraj Tiwari Date: Sat, 30 Mar 2019 22:49:30 +0530 Subject: [PATCH 1/8] added, topLeft, bottomLeft, topRight, bottomRight --- src/components/pages/styles.js | 63 ++++++++++++++++++++++------------ 1 file changed, 42 insertions(+), 21 deletions(-) diff --git a/src/components/pages/styles.js b/src/components/pages/styles.js index ffc553f..fd46a82 100644 --- a/src/components/pages/styles.js +++ b/src/components/pages/styles.js @@ -1,41 +1,62 @@ -import { StyleSheet } from 'react-native'; +import {StyleSheet} from 'react-native'; export default StyleSheet.create({ rtl: { - transform: [{ - rotate: '180deg', - }], + transform: [{ + rotate: '180deg', + }], }, container: { - flex: 1, + flex: 1, }, bottom: { - position: 'absolute', - right: 0, - bottom: 0, - left: 0, + position: 'absolute', + right: 0, + bottom: 0, + left: 0, }, top: { - position: 'absolute', - top: 0, - right: 0, - left: 0, + position: 'absolute', + top: 0, + right: 0, + left: 0, }, left: { - position: 'absolute', - top: 0, - bottom: 0, - left: 0, + position: 'absolute', + top: 0, + bottom: 0, + left: 0, }, right: { - position: 'absolute', - top: 0, - right: 0, - bottom: 0, + position: 'absolute', + top: 0, + right: 0, + bottom: 0, }, + topLeft: { + position: 'absolute', + top: 0, + left: 0, + }, + bottomLeft: { + position: 'absolute', + bottom: 0, + left: 0, + }, + topRight: { + position: 'absolute', + top: 0, + right: 0, + }, + bottomRight: { + position: 'absolute', + right: 0, + bottom: 0, + }, + }); From 4a00075a663625e6986d9fbf548cb673aafbd796 Mon Sep 17 00:00:00 2001 From: Suraj Tiwari Date: Sat, 30 Mar 2019 22:52:15 +0530 Subject: [PATCH 2/8] added propType for new position --- src/components/pages/index.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/pages/index.js b/src/components/pages/index.js index 864a63a..d3efc0a 100644 --- a/src/components/pages/index.js +++ b/src/components/pages/index.js @@ -40,6 +40,10 @@ export default class Pages extends PureComponent { 'right', 'bottom', 'left', + 'bottomLeft', + 'bottomRight', + 'topLeft', + 'topRight', ]), startPage: PropTypes.number, From 28e402dd9be349bbe00f5514cc4987b2926e1881 Mon Sep 17 00:00:00 2001 From: Suraj Tiwari Date: Sun, 31 Mar 2019 00:06:24 +0530 Subject: [PATCH 3/8] added smooth scroll in case anyone need it scroll instead of paged. --- src/components/pages/index.js | 414 +++++++++++++++++----------------- 1 file changed, 208 insertions(+), 206 deletions(-) diff --git a/src/components/pages/index.js b/src/components/pages/index.js index d3efc0a..f6b657b 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, Platform, ViewPropTypes } from 'react-native'; +import React, {PureComponent, Children} from 'react'; +import {View, ScrollView, Animated, Platform, ViewPropTypes} from 'react-native'; import Indicator from '../indicator'; import styles from './styles'; @@ -13,295 +13,297 @@ function equal(a, b) { export default class Pages extends PureComponent { static defaultProps = { - pagingEnabled: true, - showsHorizontalScrollIndicator: false, - showsVerticalScrollIndicator: false, - scrollEventThrottle: 30, - scrollsToTop: false, + pagingEnabled: true, + showsHorizontalScrollIndicator: false, + showsVerticalScrollIndicator: false, + scrollEventThrottle: 30, + scrollsToTop: false, - indicatorColor: 'rgb(255, 255, 255)', - indicatorOpacity: 0.30, + indicatorColor: 'rgb(255, 255, 255)', + indicatorOpacity: 0.30, - startPage: 0, + startPage: 0, - horizontal: true, - rtl: false, + horizontal: true, + rtl: false, + paged: true }; static propTypes = { - style: ViewPropTypes.style, - containerStyle: ViewPropTypes.style, - - indicatorColor: PropTypes.string, - indicatorOpacity: PropTypes.number, - indicatorPosition: PropTypes.oneOf([ - 'none', - 'top', - 'right', - 'bottom', - 'left', - 'bottomLeft', - 'bottomRight', - 'topLeft', - 'topRight', - ]), - - startPage: PropTypes.number, - progress: PropTypes.instanceOf(Animated.Value), - - horizontal: PropTypes.bool, - rtl: PropTypes.bool, - - children: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.node), - PropTypes.node, - ]), - - onLayout: PropTypes.func, - onScrollEnd: PropTypes.func, - renderPager: PropTypes.func, + style: ViewPropTypes.style, + containerStyle: ViewPropTypes.style, + + indicatorColor: PropTypes.string, + indicatorOpacity: PropTypes.number, + indicatorPosition: PropTypes.oneOf([ + 'none', + 'top', + 'right', + 'bottom', + 'left', + 'bottomLeft', + 'bottomRight', + 'topLeft', + 'topRight', + ]), + + startPage: PropTypes.number, + progress: PropTypes.instanceOf(Animated.Value), + + horizontal: PropTypes.bool, + rtl: PropTypes.bool, + + children: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.node), + PropTypes.node, + ]), + + onLayout: PropTypes.func, + onScrollEnd: PropTypes.func, + renderPager: PropTypes.func, + paged: PropTypes.bool }; constructor(props) { - super(props); + super(props); - this.onLayout = this.onLayout.bind(this); - this.onScroll = this.onScroll.bind(this); - this.onScrollBeginDrag = this.onScrollBeginDrag.bind(this); - this.onScrollEndDrag = this.onScrollEndDrag.bind(this); + this.onLayout = this.onLayout.bind(this); + this.onScroll = this.onScroll.bind(this); + this.onScrollBeginDrag = this.onScrollBeginDrag.bind(this); + this.onScrollEndDrag = this.onScrollEndDrag.bind(this); - this.updateRef = this.updateRef.bind(this, 'scroll'); - this.renderPage = this.renderPage.bind(this); + this.updateRef = this.updateRef.bind(this, 'scroll'); + this.renderPage = this.renderPage.bind(this); - let { startPage, progress = new Animated.Value(startPage) } = this.props; + let {startPage, progress = new Animated.Value(startPage)} = this.props; - this.progress = startPage; - this.mounted = false; - this.scrollState = -1; + this.progress = startPage; + this.mounted = false; + this.scrollState = -1; - this.state = { - layout: false, - width: 0, - height: 0, - progress, - }; + this.state = { + layout: false, + width: 0, + height: 0, + progress, + }; } componentDidMount() { - this.mounted = true; + this.mounted = true; } componentDidUpdate() { - if (-1 === this.scrollState) { - /* Fix scroll position after layout update */ - requestAnimationFrame(() => { - this.scrollToPage(Math.floor(this.progress), false); - }); - } + if (-1 === this.scrollState) { + /* Fix scroll position after layout update */ + requestAnimationFrame(() => { + this.scrollToPage(Math.floor(this.progress), false); + }); + } } componentWillUnmount() { - this.mounted = false; + this.mounted = false; } componentWillReceiveProps(props) { - let { progress } = props; + let {progress} = props; - if (progress !== this.props.progress) { - progress.setValue(this.progress); + if (progress !== this.props.progress) { + progress.setValue(this.progress); - this.setState({ progress }); - } + this.setState({progress}); + } } updateRef(name, ref) { - this[name] = ref; + this[name] = ref; } onLayout(event) { - let { width, height } = event.nativeEvent.layout; - let { onLayout } = this.props; + let {width, height} = event.nativeEvent.layout; + let {onLayout} = this.props; - if ('function' === typeof onLayout) { - onLayout(event); - } + if ('function' === typeof onLayout) { + onLayout(event); + } - this.setState({ width, height, layout: true }); + this.setState({width, height, layout: true}); } onScroll(event) { - if (-1 === this.scrollState) { - return; - } + if (-1 === this.scrollState) { + return; + } - let { horizontal } = this.props; - let { [horizontal? 'x' : 'y']: offset } = event.nativeEvent.contentOffset; - let { [horizontal? 'width' : 'height']: base, progress } = this.state; + let {horizontal} = this.props; + let {[horizontal ? 'x' : 'y']: offset} = event.nativeEvent.contentOffset; + let {[horizontal ? 'width' : 'height']: base, progress} = this.state; - progress.setValue(this.progress = base? offset / base : 0); + progress.setValue(this.progress = base ? offset / base : 0); - let discreteProgress = Math.round(this.progress); + let discreteProgress = Math.round(this.progress); - if (1 === this.scrollState && equal(discreteProgress, this.progress)) { - this.onScrollEnd(); + if (1 === this.scrollState && equal(discreteProgress, this.progress)) { + this.onScrollEnd(); - this.scrollState = -1; - } + this.scrollState = -1; + } } onScrollBeginDrag() { - this.scrollState = 0; + this.scrollState = 0; } onScrollEndDrag() { - let { horizontal } = this.props; + let {horizontal, paged} = this.props; - /* Vertical pagination is not working on android, scroll by hands */ - if ('android' === Platform.OS && !horizontal) { - this.scrollToPage(Math.round(this.progress)); - } + /* Vertical pagination is not working on android, scroll by hands */ + if ('android' === Platform.OS && !horizontal & paged) { + this.scrollToPage(Math.round(this.progress)); + } - this.scrollState = 1; + this.scrollState = 1; } onScrollEnd() { - let { onScrollEnd } = this.props; + let {onScrollEnd} = this.props; - if ('function' === typeof onScrollEnd) { - onScrollEnd(Math.round(this.progress)); - } + if ('function' === typeof onScrollEnd) { + onScrollEnd(Math.round(this.progress)); + } } scrollToPage(page, animated = true) { - let { horizontal } = this.props; - let { [horizontal? 'width' : 'height']: base } = this.state; - - if (animated) { - this.scrollState = 1; - } - - if (this.mounted && this.scroll) { - this.scroll.scrollTo({ - [horizontal? 'x' : 'y']: page * base, - animated, - }); - } + let {horizontal} = this.props; + let {[horizontal ? 'width' : 'height']: base} = this.state; + + if (animated) { + this.scrollState = 1; + } + + if (this.mounted && this.scroll) { + this.scroll.scrollTo({ + [horizontal ? 'x' : 'y']: page * base, + animated, + }); + } } isDragging() { - return 0 === this.scrollState; + return 0 === this.scrollState; } isDecelerating() { - return 1 === this.scrollState; + return 1 === this.scrollState; } renderPage(page, index) { - let { width, height, progress } = this.state; - let { children, horizontal, rtl } = this.props; + let {width, height, progress} = this.state; + let {children, horizontal, rtl} = this.props; - let pages = Children.count(children); + let pages = Children.count(children); - let pageStyle = (horizontal && rtl)? - styles.rtl: - null; + let pageStyle = (horizontal && rtl) ? + styles.rtl : + null; - /* Adjust progress by page index */ - progress = Animated.add(progress, -index); + /* Adjust progress by page index */ + progress = Animated.add(progress, -index); - return ( - - {React.cloneElement(page, { index, pages, progress })} - - ); + return ( + + {React.cloneElement(page, {index, pages, progress})} + + ); } renderPager(pager) { - let { renderPager, horizontal, rtl } = this.props; + let {renderPager, horizontal, rtl} = this.props; - if ('function' === typeof renderPager) { - return renderPager({ horizontal, rtl, ...pager }); - } + if ('function' === typeof renderPager) { + return renderPager({horizontal, rtl, ...pager}); + } - let { indicatorPosition } = pager; + let {indicatorPosition} = pager; - if ('none' === indicatorPosition) { - return null; - } + if ('none' === indicatorPosition) { + return null; + } - let indicatorStyle = (horizontal && rtl)? - styles.rtl: - null; + let indicatorStyle = (horizontal && rtl) ? + styles.rtl : + null; - return ( - - - - ); + return ( + + + + ); } renderPages(props) { - let { horizontal, rtl, style, children } = this.props; - let { [horizontal? 'width' : 'height']: base, layout } = this.state; - - if (!layout) { - return null; - } - - let scrollStyle = (horizontal && rtl)? - styles.rtl: - null; - - let contentOffset = { - [horizontal? 'x' : 'y']: base * Math.floor(this.progress), - [horizontal? 'y' : 'x']: 0, - }; - - return ( - - {Children.map(children, this.renderPage)} - - ); + let {horizontal, rtl, style, children} = this.props; + let {[horizontal ? 'width' : 'height']: base, layout} = this.state; + + if (!layout) { + return null; + } + + let scrollStyle = (horizontal && rtl) ? + styles.rtl : + null; + + let contentOffset = { + [horizontal ? 'x' : 'y']: base * Math.floor(this.progress), + [horizontal ? 'y' : 'x']: 0, + }; + + return ( + + {Children.map(children, this.renderPage)} + + ); } render() { - let { progress } = this.state; - let { horizontal } = this.props; - let { - style, - containerStyle, - children, - indicatorColor, - indicatorOpacity, - indicatorPosition = horizontal? 'bottom' : 'right', - ...props - } = this.props; - - let pages = Children.count(children); - - let Pager = () => - this.renderPager({ - pages, - progress, - indicatorColor, - indicatorOpacity, - indicatorPosition, - }); - - return ( - - {this.renderPages(props)} - - - - ); + let {progress} = this.state; + let {horizontal} = this.props; + let { + style, + containerStyle, + children, + indicatorColor, + indicatorOpacity, + indicatorPosition = horizontal ? 'bottom' : 'right', + ...props + } = this.props; + + let pages = Children.count(children); + + let Pager = () => + this.renderPager({ + pages, + progress, + indicatorColor, + indicatorOpacity, + indicatorPosition, + }); + + return ( + + {this.renderPages(props)} + + + + ); } } From 7ec179bf9b71fdf32f69f1793382d5ff4038fe57 Mon Sep 17 00:00:00 2001 From: Suraj Tiwari Date: Sun, 31 Mar 2019 00:10:08 +0530 Subject: [PATCH 4/8] updated docs for new parameters --- readme.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/readme.md b/readme.md index 393100b..157bf10 100644 --- a/readme.md +++ b/readme.md @@ -65,12 +65,13 @@ class Example extends Component { indicatorColor | Page indicator color | String | rgb(255, 255, 255) indicatorOpacity | Page indicator opacity (inactive dots) | Number | 0.30 indicatorPosition | Page indicator position | String | bottom + paged | Page Scroll Type . | Boolean| true containerStyle | Style for container view | Object | - progress | Animated.Value updated with progress | Object | - onScrollEnd | Scroll end callback | Function | - renderPager | Render pager callback | Function | - -Possible values for `indicatorPosition` are `none`, `top`, `right`, `bottom` and `left` +Possible values for `indicatorPosition` are `none`, `top`, `right`, `bottom`, `left`, `bottomLeft`, `bottomRight`, `topLeft` and `topRight`; ## Methods From ea130d73c3b6d29c10c6b968eba4eaf969c1eddf Mon Sep 17 00:00:00 2001 From: Suraj Tiwari Date: Sun, 31 Mar 2019 00:14:44 +0530 Subject: [PATCH 5/8] format code --- src/components/pages/index.js | 549 ++++++++++++++++++++-------------- 1 file changed, 327 insertions(+), 222 deletions(-) diff --git a/src/components/pages/index.js b/src/components/pages/index.js index f6b657b..0e60aba 100644 --- a/src/components/pages/index.js +++ b/src/components/pages/index.js @@ -1,6 +1,15 @@ import PropTypes from 'prop-types'; -import React, {PureComponent, Children} from 'react'; -import {View, ScrollView, Animated, Platform, ViewPropTypes} from 'react-native'; +import React, { + PureComponent, + Children +} from 'react'; +import { + View, + ScrollView, + Animated, + Platform, + ViewPropTypes +} from 'react-native'; import Indicator from '../indicator'; import styles from './styles'; @@ -13,297 +22,393 @@ function equal(a, b) { export default class Pages extends PureComponent { static defaultProps = { - pagingEnabled: true, - showsHorizontalScrollIndicator: false, - showsVerticalScrollIndicator: false, - scrollEventThrottle: 30, - scrollsToTop: false, + pagingEnabled: true, + showsHorizontalScrollIndicator: false, + showsVerticalScrollIndicator: false, + scrollEventThrottle: 30, + scrollsToTop: false, - indicatorColor: 'rgb(255, 255, 255)', - indicatorOpacity: 0.30, + indicatorColor: 'rgb(255, 255, 255)', + indicatorOpacity: 0.30, - startPage: 0, + startPage: 0, - horizontal: true, - rtl: false, - paged: true + horizontal: true, + rtl: false, + paged: true }; static propTypes = { - style: ViewPropTypes.style, - containerStyle: ViewPropTypes.style, - - indicatorColor: PropTypes.string, - indicatorOpacity: PropTypes.number, - indicatorPosition: PropTypes.oneOf([ - 'none', - 'top', - 'right', - 'bottom', - 'left', - 'bottomLeft', - 'bottomRight', - 'topLeft', - 'topRight', - ]), - - startPage: PropTypes.number, - progress: PropTypes.instanceOf(Animated.Value), - - horizontal: PropTypes.bool, - rtl: PropTypes.bool, - - children: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.node), - PropTypes.node, - ]), - - onLayout: PropTypes.func, - onScrollEnd: PropTypes.func, - renderPager: PropTypes.func, - paged: PropTypes.bool + style: ViewPropTypes.style, + containerStyle: ViewPropTypes.style, + + indicatorColor: PropTypes.string, + indicatorOpacity: PropTypes.number, + indicatorPosition: PropTypes.oneOf([ + 'none', + 'top', + 'right', + 'bottom', + 'left', + 'bottomLeft', + 'bottomRight', + 'topLeft', + 'topRight', + ]), + + startPage: PropTypes.number, + progress: PropTypes.instanceOf(Animated.Value), + + horizontal: PropTypes.bool, + rtl: PropTypes.bool, + + children: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.node), + PropTypes.node, + ]), + + onLayout: PropTypes.func, + onScrollEnd: PropTypes.func, + renderPager: PropTypes.func, + paged: PropTypes.bool }; constructor(props) { - super(props); - - this.onLayout = this.onLayout.bind(this); - this.onScroll = this.onScroll.bind(this); - this.onScrollBeginDrag = this.onScrollBeginDrag.bind(this); - this.onScrollEndDrag = this.onScrollEndDrag.bind(this); - - this.updateRef = this.updateRef.bind(this, 'scroll'); - this.renderPage = this.renderPage.bind(this); - - let {startPage, progress = new Animated.Value(startPage)} = this.props; - - this.progress = startPage; - this.mounted = false; - this.scrollState = -1; - - this.state = { - layout: false, - width: 0, - height: 0, - progress, - }; + super(props); + + this.onLayout = this.onLayout.bind(this); + this.onScroll = this.onScroll.bind(this); + this.onScrollBeginDrag = this.onScrollBeginDrag.bind(this); + this.onScrollEndDrag = this.onScrollEndDrag.bind(this); + + this.updateRef = this.updateRef.bind(this, 'scroll'); + this.renderPage = this.renderPage.bind(this); + + let { + startPage, + progress = new Animated.Value(startPage) + } = this.props; + + this.progress = startPage; + this.mounted = false; + this.scrollState = -1; + + this.state = { + layout: false, + width: 0, + height: 0, + progress, + }; } componentDidMount() { - this.mounted = true; + this.mounted = true; } componentDidUpdate() { - if (-1 === this.scrollState) { - /* Fix scroll position after layout update */ - requestAnimationFrame(() => { - this.scrollToPage(Math.floor(this.progress), false); - }); - } + if (-1 === this.scrollState) { + /* Fix scroll position after layout update */ + requestAnimationFrame(() => { + this.scrollToPage(Math.floor(this.progress), false); + }); + } } componentWillUnmount() { - this.mounted = false; + this.mounted = false; } componentWillReceiveProps(props) { - let {progress} = props; + let { + progress + } = props; - if (progress !== this.props.progress) { - progress.setValue(this.progress); + if (progress !== this.props.progress) { + progress.setValue(this.progress); - this.setState({progress}); - } + this.setState({ + progress + }); + } } updateRef(name, ref) { - this[name] = ref; + this[name] = ref; } onLayout(event) { - let {width, height} = event.nativeEvent.layout; - let {onLayout} = this.props; - - if ('function' === typeof onLayout) { - onLayout(event); - } - - this.setState({width, height, layout: true}); + let { + width, + height + } = event.nativeEvent.layout; + let { + onLayout + } = this.props; + + if ('function' === typeof onLayout) { + onLayout(event); + } + + this.setState({ + width, + height, + layout: true + }); } onScroll(event) { - if (-1 === this.scrollState) { - return; - } + if (-1 === this.scrollState) { + return; + } - let {horizontal} = this.props; - let {[horizontal ? 'x' : 'y']: offset} = event.nativeEvent.contentOffset; - let {[horizontal ? 'width' : 'height']: base, progress} = this.state; + let { + horizontal + } = this.props; + let { + [horizontal ? 'x' : 'y']: offset + } = event.nativeEvent.contentOffset; + let { + [horizontal ? 'width' : 'height']: base, progress + } = this.state; - progress.setValue(this.progress = base ? offset / base : 0); + progress.setValue(this.progress = base ? offset / base : 0); - let discreteProgress = Math.round(this.progress); + let discreteProgress = Math.round(this.progress); - if (1 === this.scrollState && equal(discreteProgress, this.progress)) { - this.onScrollEnd(); + if (1 === this.scrollState && equal(discreteProgress, this.progress)) { + this.onScrollEnd(); - this.scrollState = -1; - } + this.scrollState = -1; + } } onScrollBeginDrag() { - this.scrollState = 0; + this.scrollState = 0; } onScrollEndDrag() { - let {horizontal, paged} = this.props; + let { + horizontal, + paged + } = this.props; - /* Vertical pagination is not working on android, scroll by hands */ - if ('android' === Platform.OS && !horizontal & paged) { - this.scrollToPage(Math.round(this.progress)); - } + /* Vertical pagination is not working on android, scroll by hands */ + if ('android' === Platform.OS && !horizontal & paged) { + this.scrollToPage(Math.round(this.progress)); + } - this.scrollState = 1; + this.scrollState = 1; } onScrollEnd() { - let {onScrollEnd} = this.props; + let { + onScrollEnd + } = this.props; - if ('function' === typeof onScrollEnd) { - onScrollEnd(Math.round(this.progress)); - } + if ('function' === typeof onScrollEnd) { + onScrollEnd(Math.round(this.progress)); + } } scrollToPage(page, animated = true) { - let {horizontal} = this.props; - let {[horizontal ? 'width' : 'height']: base} = this.state; - - if (animated) { - this.scrollState = 1; - } - - if (this.mounted && this.scroll) { - this.scroll.scrollTo({ - [horizontal ? 'x' : 'y']: page * base, - animated, - }); - } + let { + horizontal + } = this.props; + let { + [horizontal ? 'width' : 'height']: base + } = this.state; + + if (animated) { + this.scrollState = 1; + } + + if (this.mounted && this.scroll) { + this.scroll.scrollTo({ + [horizontal ? 'x' : 'y']: page * base, + animated, + }); + } } isDragging() { - return 0 === this.scrollState; + return 0 === this.scrollState; } isDecelerating() { - return 1 === this.scrollState; + return 1 === this.scrollState; } renderPage(page, index) { - let {width, height, progress} = this.state; - let {children, horizontal, rtl} = this.props; - - let pages = Children.count(children); - - let pageStyle = (horizontal && rtl) ? - styles.rtl : - null; - - /* Adjust progress by page index */ - progress = Animated.add(progress, -index); - - return ( - - {React.cloneElement(page, {index, pages, progress})} - - ); + let { + width, + height, + progress + } = this.state; + let { + children, + horizontal, + rtl + } = this.props; + + let pages = Children.count(children); + + let pageStyle = (horizontal && rtl) ? + styles.rtl : + null; + + /* Adjust progress by page index */ + progress = Animated.add(progress, -index); + + return ( < + View style = { + [{ + width, + height + }, pageStyle] + } > { + React.cloneElement(page, { + index, + pages, + progress + }) + } < + /View> + ); } renderPager(pager) { - let {renderPager, horizontal, rtl} = this.props; - - if ('function' === typeof renderPager) { - return renderPager({horizontal, rtl, ...pager}); + let { + renderPager, + horizontal, + rtl + } = this.props; + + if ('function' === typeof renderPager) { + return renderPager({ + horizontal, + rtl, + ...pager + }); + } + + let { + indicatorPosition + } = pager; + + if ('none' === indicatorPosition) { + return null; + } + + let indicatorStyle = (horizontal && rtl) ? + styles.rtl : + null; + + return ( < + View style = { + [styles[indicatorPosition], indicatorStyle] + } > + < + Indicator { ...pager } - - let {indicatorPosition} = pager; - - if ('none' === indicatorPosition) { - return null; - } - - let indicatorStyle = (horizontal && rtl) ? - styles.rtl : - null; - - return ( - - - - ); + /> < + /View> + ); } renderPages(props) { - let {horizontal, rtl, style, children} = this.props; - let {[horizontal ? 'width' : 'height']: base, layout} = this.state; - - if (!layout) { - return null; + let { + horizontal, + rtl, + style, + children + } = this.props; + let { + [horizontal ? 'width' : 'height']: base, layout + } = this.state; + + if (!layout) { + return null; + } + + let scrollStyle = (horizontal && rtl) ? + styles.rtl : + null; + + let contentOffset = { + [horizontal ? 'x' : 'y']: base * Math.floor(this.progress), + [horizontal ? 'y' : 'x']: 0, + }; + + return ( < + ScrollView { ...props } - - let scrollStyle = (horizontal && rtl) ? - styles.rtl : - null; - - let contentOffset = { - [horizontal ? 'x' : 'y']: base * Math.floor(this.progress), - [horizontal ? 'y' : 'x']: 0, - }; - - return ( - - {Children.map(children, this.renderPage)} - - ); + style = { + [styles.container, style, scrollStyle] + } + onScroll = { + this.onScroll + } + onScrollBeginDrag = { + this.onScrollBeginDrag + } + onScrollEndDrag = { + this.onScrollEndDrag + } + contentOffset = { + contentOffset + } + ref = { + this.updateRef + } > + { + Children.map(children, this.renderPage) + } < + /ScrollView> + ); } render() { - let {progress} = this.state; - let {horizontal} = this.props; - let { - style, - containerStyle, - children, - indicatorColor, - indicatorOpacity, - indicatorPosition = horizontal ? 'bottom' : 'right', - ...props - } = this.props; - - let pages = Children.count(children); - - let Pager = () => - this.renderPager({ - pages, - progress, - indicatorColor, - indicatorOpacity, - indicatorPosition, - }); - - return ( - - {this.renderPages(props)} - - - - ); + let { + progress + } = this.state; + let { + horizontal + } = this.props; + let { + style, + containerStyle, + children, + indicatorColor, + indicatorOpacity, + indicatorPosition = horizontal ? 'bottom' : 'right', + ...props + } = this.props; + + let pages = Children.count(children); + + let Pager = () => + this.renderPager({ + pages, + progress, + indicatorColor, + indicatorOpacity, + indicatorPosition, + }); + + return ( < + View style = { + [styles.container, containerStyle] + } + onLayout = { + this.onLayout + } > { + this.renderPages(props) + } + + < + Pager / > + < + /View> + ); } } From 9568776a62cbeb660973ae9658c70b51bd893f47 Mon Sep 17 00:00:00 2001 From: Suraj Tiwari Date: Sun, 31 Mar 2019 00:15:17 +0530 Subject: [PATCH 6/8] revert invalid format --- src/components/pages/index.js | 629 ++++++++++++++-------------------- 1 file changed, 262 insertions(+), 367 deletions(-) diff --git a/src/components/pages/index.js b/src/components/pages/index.js index 0e60aba..92bbf0f 100644 --- a/src/components/pages/index.js +++ b/src/components/pages/index.js @@ -1,15 +1,6 @@ import PropTypes from 'prop-types'; -import React, { - PureComponent, - Children -} from 'react'; -import { - View, - ScrollView, - Animated, - Platform, - ViewPropTypes -} from 'react-native'; +import React, {PureComponent, Children} from 'react'; +import {View, ScrollView, Animated, Platform, ViewPropTypes} from 'react-native'; import Indicator from '../indicator'; import styles from './styles'; @@ -17,398 +8,302 @@ import styles from './styles'; const floatEpsilon = Math.pow(2, -23); function equal(a, b) { - return Math.abs(a - b) <= floatEpsilon * Math.max(Math.abs(a), Math.abs(b)); + return Math.abs(a - b) <= floatEpsilon * Math.max(Math.abs(a), Math.abs(b)); } export default class Pages extends PureComponent { - static defaultProps = { - pagingEnabled: true, - showsHorizontalScrollIndicator: false, - showsVerticalScrollIndicator: false, - scrollEventThrottle: 30, - scrollsToTop: false, - - indicatorColor: 'rgb(255, 255, 255)', - indicatorOpacity: 0.30, - - startPage: 0, - - horizontal: true, - rtl: false, - paged: true - }; - - static propTypes = { - style: ViewPropTypes.style, - containerStyle: ViewPropTypes.style, - - indicatorColor: PropTypes.string, - indicatorOpacity: PropTypes.number, - indicatorPosition: PropTypes.oneOf([ - 'none', - 'top', - 'right', - 'bottom', - 'left', - 'bottomLeft', - 'bottomRight', - 'topLeft', - 'topRight', - ]), - - startPage: PropTypes.number, - progress: PropTypes.instanceOf(Animated.Value), - - horizontal: PropTypes.bool, - rtl: PropTypes.bool, - - children: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.node), - PropTypes.node, - ]), - - onLayout: PropTypes.func, - onScrollEnd: PropTypes.func, - renderPager: PropTypes.func, - paged: PropTypes.bool - }; - - constructor(props) { - super(props); - - this.onLayout = this.onLayout.bind(this); - this.onScroll = this.onScroll.bind(this); - this.onScrollBeginDrag = this.onScrollBeginDrag.bind(this); - this.onScrollEndDrag = this.onScrollEndDrag.bind(this); - - this.updateRef = this.updateRef.bind(this, 'scroll'); - this.renderPage = this.renderPage.bind(this); - - let { - startPage, - progress = new Animated.Value(startPage) - } = this.props; - - this.progress = startPage; - this.mounted = false; - this.scrollState = -1; - - this.state = { - layout: false, - width: 0, - height: 0, - progress, + static defaultProps = { + pagingEnabled: true, + showsHorizontalScrollIndicator: false, + showsVerticalScrollIndicator: false, + scrollEventThrottle: 30, + scrollsToTop: false, + + indicatorColor: 'rgb(255, 255, 255)', + indicatorOpacity: 0.30, + + startPage: 0, + + horizontal: true, + rtl: false, + paged: true + }; + + static propTypes = { + style: ViewPropTypes.style, + containerStyle: ViewPropTypes.style, + + indicatorColor: PropTypes.string, + indicatorOpacity: PropTypes.number, + indicatorPosition: PropTypes.oneOf([ + 'none', + 'top', + 'right', + 'bottom', + 'left', + 'bottomLeft', + 'bottomRight', + 'topLeft', + 'topRight', + ]), + + startPage: PropTypes.number, + progress: PropTypes.instanceOf(Animated.Value), + + horizontal: PropTypes.bool, + rtl: PropTypes.bool, + + children: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.node), + PropTypes.node, + ]), + + onLayout: PropTypes.func, + onScrollEnd: PropTypes.func, + renderPager: PropTypes.func, + paged: PropTypes.bool }; - } - - componentDidMount() { - this.mounted = true; - } - - componentDidUpdate() { - if (-1 === this.scrollState) { - /* Fix scroll position after layout update */ - requestAnimationFrame(() => { - this.scrollToPage(Math.floor(this.progress), false); - }); - } - } - componentWillUnmount() { - this.mounted = false; - } + constructor(props) { + super(props); - componentWillReceiveProps(props) { - let { - progress - } = props; + this.onLayout = this.onLayout.bind(this); + this.onScroll = this.onScroll.bind(this); + this.onScrollBeginDrag = this.onScrollBeginDrag.bind(this); + this.onScrollEndDrag = this.onScrollEndDrag.bind(this); - if (progress !== this.props.progress) { - progress.setValue(this.progress); + this.updateRef = this.updateRef.bind(this, 'scroll'); + this.renderPage = this.renderPage.bind(this); - this.setState({ - progress - }); - } - } - - updateRef(name, ref) { - this[name] = ref; - } - - onLayout(event) { - let { - width, - height - } = event.nativeEvent.layout; - let { - onLayout - } = this.props; - - if ('function' === typeof onLayout) { - onLayout(event); + let {startPage, progress = new Animated.Value(startPage)} = this.props; + + this.progress = startPage; + this.mounted = false; + this.scrollState = -1; + + this.state = { + layout: false, + width: 0, + height: 0, + progress, + }; } - this.setState({ - width, - height, - layout: true - }); - } + componentDidMount() { + this.mounted = true; + } - onScroll(event) { - if (-1 === this.scrollState) { - return; + componentDidUpdate() { + if (-1 === this.scrollState) { + /* Fix scroll position after layout update */ + requestAnimationFrame(() => { + this.scrollToPage(Math.floor(this.progress), false); + }); + } } - let { - horizontal - } = this.props; - let { - [horizontal ? 'x' : 'y']: offset - } = event.nativeEvent.contentOffset; - let { - [horizontal ? 'width' : 'height']: base, progress - } = this.state; + componentWillUnmount() { + this.mounted = false; + } - progress.setValue(this.progress = base ? offset / base : 0); + componentWillReceiveProps(props) { + let {progress} = props; - let discreteProgress = Math.round(this.progress); + if (progress !== this.props.progress) { + progress.setValue(this.progress); - if (1 === this.scrollState && equal(discreteProgress, this.progress)) { - this.onScrollEnd(); + this.setState({progress}); + } + } - this.scrollState = -1; + updateRef(name, ref) { + this[name] = ref; } - } - onScrollBeginDrag() { - this.scrollState = 0; - } + onLayout(event) { + let {width, height} = event.nativeEvent.layout; + let {onLayout} = this.props; - onScrollEndDrag() { - let { - horizontal, - paged - } = this.props; + if ('function' === typeof onLayout) { + onLayout(event); + } - /* Vertical pagination is not working on android, scroll by hands */ - if ('android' === Platform.OS && !horizontal & paged) { - this.scrollToPage(Math.round(this.progress)); + this.setState({width, height, layout: true}); } - this.scrollState = 1; - } + onScroll(event) { + if (-1 === this.scrollState) { + return; + } + + let {horizontal} = this.props; + let {[horizontal ? 'x' : 'y']: offset} = event.nativeEvent.contentOffset; + let {[horizontal ? 'width' : 'height']: base, progress} = this.state; + + progress.setValue(this.progress = base ? offset / base : 0); + + let discreteProgress = Math.round(this.progress); - onScrollEnd() { - let { - onScrollEnd - } = this.props; + if (1 === this.scrollState && equal(discreteProgress, this.progress)) { + this.onScrollEnd(); - if ('function' === typeof onScrollEnd) { - onScrollEnd(Math.round(this.progress)); + this.scrollState = -1; + } } - } - - scrollToPage(page, animated = true) { - let { - horizontal - } = this.props; - let { - [horizontal ? 'width' : 'height']: base - } = this.state; - - if (animated) { - this.scrollState = 1; + + onScrollBeginDrag() { + this.scrollState = 0; + } + + onScrollEndDrag() { + let {horizontal, paged} = this.props; + + /* Vertical pagination is not working on android, scroll by hands */ + if ('android' === Platform.OS && !horizontal & paged) { + this.scrollToPage(Math.round(this.progress)); + } + + this.scrollState = 1; } - if (this.mounted && this.scroll) { - this.scroll.scrollTo({ - [horizontal ? 'x' : 'y']: page * base, - animated, - }); + onScrollEnd() { + let {onScrollEnd} = this.props; + + if ('function' === typeof onScrollEnd) { + onScrollEnd(Math.round(this.progress)); + } } - } - - isDragging() { - return 0 === this.scrollState; - } - - isDecelerating() { - return 1 === this.scrollState; - } - - renderPage(page, index) { - let { - width, - height, - progress - } = this.state; - let { - children, - horizontal, - rtl - } = this.props; - - let pages = Children.count(children); - - let pageStyle = (horizontal && rtl) ? - styles.rtl : - null; - - /* Adjust progress by page index */ - progress = Animated.add(progress, -index); - - return ( < - View style = { - [{ - width, - height - }, pageStyle] - } > { - React.cloneElement(page, { - index, - pages, - progress - }) - } < - /View> - ); - } - - renderPager(pager) { - let { - renderPager, - horizontal, - rtl - } = this.props; - - if ('function' === typeof renderPager) { - return renderPager({ - horizontal, - rtl, - ...pager - }); + + scrollToPage(page, animated = true) { + let {horizontal} = this.props; + let {[horizontal ? 'width' : 'height']: base} = this.state; + + if (animated) { + this.scrollState = 1; + } + + if (this.mounted && this.scroll) { + this.scroll.scrollTo({ + [horizontal ? 'x' : 'y']: page * base, + animated, + }); + } } - let { - indicatorPosition - } = pager; + isDragging() { + return 0 === this.scrollState; + } - if ('none' === indicatorPosition) { - return null; + isDecelerating() { + return 1 === this.scrollState; } - let indicatorStyle = (horizontal && rtl) ? - styles.rtl : - null; - - return ( < - View style = { - [styles[indicatorPosition], indicatorStyle] - } > - < - Indicator { ...pager - } - /> < - /View> - ); - } - - renderPages(props) { - let { - horizontal, - rtl, - style, - children - } = this.props; - let { - [horizontal ? 'width' : 'height']: base, layout - } = this.state; - - if (!layout) { - return null; + renderPage(page, index) { + let {width, height, progress} = this.state; + let {children, horizontal, rtl} = this.props; + + let pages = Children.count(children); + + let pageStyle = (horizontal && rtl) ? + styles.rtl : + null; + + /* Adjust progress by page index */ + progress = Animated.add(progress, -index); + + return ( + + {React.cloneElement(page, {index, pages, progress})} + + ); } - let scrollStyle = (horizontal && rtl) ? - styles.rtl : - null; + renderPager(pager) { + let {renderPager, horizontal, rtl} = this.props; - let contentOffset = { - [horizontal ? 'x' : 'y']: base * Math.floor(this.progress), - [horizontal ? 'y' : 'x']: 0, - }; + if ('function' === typeof renderPager) { + return renderPager({horizontal, rtl, ...pager}); + } + + let {indicatorPosition} = pager; + + if ('none' === indicatorPosition) { + return null; + } - return ( < - ScrollView { ...props - } - style = { - [styles.container, style, scrollStyle] - } - onScroll = { - this.onScroll - } - onScrollBeginDrag = { - this.onScrollBeginDrag - } - onScrollEndDrag = { - this.onScrollEndDrag - } - contentOffset = { - contentOffset - } - ref = { - this.updateRef - } > - { - Children.map(children, this.renderPage) - } < - /ScrollView> - ); - } - - render() { - let { - progress - } = this.state; - let { - horizontal - } = this.props; - let { - style, - containerStyle, - children, - indicatorColor, - indicatorOpacity, - indicatorPosition = horizontal ? 'bottom' : 'right', - ...props - } = this.props; - - let pages = Children.count(children); - - let Pager = () => - this.renderPager({ - pages, - progress, - indicatorColor, - indicatorOpacity, - indicatorPosition, - }); - - return ( < - View style = { - [styles.container, containerStyle] - } - onLayout = { - this.onLayout - } > { - this.renderPages(props) - } - - < - Pager / > - < - /View> - ); - } + let indicatorStyle = (horizontal && rtl) ? + styles.rtl : + null; + + return ( + + + + ); + } + + renderPages(props) { + let {horizontal, rtl, style, children} = this.props; + let {[horizontal ? 'width' : 'height']: base, layout} = this.state; + + if (!layout) { + return null; + } + + let scrollStyle = (horizontal && rtl) ? + styles.rtl : + null; + + let contentOffset = { + [horizontal ? 'x' : 'y']: base * Math.floor(this.progress), + [horizontal ? 'y' : 'x']: 0, + }; + + return ( + + {Children.map(children, this.renderPage)} + + ); + } + + render() { + let {progress} = this.state; + let {horizontal} = this.props; + let { + style, + containerStyle, + children, + indicatorColor, + indicatorOpacity, + indicatorPosition = horizontal ? 'bottom' : 'right', + ...props + } = this.props; + + let pages = Children.count(children); + + let Pager = () => + this.renderPager({ + pages, + progress, + indicatorColor, + indicatorOpacity, + indicatorPosition, + }); + + return ( + + {this.renderPages(props)} + + + + ); + } } From 4db0ca9c5e9b49f77ebe16faab26932af7b1e08c Mon Sep 17 00:00:00 2001 From: surajtiwari Date: Sun, 31 Mar 2019 00:28:07 +0530 Subject: [PATCH 7/8] code formatting --- src/components/indicator/index.js | 16 +- src/components/indicator/styles.js | 2 +- src/components/pages/index.js | 490 ++++++++++++++--------------- src/components/pages/styles.js | 64 ++-- 4 files changed, 286 insertions(+), 286 deletions(-) diff --git a/src/components/indicator/index.js b/src/components/indicator/index.js index cf45717..f987f85 100644 --- a/src/components/indicator/index.js +++ b/src/components/indicator/index.js @@ -1,6 +1,6 @@ import PropTypes from 'prop-types'; -import React, { PureComponent } from 'react'; -import { View, Animated, ViewPropTypes } from 'react-native'; +import React, {PureComponent} from 'react'; +import {View, Animated, ViewPropTypes} from 'react-native'; import styles from './styles'; @@ -50,20 +50,20 @@ export default class Indicator extends PureComponent { ], }); - let style = { opacity, backgroundColor }; + let style = {opacity, backgroundColor}; return ( - + ); }); let flexDirection = /^(top|bottom)$/ - .test(indicatorPosition)? - 'row': - 'column'; + .test(indicatorPosition) ? + 'row' : + 'column'; return ( - + {dots} ); diff --git a/src/components/indicator/styles.js b/src/components/indicator/styles.js index b68c7d1..32cb2c2 100644 --- a/src/components/indicator/styles.js +++ b/src/components/indicator/styles.js @@ -1,4 +1,4 @@ -import { StyleSheet } from 'react-native'; +import {StyleSheet} from 'react-native'; export default StyleSheet.create({ container: { diff --git a/src/components/pages/index.js b/src/components/pages/index.js index 92bbf0f..97b3fac 100644 --- a/src/components/pages/index.js +++ b/src/components/pages/index.js @@ -8,302 +8,302 @@ import styles from './styles'; const floatEpsilon = Math.pow(2, -23); function equal(a, b) { - return Math.abs(a - b) <= floatEpsilon * Math.max(Math.abs(a), Math.abs(b)); + return Math.abs(a - b) <= floatEpsilon * Math.max(Math.abs(a), Math.abs(b)); } export default class Pages extends PureComponent { - static defaultProps = { - pagingEnabled: true, - showsHorizontalScrollIndicator: false, - showsVerticalScrollIndicator: false, - scrollEventThrottle: 30, - scrollsToTop: false, - - indicatorColor: 'rgb(255, 255, 255)', - indicatorOpacity: 0.30, - - startPage: 0, - - horizontal: true, - rtl: false, - paged: true + static defaultProps = { + pagingEnabled: true, + showsHorizontalScrollIndicator: false, + showsVerticalScrollIndicator: false, + scrollEventThrottle: 30, + scrollsToTop: false, + + indicatorColor: 'rgb(255, 255, 255)', + indicatorOpacity: 0.30, + + startPage: 0, + + horizontal: true, + rtl: false, + paged: true + }; + + static propTypes = { + style: ViewPropTypes.style, + containerStyle: ViewPropTypes.style, + + indicatorColor: PropTypes.string, + indicatorOpacity: PropTypes.number, + indicatorPosition: PropTypes.oneOf([ + 'none', + 'top', + 'right', + 'bottom', + 'left', + 'bottomLeft', + 'bottomRight', + 'topLeft', + 'topRight', + ]), + + startPage: PropTypes.number, + progress: PropTypes.instanceOf(Animated.Value), + + horizontal: PropTypes.bool, + rtl: PropTypes.bool, + + children: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.node), + PropTypes.node, + ]), + + onLayout: PropTypes.func, + onScrollEnd: PropTypes.func, + renderPager: PropTypes.func, + paged: PropTypes.bool + }; + + constructor(props) { + super(props); + + this.onLayout = this.onLayout.bind(this); + this.onScroll = this.onScroll.bind(this); + this.onScrollBeginDrag = this.onScrollBeginDrag.bind(this); + this.onScrollEndDrag = this.onScrollEndDrag.bind(this); + + this.updateRef = this.updateRef.bind(this, 'scroll'); + this.renderPage = this.renderPage.bind(this); + + let {startPage, progress = new Animated.Value(startPage)} = this.props; + + this.progress = startPage; + this.mounted = false; + this.scrollState = -1; + + this.state = { + layout: false, + width: 0, + height: 0, + progress, }; + } + + componentDidMount() { + this.mounted = true; + } + + componentDidUpdate() { + if (-1 === this.scrollState) { + /* Fix scroll position after layout update */ + requestAnimationFrame(() => { + this.scrollToPage(Math.floor(this.progress), false); + }); + } + } - static propTypes = { - style: ViewPropTypes.style, - containerStyle: ViewPropTypes.style, - - indicatorColor: PropTypes.string, - indicatorOpacity: PropTypes.number, - indicatorPosition: PropTypes.oneOf([ - 'none', - 'top', - 'right', - 'bottom', - 'left', - 'bottomLeft', - 'bottomRight', - 'topLeft', - 'topRight', - ]), - - startPage: PropTypes.number, - progress: PropTypes.instanceOf(Animated.Value), - - horizontal: PropTypes.bool, - rtl: PropTypes.bool, - - children: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.node), - PropTypes.node, - ]), - - onLayout: PropTypes.func, - onScrollEnd: PropTypes.func, - renderPager: PropTypes.func, - paged: PropTypes.bool - }; + componentWillUnmount() { + this.mounted = false; + } - constructor(props) { - super(props); + componentWillReceiveProps(props) { + let {progress} = props; - this.onLayout = this.onLayout.bind(this); - this.onScroll = this.onScroll.bind(this); - this.onScrollBeginDrag = this.onScrollBeginDrag.bind(this); - this.onScrollEndDrag = this.onScrollEndDrag.bind(this); + if (progress !== this.props.progress) { + progress.setValue(this.progress); - this.updateRef = this.updateRef.bind(this, 'scroll'); - this.renderPage = this.renderPage.bind(this); + this.setState({progress}); + } + } - let {startPage, progress = new Animated.Value(startPage)} = this.props; + updateRef(name, ref) { + this[name] = ref; + } - this.progress = startPage; - this.mounted = false; - this.scrollState = -1; + onLayout(event) { + let {width, height} = event.nativeEvent.layout; + let {onLayout} = this.props; - this.state = { - layout: false, - width: 0, - height: 0, - progress, - }; + if ('function' === typeof onLayout) { + onLayout(event); } - componentDidMount() { - this.mounted = true; - } + this.setState({width, height, layout: true}); + } - componentDidUpdate() { - if (-1 === this.scrollState) { - /* Fix scroll position after layout update */ - requestAnimationFrame(() => { - this.scrollToPage(Math.floor(this.progress), false); - }); - } + onScroll(event) { + if (-1 === this.scrollState) { + return; } - componentWillUnmount() { - this.mounted = false; - } + let {horizontal} = this.props; + let {[horizontal ? 'x' : 'y']: offset} = event.nativeEvent.contentOffset; + let {[horizontal ? 'width' : 'height']: base, progress} = this.state; - componentWillReceiveProps(props) { - let {progress} = props; + progress.setValue(this.progress = base ? offset / base : 0); - if (progress !== this.props.progress) { - progress.setValue(this.progress); + let discreteProgress = Math.round(this.progress); - this.setState({progress}); - } - } + if (1 === this.scrollState && equal(discreteProgress, this.progress)) { + this.onScrollEnd(); - updateRef(name, ref) { - this[name] = ref; + this.scrollState = -1; } + } - onLayout(event) { - let {width, height} = event.nativeEvent.layout; - let {onLayout} = this.props; + onScrollBeginDrag() { + this.scrollState = 0; + } - if ('function' === typeof onLayout) { - onLayout(event); - } + onScrollEndDrag() { + let {horizontal, paged} = this.props; - this.setState({width, height, layout: true}); + /* Vertical pagination is not working on android, scroll by hands */ + if ('android' === Platform.OS && !horizontal & paged) { + this.scrollToPage(Math.round(this.progress)); } - onScroll(event) { - if (-1 === this.scrollState) { - return; - } - - let {horizontal} = this.props; - let {[horizontal ? 'x' : 'y']: offset} = event.nativeEvent.contentOffset; - let {[horizontal ? 'width' : 'height']: base, progress} = this.state; + this.scrollState = 1; + } - progress.setValue(this.progress = base ? offset / base : 0); + onScrollEnd() { + let {onScrollEnd} = this.props; - let discreteProgress = Math.round(this.progress); - - if (1 === this.scrollState && equal(discreteProgress, this.progress)) { - this.onScrollEnd(); - - this.scrollState = -1; - } + if ('function' === typeof onScrollEnd) { + onScrollEnd(Math.round(this.progress)); } + } - onScrollBeginDrag() { - this.scrollState = 0; - } + scrollToPage(page, animated = true) { + let {horizontal} = this.props; + let {[horizontal ? 'width' : 'height']: base} = this.state; - onScrollEndDrag() { - let {horizontal, paged} = this.props; - - /* Vertical pagination is not working on android, scroll by hands */ - if ('android' === Platform.OS && !horizontal & paged) { - this.scrollToPage(Math.round(this.progress)); - } - - this.scrollState = 1; + if (animated) { + this.scrollState = 1; } - onScrollEnd() { - let {onScrollEnd} = this.props; - - if ('function' === typeof onScrollEnd) { - onScrollEnd(Math.round(this.progress)); - } + if (this.mounted && this.scroll) { + this.scroll.scrollTo({ + [horizontal ? 'x' : 'y']: page * base, + animated, + }); } + } - scrollToPage(page, animated = true) { - let {horizontal} = this.props; - let {[horizontal ? 'width' : 'height']: base} = this.state; + isDragging() { + return 0 === this.scrollState; + } - if (animated) { - this.scrollState = 1; - } + isDecelerating() { + return 1 === this.scrollState; + } - if (this.mounted && this.scroll) { - this.scroll.scrollTo({ - [horizontal ? 'x' : 'y']: page * base, - animated, - }); - } - } - - isDragging() { - return 0 === this.scrollState; - } + renderPage(page, index) { + let {width, height, progress} = this.state; + let {children, horizontal, rtl} = this.props; - isDecelerating() { - return 1 === this.scrollState; - } + let pages = Children.count(children); - renderPage(page, index) { - let {width, height, progress} = this.state; - let {children, horizontal, rtl} = this.props; + let pageStyle = (horizontal && rtl) ? + styles.rtl : + null; - let pages = Children.count(children); + /* Adjust progress by page index */ + progress = Animated.add(progress, -index); - let pageStyle = (horizontal && rtl) ? - styles.rtl : - null; + return ( + + {React.cloneElement(page, {index, pages, progress})} + + ); + } - /* Adjust progress by page index */ - progress = Animated.add(progress, -index); + renderPager(pager) { + let {renderPager, horizontal, rtl} = this.props; - return ( - - {React.cloneElement(page, {index, pages, progress})} - - ); + if ('function' === typeof renderPager) { + return renderPager({horizontal, rtl, ...pager}); } - renderPager(pager) { - let {renderPager, horizontal, rtl} = this.props; + let {indicatorPosition} = pager; - if ('function' === typeof renderPager) { - return renderPager({horizontal, rtl, ...pager}); - } + if ('none' === indicatorPosition) { + return null; + } - let {indicatorPosition} = pager; + let indicatorStyle = (horizontal && rtl) ? + styles.rtl : + null; - if ('none' === indicatorPosition) { - return null; - } + return ( + + + + ); + } - let indicatorStyle = (horizontal && rtl) ? - styles.rtl : - null; + renderPages(props) { + let {horizontal, rtl, style, children} = this.props; + let {[horizontal ? 'width' : 'height']: base, layout} = this.state; - return ( - - - - ); + if (!layout) { + return null; } - renderPages(props) { - let {horizontal, rtl, style, children} = this.props; - let {[horizontal ? 'width' : 'height']: base, layout} = this.state; - - if (!layout) { - return null; - } - - let scrollStyle = (horizontal && rtl) ? - styles.rtl : - null; - - let contentOffset = { - [horizontal ? 'x' : 'y']: base * Math.floor(this.progress), - [horizontal ? 'y' : 'x']: 0, - }; - - return ( - - {Children.map(children, this.renderPage)} - - ); - } + let scrollStyle = (horizontal && rtl) ? + styles.rtl : + null; - render() { - let {progress} = this.state; - let {horizontal} = this.props; - let { - style, - containerStyle, - children, - indicatorColor, - indicatorOpacity, - indicatorPosition = horizontal ? 'bottom' : 'right', - ...props - } = this.props; - - let pages = Children.count(children); - - let Pager = () => - this.renderPager({ - pages, - progress, - indicatorColor, - indicatorOpacity, - indicatorPosition, - }); - - return ( - - {this.renderPages(props)} - - - - ); - } + let contentOffset = { + [horizontal ? 'x' : 'y']: base * Math.floor(this.progress), + [horizontal ? 'y' : 'x']: 0, + }; + + return ( + + {Children.map(children, this.renderPage)} + + ); + } + + render() { + let {progress} = this.state; + let {horizontal} = this.props; + let { + style, + containerStyle, + children, + indicatorColor, + indicatorOpacity, + indicatorPosition = horizontal ? 'bottom' : 'right', + ...props + } = this.props; + + let pages = Children.count(children); + + let Pager = () => + this.renderPager({ + pages, + progress, + indicatorColor, + indicatorOpacity, + indicatorPosition, + }); + + return ( + + {this.renderPages(props)} + + + + ); + } } diff --git a/src/components/pages/styles.js b/src/components/pages/styles.js index fd46a82..4a44872 100644 --- a/src/components/pages/styles.js +++ b/src/components/pages/styles.js @@ -2,61 +2,61 @@ import {StyleSheet} from 'react-native'; export default StyleSheet.create({ rtl: { - transform: [{ - rotate: '180deg', - }], + transform: [{ + rotate: '180deg', + }], }, container: { - flex: 1, + flex: 1, }, bottom: { - position: 'absolute', - right: 0, - bottom: 0, - left: 0, + position: 'absolute', + right: 0, + bottom: 0, + left: 0, }, top: { - position: 'absolute', - top: 0, - right: 0, - left: 0, + position: 'absolute', + top: 0, + right: 0, + left: 0, }, left: { - position: 'absolute', - top: 0, - bottom: 0, - left: 0, + position: 'absolute', + top: 0, + bottom: 0, + left: 0, }, right: { - position: 'absolute', - top: 0, - right: 0, - bottom: 0, + position: 'absolute', + top: 0, + right: 0, + bottom: 0, }, topLeft: { - position: 'absolute', - top: 0, - left: 0, + position: 'absolute', + top: 0, + left: 0, }, bottomLeft: { - position: 'absolute', - bottom: 0, - left: 0, + position: 'absolute', + bottom: 0, + left: 0, }, topRight: { - position: 'absolute', - top: 0, - right: 0, + position: 'absolute', + top: 0, + right: 0, }, bottomRight: { - position: 'absolute', - right: 0, - bottom: 0, + position: 'absolute', + right: 0, + bottom: 0, }, }); From 180d8818f08dc1492556969c5780e5cd0a54ef20 Mon Sep 17 00:00:00 2001 From: surajtiwari Date: Thu, 20 Jun 2019 05:43:46 +0530 Subject: [PATCH 8/8] added proptype --- src/components/indicator/index.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/indicator/index.js b/src/components/indicator/index.js index f987f85..a3b84d9 100644 --- a/src/components/indicator/index.js +++ b/src/components/indicator/index.js @@ -17,6 +17,10 @@ export default class Indicator extends PureComponent { 'right', 'bottom', 'left', + 'topRight', + 'topLeft', + 'bottomRight', + 'bottomLeft', ]).isRequired, };