diff --git a/apps/mobile/app/components/container/index.tsx b/apps/mobile/app/components/container/index.tsx
index fc1e61f0e..9cf81ba8b 100644
--- a/apps/mobile/app/components/container/index.tsx
+++ b/apps/mobile/app/components/container/index.tsx
@@ -18,27 +18,25 @@ along with this program. If not, see .
*/
import React, { PropsWithChildren } from "react";
-import { KeyboardAvoidingView, Platform } from "react-native";
+import { Platform, View, useWindowDimensions } from "react-native";
import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
-import useIsFloatingKeyboard from "../../hooks/use-is-floating-keyboard";
export const Container = ({ children }: PropsWithChildren) => {
- const floating = useIsFloatingKeyboard();
const insets = useGlobalSafeAreaInsets();
+ const dimensions = useWindowDimensions();
return (
-
{children}
-
+
);
};
diff --git a/apps/mobile/app/components/dialogs/color-picker/index.tsx b/apps/mobile/app/components/dialogs/color-picker/index.tsx
index e68d7dfb9..14e1c8af7 100644
--- a/apps/mobile/app/components/dialogs/color-picker/index.tsx
+++ b/apps/mobile/app/components/dialogs/color-picker/index.tsx
@@ -16,131 +16,27 @@ 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 { Color } from "@notesnook/core";
import { useThemeColors } from "@notesnook/theme";
import React, { useRef, useState } from "react";
import { TextInput, View } from "react-native";
-import { FlashList } from "react-native-actions-sheet/dist/src/views/FlashList";
-import Icon from "react-native-vector-icons/MaterialCommunityIcons";
+import ColorPickerWheel from "react-native-wheel-color-picker";
import { db } from "../../../common/database";
+import { useStoredRef } from "../../../hooks/use-stored-ref";
import { ToastManager } from "../../../services/event-manager";
import { useMenuStore } from "../../../stores/use-menu-store";
import { useRelationStore } from "../../../stores/use-relation-store";
import { useSettingStore } from "../../../stores/use-setting-store";
-import { SIZE } from "../../../utils/size";
import BaseDialog from "../../dialog/base-dialog";
import DialogContainer from "../../dialog/dialog-container";
import { Toast } from "../../toast";
import { Button } from "../../ui/button";
import Input from "../../ui/input";
import { PressableButton } from "../../ui/pressable";
-import { Color } from "@notesnook/core";
-const arrayOfColors = [
- "#FF5733",
- "#33FF57",
- "#339DFF",
- "#FF33E9",
- "#E9FF33",
- "#FF3395",
- "#95FF33",
- "#FF3369",
- "#6933FF",
- "#33FFC7",
- "#FF5733",
- "#33FF57",
- "#339DFF",
- "#FF33E9",
- "#E9FF33",
- "#FF3395",
- "#95FF33",
- "#FF3369",
- "#6933FF",
- "#33FFC7",
- "#FF5733",
- "#33FF57",
- "#339DFF",
- "#FF33E9",
- "#E9FF33",
- "#FF3395",
- "#95FF33",
- "#FF3369",
- "#6933FF",
- "#33FFC7",
- "#FF5733",
- "#33FF57",
- "#339DFF",
- "#FF33E9",
- "#E9FF33",
- "#FF3395",
- "#95FF33",
- "#FF3369",
- "#6933FF",
- "#33FFC7",
- "#FF5733",
- "#33FF57",
- "#339DFF",
- "#FF33E9",
- "#E9FF33",
- "#FF3395",
- "#95FF33",
- "#FF3369",
- "#6933FF",
- "#33FFC7",
- "#FF5733",
- "#33FF57",
- "#339DFF",
- "#FF33E9",
- "#E9FF33",
- "#FF3395",
- "#95FF33",
- "#FF3369",
- "#6933FF",
- "#33FFC7",
- "#FF5733",
- "#33FF57",
- "#339DFF",
- "#FF33E9",
- "#E9FF33",
- "#FF3395",
- "#95FF33",
- "#FF3369",
- "#6933FF",
- "#33FFC7",
- "#FF5733",
- "#33FF57",
- "#339DFF",
- "#FF33E9",
- "#E9FF33",
- "#FF3395",
- "#95FF33",
- "#FF3369",
- "#6933FF",
- "#33FFC7",
- "#FF5733",
- "#33FF57",
- "#339DFF",
- "#FF33E9",
- "#E9FF33",
- "#FF3395",
- "#95FF33",
- "#FF3369",
- "#6933FF",
- "#33FFC7"
-];
+
const HEX_COLOR_REGEX_ALPHA =
/^#(?:(?:[\da-fA-F]{3}){1,2}|(?:[\da-fA-F]{4}){1,2})$/;
-const convertToColorObjects = (colors: string[]) => {
- const colorObjects = [];
- for (let i = 0; i < colors.length; i += 3) {
- colorObjects.push({
- colorOne: colors[i],
- colorTwo: colors[i + 1],
- colorThree: colors[i + 2]
- });
- }
- return colorObjects;
-};
-
const ColorPicker = ({
visible,
setVisible,
@@ -154,43 +50,7 @@ const ColorPicker = ({
const { colors } = useThemeColors();
const inputRef = useRef(null);
const title = useRef();
-
- const renderItem = ({
- item
- }: {
- item: { colorOne: string; colorTwo: string; colorThree: string };
- }) => (
-
- {Object.keys(item).map((key) => (
- {
- const color = item[key as keyof typeof item];
- setSelectedColor(color);
- inputRef.current?.setNativeProps({
- placeholder: color,
- text: color
- });
- }}
- >
- {selectedColor === item[key as keyof typeof item] ? (
-
- ) : null}
-
- ))}
-
- );
+ const colorRef = useStoredRef("color-ref", "#f0f0f0");
return (
-
-
-
+
- {
- if (HEX_COLOR_REGEX_ALPHA.test(value)) {
- setSelectedColor(value);
- inputRef.current?.setNativeProps({
- placeholder: value,
- text: value
- });
- }
- }}
- />
- {
+ if (color === selectedColor) return;
+ colorRef.current = color;
+ setSelectedColor(color);
+ inputRef.current?.setNativeProps({
+ placeholder: color,
+ text: color
+ });
}}
+ useNativeLayout={true}
+ autoResetSlider={true}
+ color={colorRef.current}
+ sliderSize={30}
+ thumbSize={25}
+ shadeWheelThumb
+ shadeSliderThumb={true}
+ swatchesOnly={false}
+ swatches={false}
+ useNativeDriver={true}
/>
- {
- title.current = value;
+
+ >
+
+ {
+ if (HEX_COLOR_REGEX_ALPHA.test(value)) {
+ colorRef.current = value;
+ setSelectedColor(value);
+ }
+ }}
+ defaultValue={colorRef.current}
+ />
+
+
-
diff --git a/apps/mobile/app/components/properties/index.js b/apps/mobile/app/components/properties/index.js
index a33d5d6b6..8601fec7e 100644
--- a/apps/mobile/app/components/properties/index.js
+++ b/apps/mobile/app/components/properties/index.js
@@ -26,6 +26,7 @@ import { presentSheet } from "../../services/event-manager";
import { ColorValues } from "../../utils/colors";
import { SIZE } from "../../utils/size";
import SheetProvider from "../sheet-provider";
+import { PressableButton } from "../ui/pressable";
import { ReminderTime } from "../ui/reminder-time";
import Heading from "../ui/typography/heading";
import Paragraph from "../ui/typography/paragraph";
@@ -34,7 +35,6 @@ import { Items } from "./items";
import Notebooks from "./notebooks";
import { Synced } from "./synced";
import { TagStrip, Tags } from "./tags";
-import { PressableButton } from "../ui/pressable";
const Line = ({ top = 6, bottom = 6 }) => {
const { colors } = useThemeColors();
@@ -225,7 +225,8 @@ Properties.present = async (item, buttons = [], isSheet) => {
"add-shortcut",
"trash",
"default-notebook",
- "add-notebook"
+ "add-notebook",
+ "move-notes"
]);
break;
case "tag":
diff --git a/apps/mobile/app/components/sheet-provider/index.js b/apps/mobile/app/components/sheet-provider/index.js
index a7f47e33c..db07f89c9 100644
--- a/apps/mobile/app/components/sheet-provider/index.js
+++ b/apps/mobile/app/components/sheet-provider/index.js
@@ -55,7 +55,10 @@ const SheetProvider = ({ context = "global" }) => {
async (payload) => {
if (!payload.context) payload.context = "global";
if (payload.context !== context) return;
- setData(payload);
+ setData((state) => {
+ if (state?.onClose) state.onClose();
+ return payload;
+ });
setVisible(true);
if (payload.editor) {
editor.current.refocus = false;
diff --git a/apps/mobile/app/components/sheets/add-notebook/index.tsx b/apps/mobile/app/components/sheets/add-notebook/index.tsx
index 665014f32..ed56a48e8 100644
--- a/apps/mobile/app/components/sheets/add-notebook/index.tsx
+++ b/apps/mobile/app/components/sheets/add-notebook/index.tsx
@@ -174,7 +174,8 @@ export const AddNotebookSheet = ({
AddNotebookSheet.present = (
notebook?: Notebook,
parentNotebook?: Notebook,
- context?: string
+ context?: string,
+ onClose?: () => void
) => {
presentSheet({
context: context,
@@ -184,6 +185,7 @@ AddNotebookSheet.present = (
parentNotebook={parentNotebook}
close={close}
/>
- )
+ ),
+ onClose: onClose
});
};
diff --git a/apps/mobile/app/components/sheets/move-notes/movenote.tsx b/apps/mobile/app/components/sheets/move-notes/movenote.tsx
index 8228541cf..a115884b0 100644
--- a/apps/mobile/app/components/sheets/move-notes/movenote.tsx
+++ b/apps/mobile/app/components/sheets/move-notes/movenote.tsx
@@ -25,8 +25,10 @@ import { Platform, View, useWindowDimensions } from "react-native";
import { ActionSheetRef } from "react-native-actions-sheet";
import { FlashList } from "react-native-actions-sheet/dist/src/views/FlashList";
import { db } from "../../../common/database";
+import { useDBItem } from "../../../hooks/use-db-item";
import { presentSheet } from "../../../services/event-manager";
import Navigation from "../../../services/navigation";
+import { createItemSelectionStore } from "../../../stores/item-selection-store";
import { updateNotebook } from "../../../utils/notebooks";
import { SIZE } from "../../../utils/size";
import { Dialog } from "../../dialog";
@@ -36,7 +38,8 @@ import { IconButton } from "../../ui/icon-button";
import { PressableButton } from "../../ui/pressable";
import Seperator from "../../ui/seperator";
import Paragraph from "../../ui/typography/paragraph";
-import { useDBItem } from "../../../hooks/use-db-item";
+
+const useItemSelectionStore = createItemSelectionStore(true);
export const MoveNotes = ({
notebook,
@@ -47,11 +50,11 @@ export const MoveNotes = ({
}) => {
const { colors } = useThemeColors();
const currentNotebook = notebook;
-
+ const selectionCount = useItemSelectionStore(
+ (state) => Object.keys(state.selection)?.length > 0
+ );
const { height } = useWindowDimensions();
- const [selectedNoteIds, setSelectedNoteIds] = useState([]);
const [notes, setNotes] = useState>();
- const [existingNoteIds, setExistingNoteIds] = useState([]);
useEffect(() => {
db.notes?.all.sorted(db.settings.getGroupOptions("notes")).then((notes) => {
@@ -61,45 +64,26 @@ export const MoveNotes = ({
.from(currentNotebook, "note")
.get()
.then((existingNotes) => {
- setExistingNoteIds(
- existingNotes.map((existingNote) => existingNote.toId)
- );
+ const selection: { [name: string]: any } = {};
+ existingNotes.forEach((rel) => {
+ selection[rel.toId] = "selected";
+ });
+ useItemSelectionStore.setState({
+ selection: selection,
+ initialState: selection
+ });
});
- }, [currentNotebook]);
- const select = React.useCallback(
- (id: string) => {
- const index = selectedNoteIds.indexOf(id);
- if (index > -1) {
- setSelectedNoteIds((selectedNoteIds) => {
- const next = [...selectedNoteIds];
- next.splice(index, 1);
- return next;
- });
- } else {
- setSelectedNoteIds((selectedNoteIds) => {
- const next = [...selectedNoteIds];
- next.push(id);
- return next;
- });
- }
- },
- [selectedNoteIds]
- );
+ return () => {
+ useItemSelectionStore.getState().reset();
+ };
+ }, [currentNotebook]);
const renderItem = React.useCallback(
({ index }: { item: boolean; index: number }) => {
- return (
- selectedNoteIds?.indexOf(id) > -1}
- exists={(id) => existingNoteIds.indexOf(id) > -1}
- />
- );
+ return ;
},
- [existingNoteIds, notes, select, selectedNoteIds]
+ [notes]
);
return (
@@ -135,12 +119,12 @@ export const MoveNotes = ({
data={notes?.placeholders}
renderItem={renderItem}
/>
- {selectedNoteIds.length > 0 ? (
+ {selectionCount ? (