feat: add new components

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

@@ -1,4 +1,4 @@
-import React, {useEffect, useState} from 'react';
+import React, {useEffect, useState, createRef} from 'react';
 import {
   ScrollView,
   View,
@@ -29,10 +29,11 @@ import {useForceUpdate} from '../../views/ListsEditor';
 
 const refs = [];
 
-export const AddNotebookDialog = ({visible}) => {
+export const AddNotebookDialog = ({visible, close}) => {
   const [colors, setColors] = useState(COLOR_SCHEME);
   const [topicsToAdd, setTopicsToAdd] = useState(['']);
   const forceUpdate = useForceUpdate();
+  let listRef = createRef();
   let prevItem = null;
   let prevIndex = null;
   let currentSelectedItem = null;
@@ -53,13 +54,17 @@ export const AddNotebookDialog = ({visible}) => {
     forceUpdate();
     currentSelectedItem = null;
 
-    if (!willFocus) return;
+    //if (!willFocus) return;
     if (!refs[index + 1]) {
       setTimeout(() => {
+        if (!refs[index + 1]) return;
+
         refs[index + 1].focus();
       }, 400);
     } else {
-      refs[index + 1].focus();
+      setTimeout(() => {
+        refs[index + 1].focus();
+      }, 400);
     }
   };
   const onFocus = index => {
@@ -82,146 +87,166 @@ export const AddNotebookDialog = ({visible}) => {
     prevItem = text;
   };
   const onDelete = index => {
+    console.log('deleting');
     let listData = topicsToAdd;
+    if (listData.length === 1) return;
+    refs.splice(index, 1);
     listData.splice(index, 1);
+    console.log(refs, listData);
     setTopicsToAdd(listData);
     forceUpdate();
   };
 
   return (
-    <SafeAreaView>
-      <Modal visible={visible} transparent={true}>
+    <Modal
+      visible={visible}
+      transparent={true}
+      onRequestClose={() => (refs = [])}>
+      <View
+        style={{
+          width: '100%',
+          height: '100%',
+          backgroundColor: 'rgba(255,255,255,0.3)',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}>
         <View
           style={{
-            width: '100%',
-            height: '100%',
-            backgroundColor: 'rgba(255,255,255,0.3)',
-            justifyContent: 'center',
-            alignItems: 'center',
+            width: '80%',
+            maxHeight: 350,
+            elevation: 5,
+            borderRadius: 5,
+            backgroundColor: colors.bg,
+            paddingHorizontal: ph,
+            paddingVertical: pv,
           }}>
           <View
             style={{
-              width: '80%',
-              maxHeight: '80%',
-              elevation: 5,
-              borderRadius: 5,
-              backgroundColor: colors.bg,
-              paddingHorizontal: ph,
-              paddingVertical: pv,
+              flexDirection: 'row',
+              justifyContent: 'center',
+              alignItems: 'center',
             }}>
-            <View
-              style={{
-                flexDirection: 'row',
-                justifyContent: 'center',
-                alignItems: 'center',
-              }}>
-              <Icon name="book-open" color={colors.accent} size={SIZE.lg} />
-              <Text
-                style={{
-                  color: colors.accent,
-                  fontFamily: WEIGHT.medium,
-                  marginLeft: 10,
-                  fontSize: SIZE.lg,
-                  marginTop: -5,
-                }}>
-                New Notebook
-              </Text>
-            </View>
-
-            <TextInput
-              style={{
-                padding: pv - 5,
-                borderWidth: 1.5,
-                borderColor: '#f0f0f0',
-                paddingHorizontal: ph,
-                borderRadius: 5,
-                fontSize: SIZE.sm,
-                fontFamily: WEIGHT.regular,
-                marginTop: 20,
-                marginBottom: 10,
-              }}
-              placeholder="Enter title of notebook"
-              placeholderTextColor={colors.icon}
-            />
-
+            <Icon name="book-open" color={colors.accent} size={SIZE.lg} />
             <Text
               style={{
-                fontSize: SIZE.sm,
+                color: colors.accent,
                 fontFamily: WEIGHT.semibold,
+                marginLeft: 10,
+                fontSize: SIZE.lg,
+                marginTop: -5,
               }}>
-              Topics
+              New Notebook
             </Text>
+          </View>
 
-            <FlatList
-              data={topicsToAdd}
-              renderItem={({item, index}) => (
-                <TopicItem
-                  item={item}
-                  index={index}
-                  colors={colors}
-                  onSubmit={onSubmit}
-                  onChange={onChange}
-                  onFocus={onFocus}
-                  onDelete={onDelete}
-                />
-              )}
-            />
+          <TextInput
+            style={{
+              padding: pv - 5,
+              borderWidth: 1.5,
+              borderColor: '#f0f0f0',
+              paddingHorizontal: ph,
+              borderRadius: 5,
+              fontSize: SIZE.sm,
+              fontFamily: WEIGHT.regular,
+              marginTop: 20,
+              marginBottom: 10,
+            }}
+            placeholder="Title of notebook"
+            placeholderTextColor={colors.icon}
+          />
 
-            <View
+          <Text
+            style={{
+              fontSize: SIZE.sm,
+              fontFamily: WEIGHT.semibold,
+            }}>
+            Topics
+          </Text>
+
+          <FlatList
+            data={topicsToAdd}
+            ref={listRef}
+            removeClippedSubviews={false}
+            enableEmptySections={false}
+            getItemLayout={(data, index) => ({
+              length: 50,
+              offset: 50 * index,
+              index,
+            })}
+            renderItem={({item, index}) => (
+              <TopicItem
+                item={item}
+                index={index}
+                colors={colors}
+                onSubmit={onSubmit}
+                onChange={onChange}
+                onFocus={onFocus}
+                onDelete={onDelete}
+              />
+            )}
+          />
+
+          <View
+            style={{
+              justifyContent: 'space-around',
+              alignItems: 'center',
+              flexDirection: 'row',
+              marginTop: 20,
+            }}>
+            <TouchableOpacity
+              activeOpacity={opacity}
               style={{
-                justifyContent: 'space-around',
+                paddingVertical: pv,
+                paddingHorizontal: ph,
+                borderRadius: 5,
+                width: '45%',
+                justifyContent: 'center',
                 alignItems: 'center',
-                flexDirection: 'row',
-                marginTop: 20,
+                borderColor: colors.accent,
+                backgroundColor: colors.accent,
+                borderWidth: 1,
               }}>
-              <TouchableOpacity
-                activeOpacity={opacity}
+              <Text
                 style={{
-                  paddingVertical: pv,
-                  paddingHorizontal: ph,
-                  borderRadius: 5,
-                  width: '45%',
-                  justifyContent: 'center',
-                  alignItems: 'center',
-                  borderColor: colors.accent,
-                  backgroundColor: colors.accent,
-                  borderWidth: 1,
+                  fontFamily: WEIGHT.medium,
+                  color: 'white',
+                  fontSize: SIZE.sm,
                 }}>
-                <Text
-                  style={{
-                    fontFamily: WEIGHT.medium,
-                    color: 'white',
-                    fontSize: SIZE.sm,
-                  }}>
-                  Add
-                </Text>
-              </TouchableOpacity>
+                Add
+              </Text>
+            </TouchableOpacity>
 
-              <TouchableOpacity
-                activeOpacity={opacity}
+            <TouchableOpacity
+              activeOpacity={opacity}
+              onPress={() => {
+                setTopicsToAdd(['']);
+                prevIndex = null;
+                prevItem = null;
+                currentSelectedItem = null;
+                close();
+              }}
+              style={{
+                paddingVertical: pv,
+                paddingHorizontal: ph,
+                borderRadius: 5,
+                width: '45%',
+                justifyContent: 'center',
+                alignItems: 'center',
+                backgroundColor: '#f0f0f0',
+              }}>
+              <Text
                 style={{
-                  paddingVertical: pv,
-                  paddingHorizontal: ph,
-                  borderRadius: 5,
-                  width: '45%',
-                  justifyContent: 'center',
-                  alignItems: 'center',
-                  backgroundColor: '#f0f0f0',
+                  fontFamily: WEIGHT.medium,
+                  color: colors.icon,
+                  fontSize: SIZE.sm,
                 }}>
-                <Text
-                  style={{
-                    fontFamily: WEIGHT.medium,
-                    color: colors.icon,
-                    fontSize: SIZE.sm,
-                  }}>
-                  Cancel
-                </Text>
-              </TouchableOpacity>
-            </View>
+                Cancel
+              </Text>
+            </TouchableOpacity>
           </View>
         </View>
-      </Modal>
-    </SafeAreaView>
+      </View>
+    </Modal>
   );
 };
 
@@ -281,24 +306,18 @@ const TopicItem = ({
         placeholderTextColor={colors.icon}
       />
 
-      {index == 0 && !focus ? (
-        <TouchableOpacity
-          onPress={() =>
-            !focus && index !== 0
-              ? onDelete(index)
-              : onSubmit(text, index, true)
-          }
-          style={{
-            justifyContent: 'center',
-            alignItems: 'center',
-          }}>
-          <Icon
-            name={!focus && index !== 0 ? 'minus' : 'plus'}
-            size={SIZE.lg}
-            color={colors.accent}
-          />
-        </TouchableOpacity>
-      ) : null}
+      <TouchableOpacity
+        onPress={() => (!focus ? onDelete(index) : onSubmit(text, index, true))}
+        style={{
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}>
+        <Icon
+          name={!focus ? 'minus' : 'plus'}
+          size={SIZE.lg}
+          color={colors.accent}
+        />
+      </TouchableOpacity>
     </View>
   );
 };