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
|
import React, {useEffect, useState, useMemo} from 'react'
import {FlatList, StyleSheet, View} from 'react-native'
import {Selector} from './Selector'
import {HorzSwipe} from './gestures/HorzSwipe'
import {useAnimatedValue} from '../../lib/useAnimatedValue'
import {useStores} from '../../../state'
const HEADER_ITEM = {_reactKey: '__header__'}
const SELECTOR_ITEM = {_reactKey: '__selector__'}
const STICKY_HEADER_INDICES = [1]
export function ViewSelector({
sections,
items,
refreshing,
swipeEnabled,
renderHeader,
renderItem,
onSelectView,
onRefresh,
onEndReached,
}: {
sections: string[]
items: any[]
refreshing?: boolean
swipeEnabled?: boolean
renderHeader?: () => JSX.Element
renderItem: (item: any) => JSX.Element
onSelectView?: (viewIndex: number) => void
onRefresh?: () => void
onEndReached?: (info: {distanceFromEnd: number}) => void
}) {
const store = useStores()
const [selectedIndex, setSelectedIndex] = useState<number>(0)
const panX = useAnimatedValue(0)
// events
// =
const onSwipeEnd = (dx: number) => {
if (dx !== 0) {
setSelectedIndex(selectedIndex + dx)
}
}
const onPressSelection = (index: number) => setSelectedIndex(index)
useEffect(() => {
store.shell.setViewControllingSwipes(
Boolean(swipeEnabled) && selectedIndex > 0,
)
onSelectView?.(selectedIndex)
}, [selectedIndex])
// rendering
// =
const renderItemInternal = ({item}: {item: any}) => {
if (item === HEADER_ITEM) {
if (renderHeader) {
return renderHeader()
}
return <View />
} else if (item === SELECTOR_ITEM) {
return (
<Selector
items={sections}
panX={panX}
selectedIndex={selectedIndex}
onSelect={onPressSelection}
/>
)
} else {
return renderItem(item)
}
}
const data = [HEADER_ITEM, SELECTOR_ITEM, ...items]
return (
<HorzSwipe
panX={panX}
swipeEnabled={swipeEnabled || false}
canSwipeLeft={selectedIndex > 0}
canSwipeRight={selectedIndex < sections.length - 1}
onSwipeEnd={onSwipeEnd}>
<FlatList
data={data}
keyExtractor={item => item._reactKey}
renderItem={renderItemInternal}
stickyHeaderIndices={STICKY_HEADER_INDICES}
refreshing={refreshing}
onRefresh={onRefresh}
onEndReached={onEndReached}
/>
</HorzSwipe>
)
}
const styles = StyleSheet.create({})
|
