mobile: cleanup imports

apps/mobile/app/components/list/reorderable-list.tsx

@@ -0,0 +1,169 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import React, { useRef, useState } from "react";
+import { FlatList, StyleSheet, View } from "react-native";
+import {
+  DraxList,
+  DraxListProps,
+  DraxListRenderItemContent,
+  DraxProvider
+} from "react-native-drax";
+import { useThemeStore } from "../../stores/use-theme-store";
+import { SIZE } from "../../utils/size";
+import { Button } from "../ui/button";
+import { IconButton } from "../ui/icon-button";
+
+interface ReorderableListProps<T = never>
+  extends Omit<DraxListProps<T>, "renderItem"> {
+  onListOrderChanged: (data: any) => void;
+  renderDraggableItem: DraxListRenderItemContent<T>;
+  initialListData: T[];
+}
+
+function ReorderableList<T>({
+  renderDraggableItem,
+  initialListData,
+  onListOrderChanged,
+  ...restProps
+}: ReorderableListProps<T>) {
+  const colors = useThemeStore((state) => state.colors);
+  const [data, setData] = useState(initialListData || []);
+  const [dragging, setDragging] = useState(false);
+  const listRef = useRef<FlatList | null>(null);
+  return (
+    <DraxProvider>
+      <View style={styles.container}>
+        <DraxList
+          {...restProps}
+          ref={listRef}
+          data={data}
+          renderItemContent={(info, props) =>
+            !(info.item as any).visible && !dragging ? null : (
+              <View
+                style={{
+                  flexDirection: "row",
+                  opacity: !(info.item as any).visible ? 0.4 : 1
+                }}
+              >
+                <View
+                  style={{
+                    flexGrow: 1
+                  }}
+                >
+                  {renderDraggableItem(info, props)}
+                </View>
+                {dragging && !props.hover ? (
+                  <IconButton
+                    name={(info.item as any).visible ? "minus" : "plus"}
+                    color={colors.icon}
+                    size={SIZE.lg}
+                    top={0}
+                    bottom={0}
+                    onPress={() => {
+                      const newData = data.slice();
+                      newData.splice(info.index, 1);
+                      if ((info.item as any).visible) {
+                        newData.push({
+                          ...info.item,
+                          visible: false
+                        });
+                      } else {
+                        newData.push({
+                          ...info.item,
+                          visible: true
+                        });
+                      }
+                      onListOrderChanged?.(newData);
+                      setData(newData);
+                    }}
+                  />
+                ) : null}
+              </View>
+            )
+          }
+          itemStyles={{
+            hoverDragReleasedStyle: {
+              display: "none"
+            },
+            dragReleasedStyle: {
+              opacity: 1
+            }
+          }}
+          longPressDelay={500}
+          onItemDragStart={() => setDragging(true)}
+          lockItemDragsToMainAxis
+          onItemReorder={({ fromIndex, fromItem, toIndex, toItem }) => {
+            const newData = data.slice();
+            newData.splice(toIndex, 0, newData.splice(fromIndex, 1)[0]);
+            onListOrderChanged?.(newData);
+            setData(newData);
+          }}
+          keyExtractor={(item) => (item as any).id}
+          ListHeaderComponent={() =>
+            !dragging ? null : (
+              <View
+                style={{
+                  flexDirection: "row",
+                  borderRadius: 5,
+                  marginBottom: 12,
+                  height: 30,
+                  justifyContent: "space-between",
+                  alignItems: "center"
+                }}
+              >
+                <IconButton
+                  name="reorder-horizontal"
+                  size={25}
+                  customStyle={{
+                    width: 30,
+                    height: 30,
+                    marginRight: 5
+                  }}
+                  color={colors.icon}
+                />
+
+                <Button
+                  style={{
+                    borderRadius: 100
+                  }}
+                  type="grayAccent"
+                  title="Done"
+                  fontSize={SIZE.sm}
+                  height={27}
+                  onPress={() => {
+                    setDragging(false);
+                  }}
+                />
+              </View>
+            )
+          }
+        />
+      </View>
+    </DraxProvider>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  }
+});
+
+export default ReorderableList;

apps/mobile/app/components/side-menu/color-section.js

@@ -33,6 +33,7 @@ import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { ColoredNotes } from "../../screens/notes/colored";
 import { useCallback } from "react";
+import ReorderableList from "../list/reorderable-list";
 
 export const ColorSection = React.memo(
   function ColorSection() {
@@ -46,12 +47,29 @@ export const ColorSection = React.memo(
       }
     }, [loading, setColorNotes]);
 
-    return colorNotes.map((item, index) => {
-      let alias = db.colors.alias(item.id);
-      return (
-        <ColorItem key={item.id} alias={alias} item={item} index={index} />
-      );
-    });
+    return (
+      <ReorderableList
+        onListOrderChanged={(data) => {
+          console.log(data);
+        }}
+        alwaysBounceVertical={false}
+        initialListData={colorNotes.map((color) => ({
+          ...color,
+          visible: true
+        }))}
+        style={{
+          width: "100%",
+          paddingHorizontal: 12
+        }}
+        showsVerticalScrollIndicator={false}
+        renderDraggableItem={({ item, index }) => {
+          let alias = db.colors.alias(item.id);
+          return (
+            <ColorItem key={item.id} alias={alias} item={item} index={index} />
+          );
+        }}
+      />
+    );
   },
   () => true
 );

apps/mobile/app/components/side-menu/index.js

@@ -31,6 +31,7 @@ import { useUserStore } from "../../stores/use-user-store";
 import { toggleDarkMode } from "../../utils/color-scheme/utils";
 import { MenuItemsList, SUBSCRIPTION_STATUS } from "../../utils/constants";
 import { eOpenPremiumDialog } from "../../utils/events";
+import ReorderableList from "../list/reorderable-list";
 import { ColorSection } from "./color-section";
 import { MenuItem } from "./menu-item";
 import { TagsSection } from "./pinned-section";
@@ -82,14 +83,29 @@ export const SideMenu = React.memo(
     const renderItem = useCallback(
       () => (
         <>
-          {MenuItemsList.map((item, index) => (
-            <MenuItem
-              key={item.name}
-              item={item}
-              testID={item.name}
-              index={index}
-            />
-          ))}
+          <ReorderableList
+            onListOrderChanged={(data) => {
+              console.log(data);
+            }}
+            alwaysBounceVertical={false}
+            initialListData={MenuItemsList}
+            style={{
+              width: "100%",
+              paddingHorizontal: 12
+            }}
+            showsVerticalScrollIndicator={false}
+            renderDraggableItem={({ item, index }) => {
+              return (
+                <MenuItem
+                  key={item.name}
+                  item={item}
+                  testID={item.name}
+                  index={index}
+                />
+              );
+            }}
+          />
+
           <ColorSection noTextMode={noTextMode} />
           <TagsSection />
         </>
@@ -110,8 +126,7 @@ export const SideMenu = React.memo(
             height: "100%",
             width: "100%",
             backgroundColor: deviceMode !== "mobile" ? colors.nav : colors.bg,
-            paddingTop: insets.top,
-            borderRadius: 10
+            paddingTop: insets.top
           }}
         >
           <FlatList
@@ -119,16 +134,12 @@ export const SideMenu = React.memo(
             contentContainerStyle={{
               flexGrow: 1
             }}
-            style={{
-              height: "100%",
-              width: "100%",
-              paddingHorizontal: 12
-            }}
             showsVerticalScrollIndicator={false}
             data={[0]}
             keyExtractor={() => "mainMenuView"}
             renderItem={renderItem}
           />
+
           <View
             style={{
               paddingHorizontal: 12

apps/mobile/app/utils/constants.js

@@ -104,33 +104,39 @@ export const MenuItemsList = [
   {
     name: "Notes",
     icon: "home-variant-outline",
-    close: true
+    close: true,
+    visible: true
   },
   {
     name: "Notebooks",
     icon: "book-outline",
+    visible: true,
     close: true
   },
   {
     name: "Favorites",
     icon: "star-outline",
+    visible: true,
     close: true
   },
   {
     name: "Tags",
     icon: "pound",
+    visible: true,
     close: true
   },
   {
     name: "Reminders",
     icon: "bell",
     close: true,
+    visible: true,
     isBeta: true
   },
   {
     name: "Monographs",
     icon: "text-box-multiple-outline",
     close: true,
+    visible: true,
     func: () => {
       const Monographs = require("../screens/notes/monographs").Monographs;
       Monographs.navigate();
@@ -139,6 +145,7 @@ export const MenuItemsList = [
   {
     name: "Trash",
     icon: "delete-outline",
+    visible: true,
     close: true
   }
 ];