Refactor profile to use new ViewSelector element which is reusable and now supports swipe gestures
Paul Frazee
parent
4974f97bf3
commit
69265753bf
|
|
@ -1,37 +1,98 @@
|
|||
import React, {useState} from 'react'
|
||||
import {
|
||||
StyleProp,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TouchableWithoutFeedback,
|
||||
View,
|
||||
ViewStyle,
|
||||
} from 'react-native'
|
||||
import React, {createRef, useState, useMemo} from 'react'
|
||||
import {StyleSheet, Text, TouchableWithoutFeedback, View} from 'react-native'
|
||||
import Animated, {
|
||||
SharedValue,
|
||||
useAnimatedStyle,
|
||||
interpolate,
|
||||
} from 'react-native-reanimated'
|
||||
import {colors} from '../../lib/styles'
|
||||
|
||||
interface Layout {
|
||||
x: number
|
||||
width: number
|
||||
}
|
||||
|
||||
export function Selector({
|
||||
style,
|
||||
selectedIndex,
|
||||
items,
|
||||
swipeGestureInterp,
|
||||
onSelect,
|
||||
}: {
|
||||
style?: StyleProp<ViewStyle>
|
||||
selectedIndex: number
|
||||
items: string[]
|
||||
swipeGestureInterp: SharedValue<number>
|
||||
onSelect?: (index: number) => void
|
||||
}) {
|
||||
const [selectedIndex, setSelectedIndex] = useState<number>(0)
|
||||
const [itemLayouts, setItemLayouts] = useState<undefined | Layout[]>(
|
||||
undefined,
|
||||
)
|
||||
const itemRefs = useMemo(
|
||||
() => Array.from({length: items.length}).map(() => createRef<View>()),
|
||||
[items.length],
|
||||
)
|
||||
|
||||
const currentLayouts = useMemo(() => {
|
||||
const left = itemLayouts?.[selectedIndex - 1] || {x: 0, width: 0}
|
||||
const middle = itemLayouts?.[selectedIndex] || {x: 0, width: 0}
|
||||
const right = itemLayouts?.[selectedIndex + 1] || {
|
||||
x: middle.x + 20,
|
||||
width: middle.width,
|
||||
}
|
||||
return [left, middle, right]
|
||||
}, [selectedIndex, itemLayouts])
|
||||
|
||||
const underlinePos = useAnimatedStyle(() => {
|
||||
const other =
|
||||
swipeGestureInterp.value === 0
|
||||
? currentLayouts[1]
|
||||
: swipeGestureInterp.value < 0
|
||||
? currentLayouts[0]
|
||||
: currentLayouts[2]
|
||||
return {
|
||||
left: interpolate(
|
||||
Math.abs(swipeGestureInterp.value),
|
||||
[0, 1],
|
||||
[currentLayouts[1].x, other.x],
|
||||
),
|
||||
width: interpolate(
|
||||
Math.abs(swipeGestureInterp.value),
|
||||
[0, 1],
|
||||
[currentLayouts[1].width, other.width],
|
||||
),
|
||||
}
|
||||
}, [currentLayouts, swipeGestureInterp])
|
||||
|
||||
const onLayout = () => {
|
||||
const promises = []
|
||||
for (let i = 0; i < items.length; i++) {
|
||||
promises.push(
|
||||
new Promise<Layout>(resolve => {
|
||||
itemRefs[i].current?.measure(
|
||||
(x: number, _y: number, width: number) => {
|
||||
resolve({x, width})
|
||||
},
|
||||
)
|
||||
}),
|
||||
)
|
||||
}
|
||||
Promise.all(promises).then((layouts: Layout[]) => {
|
||||
setItemLayouts(layouts)
|
||||
})
|
||||
}
|
||||
|
||||
const onPressItem = (index: number) => {
|
||||
setSelectedIndex(index)
|
||||
onSelect?.(index)
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={[styles.outer, style]}>
|
||||
<View style={[styles.outer]} onLayout={onLayout}>
|
||||
<Animated.View style={[styles.underline, underlinePos]} />
|
||||
{items.map((item, i) => {
|
||||
const selected = i === selectedIndex
|
||||
return (
|
||||
<TouchableWithoutFeedback key={i} onPress={() => onPressItem(i)}>
|
||||
<View style={selected ? styles.itemSelected : styles.item}>
|
||||
<Text style={selected ? styles.labelSelected : styles.label}>
|
||||
<View style={styles.item} ref={itemRefs[i]}>
|
||||
<Text style={selected ? styles.labelSelected : styles.itemLabel}>
|
||||
{item}
|
||||
</Text>
|
||||
</View>
|
||||
|
|
@ -45,25 +106,27 @@ export function Selector({
|
|||
const styles = StyleSheet.create({
|
||||
outer: {
|
||||
flexDirection: 'row',
|
||||
paddingTop: 8,
|
||||
paddingBottom: 12,
|
||||
paddingHorizontal: 14,
|
||||
backgroundColor: colors.white,
|
||||
},
|
||||
item: {
|
||||
paddingBottom: 12,
|
||||
marginRight: 20,
|
||||
},
|
||||
label: {
|
||||
itemLabel: {
|
||||
fontWeight: '600',
|
||||
fontSize: 16,
|
||||
color: colors.gray5,
|
||||
},
|
||||
itemSelected: {
|
||||
paddingBottom: 8,
|
||||
marginRight: 20,
|
||||
borderBottomWidth: 4,
|
||||
borderBottomColor: colors.purple3,
|
||||
},
|
||||
labelSelected: {
|
||||
fontWeight: '600',
|
||||
fontSize: 16,
|
||||
},
|
||||
underline: {
|
||||
position: 'absolute',
|
||||
height: 4,
|
||||
backgroundColor: colors.purple3,
|
||||
bottom: 0,
|
||||
},
|
||||
})
|
||||
|
|
|
|||
|
|
@ -0,0 +1,131 @@
|
|||
import React, {useEffect, useState, useMemo} from 'react'
|
||||
import {FlatList, StyleSheet, View} from 'react-native'
|
||||
import {GestureDetector, Gesture} from 'react-native-gesture-handler'
|
||||
import {useSharedValue, withTiming, runOnJS} from 'react-native-reanimated'
|
||||
import {Selector} from './Selector'
|
||||
|
||||
const HEADER_ITEM = {_reactKey: '__header__'}
|
||||
const SELECTOR_ITEM = {_reactKey: '__selector__'}
|
||||
const STICKY_HEADER_INDICES = [1]
|
||||
const SWIPE_GESTURE_MAX_DISTANCE = 200
|
||||
const SWIPE_GESTURE_HIT_SLOP = {left: -20, top: 0, right: 0, bottom: 0} // we ignore the left 20 pixels to avoid conflicts with the page-nav gesture
|
||||
|
||||
export function ViewSelector({
|
||||
sections,
|
||||
items,
|
||||
refreshing,
|
||||
renderHeader,
|
||||
renderItem,
|
||||
onSelectView,
|
||||
onRefresh,
|
||||
onEndReached,
|
||||
}: {
|
||||
sections: string[]
|
||||
items: any[]
|
||||
refreshing?: boolean
|
||||
renderHeader?: () => JSX.Element
|
||||
renderItem: (item: any) => JSX.Element
|
||||
onSelectView?: (viewIndex: number) => void
|
||||
onRefresh?: () => void
|
||||
onEndReached?: (info: {distanceFromEnd: number}) => void
|
||||
}) {
|
||||
const [selectedIndex, setSelectedIndex] = useState<number>(0)
|
||||
const swipeGestureInterp = useSharedValue<number>(0)
|
||||
|
||||
// events
|
||||
// =
|
||||
|
||||
const onPressSelection = (index: number) => setSelectedIndex(index)
|
||||
useEffect(() => {
|
||||
onSelectView?.(selectedIndex)
|
||||
}, [selectedIndex])
|
||||
|
||||
// gestures
|
||||
// =
|
||||
|
||||
const swipeGesture = useMemo(
|
||||
() =>
|
||||
Gesture.Pan()
|
||||
.hitSlop(SWIPE_GESTURE_HIT_SLOP)
|
||||
.onUpdate(e => {
|
||||
// calculate [-1, 1] range for the gesture
|
||||
const clamped = Math.min(e.translationX, SWIPE_GESTURE_MAX_DISTANCE)
|
||||
const reversed = clamped * -1
|
||||
const scaled = reversed / SWIPE_GESTURE_MAX_DISTANCE
|
||||
swipeGestureInterp.value = scaled
|
||||
})
|
||||
.onEnd(e => {
|
||||
if (swipeGestureInterp.value >= 0.5) {
|
||||
// swiped to next
|
||||
if (selectedIndex < sections.length - 1) {
|
||||
// interp to the next 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 if (swipeGestureInterp.value <= -0.5) {
|
||||
// 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})
|
||||
}
|
||||
}),
|
||||
[swipeGestureInterp, selectedIndex, sections.length],
|
||||
)
|
||||
useEffect(() => {
|
||||
// [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
|
||||
swipeGestureInterp.value = 0
|
||||
}, [swipeGestureInterp, 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}
|
||||
selectedIndex={selectedIndex}
|
||||
swipeGestureInterp={swipeGestureInterp}
|
||||
onSelect={onPressSelection}
|
||||
/>
|
||||
)
|
||||
} else {
|
||||
return renderItem(item)
|
||||
}
|
||||
}
|
||||
|
||||
const data = [HEADER_ITEM, SELECTOR_ITEM, ...items]
|
||||
return (
|
||||
<GestureDetector gesture={swipeGesture}>
|
||||
<FlatList
|
||||
data={data}
|
||||
keyExtractor={item => item._reactKey}
|
||||
renderItem={renderItemInternal}
|
||||
stickyHeaderIndices={STICKY_HEADER_INDICES}
|
||||
refreshing={refreshing}
|
||||
onRefresh={onRefresh}
|
||||
onEndReached={onEndReached}
|
||||
/>
|
||||
</GestureDetector>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({})
|
||||
|
|
@ -1,37 +1,19 @@
|
|||
import React, {useState, useEffect} from 'react'
|
||||
import {SectionList, StyleSheet, Text, View} from 'react-native'
|
||||
import React, {useEffect, useState} from 'react'
|
||||
import {StyleSheet, Text, View} from 'react-native'
|
||||
import {observer} from 'mobx-react-lite'
|
||||
import {ViewSelector} from '../com/util/ViewSelector'
|
||||
import {ScreenParams} from '../routes'
|
||||
import {ProfileUiModel, SECTION_IDS} from '../../state/models/profile-ui'
|
||||
import {FeedViewItemModel} from '../../state/models/feed-view'
|
||||
import {useStores} from '../../state'
|
||||
import {ProfileHeader} from '../com/profile/ProfileHeader'
|
||||
import {FeedItem} from '../com/posts/FeedItem'
|
||||
import {Selector} from '../com/util/Selector'
|
||||
import {ErrorScreen} from '../com/util/ErrorScreen'
|
||||
import {ErrorMessage} from '../com/util/ErrorMessage'
|
||||
import {s, colors} from '../lib/styles'
|
||||
import {ScreenParams} from '../routes'
|
||||
|
||||
const SECTION_HEADER_ITEM = Symbol('SectionHeaderItem')
|
||||
const LOADING_ITEM = Symbol('LoadingItem')
|
||||
const EMPTY_ITEM = Symbol('EmptyItem')
|
||||
const END_ITEM = Symbol('EndItem')
|
||||
|
||||
interface RenderItemParams {
|
||||
item: any
|
||||
index: number
|
||||
section: Section
|
||||
}
|
||||
|
||||
interface ErrorItem {
|
||||
error: string
|
||||
}
|
||||
|
||||
interface Section {
|
||||
data: any[]
|
||||
keyExtractor?: (v: any) => string
|
||||
renderItem: (params: RenderItemParams) => JSX.Element
|
||||
}
|
||||
const LOADING_ITEM = {_reactKey: '__loading__'}
|
||||
const END_ITEM = {_reactKey: '__end__'}
|
||||
const EMPTY_ITEM = {_reactKey: '__empty__'}
|
||||
|
||||
export const Profile = observer(({visible, params}: ScreenParams) => {
|
||||
const store = useStores()
|
||||
|
|
@ -62,8 +44,9 @@ export const Profile = observer(({visible, params}: ScreenParams) => {
|
|||
// events
|
||||
// =
|
||||
|
||||
const onSelectViewSelector = (index: number) =>
|
||||
const onSelectView = (index: number) => {
|
||||
profileUiState?.setSelectedViewIndex(index)
|
||||
}
|
||||
const onRefresh = () => {
|
||||
profileUiState
|
||||
?.refresh()
|
||||
|
|
@ -81,107 +64,78 @@ export const Profile = observer(({visible, params}: ScreenParams) => {
|
|||
// rendering
|
||||
// =
|
||||
|
||||
const renderItem = (_params: RenderItemParams) => <View />
|
||||
const renderLoadingItem = (_params: RenderItemParams) => (
|
||||
<Text style={styles.loading}>Loading...</Text>
|
||||
)
|
||||
const renderErrorItem = ({item}: {item: ErrorItem}) => (
|
||||
<View style={s.p5}>
|
||||
<ErrorMessage message={item.error} onPressTryAgain={onPressTryAgain} />
|
||||
</View>
|
||||
)
|
||||
const renderEmptyItem = (_params: RenderItemParams) => (
|
||||
<Text style={styles.loading}>No posts yet!</Text>
|
||||
)
|
||||
const renderProfileItem = (_params: RenderItemParams) => {
|
||||
const renderHeader = () => {
|
||||
if (!profileUiState) {
|
||||
return <View />
|
||||
}
|
||||
return <ProfileHeader view={profileUiState.profile} />
|
||||
}
|
||||
const renderSectionHeader = ({section}: {section: Section}) => {
|
||||
if (section?.data?.[0] !== SECTION_HEADER_ITEM) {
|
||||
return (
|
||||
<Selector
|
||||
items={ProfileUiModel.SELECTOR_ITEMS}
|
||||
style={styles.selector}
|
||||
onSelect={onSelectViewSelector}
|
||||
/>
|
||||
)
|
||||
}
|
||||
return <View />
|
||||
}
|
||||
const renderPostsItem = ({item}: {item: FeedViewItemModel | Symbol}) => {
|
||||
if (item === END_ITEM || item instanceof Symbol) {
|
||||
return <Text style={styles.endItem}>- end of feed -</Text>
|
||||
}
|
||||
return <FeedItem item={item} />
|
||||
}
|
||||
const renderBadgesItem = ({item}: {item: any}) => <Text>todo</Text>
|
||||
|
||||
const sections = [
|
||||
{data: [SECTION_HEADER_ITEM], renderItem: renderProfileItem},
|
||||
]
|
||||
let renderItem
|
||||
let items: any[] = []
|
||||
if (profileUiState) {
|
||||
if (profileUiState.selectedViewIndex === SECTION_IDS.POSTS) {
|
||||
if (profileUiState.isInitialLoading) {
|
||||
sections.push({
|
||||
data: [LOADING_ITEM],
|
||||
renderItem: renderLoadingItem,
|
||||
} as Section)
|
||||
items.push(LOADING_ITEM)
|
||||
renderItem = () => <Text style={styles.loading}>Loading...</Text>
|
||||
} else if (profileUiState.feed.hasError) {
|
||||
sections.push({
|
||||
data: [{error: profileUiState.feed.error}],
|
||||
renderItem: renderErrorItem,
|
||||
} as Section)
|
||||
items.push({
|
||||
_reactKey: '__error__',
|
||||
error: profileUiState.feed.error,
|
||||
})
|
||||
renderItem = (item: any) => (
|
||||
<View style={s.p5}>
|
||||
<ErrorMessage
|
||||
message={item.error}
|
||||
onPressTryAgain={onPressTryAgain}
|
||||
/>
|
||||
</View>
|
||||
)
|
||||
} else if (profileUiState.currentView.hasContent) {
|
||||
const items: (FeedViewItemModel | Symbol)[] =
|
||||
profileUiState.feed.feed.slice()
|
||||
items = profileUiState.feed.feed.slice()
|
||||
if (profileUiState.feed.hasReachedEnd) {
|
||||
items.push(END_ITEM)
|
||||
}
|
||||
sections.push({
|
||||
data: items,
|
||||
renderItem: renderPostsItem,
|
||||
keyExtractor: (item: FeedViewItemModel) => item._reactKey,
|
||||
} as Section)
|
||||
renderItem = (item: any) => {
|
||||
if (item === END_ITEM) {
|
||||
return <Text style={styles.endItem}>- end of feed -</Text>
|
||||
}
|
||||
return <FeedItem item={item} />
|
||||
}
|
||||
} else if (profileUiState.currentView.isEmpty) {
|
||||
sections.push({
|
||||
data: [EMPTY_ITEM],
|
||||
renderItem: renderEmptyItem,
|
||||
})
|
||||
items.push(EMPTY_ITEM)
|
||||
renderItem = () => <Text style={styles.loading}>No posts yet!</Text>
|
||||
}
|
||||
}
|
||||
if (profileUiState.selectedViewIndex === SECTION_IDS.BADGES) {
|
||||
sections.push({
|
||||
data: [{}],
|
||||
renderItem: renderBadgesItem,
|
||||
} as Section)
|
||||
items.push(EMPTY_ITEM)
|
||||
renderItem = () => <Text>TODO</Text>
|
||||
}
|
||||
}
|
||||
if (!renderItem) {
|
||||
renderItem = () => <View />
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<View style={styles.feed}>
|
||||
{profileUiState &&
|
||||
(profileUiState.profile.hasError ? (
|
||||
<ErrorScreen
|
||||
title="Failed to load profile"
|
||||
message={`There was an issue when attempting to load ${params.name}`}
|
||||
details={profileUiState.profile.error}
|
||||
onPressTryAgain={onPressTryAgain}
|
||||
/>
|
||||
) : (
|
||||
<SectionList
|
||||
sections={sections}
|
||||
renderSectionHeader={renderSectionHeader}
|
||||
renderItem={renderItem}
|
||||
refreshing={profileUiState.isRefreshing}
|
||||
onRefresh={onRefresh}
|
||||
onEndReached={onEndReached}
|
||||
/>
|
||||
))}
|
||||
</View>
|
||||
{profileUiState?.profile.hasError ? (
|
||||
<ErrorScreen
|
||||
title="Failed to load profile"
|
||||
message={`There was an issue when attempting to load ${params.name}`}
|
||||
details={profileUiState.profile.error}
|
||||
onPressTryAgain={onPressTryAgain}
|
||||
/>
|
||||
) : (
|
||||
<ViewSelector
|
||||
sections={ProfileUiModel.SELECTOR_ITEMS}
|
||||
items={items}
|
||||
renderHeader={renderHeader}
|
||||
renderItem={renderItem}
|
||||
refreshing={profileUiState?.isRefreshing || false}
|
||||
onSelectView={onSelectView}
|
||||
onRefresh={onRefresh}
|
||||
onEndReached={onEndReached}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
)
|
||||
})
|
||||
|
|
@ -191,15 +145,6 @@ const styles = StyleSheet.create({
|
|||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
},
|
||||
selector: {
|
||||
paddingTop: 8,
|
||||
backgroundColor: colors.white,
|
||||
borderBottomWidth: 1,
|
||||
borderColor: colors.gray2,
|
||||
},
|
||||
feed: {
|
||||
flex: 1,
|
||||
},
|
||||
loading: {
|
||||
paddingVertical: 10,
|
||||
paddingHorizontal: 14,
|
||||
|
|
|
|||
Loading…
Reference in New Issue