feat: use Alert instead

Author: minheq

src/components/Toast/Toast.mdx

@@ -15,6 +15,8 @@ ToastProvider should inserted at the top-level component so that it displays fro
 
 You could additionally wrap the container component with `overflow="hidden"` so that it disappears correctly
 
+Composes `Alert`
+
 <Playground>
   <ToastProvider>
     <ToastConsumer>

src/components/Toast/Toast.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { Animated, View } from 'react-native';
+import { Animated } from 'react-native';
 
 import { Intent } from '../../constants/Intent';
 import { Theme, withTheme } from '../../theme';
-import { Text } from '../Typography';
+import { Alert } from '../Alert';
 
 // Animation taken from https://medium.com/@norbajunior/react-native-facebook-and-instagram-like-top-bar-notifications-with-animated-api-43c48d0443dd
 export type ToastId = string;
@@ -13,7 +13,6 @@ export interface ToastSettings {
   title?: string;
   description?: string;
   offset?: number;
-  duration?: number;
   /* custom component, will take precedence over title and description */
   component?: React.ReactNode;
   /* will override */
@@ -65,15 +64,7 @@ class ToastBase extends React.Component<ToastProps, ToastState> {
   }
 
   public render() {
-    const {
-      theme,
-      component,
-      title,
-      description,
-      intent = 'info',
-    } = this.props;
-
-    const { toastStyle, textStyle } = theme.getToastStyles(intent);
+    const { component, title, description, intent = 'info' } = this.props;
 
     return (
       <Animated.View
@@ -82,12 +73,7 @@ class ToastBase extends React.Component<ToastProps, ToastState> {
         }}
       >
         {component || (
-          <View style={toastStyle}>
-            <Text dangerouslySetInlineStyle={{ textStyle }} size="large">
-              {title}
-            </Text>
-            <Text dangerouslySetInlineStyle={{ textStyle }}>{description}</Text>
-          </View>
+          <Alert title={title} description={description} intent={intent} />
         )}
       </Animated.View>
     );

src/theme/style-getters/getToastStyles.ts

@@ -1,4 +1,4 @@
-import { TextStyle, ViewStyle } from 'react-native';
+import { ViewStyle } from 'react-native';
 
 import { Intent } from '../../constants/Intent';
 import { ToastVariables } from '../component-variables/toastVariables';
@@ -7,41 +7,12 @@ export type GetToastStyles = (
   intent: Intent,
 ) => {
   containerStyle: ViewStyle;
-  toastStyle: ViewStyle;
-  textStyle: TextStyle;
 };
 
 export const getToastStyles = (
   toastVariables: ToastVariables,
 ): GetToastStyles => intent => {
-  let toastStyle: ViewStyle;
-  let textStyle: TextStyle;
-
-  switch (intent) {
-    case 'success':
-      toastStyle = toastVariables.backgroundSuccess;
-      textStyle = toastVariables.textSuccess;
-      break;
-    case 'warning':
-      toastStyle = toastVariables.backgroundWarning;
-      textStyle = toastVariables.textWarning;
-      break;
-    case 'danger':
-      toastStyle = toastVariables.backgroundDanger;
-      textStyle = toastVariables.textDanger;
-      break;
-    default:
-      toastStyle = toastVariables.backgroundInfo;
-      textStyle = toastVariables.textInfo;
-      break;
-  }
-
   return {
     containerStyle: toastVariables.container,
-    textStyle,
-    toastStyle: {
-      ...toastVariables.base,
-      ...toastStyle,
-    },
   };
 };