refactor add notebook dialog

apps/mobile/src/components/AddNotebookDialog/index.js

@@ -1,6 +1,6 @@
 import React, {createRef} from 'react';
 import {Keyboard, StyleSheet, TouchableOpacity, View} from 'react-native';
-import {FlatList, TextInput} from 'react-native-gesture-handler';
+import {FlatList, ScrollView, TextInput} from 'react-native-gesture-handler';
 import {notesnook} from '../../../e2e/test.ids';
 import {useMenuStore} from '../../provider/stores';
 import {DDS} from '../../services/DeviceDetection';
@@ -12,8 +12,6 @@ import {sleep} from '../../utils/TimeUtils';
 import {ActionIcon} from '../ActionIcon';
 import ActionSheetWrapper from '../ActionSheetComponent/ActionSheetWrapper';
 import {Button} from '../Button';
-import BaseDialog from '../Dialog/base-dialog';
-import DialogButtons from '../Dialog/dialog-buttons';
 import DialogHeader from '../Dialog/dialog-header';
 import Input from '../Input';
 import Seperator from '../Seperator';
@@ -54,13 +52,12 @@ export class AddNotebookDialog extends React.Component {
   }
 
   open = () => {
+    console.log('opening called')
     refs = [];
     let {toEdit} = this.props;
-
     if (toEdit && toEdit.type === 'notebook') {
       let topicsList = [];
       toEdit.topics.forEach((item, index) => {
-        //if (index === 0) return;
         topicsList.push(item.title);
       });
       this.id = toEdit.id;
@@ -69,7 +66,6 @@ export class AddNotebookDialog extends React.Component {
 
       this.setState({
         topics: [...topicsList],
-
         visible: true
       });
     } else {
@@ -273,15 +269,20 @@ export class AddNotebookDialog extends React.Component {
         }}
         fwdRef={this.actionSheetRef}
         onClose={() => {
+          console.log('closing now');
           this.close();
           this.setState({
             visible: false
           });
         }}
-        animation="fade"
-        centered={false}
         statusBarTranslucent={false}
         onRequestClose={this.close}>
+        <View
+          style={{
+            maxHeight: DDS.isTab ? '90%' : '100%',
+            borderRadius: DDS.isTab ? 5 : 0,
+            paddingHorizontal: 12
+          }}>
           <TextInput
             ref={this.hiddenInput}
             style={{
@@ -292,17 +293,6 @@ export class AddNotebookDialog extends React.Component {
             }}
             blurOnSubmit={false}
           />
-
-        <View
-          style={[
-            styles.container,
-            {
-              backgroundColor: colors.bg,
-              height: null,
-              borderTopRightRadius: 10,
-              borderTopLeftRadius: 10
-            }
-          ]}>
           <DialogHeader
             title={
               toEdit && toEdit.dateCreated ? 'Edit Notebook' : 'New Notebook'
@@ -493,13 +483,6 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center'
   },
-  container: {
-    width: DDS.isTab ? 500 : '100%',
-    height: DDS.isTab ? 600 : '100%',
-    maxHeight: DDS.isTab ? 600 : '100%',
-    borderRadius: DDS.isTab ? 5 : 0,
-    paddingHorizontal: 12
-  },
   overlay: {
     width: '100%',
     height: '100%',