[UI > InputAlert] Fix for new UI

src/def.d.ts

@@ -95,6 +95,7 @@ interface InputAlertProps {
     cancelText?: string;
     placeholder?: string;
     initialValue?: string;
+    secureTextEntry?: boolean;
 }
 
 interface Author {

src/lib/plugins.ts

@@ -1,7 +1,6 @@
 import { PluginManifest, Plugin } from "@types";
 import { safeFetch } from "@lib/utils";
 import { awaitSyncWrapper, createMMKVBackend, createStorage, purgeStorage, wrapSync } from "@lib/storage";
-import { MMKVManager } from "@lib/native";
 import { allSettled } from "@lib/polyfills";
 import logger, { logModule } from "@lib/logger";
 import settings from "@lib/settings";

src/ui/alerts.ts

@@ -20,8 +20,8 @@ export function showConfirmationAlert(options: ConfirmationAlertOptions) {
     return Alerts.show(internalOptions);
 };
 
-export const showCustomAlert = (component: React.ComponentType, props: any) => Alerts.openLazy({
+export const showCustomAlert = (component: React.ComponentType<any>, props: any) => Alerts.openLazy({
     importer: async () => () => React.createElement(component, props),
 });
 
-export const showInputAlert = (options: InputAlertProps) => showCustomAlert(InputAlert as React.ComponentType, options);
+export const showInputAlert = (options: InputAlertProps) => showCustomAlert(InputAlert, options);

src/ui/components/InputAlert.tsx

@@ -1,48 +1,42 @@
 import { InputAlertProps } from "@types";
-import { findByProps } from "@metro/filters";
+import { findByName, findByProps } from "@metro/filters";
-import { Forms, Alert } from "@ui/components";
+
+interface InternalInputAlertProps extends InputAlertProps {
+    onClose?: () => void;
+    onSubmit?: (input: string) => void;
+    isLoading?: boolean;
+}
 
-const { FormInput } = Forms;
 const Alerts = findByProps("openLazy", "close");
+const UserSettingsInputAlert = findByName("UserSettingsInputAlert") as React.ComponentClass<InternalInputAlertProps>;
 
-export default function InputAlert({ title, confirmText, confirmColor, onConfirm, cancelText, placeholder, initialValue = "" }: InputAlertProps) {
+// TODO: Moving to Discord's UserSettingsInputAlert here has some issues:
-    const [value, setValue] = React.useState(initialValue);
+//* - Errors are not cleared upon typing
-    const [error, setError] = React.useState("");
+//* - The confirmText does not apply
+//* - The confirm button is not disabled when there is an error
 
-    function onConfirmWrapper() {
+export default class InputAlert extends UserSettingsInputAlert {
-        const asyncOnConfirm = Promise.resolve(onConfirm(value))
+    constructor(props: InternalInputAlertProps) {
+        super(props);
+        props.secureTextEntry = false;
+        props.onClose = Alerts.close;
+        props.onSubmit = (i: string) => this.onConfirmWrapper(i);
+        this.state = { input: props.initialValue };
+    }
+
+    onConfirmWrapper(input: string) {
+        // @ts-expect-error
+        this.props.isLoading = true;
+
+        const asyncOnConfirm = Promise.resolve(this.props.onConfirm(input));
 
         asyncOnConfirm.then(() => {
             Alerts.close();
         }).catch((e: Error) => {
-            setError(e.message);
+            this.setState({ error: e.message });
         });
-    };
 
-    return (
+        // @ts-expect-error
-        <Alert
+        this.props.isLoading = false;
-            title={title}
+    };
-            confirmText={confirmText}
+}
-            confirmColor={confirmColor}
-            isConfirmButtonDisabled={error.length !== 0}
-            onConfirm={onConfirmWrapper}
-            cancelText={cancelText}
-            onCancel={() => Alerts.close()}
-        >
-            <FormInput
-                placeholder={placeholder}
-                value={value}
-                onChangeText={(v: string) => {
-                    setValue(v);
-                    if (error) setError("");
-                }}
-                returnKeyType="done"
-                onSubmitEditing={onConfirmWrapper}
-                error={error}
-                autoFocus={true}
-                showBorder={true}
-                style={{ paddingVertical: 5, alignSelf: "stretch", paddingHorizontal: 0 }}
-            />
-        </Alert>
-    );
-};