2023-03-20 16:11:27 -04:00
|
|
|
import { ReactNative as RN, stylesheet, clipboard } from "@metro/common";
|
2023-07-09 02:33:54 +02:00
|
|
|
import { HTTP_REGEX_MULTI } from "@lib/constants";
|
2023-02-26 16:26:01 -05:00
|
|
|
import { showInputAlert } from "@ui/alerts";
|
|
|
|
|
import { getAssetIDByName } from "@ui/assets";
|
2023-02-26 22:56:36 +00:00
|
|
|
import { semanticColors } from "@ui/color";
|
2023-02-26 16:26:01 -05:00
|
|
|
|
|
|
|
|
const styles = stylesheet.createThemedStyleSheet({
|
|
|
|
|
icon: {
|
|
|
|
|
marginRight: 10,
|
|
|
|
|
tintColor: semanticColors.HEADER_PRIMARY,
|
2023-07-09 02:33:54 +02:00
|
|
|
},
|
2023-02-26 16:26:01 -05:00
|
|
|
});
|
|
|
|
|
|
2023-03-17 21:58:37 +00:00
|
|
|
interface InstallButtonProps {
|
|
|
|
|
alertTitle: string;
|
|
|
|
|
installFunction: (id: string) => Promise<void>;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export default function InstallButton({ alertTitle, installFunction: fetchFunction }: InstallButtonProps) {
|
2023-02-26 16:26:01 -05:00
|
|
|
return (
|
2023-03-17 21:58:37 +00:00
|
|
|
<RN.TouchableOpacity onPress={() =>
|
2023-02-26 16:26:01 -05:00
|
|
|
clipboard.getString().then((content) =>
|
|
|
|
|
showInputAlert({
|
2023-03-17 21:58:37 +00:00
|
|
|
title: alertTitle,
|
2023-07-09 02:33:54 +02:00
|
|
|
initialValue: content.match(HTTP_REGEX_MULTI)?.[0] ?? "",
|
2023-02-26 16:26:01 -05:00
|
|
|
placeholder: "https://example.com/",
|
2023-03-17 21:58:37 +00:00
|
|
|
onConfirm: (input: string) => fetchFunction(input),
|
2023-02-26 16:26:01 -05:00
|
|
|
confirmText: "Install",
|
2023-07-09 02:33:54 +02:00
|
|
|
cancelText: "Cancel",
|
2023-03-17 21:58:37 +00:00
|
|
|
})
|
|
|
|
|
)
|
2023-02-26 16:26:01 -05:00
|
|
|
}>
|
2023-03-17 21:58:37 +00:00
|
|
|
<RN.Image style={styles.icon} source={getAssetIDByName("ic_add_24px")} />
|
|
|
|
|
</RN.TouchableOpacity>
|
2023-02-26 16:26:01 -05:00
|
|
|
);
|
2023-07-09 02:33:54 +02:00
|
|
|
}
|