use FlatList in MoveNoteDialog

This commit is contained in:
ammarahm-ed
2020-12-29 11:24:34 +05:00
parent 3d7f457928
commit d92a9775a8

View File

@@ -1,33 +1,27 @@
import React, { createRef, useEffect, useState } from 'react'; import React, {createRef, useEffect, useState} from 'react';
import { import {Keyboard, TextInput, TouchableOpacity, View} from 'react-native';
FlatList, import {FlatList} from 'react-native-gesture-handler';
Keyboard,
ScrollView,
TextInput,
TouchableOpacity,
View
} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import { notesnook } from '../../../e2e/test.ids'; import {notesnook} from '../../../e2e/test.ids';
import { useTracked } from '../../provider'; import {useTracked} from '../../provider';
import { Actions } from '../../provider/Actions'; import {Actions} from '../../provider/Actions';
import { import {
eSendEvent, eSendEvent,
eSubscribeEvent, eSubscribeEvent,
eUnSubscribeEvent, eUnSubscribeEvent,
ToastEvent ToastEvent,
} from '../../services/EventManager'; } from '../../services/EventManager';
import { db } from '../../utils/DB'; import {db} from '../../utils/DB';
import { import {
eOnNewTopicAdded, eOnNewTopicAdded,
eOpenMoveNoteDialog, eOpenMoveNoteDialog,
refreshNotesPage refreshNotesPage,
} from '../../utils/Events'; } from '../../utils/Events';
import { pv, SIZE, WEIGHT } from '../../utils/SizeUtils'; import {pv, SIZE, WEIGHT} from '../../utils/SizeUtils';
import ActionSheetWrapper from '../ActionSheetComponent/ActionSheetWrapper'; import ActionSheetWrapper from '../ActionSheetComponent/ActionSheetWrapper';
import DialogHeader from '../Dialog/dialog-header'; import DialogHeader from '../Dialog/dialog-header';
import { PressableButton } from '../PressableButton'; import {PressableButton} from '../PressableButton';
import { Toast } from '../Toast'; import {Toast} from '../Toast';
import Heading from '../Typography/Heading'; import Heading from '../Typography/Heading';
import Paragraph from '../Typography/Paragraph'; import Paragraph from '../Typography/Paragraph';
@@ -43,10 +37,10 @@ const MoveNoteDialog = () => {
function open(note) { function open(note) {
setNote(note); setNote(note);
setVisible(true); setVisible(true);
actionSheetRef.current?._setModalVisible(true); actionSheetRef.current?.setModalVisible(true);
} }
const close = () => { const close = () => {
actionSheetRef.current?._setModalVisible(false); actionSheetRef.current?.setModalVisible(false);
}; };
useEffect(() => { useEffect(() => {
@@ -177,7 +171,8 @@ const MoveNoteComponent = ({close, note, setNote}) => {
/> />
</View> </View>
<ScrollView <FlatList
nestedScrollEnabled={true}
onScrollEndDrag={() => { onScrollEndDrag={() => {
actionSheetRef.current?.childScrollHandler(); actionSheetRef.current?.childScrollHandler();
}} }}
@@ -187,8 +182,17 @@ const MoveNoteComponent = ({close, note, setNote}) => {
onScrollAnimationEnd={() => { onScrollAnimationEnd={() => {
actionSheetRef.current?.childScrollHandler(); actionSheetRef.current?.childScrollHandler();
}} }}
nestedScrollEnabled> keyboardShouldPersistTaps="always"
<View> keyboardDismissMode="none"
data={state.notebooks}
ListFooterComponent={
<View
style={{
height: 100,
}}
/>
}
ListHeaderComponent={
<View <View
style={{ style={{
flexDirection: 'row', flexDirection: 'row',
@@ -248,10 +252,12 @@ const MoveNoteComponent = ({close, note, setNote}) => {
/> />
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</View> }
renderItem={({item, index}) => (
{state.notebooks.map((item) => ( <View
<View> style={{
height: expanded === item.id ? null : 60,
}}>
<PressableButton <PressableButton
onPress={() => { onPress={() => {
setExpanded(item.id === expanded ? null : item.id); setExpanded(item.id === expanded ? null : item.id);
@@ -304,12 +310,23 @@ const MoveNoteComponent = ({close, note, setNote}) => {
{expanded === item.id ? ( {expanded === item.id ? (
<FlatList <FlatList
nestedScrollEnabled
data={item.topics} data={item.topics}
keyboardShouldPersistTaps="always" keyboardShouldPersistTaps="always"
keyboardDismissMode="none" keyboardDismissMode="none"
onScrollEndDrag={() => {
actionSheetRef.current?.childScrollHandler();
}}
onMomentumScrollEnd={() => {
actionSheetRef.current?.childScrollHandler();
}}
onScrollAnimationEnd={() => {
actionSheetRef.current?.childScrollHandler();
}}
style={{ style={{
width:"90%", width: '90%',
alignSelf:"flex-end" alignSelf: 'flex-end',
maxHeight: 500,
}} }}
ListHeaderComponent={ ListHeaderComponent={
<View> <View>
@@ -414,13 +431,8 @@ const MoveNoteComponent = ({close, note, setNote}) => {
/> />
) : null} ) : null}
</View> </View>
))} )}
<View
style={{
height: 100,
}}
/> />
</ScrollView>
</View> </View>
<Toast context="local" /> <Toast context="local" />
</> </>