-
Notifications
You must be signed in to change notification settings - Fork 589
/
Pager.js
116 lines (104 loc) Β· 3.12 KB
/
Pager.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
import { get } from 'lodash';
import PropTypes from 'prop-types';
import React from 'react';
import { FlatList } from 'react-native-gesture-handler';
import {
compose,
mapProps,
onlyUpdateForKeys,
withHandlers,
withProps,
withState,
} from 'recompact';
import { dimensionsPropType } from '../../utils';
import { FlexItem } from '../layout';
import PagerControls from './PagerControls';
import PagerItem, { pagerPagePropType } from './PagerItem';
const getItemLayout = (data, index) => {
const { width } = data[index].dimensions;
return {
index,
length: width,
offset: width * index,
};
};
const keyExtractor = ({ name }, index) => (`${name}_${index}`);
const renderItem = props => <PagerItem {...props} />;
const Pager = ({
controlsProps,
currentIndex,
dimensions,
onScroll,
onScrollEndDrag,
pages,
scrollEnabled,
}) => (
<FlexItem>
<FlatList
data={pages}
getItemLayout={getItemLayout}
horizontal
initialScrollIndex={currentIndex}
keyExtractor={keyExtractor}
onScroll={onScroll}
onScrollEndDrag={onScrollEndDrag}
pagingEnabled
renderItem={renderItem}
scrollEnabled={scrollEnabled}
scrollEventThrottle={32}
showsHorizontalScrollIndicator={false}
/>
{scrollEnabled && (
<PagerControls
{...controlsProps}
length={pages.length}
selectedIndex={currentIndex}
/>
)}
</FlexItem>
);
Pager.propTypes = {
controlsProps: PropTypes.shape(PagerControls.propTypes),
currentIndex: PropTypes.number,
dimensions: dimensionsPropType,
onScroll: PropTypes.func,
onScrollEndDrag: PropTypes.func,
pages: PropTypes.arrayOf(pagerPagePropType),
scrollEnabled: PropTypes.bool,
};
export default compose(
withState('currentIndex', 'setCurrentIndex', 0),
mapProps(({ dimensions, pages, ...props }) => ({
...props,
dimensions,
pages: pages.map(page => ({
...page,
dimensions,
})),
})),
withProps(({ pages }) => ({
scrollEnabled: pages.length > 1,
})),
withHandlers({
onScroll: ({ currentIndex, dimensions, setCurrentIndex }) => ({ nativeEvent }) => {
const currentOffsetX = get(nativeEvent, 'contentOffset.x', 0);
const startOffsetX = currentIndex * dimensions.width;
const endOffsetXLeft = (currentIndex - 1) * dimensions.width;
const endOffsetXRight = (currentIndex + 1) * dimensions.width;
const beginningOffset = currentOffsetX - startOffsetX;
let newIndex = currentIndex;
if (beginningOffset > (endOffsetXRight - startOffsetX) / 2) {
newIndex = currentIndex + 1;
} else if (beginningOffset < (endOffsetXLeft - startOffsetX) / 2) {
newIndex = currentIndex - 1;
}
return setCurrentIndex(newIndex < 0 ? 0 : newIndex);
},
onScrollEndDrag: ({ dimensions, setCurrentIndex }) => ({ nativeEvent }) => {
const currentOffsetX = get(nativeEvent, 'contentOffset.x', 0);
const currentScreenIndex = Math.floor(currentOffsetX / dimensions.width);
return setCurrentIndex(currentScreenIndex < 0 ? 0 : currentScreenIndex);
},
}),
onlyUpdateForKeys(['currentIndex']),
)(Pager);