Move deleting from swipeable menu to inside rule

Fierdetta · Feb 17, 2023 · 3586144 · 3586144
1 parent 29004f5
commit 3586144
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 34 deletions.
diff --git a/src/ui/components/RuleRow.tsx b/src/ui/components/RuleRow.tsx
@@ -1,37 +1,14 @@
-import { findByDisplayName, findByProps } from "@vendetta/metro";
 import { constants as Constants, NavigationNative } from "@vendetta/metro/common";
-import { storage } from "@vendetta/plugin";
-import { getAssetIDByName } from "@vendetta/ui/assets";
-import { Forms, General } from "@vendetta/ui/components";
+import { Forms } from "@vendetta/ui/components";
 import EditRule from "../pages/EditRule";
 
 // Components
-const { View, TouchableOpacity } = General;
 const { FormRow, FormArrow } = Forms;
-const { Swipeable } = findByProps("Swipeable");
-const { default: Icon } = findByDisplayName("Icon", false);
-
-const Trash = getAssetIDByName("ic_trash_24px");
 
 export default function RuleRow({ rule, index }) {
 	const navigation = NavigationNative.useNavigation();
 
-	function RuleRowRightActions() {
-		const deleteRuleCallback = () => {
-			storage.rules.splice(index, 1);
-		};
-
-		return (
-			<TouchableOpacity onPress={deleteRuleCallback}>
-				<View style={{ paddingHorizontal: 16, paddingVertical: 12 }}>
-					<Icon source={Trash} />
-				</View>
-			</TouchableOpacity>
-		);
-	};
-
 	return (
-		<Swipeable renderRightActions={RuleRowRightActions}>
 			<FormRow
 				label={rule.name}
 				trailing={<FormArrow />}
@@ -40,6 +17,5 @@ export default function RuleRow({ rule, index }) {
 					render: () => <EditRule ruleIndex={index} />
 				})}
 			/>
-		</Swipeable>
 	);
 };
diff --git a/src/ui/pages/EditRule.tsx b/src/ui/pages/EditRule.tsx
@@ -1,4 +1,5 @@
-import { clipboard as Clipboard } from "@vendetta/metro/common";
+import { findByProps } from "@vendetta/metro";
+import { constants as Constants, clipboard as Clipboard, NavigationNative } from "@vendetta/metro/common";
 import { storage } from "@vendetta/plugin";
 import { useProxy } from "@vendetta/storage";
 import { getAssetIDByName } from "@vendetta/ui/assets";
@@ -8,50 +9,60 @@ import { Rule } from "../../def";
 
 // Components
 const { ScrollView } = General;
-const { FormSection, FormInput, FormDivider, FormSwitchRow, FormRow } = Forms;
+const { FormSection, FormInput, FormDivider, FormSwitchRow, FormRow, FormLabel } = Forms;
 
 const MessageCopy = getAssetIDByName("ic_message_copy");
 
+const colorModule = findByProps("SemanticColorsByThemeTable");
+const colors = (colorModule?.RawColor ?? Constants.Colors);
+
 export default function EditRule({ ruleIndex }) {
 	let rule = storage.rules[ruleIndex] as Rule;
 	useProxy(storage);
 
+	const navigation = NavigationNative.useNavigation();
+
 	const copyCodeBlockCallback = () => {
 		const ruleJson = JSON.stringify(rule, null, 4);
 		const ruleCodeBlock = `\`\`\`json\n${ruleJson}\n\`\`\``;
 		Clipboard.setString(ruleCodeBlock);
 		showToast(`Copied ${rule.name} to Clipboard`, MessageCopy);
 	};
 
+	const deleteRuleCallback = () => {
+		storage.rules.splice(ruleIndex, 1);
+		navigation.pop()
+	}
+
 	return (
 		<ScrollView>
 			<FormSection>
 				<FormInput
-					value={rule.name}
+					value={rule?.name}
 					onChange={(v: string) => rule.name = v}
 					placeholder="New rule"
 					title="Name"
 				/>
 			</FormSection>
 			<FormSection>
 				<FormInput
-					value={rule.match}
+					value={rule?.match}
 					onChange={(v: string) => rule.match = v}
 					placeholder="foo"
 					title="Match"
 				/>
-				{rule.regex && <>
+				{rule?.regex && <>
 					<FormDivider />
 					<FormInput
 						title="Flags"
 						placeholder="gi"
-						value={rule.flags}
+						value={rule?.flags}
 						onChange={(v: string) => rule.flags = v}
 					/>
 				</>}
 				<FormDivider />
 				<FormInput
-					value={rule.replace}
+					value={rule?.replace}
 					onChange={(v: string) => rule.replace = v}
 					placeholder="bar"
 					title="Replace with"
@@ -61,13 +72,16 @@ export default function EditRule({ ruleIndex }) {
 				<FormSwitchRow
 					label="Regular expression"
 					subLabel="Turn on if your rule is a regular expression"
-					value={rule.regex}
+					value={rule?.regex}
 					onValueChange={(v: boolean) => rule.regex = v}
 				/>
 			</FormSection>
 			<FormSection>
 				<FormRow label="Copy code block to Clipboard" onPress={copyCodeBlockCallback} />
 			</FormSection>
+			<FormSection>
+				<FormRow label={<FormLabel text="Delete Rule" style={{color: colors.STATUS_RED_500}} />} onPress={deleteRuleCallback} />
+			</FormSection>
 		</ScrollView>
 	);
 };
diff --git a/src/ui/pages/Settings.tsx b/src/ui/pages/Settings.tsx
@@ -1,4 +1,4 @@
-import { findByProps } from "@vendetta/metro";
+import { findByDisplayName, findByProps } from "@vendetta/metro";
 import { constants as Constants, NavigationNative, React, stylesheet as StyleSheet } from "@vendetta/metro/common";
 import { storage } from "@vendetta/plugin";
 import { useProxy } from "@vendetta/storage";
@@ -26,12 +26,15 @@ const styles = StyleSheet.createThemedStyleSheet({
 	}
 })
 
+const useIsFocused = findByDisplayName("useIsFocused");
+
 export default function Settings() {
 	const [newRule, setNewRule] = React.useState("")
 	let rules = storage.rules as Rule[];
 	useProxy(storage)
 
 	const navigation = NavigationNative.useNavigation();
+	useIsFocused();
 
 	const addRuleCallback = () => {
 		if (newRule) {