mobile: add remove from notebook with multi-select

This commit is contained in:
ammarahm-ed
2023-03-17 14:21:32 +05:00
committed by Abdullah Atta
parent fdeb34ff0a
commit 590f2d80d3
11 changed files with 92 additions and 65 deletions

View File

@@ -89,6 +89,7 @@ export const ColorTags = ({ item }) => {
flexWrap: "wrap",
flexGrow: isTablet ? undefined : 1,
paddingHorizontal: 12,
paddingRight: 0,
alignItems: "center",
justifyContent: isTablet ? "center" : "space-between"
}}

View File

@@ -179,6 +179,7 @@ Properties.present = (item, buttons = [], isSheet) => {
"lock-unlock",
"trash",
"remove-from-topic",
"remove-from-notebook",
"history",
"read-only",
"reminders",

View File

@@ -108,7 +108,8 @@ export const Items = ({ item, buttons, close }) => {
/>
);
const renderTopBarItem = (item) => {
const renderTopBarItem = (item, index) => {
const isLast = index === topBarItems.length;
return (
<PressableButton
onPress={item.func}
@@ -118,7 +119,7 @@ export const Items = ({ item, buttons, close }) => {
alignItems: "center",
width: topBarItemWidth,
marginBottom: 10,
marginRight: 10,
marginRight: isLast ? 0 : 10,
backgroundColor: "transparent"
}}
>
@@ -200,10 +201,8 @@ export const Items = ({ item, buttons, close }) => {
disableVirtualization={true}
style={{
marginTop: item.type !== "note" ? 10 : 0,
paddingTop: 10
}}
columnWrapperStyle={{
justifyContent: "flex-start"
paddingTop: 10,
marginLeft: 6
}}
contentContainerStyle={{
alignSelf: "center",

View File

@@ -40,7 +40,9 @@ export const Tags = ({ item, close }) => {
flexWrap: "wrap",
alignItems: "center",
paddingHorizontal: 12,
alignSelf: "center"
alignSelf: "center",
justifyContent: "space-between",
width: "100%"
}}
>
<Button
@@ -76,8 +78,8 @@ export const TagStrip = ({ item, close }) => {
alignItems: "center"
}}
>
{item.tags.map((item) =>
item ? <TagItem key={item} tag={item} close={close} /> : null
{item.tags.map((tag) =>
tag ? <TagItem key={tag} tag={item} close={close} /> : null
)}
</View>
) : null;

View File

@@ -264,19 +264,29 @@ export const SelectionHeader = React.memo(() => {
</>
)}
{screen === "TopicNotes" ? (
{screen === "TopicNotes" || screen === "Notebook" ? (
<IconButton
onPress={async () => {
if (selectedItemsList.length > 0) {
const currentTopic =
const currentScreen =
useNavigationStore.getState().currentScreen;
await db.notes.removeFromNotebook(
{
id: currentTopic.notebookId,
topic: currentTopic.id
},
...selectedItemsList.map((item) => item.id)
);
if (screen === "Notebook") {
for (const item of selectedItemsList) {
await db.relations.unlink(
{ type: "notebook", id: currentScreen.id },
item
);
}
} else {
await db.notes.removeFromNotebook(
{
id: currentScreen.notebookId,
topic: currentScreen.id
},
...selectedItemsList.map((item) => item.id)
);
}
Navigation.queueRoutesForUpdate(
"Notes",
@@ -293,7 +303,9 @@ export const SelectionHeader = React.memo(() => {
customStyle={{
marginLeft: 10
}}
tooltipText="Remove from topic"
tooltipText={`Remove from ${
screen === "Notebook" ? "notebook" : "topic"
}`}
tooltipPosition={4}
testID="select-minus"
color={colors.pri}

View File

@@ -217,7 +217,7 @@ export class AddNotebookSheet extends React.Component {
topics: prevTopics
});
setTimeout(() => {
this.listRef.scrollToEnd({ animated: true });
this.listRef.current?.scrollToEnd?.({ animated: true });
}, 30);
this.currentInputValue = null;
} else {
@@ -241,7 +241,7 @@ export class AddNotebookSheet extends React.Component {
if (forward) {
setTimeout(() => {
this.listRef.scrollToEnd({ animated: true });
this.listRef.current?.scrollToEnd?.({ animated: true });
}, 30);
}
}

View File

@@ -164,8 +164,7 @@ export const TopicsSheet = () => {
ref={ref}
isModal={false}
containerStyle={{
height: 530,
maxHeight: 800,
maxHeight: 600,
borderTopRightRadius: 15,
borderTopLeftRadius: 15,
backgroundColor: colors.bg,
@@ -239,7 +238,7 @@ export const TopicsSheet = () => {
>
<View
style={{
height: 530,
maxHeight: 600,
width: "100%"
}}
>
@@ -322,6 +321,18 @@ export const TopicsSheet = () => {
}
keyExtractor={(item) => item.id}
renderItem={renderTopic}
ListEmptyComponent={
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
height: 300
}}
>
<Paragraph color={colors.icon}>No topics</Paragraph>
</View>
}
ListFooterComponent={<View style={{ height: 50 }} />}
/>
</SelectionContext.Provider>

View File

@@ -102,6 +102,15 @@ export const useActions = ({ close = () => null, item }) => {
);
};
const isNoteInNotebook = () => {
const currentScreen = useNavigationStore.getState().currentScreen;
if (item.type !== "note" || currentScreen.name !== "Notebook") return;
return !!db.relations
.to(item, "notebook")
.find((notebook) => notebook.id === currentScreen.id);
};
const onUpdate = useCallback(
async (type) => {
if (type === "unpin") {
@@ -506,6 +515,22 @@ export const useActions = ({ close = () => null, item }) => {
close();
}
async function removeNoteFromNotebook() {
const currentScreen = useNavigationStore.getState().currentScreen;
if (currentScreen.name !== "Notebook") return;
await db.relations.unlink({ type: "notebook", id: currentScreen.id }, item);
Navigation.queueRoutesForUpdate(
"TaggedNotes",
"ColoredNotes",
"TopicNotes",
"Favorites",
"Notes",
"Notebook",
"Notebooks"
);
close();
}
async function deleteTrashItem() {
if (!checkNoteSynced()) return;
close();
@@ -828,6 +853,13 @@ export const useActions = ({ close = () => null, item }) => {
icon: "minus-circle-outline",
func: removeNoteFromTopic
},
{
id: "remove-from-notebook",
title: "Remove from notebook",
hidden: !isNoteInNotebook(),
icon: "minus-circle-outline",
func: removeNoteFromNotebook
},
{
id: "trash",
title:

View File

@@ -15,7 +15,7 @@
"html-to-text": "8.1.0",
"phone": "^3.1.14",
"qclone": "^1.2.0",
"react-native-actions-sheet": "^0.9.0-alpha.6",
"react-native-actions-sheet": "^0.9.0-alpha.8",
"react-native-check-version": "https://github.com/flexible-agency/react-native-check-version",
"react-native-drax": "^0.10.2",
"react-native-image-zoom-viewer": "^3.0.1",

View File

@@ -126,7 +126,7 @@ const Notebook = ({ route, navigation }: NavigationProps<"Notebook">) => {
const PLACEHOLDER_DATA = {
heading: params.current.item?.title,
paragraph: "You have not added any notes yet.",
button: "Add first note",
button: "Add your first note",
action: openEditor,
loading: "Loading notebook notes"
};

View File

@@ -42,7 +42,7 @@
"qclone": "^1.2.0",
"react": "18.0.0",
"react-native": "0.69.7",
"react-native-actions-sheet": "^0.9.0-alpha.6",
"react-native-actions-sheet": "^0.9.0-alpha.8",
"react-native-check-version": "https://github.com/flexible-agency/react-native-check-version",
"react-native-drax": "^0.10.2",
"react-native-image-zoom-viewer": "^3.0.1",
@@ -17957,31 +17957,14 @@
}
},
"node_modules/react-native-actions-sheet": {
"version": "0.9.0-alpha.6",
"resolved": "https://registry.npmjs.org/react-native-actions-sheet/-/react-native-actions-sheet-0.9.0-alpha.6.tgz",
"integrity": "sha512-CtSttiXk+pTmuzrtfDlX5cwYEBsS2DuvZSE17iEYzbTDaYQ2ahRn7+34h4kuDmqLvp9Sdksb7C8s5pFJj+S9sA==",
"dependencies": {
"@shopify/flash-list": "^1.4.1"
},
"version": "0.9.0-alpha.8",
"resolved": "https://registry.npmjs.org/react-native-actions-sheet/-/react-native-actions-sheet-0.9.0-alpha.8.tgz",
"integrity": "sha512-PNzZ4bPg99aX9rxZL9McglmnepUKQMRLloJRRvRAVNA45s1wWzWVyLQukv86/IPRnrrbg/fU/OaUkuFB07YOng==",
"peerDependencies": {
"react-native": "*",
"react-native-gesture-handler": "*"
}
},
"node_modules/react-native-actions-sheet/node_modules/@shopify/flash-list": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/@shopify/flash-list/-/flash-list-1.4.1.tgz",
"integrity": "sha512-yM5dlhqolO/R8FKomqCrSYz0Cc82vJDikxhbu1CXXGp3rPvo/ceP9jJyKueW96SXHsn/87fcSq2BjztWjlp74Q==",
"dependencies": {
"recyclerlistview": "4.2.0",
"tslib": "2.4.0"
},
"peerDependencies": {
"@babel/runtime": "*",
"react": "*",
"react-native": "*"
}
},
"node_modules/react-native-actions-shortcuts": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/react-native-actions-shortcuts/-/react-native-actions-shortcuts-1.0.1.tgz",
@@ -24329,7 +24312,7 @@
"qclone": "^1.2.0",
"react": "18.0.0",
"react-native": "0.69.7",
"react-native-actions-sheet": "^0.9.0-alpha.6",
"react-native-actions-sheet": "^0.9.0-alpha.8",
"react-native-check-version": "https://github.com/flexible-agency/react-native-check-version",
"react-native-drax": "^0.10.2",
"react-native-image-zoom-viewer": "^3.0.1",
@@ -34873,23 +34856,9 @@
}
},
"react-native-actions-sheet": {
"version": "0.9.0-alpha.6",
"resolved": "https://registry.npmjs.org/react-native-actions-sheet/-/react-native-actions-sheet-0.9.0-alpha.6.tgz",
"integrity": "sha512-CtSttiXk+pTmuzrtfDlX5cwYEBsS2DuvZSE17iEYzbTDaYQ2ahRn7+34h4kuDmqLvp9Sdksb7C8s5pFJj+S9sA==",
"requires": {
"@shopify/flash-list": "^1.4.1"
},
"dependencies": {
"@shopify/flash-list": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/@shopify/flash-list/-/flash-list-1.4.1.tgz",
"integrity": "sha512-yM5dlhqolO/R8FKomqCrSYz0Cc82vJDikxhbu1CXXGp3rPvo/ceP9jJyKueW96SXHsn/87fcSq2BjztWjlp74Q==",
"requires": {
"recyclerlistview": "4.2.0",
"tslib": "2.4.0"
}
}
}
"version": "0.9.0-alpha.8",
"resolved": "https://registry.npmjs.org/react-native-actions-sheet/-/react-native-actions-sheet-0.9.0-alpha.8.tgz",
"integrity": "sha512-PNzZ4bPg99aX9rxZL9McglmnepUKQMRLloJRRvRAVNA45s1wWzWVyLQukv86/IPRnrrbg/fU/OaUkuFB07YOng=="
},
"react-native-actions-shortcuts": {
"version": "1.0.1",