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:1zio/stable
parent
0e8723c3bb
commit
0f4bfcb05d
|
@ -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",
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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,
|
|
||||||
},
|
|
||||||
})
|
})
|
||||||
|
|
|
@ -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"
|
||||||
|
|
Loading…
Reference in New Issue