feat(ui): ponyfill AlertModal's extraContent prop for older versions

supersedes #91

src/core/ui/components/AddonPage.tsx

@@ -2,6 +2,7 @@ import { CardWrapper } from "@core/ui/components/AddonCard";
 import { findAssetId } from "@lib/api/assets";
 import { settings } from "@lib/api/settings";
 import { useProxy } from "@lib/api/storage";
+import AlertModal, { AlertActionButton } from "@lib/ui/components/wrappers/AlertModal";
 import isValidHttpUrl from "@lib/utils/isValidHttpUrl";
 import { lazyDestructure } from "@lib/utils/lazy";
 import { findByProps } from "@metro";
@@ -14,7 +15,6 @@ import { Image, ScrollView, View } from "react-native";
 
 const { showSimpleActionSheet, hideActionSheet } = lazyDestructure(() => findByProps("showSimpleActionSheet"));
 const { openAlert, dismissAlert } = lazyDestructure(() => findByProps("openAlert", "dismissAlert"));
-const { AlertModal, AlertActionButton } = lazyDestructure(() => findByProps("AlertModal", "AlertActions"));
 
 type SearchKeywords = Array<string | ((obj: any & {}) => string)>;
 
@@ -55,7 +55,7 @@ function InputAlert(props: { label: string, fetchFn: (url: string) => Promise<vo
 
     return <AlertModal
         title={props.label}
-        content="Type in the source URL you want to install from:"
+        content="Enter the URL of the source you want to install from:"
         extraContent={
             <Stack style={{ marginTop: -12 }}>
                 <TextInput

src/lib/ui/components/wrappers/AlertModal.tsx

@@ -0,0 +1,45 @@
+import { lazyDestructure } from "@lib/utils/lazy";
+import { findByProps } from "@metro";
+import { Text } from "@metro/common/components";
+import { Button } from "@metro/common/types/components";
+import { ComponentProps, ComponentType, ReactNode } from "react";
+import { useWindowDimensions, View } from "react-native";
+
+const {
+    AlertModal: _AlertModal,
+    AlertActionButton: _AlertActionButton
+} = lazyDestructure(() => findByProps("AlertModal", "AlertActions"));
+
+type ActionButtonProps = Omit<ComponentProps<Button>, "onPress"> & {
+    onPress?: () => void | Promise<unknown>;
+};
+
+export const AlertActionButton = _AlertActionButton as ComponentType<ActionButtonProps>;
+
+export default function AlertModal(props: Record<string, unknown>) {
+    const { width: windowWidth } = useWindowDimensions();
+
+    // ponyfill for extraContent
+    if ("extraContent" in props) {
+        props.content = (
+            <View
+                style={{
+                    /* HACK: the contents are drawn over the padding for some reason, so we set the max width */
+                    maxWidth: windowWidth - 70,
+                    flexShrink: 1, // has no effect but we'll keep it
+                    gap: 16
+                }}>
+                <Text variant="text-md/medium" color="text-muted">
+                    {props.content as string}
+                </Text>
+                <View>
+                    {props.extraContent as ReactNode}
+                </View>
+            </View>
+        );
+
+        delete props.extraContent;
+    }
+
+    return <_AlertModal {...props} />;
+}

src/metro/common/types/components.ts

@@ -25,6 +25,7 @@ interface ButtonProps {
     scaleAmountInPx?: number;
     icon?: ImageSourcePropType | ReactNode;
     style?: Style;
+    grow?: boolean;
 }
 
 export type Button = React.ForwardRefExoticComponent<ButtonProps>;