Replace draglist due to upstream errors (#1795)

* Replace draggable flatlist with simple sort buttons

* Remove react-native-draggable-flatlist dep

* Fix hitslops

* Update lockfile

* Remove bad flex:1
zio/stable
Paul Frazee 2023-11-02 12:09:57 -07:00 committed by GitHub
parent 0e8723c3bb
commit 0f4bfcb05d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 133 additions and 172 deletions

View File

@ -128,7 +128,6 @@
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-native": "0.72.5", "react-native": "0.72.5",
"react-native-appstate-hook": "^1.0.6", "react-native-appstate-hook": "^1.0.6",
"react-native-draggable-flatlist": "^4.0.1",
"react-native-drawer-layout": "^3.2.0", "react-native-drawer-layout": "^3.2.0",
"react-native-fs": "^2.20.0", "react-native-fs": "^2.20.0",
"react-native-gesture-handler": "^2.12.1", "react-native-gesture-handler": "^2.12.1",

View File

@ -95,19 +95,15 @@ export class SavedFeedsModel {
return return
} }
if (direction === 'up' && index !== 0) { if (direction === 'up' && index !== 0) {
const temp = pinned[index] ;[pinned[index], pinned[index - 1]] = [pinned[index - 1], pinned[index]]
pinned[index] = pinned[index - 1]
pinned[index - 1] = temp
} else if (direction === 'down' && index < pinned.length - 1) { } else if (direction === 'down' && index < pinned.length - 1) {
const temp = pinned[index] ;[pinned[index], pinned[index + 1]] = [pinned[index + 1], pinned[index]]
pinned[index] = pinned[index + 1]
pinned[index + 1] = temp
} }
this._updatePinSortOrder(pinned.concat(this.unpinned.map(f => f.uri)))
await this.rootStore.preferences.setSavedFeeds( await this.rootStore.preferences.setSavedFeeds(
this.rootStore.preferences.savedFeeds, this.rootStore.preferences.savedFeeds,
pinned, pinned,
) )
this._updatePinSortOrder()
track('CustomFeed:Reorder', { track('CustomFeed:Reorder', {
name: item.displayName, name: item.displayName,
uri: item.uri, uri: item.uri,

View File

@ -1,6 +1,5 @@
import React, {useCallback, useMemo} from 'react' import React, {useCallback, useMemo} from 'react'
import { import {
RefreshControl,
StyleSheet, StyleSheet,
View, View,
ActivityIndicator, ActivityIndicator,
@ -18,23 +17,30 @@ import {SavedFeedsModel} from 'state/models/ui/saved-feeds'
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
import {withAuthRequired} from 'view/com/auth/withAuthRequired' import {withAuthRequired} from 'view/com/auth/withAuthRequired'
import {ViewHeader} from 'view/com/util/ViewHeader' import {ViewHeader} from 'view/com/util/ViewHeader'
import {CenteredView} from 'view/com/util/Views' import {ScrollView, CenteredView} from 'view/com/util/Views'
import {Text} from 'view/com/util/text/Text' import {Text} from 'view/com/util/text/Text'
import {isWeb} from 'platform/detection'
import {s, colors} from 'lib/styles' import {s, colors} from 'lib/styles'
import DraggableFlatList, {
ShadowDecorator,
ScaleDecorator,
} from 'react-native-draggable-flatlist'
import {FeedSourceCard} from 'view/com/feeds/FeedSourceCard' import {FeedSourceCard} from 'view/com/feeds/FeedSourceCard'
import {FeedSourceModel} from 'state/models/content/feed-source' import {FeedSourceModel} from 'state/models/content/feed-source'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import * as Toast from 'view/com/util/Toast' import * as Toast from 'view/com/util/Toast'
import {Haptics} from 'lib/haptics' import {Haptics} from 'lib/haptics'
import {Link, TextLink} from 'view/com/util/Link' import {TextLink} from 'view/com/util/Link'
const HITSLOP_TOP = {
top: 20,
left: 20,
bottom: 5,
right: 20,
}
const HITSLOP_BOTTOM = {
top: 5,
left: 20,
bottom: 20,
right: 20,
}
type Props = NativeStackScreenProps<CommonNavigatorParams, 'SavedFeeds'> type Props = NativeStackScreenProps<CommonNavigatorParams, 'SavedFeeds'>
export const SavedFeeds = withAuthRequired( export const SavedFeeds = withAuthRequired(
observer(function SavedFeedsImpl({}: Props) { observer(function SavedFeedsImpl({}: Props) {
const pal = usePalette('default') const pal = usePalette('default')
@ -55,8 +61,52 @@ export const SavedFeeds = withAuthRequired(
}, [screen, store, savedFeeds]), }, [screen, store, savedFeeds]),
) )
const renderListEmptyComponent = useCallback(() => {
return ( return (
<CenteredView
style={[
s.hContentRegion,
pal.border,
isTabletOrDesktop && styles.desktopContainer,
]}>
<ViewHeader title="Edit My Feeds" showOnDesktop showBorder />
<ScrollView style={s.flex1}>
<View style={[pal.text, pal.border, styles.title]}>
<Text type="title" style={pal.text}>
Pinned Feeds
</Text>
</View>
{savedFeeds.hasLoaded ? (
!savedFeeds.pinned.length ? (
<View
style={[
pal.border,
isMobile && s.flex1,
pal.viewLight,
styles.empty,
]}>
<Text type="lg" style={[pal.text]}>
You don't have any pinned feeds.
</Text>
</View>
) : (
savedFeeds.pinned.map(feed => (
<ListItem
key={feed._reactKey}
savedFeeds={savedFeeds}
item={feed}
/>
))
)
) : (
<ActivityIndicator style={{marginTop: 20}} />
)}
<View style={[pal.text, pal.border, styles.title]}>
<Text type="title" style={pal.text}>
Saved Feeds
</Text>
</View>
{savedFeeds.hasLoaded ? (
!savedFeeds.unpinned.length ? (
<View <View
style={[ style={[
pal.border, pal.border,
@ -68,24 +118,19 @@ export const SavedFeeds = withAuthRequired(
You don't have any saved feeds. You don't have any saved feeds.
</Text> </Text>
</View> </View>
) ) : (
}, [pal, isMobile]) savedFeeds.unpinned.map(feed => (
<ListItem
const renderListFooterComponent = useCallback(() => { key={feed._reactKey}
return ( savedFeeds={savedFeeds}
<> item={feed}
<View style={[styles.footerLinks, pal.border]}>
<Link style={styles.footerLink} href="/feeds">
<FontAwesomeIcon
icon="search"
size={18}
color={pal.colors.icon}
/> />
<Text type="lg-medium" style={pal.textLight}> ))
Discover new feeds )
</Text> ) : (
</Link> <ActivityIndicator style={{marginTop: 20}} />
</View> )}
<View style={styles.footerText}> <View style={styles.footerText}>
<Text type="sm" style={pal.textLight}> <Text type="sm" style={pal.textLight}>
Feeds are custom algorithms that users build with a little coding Feeds are custom algorithms that users build with a little coding
@ -99,60 +144,8 @@ export const SavedFeeds = withAuthRequired(
for more information. for more information.
</Text> </Text>
</View> </View>
{savedFeeds.isLoading && <ActivityIndicator />} <View style={{height: 100}} />
</> </ScrollView>
)
}, [pal, savedFeeds.isLoading])
const onRefresh = useCallback(() => savedFeeds.refresh(), [savedFeeds])
const onDragEnd = useCallback(
async ({data}: {data: FeedSourceModel[]}) => {
try {
await savedFeeds.reorderPinnedFeeds(data)
} catch (e) {
Toast.show('There was an issue contacting the server')
store.log.error('Failed to save pinned feed order', {e})
}
},
[savedFeeds, store],
)
return (
<CenteredView
style={[
s.hContentRegion,
pal.border,
isTabletOrDesktop && styles.desktopContainer,
]}>
<ViewHeader title="Edit My Feeds" showOnDesktop showBorder />
<DraggableFlatList
containerStyle={[isTabletOrDesktop ? s.hContentRegion : s.flex1]}
data={savedFeeds.pinned.concat(savedFeeds.unpinned)}
keyExtractor={item => item.uri}
refreshing={savedFeeds.isRefreshing}
refreshControl={
<RefreshControl
refreshing={savedFeeds.isRefreshing}
onRefresh={onRefresh}
tintColor={pal.colors.text}
titleColor={pal.colors.text}
/>
}
renderItem={({item, drag}) => (
<ListItem savedFeeds={savedFeeds} item={item} drag={drag} />
)}
getItemLayout={(data, index) => ({
length: 77,
offset: 77 * index,
index,
})}
initialNumToRender={10}
ListFooterComponent={renderListFooterComponent}
ListEmptyComponent={renderListEmptyComponent}
extraData={savedFeeds.isLoading}
onDragEnd={onDragEnd}
/>
</CenteredView> </CenteredView>
) )
}), }),
@ -161,11 +154,9 @@ export const SavedFeeds = withAuthRequired(
const ListItem = observer(function ListItemImpl({ const ListItem = observer(function ListItemImpl({
savedFeeds, savedFeeds,
item, item,
drag,
}: { }: {
savedFeeds: SavedFeedsModel savedFeeds: SavedFeedsModel
item: FeedSourceModel item: FeedSourceModel
drag: () => void
}) { }) {
const pal = usePalette('default') const pal = usePalette('default')
const store = useStores() const store = useStores()
@ -196,16 +187,15 @@ const ListItem = observer(function ListItemImpl({
) )
return ( return (
<ScaleDecorator>
<ShadowDecorator>
<Pressable <Pressable
accessibilityRole="button" accessibilityRole="button"
onLongPress={isPinned ? drag : undefined}
delayLongPress={200}
style={[styles.itemContainer, pal.border]}> style={[styles.itemContainer, pal.border]}>
{isPinned && isWeb ? ( {isPinned ? (
<View style={styles.webArrowButtonsContainer}> <View style={styles.webArrowButtonsContainer}>
<TouchableOpacity accessibilityRole="button" onPress={onPressUp}> <TouchableOpacity
accessibilityRole="button"
onPress={onPressUp}
hitSlop={HITSLOP_TOP}>
<FontAwesomeIcon <FontAwesomeIcon
icon="arrow-up" icon="arrow-up"
size={12} size={12}
@ -214,21 +204,11 @@ const ListItem = observer(function ListItemImpl({
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity <TouchableOpacity
accessibilityRole="button" accessibilityRole="button"
onPress={onPressDown}> onPress={onPressDown}
<FontAwesomeIcon hitSlop={HITSLOP_BOTTOM}>
icon="arrow-down" <FontAwesomeIcon icon="arrow-down" size={12} style={[pal.text]} />
size={12}
style={[pal.text]}
/>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
) : isPinned ? (
<FontAwesomeIcon
icon="bars"
size={20}
color={pal.colors.text}
style={s.ml20}
/>
) : null} ) : null}
<FeedSourceCard <FeedSourceCard
key={item.uri} key={item.uri}
@ -247,8 +227,6 @@ const ListItem = observer(function ListItemImpl({
/> />
</TouchableOpacity> </TouchableOpacity>
</Pressable> </Pressable>
</ShadowDecorator>
</ScaleDecorator>
) )
}) })
@ -262,12 +240,17 @@ const styles = StyleSheet.create({
empty: { empty: {
paddingHorizontal: 20, paddingHorizontal: 20,
paddingVertical: 20, paddingVertical: 20,
borderRadius: 16, borderRadius: 8,
marginHorizontal: 24, marginHorizontal: 10,
marginTop: 10, marginTop: 10,
}, },
title: {
paddingHorizontal: 14,
paddingTop: 20,
paddingBottom: 10,
borderBottomWidth: 1,
},
itemContainer: { itemContainer: {
flex: 1,
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
borderBottomWidth: 1, borderBottomWidth: 1,
@ -289,14 +272,4 @@ const styles = StyleSheet.create({
paddingTop: 22, paddingTop: 22,
paddingBottom: 100, paddingBottom: 100,
}, },
footerLinks: {
borderBottomWidth: 1,
borderTopWidth: 0,
},
footerLink: {
flexDirection: 'row',
paddingHorizontal: 26,
paddingVertical: 18,
gap: 18,
},
}) })

View File

@ -1483,7 +1483,7 @@
"@babel/plugin-transform-react-jsx-development" "^7.22.5" "@babel/plugin-transform-react-jsx-development" "^7.22.5"
"@babel/plugin-transform-react-pure-annotations" "^7.22.5" "@babel/plugin-transform-react-pure-annotations" "^7.22.5"
"@babel/preset-typescript@^7.13.0", "@babel/preset-typescript@^7.16.0", "@babel/preset-typescript@^7.16.7", "@babel/preset-typescript@^7.17.12": "@babel/preset-typescript@^7.13.0", "@babel/preset-typescript@^7.16.0", "@babel/preset-typescript@^7.16.7":
version "7.22.5" version "7.22.5"
resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.22.5.tgz#16367d8b01d640e9a507577ed4ee54e0101e51c8" resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.22.5.tgz#16367d8b01d640e9a507577ed4ee54e0101e51c8"
integrity sha512-YbPaal9LxztSGhmndR46FmAbkJ/1fAsw293tSU+I5E5h+cnJ3d4GTwyUgGYmOXJYdGA+uNePle4qbaRzj2NISQ== integrity sha512-YbPaal9LxztSGhmndR46FmAbkJ/1fAsw293tSU+I5E5h+cnJ3d4GTwyUgGYmOXJYdGA+uNePle4qbaRzj2NISQ==
@ -15801,13 +15801,6 @@ react-native-dotenv@^3.3.1:
dependencies: dependencies:
dotenv "^16.3.1" dotenv "^16.3.1"
react-native-draggable-flatlist@^4.0.1:
version "4.0.1"
resolved "https://registry.yarnpkg.com/react-native-draggable-flatlist/-/react-native-draggable-flatlist-4.0.1.tgz#2f027d387ba4b8f3eb0907340e32cb85e6460df2"
integrity sha512-ZO1QUTNx64KZfXGXeXcBfql67l38X7kBcJ3rxUVZzPHt5r035GnGzIC0F8rqSXp6zgnwgUYMfB6zQc5PKmPL9Q==
dependencies:
"@babel/preset-typescript" "^7.17.12"
react-native-drawer-layout@^3.2.0: react-native-drawer-layout@^3.2.0:
version "3.2.1" version "3.2.1"
resolved "https://registry.yarnpkg.com/react-native-drawer-layout/-/react-native-drawer-layout-3.2.1.tgz#eb626216181965e72de6d9377ca619fab40226f2" resolved "https://registry.yarnpkg.com/react-native-drawer-layout/-/react-native-drawer-layout-3.2.1.tgz#eb626216181965e72de6d9377ca619fab40226f2"