diff --git a/apps/mobile/app/components/list/reorderable-list.tsx b/apps/mobile/app/components/list/reorderable-list.tsx index 3ecc57d0d..ec8802ba2 100644 --- a/apps/mobile/app/components/list/reorderable-list.tsx +++ b/apps/mobile/app/components/list/reorderable-list.tsx @@ -28,9 +28,8 @@ import { } from "react-native-drax"; import { tabBarRef } from "../../utils/global-refs"; import { SIZE } from "../../utils/size"; -import { IconButton } from "../ui/icon-button"; -import Paragraph from "../ui/typography/paragraph"; import { useSideBarDraggingStore } from "../side-menu/dragging-store"; +import { IconButton } from "../ui/icon-button"; interface ReorderableListProps extends Omit, "renderItem" | "data" | "renderItemContent"> { @@ -39,7 +38,8 @@ interface ReorderableListProps data: T[]; itemOrder: string[]; hiddenItems: string[]; - onHiddenItemsChanged: (data: string[]) => void; + onHiddenItemsChanged?: (data: string[]) => void; + canHideItems?: boolean; } function ReorderableList({ @@ -49,6 +49,7 @@ function ReorderableList({ hiddenItems = [], itemOrder = [], onHiddenItemsChanged, + canHideItems = true, ...restProps }: ReorderableListProps) { const { colors } = useThemeColors(); @@ -86,7 +87,7 @@ function ReorderableList({ > {renderDraggableItem(info, props)} - {dragging ? ( + {dragging && canHideItems ? ( ({ } else { _hiddenItems.splice(index, 1); } - onHiddenItemsChanged(_hiddenItems); + onHiddenItemsChanged?.(_hiddenItems); setHiddenItems(_hiddenItems); }} /> @@ -114,7 +115,8 @@ function ReorderableList({ dragging, hiddenItemsState, onHiddenItemsChanged, - renderDraggableItem + renderDraggableItem, + canHideItems ] ); @@ -128,7 +130,6 @@ function ReorderableList({ items.splice(index, 0, item); } }); - console.log(items.map((item) => item.id)); return items; } @@ -166,7 +167,6 @@ function ReorderableList({ } else { newOrder.splice(toIndex, 0, element); } - console.log(newOrder); setItemsOrder(newOrder); onListOrderChanged?.(newOrder); }} diff --git a/apps/mobile/app/components/side-menu/index.js b/apps/mobile/app/components/side-menu/index.tsx similarity index 88% rename from apps/mobile/app/components/side-menu/index.js rename to apps/mobile/app/components/side-menu/index.tsx index fb3d50426..6858fbbac 100644 --- a/apps/mobile/app/components/side-menu/index.js +++ b/apps/mobile/app/components/side-menu/index.tsx @@ -21,6 +21,7 @@ import { useThemeColors } from "@notesnook/theme"; import React, { useCallback } from "react"; import { FlatList, View } from "react-native"; import { notesnook } from "../../../e2e/test.ids"; +import { db } from "../../common/database"; import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets"; import { DDS } from "../../services/device-detection"; import { eSendEvent } from "../../services/event-manager"; @@ -31,16 +32,15 @@ import { useUserStore } from "../../stores/use-user-store"; import { SUBSCRIPTION_STATUS } from "../../utils/constants"; import { eOpenPremiumDialog } from "../../utils/events"; import { MenuItemsList } from "../../utils/menu-items"; +import { SIZE } from "../../utils/size"; +import ReorderableList from "../list/reorderable-list"; +import { IconButton } from "../ui/icon-button"; +import Paragraph from "../ui/typography/paragraph"; import { ColorSection } from "./color-section"; +import { useSideBarDraggingStore } from "./dragging-store"; import { MenuItem } from "./menu-item"; import { PinnedSection } from "./pinned-section"; import { UserStatus } from "./user-status"; -import ReorderableList from "../list/reorderable-list"; -import { db } from "../../common/database"; -import { useSideBarDraggingStore } from "./dragging-store"; -import Paragraph from "../ui/typography/paragraph"; -import { IconButton } from "../ui/icon-button"; -import { SIZE } from "../../utils/size"; export const SideMenu = React.memo( function SideMenu() { @@ -55,7 +55,6 @@ export const SideMenu = React.memo( const introCompleted = useSettingStore( (state) => state.settings.introCompleted ); - const noTextMode = false; const BottomItemsList = [ { name: isDark ? "Day" : "Night", @@ -89,13 +88,13 @@ export const SideMenu = React.memo( <> { - db.settings.setSideBarOrder("menu", data); + db.settings.setSideBarOrder("routes", data); }} onHiddenItemsChanged={(data) => { - db.settings.setSideBarHiddenItems("menu", data); + db.settings.setSideBarHiddenItems("routes", data); }} - itemOrder={db.settings.getSideBarOrder("menu")} - hiddenItems={db.settings.getSideBarHiddenItems("menu")} + itemOrder={db.settings.getSideBarOrder("routes")} + hiddenItems={db.settings.getSideBarHiddenItems("routes")} alwaysBounceVertical={false} data={MenuItemsList} style={{ @@ -113,11 +112,11 @@ export const SideMenu = React.memo( ); }} /> - + ), - [noTextMode] + [] ); return !isAppLoading && introCompleted ? ( @@ -144,12 +143,14 @@ export const SideMenu = React.memo( marginBottom: 12, justifyContent: "space-between", alignItems: "center", - borderBottomWidth: 1, - borderBottomColor: colors.primary.border, - paddingHorizontal: 12 + paddingHorizontal: 12, + backgroundColor: colors.secondary.background, + marginHorizontal: 12, + marginTop: 5, + paddingVertical: 6 }} > - REORDER SIDEBAR + REORDERING {subscriptionType === SUBSCRIPTION_STATUS.TRIAL || subscriptionType === SUBSCRIPTION_STATUS.BASIC ? ( - + ) : null} {BottomItemsList.slice(DDS.isLargeTablet() ? 0 : 1, 3).map( @@ -204,10 +199,9 @@ export const SideMenu = React.memo( key={item.name} item={item} index={index} - ignore={true} rightBtn={ DDS.isLargeTablet() || item.name === "Notesnook Pro" - ? null + ? undefined : BottomItemsList[0] } /> @@ -221,7 +215,7 @@ export const SideMenu = React.memo( paddingHorizontal: 0 }} > - + diff --git a/apps/mobile/app/components/side-menu/menu-item.js b/apps/mobile/app/components/side-menu/menu-item.js deleted file mode 100644 index 63be673ee..000000000 --- a/apps/mobile/app/components/side-menu/menu-item.js +++ /dev/null @@ -1,157 +0,0 @@ -/* -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 . -*/ - -import { useThemeColors } from "@notesnook/theme"; -import React, { useCallback, useEffect, useState } from "react"; -import { View } from "react-native"; -import Icon from "react-native-vector-icons/MaterialCommunityIcons"; -import ToggleSwitch from "toggle-switch-react-native"; -import Navigation from "../../services/navigation"; -import useNavigationStore from "../../stores/use-navigation-store"; -import { SIZE, normalize } from "../../utils/size"; -import { Button } from "../ui/button"; -import { PressableButton } from "../ui/pressable"; -import Heading from "../ui/typography/heading"; -import Paragraph from "../ui/typography/paragraph"; - -export const MenuItem = React.memo( - function MenuItem({ item, index, testID, rightBtn }) { - const { colors } = useThemeColors(); - const isFocused = useNavigationStore( - (state) => state.focusedRouteId === item.name - ); - const primaryColors = isFocused ? colors.selected : colors.primary; - - const _onPress = () => { - if (item.func) { - item.func(); - } else { - if (useNavigationStore.getState().currentRoute !== item.name) { - Navigation.navigate(item.name, { - canGoBack: false, - beta: item.isBeta - }); - } - } - if (item.close) { - setImmediate(() => { - Navigation.closeDrawer(); - }); - } - }; - - return ( - - - - {isFocused ? ( - - {item.name} - - ) : ( - {item.name} - )} - - {item.isBeta ? ( - - - BETA - - - ) : null} - - - {item.switch ? ( - - ) : rightBtn ? ( -