From b679b56a0ee1f2a4fea9440565f891c0954bcfc0 Mon Sep 17 00:00:00 2001 From: Zhiyuan Zheng Date: Thu, 17 Dec 2020 12:04:58 +0100 Subject: [PATCH] Updates --- src/components/Timelines.tsx | 104 +++++++------------------- src/components/Timelines/Timeline.tsx | 5 +- src/screens/Shared/Account/Toots.tsx | 4 +- 3 files changed, 34 insertions(+), 79 deletions(-) diff --git a/src/components/Timelines.tsx b/src/components/Timelines.tsx index e6a3f875..025dfdbb 100644 --- a/src/components/Timelines.tsx +++ b/src/components/Timelines.tsx @@ -1,40 +1,20 @@ -import React, { useCallback, useEffect, useRef, useState } from 'react' -import { Dimensions, FlatList, StyleSheet, View } from 'react-native' +import React, { useCallback, useEffect, useState } from 'react' +import { Dimensions, StyleSheet, View } from 'react-native' import SegmentedControl from '@react-native-community/segmented-control' import { createNativeStackNavigator } from 'react-native-screens/native-stack' import { useSelector } from 'react-redux' -import { Feather } from '@expo/vector-icons' import Timeline from '@components/Timelines/Timeline' import sharedScreens from '@screens/Shared/sharedScreens' -import { - getLocalUrl, - getRemoteUrl, - InstancesState -} from '@utils/slices/instancesSlice' +import { getLocalUrl, getRemoteUrl } from '@utils/slices/instancesSlice' import { useTheme } from '@utils/styles/ThemeManager' import { useNavigation } from '@react-navigation/native' import getCurrentTab from '@utils/getCurrentTab' import { HeaderRight } from './Header' +import { TabView } from 'react-native-tab-view' const Stack = createNativeStackNavigator() -const Page = ({ - item: { page }, - localRegistered -}: { - item: { page: App.Pages } - localRegistered: InstancesState['local']['url'] | undefined -}) => { - return ( - - {localRegistered || page === 'RemotePublic' ? ( - - ) : null} - - ) -} - export interface Props { name: 'Screen-Local-Root' | 'Screen-Public-Root' content: { title: string; page: App.Pages }[] @@ -53,46 +33,22 @@ const Timelines: React.FC = ({ name, content }) => { return }, []) - const horizontalPaging = useRef(null!) - - const onChangeSegment = useCallback(({ nativeEvent }) => { - horizontalPaging.current.scrollToIndex({ - index: nativeEvent.selectedSegmentIndex - }) - }, []) const onPressSearch = useCallback(() => { navigation.navigate(getCurrentTab(navigation), { screen: 'Screen-Shared-Search' }) }, []) - const flGetItemLayout = useCallback( - (data, index) => ({ - length: Dimensions.get('window').width, - offset: Dimensions.get('window').width * index, - index - }), - [] - ) - const flKeyExtrator = useCallback(({ page }) => page, []) - const flRenderItem = useCallback( - ({ item, index }) => { - if (!localRegistered && index === 0) { - return null - } - return - }, - [localRegistered] - ) - const flOnScroll = useCallback( - ({ nativeEvent }) => - setSegment( - nativeEvent.contentOffset.x <= Dimensions.get('window').width / 2 - ? 0 - : 1 - ), - [] - ) + const [routes] = useState(content.map(p => ({ key: p.page }))) + const renderScene = ({ + route + }: { + route: { + key: App.Pages + } + }) => { + return + } return ( @@ -108,7 +64,9 @@ const Timelines: React.FC = ({ name, content }) => { appearance={mode} values={[content[0].title, content[1].title]} selectedIndex={segment} - onChange={onChangeSegment} + onChange={({ nativeEvent }) => + setSegment(nativeEvent.selectedSegmentIndex) + } /> ), @@ -120,19 +78,16 @@ const Timelines: React.FC = ({ name, content }) => { > {() => { return ( - null} + onIndexChange={index => setSegment(index)} + initialLayout={{ width: Dimensions.get('window').width }} + lazy + swipeEnabled + swipeVelocityImpact={1} /> ) }} @@ -147,9 +102,8 @@ const styles = StyleSheet.create({ segmentsContainer: { flexBasis: '60%' }, - flatList: { - width: Dimensions.get('window').width, - height: '100%' + base: { + width: Dimensions.get('window').width } }) diff --git a/src/components/Timelines/Timeline.tsx b/src/components/Timelines/Timeline.tsx index 2f339156..9fc78a5f 100644 --- a/src/components/Timelines/Timeline.tsx +++ b/src/components/Timelines/Timeline.tsx @@ -1,5 +1,5 @@ import React, { useCallback, useEffect, useMemo, useRef } from 'react' -import { AppState, FlatList, StyleSheet } from 'react-native' +import { AppState, StyleSheet } from 'react-native' import { setFocusHandler, useInfiniteQuery } from 'react-query' import TimelineNotifications from '@components/Timelines/Timeline/Notifications' @@ -10,6 +10,7 @@ import TimelineSeparator from '@components/Timelines/Timeline/Separator' import TimelineEmpty from '@components/Timelines/Timeline/Empty' import TimelineEnd from '@components/Timelines/Timeline/Shared/End' import { useScrollToTop } from '@react-navigation/native' +import { FlatList } from 'react-native-gesture-handler' export interface Props { page: App.Pages @@ -67,7 +68,7 @@ const Timeline: React.FC = ({ const flattenPointer = data ? data.flatMap(d => [d?.pointer]) : [] const flattenPinnedLength = data ? data.flatMap(d => [d?.pinnedLength]) : [] - const flRef = useRef(null) + const flRef = useRef>(null) useEffect(() => { if (toot && isSuccess) { setTimeout(() => { diff --git a/src/screens/Shared/Account/Toots.tsx b/src/screens/Shared/Account/Toots.tsx index 7117c0a3..ea8f9729 100644 --- a/src/screens/Shared/Account/Toots.tsx +++ b/src/screens/Shared/Account/Toots.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useContext } from 'react' +import React, { useCallback, useContext, useState } from 'react' import { Dimensions, StyleSheet } from 'react-native' import { TabView, SceneMap } from 'react-native-tab-view' @@ -13,7 +13,7 @@ export interface Props { const AccountToots: React.FC = ({ id }) => { const { accountState, accountDispatch } = useContext(AccountContext) - const [routes] = React.useState([ + const [routes] = useState([ { key: 'Account_Default' }, { key: 'Account_All' }, { key: 'Account_Media' }