From 0b731f5baeb01bad2de7c76aade8d9bca88a5786 Mon Sep 17 00:00:00 2001 From: ammarahm-ed Date: Fri, 18 Sep 2020 20:47:52 +0500 Subject: [PATCH] change FlatList to RecyclerListVIew --- .../mobile/src/components/SimpleList/index.js | 282 +++++++++++------- 1 file changed, 176 insertions(+), 106 deletions(-) diff --git a/apps/mobile/src/components/SimpleList/index.js b/apps/mobile/src/components/SimpleList/index.js index 5229ec810..19301670c 100644 --- a/apps/mobile/src/components/SimpleList/index.js +++ b/apps/mobile/src/components/SimpleList/index.js @@ -1,31 +1,32 @@ -import React, { createRef, useState } from 'react'; +import React, {useEffect, useState} from 'react'; import { - FlatList, + Dimensions, + LayoutAnimation, Platform, RefreshControl, - SectionList, Text, - View + View, } from 'react-native'; -import * as Animatable from 'react-native-animatable'; -import { useSafeAreaInsets } from 'react-native-safe-area-context'; +import {useSafeAreaInsets} from 'react-native-safe-area-context'; import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; -import { SIZE, WEIGHT } from '../../common/common'; -import { useTracked } from '../../provider'; -import { ACTIONS } from '../../provider/actions'; -import { eSendEvent } from '../../services/eventManager'; +import {DataProvider, LayoutProvider, RecyclerListView} from 'recyclerlistview'; +import {COLORS_NOTE, SIZE, WEIGHT} from '../../common/common'; +import {useTracked} from '../../provider'; +import {ACTIONS} from '../../provider/actions'; +import {eSendEvent} from '../../services/eventManager'; import { eClearSearch, eOpenLoginDialog, - eScrollEvent + eScrollEvent, } from '../../services/events'; -import { db, ToastEvent } from '../../utils/utils'; -import { PressableButton } from '../PressableButton'; -import { PinnedItemList } from './PinnedItemList'; -const sectionListRef = createRef(); +import {db, hexToRGBA, RGB_Linear_Shade, ToastEvent} from '../../utils/utils'; +import {PressableButton} from '../PressableButton'; +let {width, height} = Dimensions.get('window'); + +const header = { + type: 'MAIN_HEADER', +}; -const AnimatedFlatlist = Animatable.createAnimatableComponent(FlatList); -const AnimatedSectionList = Animatable.createAnimatableComponent(SectionList); const SimpleList = ({ data, type, @@ -42,9 +43,10 @@ const SimpleList = ({ isHome = false, }) => { const [state, dispatch] = useTracked(); - const {colors, selectionMode, user} = state; + const {colors, selectionMode, user, currentScreen} = state; const searchResults = {...state.searchResults}; const [refreshing, setRefreshing] = useState(false); + const [dataProvider, setDataProvider] = useState(null); const insets = useSafeAreaInsets(); const _onScroll = (event) => { if (!event) return; @@ -52,6 +54,34 @@ const SimpleList = ({ eSendEvent(eScrollEvent, y); }; + const NOOP = () => undefined; + + const layoutItemAnimator = { + animateDidMount: NOOP, + animateShift: NOOP, + animateWillMount: NOOP, + animateWillUnmount: NOOP, + animateWillUpdate: () => + LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut), + }; + + useEffect(() => { + let mainData = + searchResults.type === type && focused && searchResults.results.length > 0 + ? searchResults.results + : data; + + let d = [header, ...mainData]; + /* for (var i = 0; i < 10000; i++) { + d = [...d,...data]; + } */ + setDataProvider( + new DataProvider((r1, r2) => { + return r1 !== r2; + }).cloneWithRows(d), + ); + }, [data]); + const _ListFooterComponent = data[0] ? ( ) : null; - const _renderSectionHeader = ({section: {title}}) => ( + const RenderSectionHeader = ({item}) => ( - {title} + {item.title} ); @@ -131,22 +162,15 @@ const SimpleList = ({ dispatch({type: ACTIONS.ALL}); }; - const _ListHeaderComponent_S = - searchResults.type === type && searchResults.results.length > 0 ? ( + const ListHeaderComponent = () => { + return searchResults.type === type && searchResults.results.length > 0 ? ( ) : ( - + {user || !data[0] || selectionMode ? null : ( { eSendEvent(eOpenLoginDialog); }} - color={colors.shade} - selectedColor={colors.accent} + color={ + COLORS_NOTE[currentScreen] + ? COLORS_NOTE[currentScreen] + : colors.shade + } + selectedColor={ + COLORS_NOTE[currentScreen] + ? COLORS_NOTE[currentScreen] + : colors.accent + } alpha={!colors.night ? -0.02 : 0.1} opacity={0.12} customStyle={{ - paddingVertical: 6, width: '100%', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', paddingHorizontal: 12, alignSelf: 'center', + height: 40, + borderRadius: 0, + position: 'relative', }}> Login to sync your {type}. @@ -239,96 +267,138 @@ const SimpleList = ({ )} - {pinned ? : null} ); + }; const _ListEmptyComponent = ( <>{placeholder} ); const _listKeyExtractor = (item, index) => - item.id.toString() + index.toString(); + item.type === 'header' ? item.title : item.id.toString() + index.toString(); - return isHome && searchResults.type !== 'notes' ? ( - + const _layoutProvider = new LayoutProvider( + (index) => { + console.log(dataProvider.getDataForIndex(index).type, 'TYPE'); + return dataProvider.getDataForIndex(index).type; + }, + (type, dim) => { + switch (type) { + case 'note': + dim.width = width; + dim.height = 100; + break; + case 'notebook': + dim.width = width; + dim.height = 110; + break; + case 'topic': + dim.width = width; + dim.height = 80; + break; + case 'tag': + dim.width = width; + dim.height = 80; + break; + case 'header': + dim.width = width; + dim.height = 40; + break; + case 'MAIN_HEADER': + dim.width = width; + dim.height = 40; + break; + default: + dim.width = width; + dim.height = 0; } - keyExtractor={_listKeyExtractor} - renderSectionHeader={_renderSectionHeader} - onScroll={_onScroll} - stickySectionHeadersEnabled={false} - ListEmptyComponent={_ListEmptyComponent} - ListHeaderComponent={_ListHeaderComponent_S} - contentContainerStyle={{ - width: '100%', - alignSelf: 'center', - minHeight: '100%', - }} - style={{ - height: '100%', - backgroundColor: colors.bg, - }} - removeClippedSubviews={true} - ListFooterComponent={_ListFooterComponent} - renderItem={({item, index}) => } - /> + }, + ); + + const _renderRow = (type, data, index) => { + switch (type) { + case 'note': + return ; + case 'MAIN_HEADER': + return ; + case 'header': + return ; + + default: + return null; + } + }; + + return !data || data.length === 0 ? ( + _ListEmptyComponent ) : ( - + ), + contentContainerStyle: { + width: '100%', + alignSelf: 'center', + minHeight: '100%', + }, + }} + /* data={ searchResults.type === type && focused && searchResults.results.length > 0 ? searchResults.results : data } - refreshControl={ - - } - keyExtractor={_listKeyExtractor} - ListFooterComponent={_ListFooterComponent} - onScroll={_onScroll} - ListHeaderComponent={_ListHeaderComponent_S} - ListEmptyComponent={_ListEmptyComponent} - contentContainerStyle={{ - width: '100%', - alignSelf: 'center', - minHeight: '100%', - }} + + keyExtractor={_listKeyExtractor} */ + // + //onScroll={_onScroll} + // + // + style={{ height: '100%', backgroundColor: colors.bg, + width: '100%', + paddingTop: + Platform.OS == 'ios' + ? data[0] && !selectionMode + ? 115 + : 115 - 60 + : data[0] && !selectionMode + ? 155 - insets.top + : 155 - insets.top - 60, }} - renderItem={({item, index}) => } + /* renderItem={({item, index}) => + item.type === 'header' ? ( + + ) : ( + + ) + } */ /> ); };