Use Link in Alert

etesync · Feb 21, 2021 · a19beac · a19beac
1 parent 3052d64
commit a19beac
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 11 deletions.
diff --git a/src/screens/SignupScreen.tsx b/src/screens/SignupScreen.tsx
@@ -5,7 +5,7 @@ import * as React from "react";
 
 import * as Etebase from "etebase";
 
-import { View, TextInput as NativeTextInput, Linking } from "react-native";
+import { View, TextInput as NativeTextInput } from "react-native";
 import { Switch, Text, HelperText, Paragraph, TouchableRipple } from "react-native-paper";
 
 import { Headline } from "../widgets/Typography";
@@ -141,7 +141,8 @@ export default React.memo(function SignupScreen() {
         <Alert
           style={{ marginTop: 10 }}
           severity="info"
-          onPress={() => Linking.openURL(C.pricing)}
+          to={C.pricing}
+          external
         >
           You are signing up for a free trial. Click here for pricing information.
         </Alert>

diff --git a/src/widgets/Alert.tsx b/src/widgets/Alert.tsx
@@ -5,15 +5,18 @@ import * as React from "react";
 import { View, ViewProps, StyleSheet } from "react-native";
 import { Text, useTheme, TouchableRipple } from "react-native-paper";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
+import Link from "./Link";
 
 type PropsType = ViewProps & {
   severity: "error" | "warning" | "info" | "success";
+  to?: string;
+  external?: boolean;
   onPress?: () => void;
 };
 
 export default function Alert(props_: React.PropsWithChildren<PropsType>) {
   const theme = useTheme();
-  const { children, style, severity, onPress, ...props } = props_;
+  const { children, style, severity, to, external, onPress, ...props } = props_;
   const icons = {
     error: "information-outline",
     warning: "alert-outline",
@@ -25,14 +28,32 @@ export default function Alert(props_: React.PropsWithChildren<PropsType>) {
   return (
     <View style={[styles.root, stylesColor[severity], style]}>
       <Icon name={icons[severity]} style={[styles.icon, stylesIcon[severity]]} size={24} />
-      <TouchableRipple style={styles.touchable} onPress={onPress}>
-        <Text
-          style={[styles.text, stylesColor[severity]]}
-          {...props}
-        >
-          {children}
-        </Text>
-      </TouchableRipple>
+      {(to) ? (
+        <Link
+          to={to}
+          external={external}
+          onPress={onPress}
+          renderChild={(props) => (
+            <TouchableRipple style={styles.touchable} {...props}>
+              <Text
+                style={[styles.text, stylesColor[severity]]}
+                {...props}
+              >
+                {children}
+              </Text>
+            </TouchableRipple>
+          )}
+        />
+      ) : (
+        <View style={styles.touchable}>
+          <Text
+            style={[styles.text, stylesColor[severity]]}
+            {...props}
+          >
+            {children}
+          </Text>
+        </View>
+      )}
     </View>
   );
 }