zio
/
bsky-app
2
0
Fork 0
Code Pull Requests Packages Releases Activity

Disable swipe gestures in view selector for now

zio/stable
Paul Frazee 2022-09-09 12:10:18 -05:00
parent acaa8c5c11
commit 639c25821e
1 changed files with 59 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

115
src/view/com/util/ViewSelector.tsx
View File

@ -15,6 +15,7 @@ export function ViewSelector({
sections, sections,
items, items,
refreshing, refreshing,
swipeEnabled,
renderHeader, renderHeader,
renderItem, renderItem,
onSelectView, onSelectView,
@ -24,6 +25,7 @@ export function ViewSelector({
sections: string[] sections: string[]
items: any[] items: any[]
refreshing?: boolean refreshing?: boolean
swipeEnabled?: boolean
renderHeader?: () => JSX.Element renderHeader?: () => JSX.Element
renderItem: (item: any) => JSX.Element renderItem: (item: any) => JSX.Element
onSelectView?: (viewIndex: number) => void onSelectView?: (viewIndex: number) => void
@ -44,53 +46,52 @@ export function ViewSelector({
// gestures // gestures
// = // =
const swipeGesture = useMemo( const swipeGesture = useMemo(() => {
() => if (!swipeEnabled) return undefined
Gesture.Pan() return Gesture.Pan()
.hitSlop(SWIPE_GESTURE_HIT_SLOP) .hitSlop(SWIPE_GESTURE_HIT_SLOP)
.onUpdate(e => { .onUpdate(e => {
// calculate [-1, 1] range for the gesture // calculate [-1, 1] range for the gesture
const clamped = Math.min(e.translationX, SWIPE_GESTURE_MAX_DISTANCE) const clamped = Math.min(e.translationX, SWIPE_GESTURE_MAX_DISTANCE)
const reversed = clamped * -1 const reversed = clamped * -1
const scaled = reversed / SWIPE_GESTURE_MAX_DISTANCE const scaled = reversed / SWIPE_GESTURE_MAX_DISTANCE
swipeGestureInterp.value = scaled swipeGestureInterp.value = scaled
}) })
.onEnd(e => { .onEnd(e => {
const vx = e.velocityX const vx = e.velocityX
if ( if (
swipeGestureInterp.value >= 0.5 || swipeGestureInterp.value >= 0.5 ||
(vx < 0 && Math.abs(vx) > SWIPE_GESTURE_VEL_TRIGGER) (vx < 0 && Math.abs(vx) > SWIPE_GESTURE_VEL_TRIGGER)
) { ) {
// swiped to next // swiped to next
if (selectedIndex < sections.length - 1) { if (selectedIndex < sections.length - 1) {
// interp to the next item's position... // interp to the next item's position...
swipeGestureInterp.value = withTiming(1, {duration: 100}, () => { swipeGestureInterp.value = withTiming(1, {duration: 100}, () => {
// ...then update the index, which triggers the useEffect() below [1] // ...then update the index, which triggers the useEffect() below [1]
runOnJS(setSelectedIndex)(selectedIndex + 1) runOnJS(setSelectedIndex)(selectedIndex + 1)
}) })
} else {
swipeGestureInterp.value = withTiming(0, {duration: 100})
}
} else if (
swipeGestureInterp.value <= -0.5 ||
(vx > 0 && Math.abs(vx) > SWIPE_GESTURE_VEL_TRIGGER)
) {
// swiped to prev
if (selectedIndex > 0) {
// interp to the prev item's position...
swipeGestureInterp.value = withTiming(-1, {duration: 100}, () => {
// ...then update the index, which triggers the useEffect() below [1]
runOnJS(setSelectedIndex)(selectedIndex - 1)
})
} else {
swipeGestureInterp.value = withTiming(0, {duration: 100})
}
} else { } else {
swipeGestureInterp.value = withTiming(0, {duration: 100}) swipeGestureInterp.value = withTiming(0, {duration: 100})
} }
}), } else if (
[swipeGestureInterp, selectedIndex, sections.length], swipeGestureInterp.value <= -0.5 ||
) (vx > 0 && Math.abs(vx) > SWIPE_GESTURE_VEL_TRIGGER)
) {
// swiped to prev
if (selectedIndex > 0) {
// interp to the prev item's position...
swipeGestureInterp.value = withTiming(-1, {duration: 100}, () => {
// ...then update the index, which triggers the useEffect() below [1]
runOnJS(setSelectedIndex)(selectedIndex - 1)
})
} else {
swipeGestureInterp.value = withTiming(0, {duration: 100})
}
} else {
swipeGestureInterp.value = withTiming(0, {duration: 100})
}
})
}, [swipeEnabled, swipeGestureInterp, selectedIndex, sections.length])
useEffect(() => { useEffect(() => {
// [1] completes the swipe gesture animation by resetting the interp value // [1] completes the swipe gesture animation by resetting the interp value
// this has to be done as an effect so that it occurs *after* the selectedIndex has been updated // this has to be done as an effect so that it occurs *after* the selectedIndex has been updated
@ -121,19 +122,21 @@ export function ViewSelector({
} }
const data = [HEADER_ITEM, SELECTOR_ITEM, ...items] const data = [HEADER_ITEM, SELECTOR_ITEM, ...items]
return ( const listEl = (
<GestureDetector gesture={swipeGesture}> <FlatList
<FlatList data={data}
data={data} keyExtractor={item => item._reactKey}
keyExtractor={item => item._reactKey} renderItem={renderItemInternal}
renderItem={renderItemInternal} stickyHeaderIndices={STICKY_HEADER_INDICES}
stickyHeaderIndices={STICKY_HEADER_INDICES} refreshing={refreshing}
refreshing={refreshing} onRefresh={onRefresh}
onRefresh={onRefresh} onEndReached={onEndReached}
onEndReached={onEndReached} />
/>
</GestureDetector>
) )
if (swipeEnabled) {
return <GestureDetector gesture={swipeGesture}>{listEl}</GestureDetector>
}
return listEl
} }
const styles = StyleSheet.create({}) const styles = StyleSheet.create({})