feat: toast position and docs

Author: minheq

src/components/Toast/Toast.mdx

@@ -34,6 +34,7 @@ Paramount exposes a convenience hook `useToast` you can use to create toasts fro
             notify({
               title: 'Title',
               description: 'Description',
+              duration: 100000,
             })
           }
           title="Open toast"
@@ -43,6 +44,38 @@ Paramount exposes a convenience hook `useToast` you can use to create toasts fro
   </ToastProvider>
 </Playground>
 
-## Options
+## ToastProvider Props
+
+_Note_: In order for the `position="bottom"` prop to match the `offset` exactly, try to keep the title and message short. This is due to derived height of the `Toast` being "hard-coded" when `position="bottom"`
+
+<Props of={ToastProvider} />
+
+## Toast Options
 
 <Props of={Toast} />
+
+## Customization
+
+Use `getStyles` prop on **ToastProvider**
+
+```tsx
+ToastStyles {
+  containerStyle: ViewStyle;
+  wrapperStyle: ViewStyle;
+}
+
+getStyles={(ToastProviderProps, Theme) => ToastProviderStyles}
+```
+
+Markup
+
+```tsx
+<>
+  {children}
+  <View containerStyle>
+    <View wrapperStyle>
+      <Alert />
+    </View>
+  </View>
+</>
+```

src/components/Toast/Toast.styles.ts

@@ -1,15 +1,22 @@
 import { Platform, ViewStyle } from 'react-native';
 
 import { Theme } from '../../theme/Theme';
+import { ToastProviderProps } from './ToastProvider';
 
 export interface ToastStyles {
   containerStyle: ViewStyle;
   wrapperStyle: ViewStyle;
 }
-export type GetToastStyles = (props: {}, theme: Theme) => ToastStyles;
+
+export type GetToastStyles = (
+  props: ToastProviderProps,
+  theme: Theme,
+) => ToastStyles;
 
 // @ts-ignore: Compat with web
 export const getToastStyles: GetToastStyles = (props, theme) => {
+  const { position = 'top' } = props;
+
   return {
     containerStyle: {
       left: 32,
@@ -21,7 +28,13 @@ export const getToastStyles: GetToastStyles = (props, theme) => {
       // @ts-ignore: Compat with web
       position: Platform.OS === 'web' ? 'fixed' : 'absolute',
       right: 32,
-      top: 10,
+      ...(position === 'top'
+        ? {
+            top: 0,
+          }
+        : {
+            bottom: 68,
+          }),
       zIndex: 100,
     },
     wrapperStyle: {

src/components/Toast/ToastProvider.tsx

@@ -12,8 +12,22 @@ import { ToastContext } from './ToastContext';
 
 const AnimatedView = animated(View);
 
+export type ToastPosition = 'top' | 'bottom';
+
 export interface ToastProviderProps {
-  children?: React.ReactNode;
+  /**
+   * Position from which to display the toast from
+   * @default top
+   */
+  position?: ToastPosition;
+
+  /**
+   * Offset toast from the edge of the container (screen).
+   * @default 16
+   */
+  offset?: number;
+
+  /** Callback to get element styles. */
   getStyles?: ReplaceReturnType<GetToastStyles, DeepPartial<ToastStyles>>;
 }
 
@@ -49,19 +63,43 @@ const reducer = (state: ToastProviderState, action: Action) => {
   }
 };
 
-export const ToastProvider = (props: ToastProviderProps) => {
-  const { children, getStyles } = props;
+const getTransitionConfig = (offset: number, position: ToastPosition) => {
+  if (position === 'top') {
+    return {
+      config: springDefaultConfig,
+
+      enter: { translateY: offset },
+      from: { translateY: -500 },
+      leave: { translateY: -500 },
+    };
+  }
+
+  return {
+    config: springDefaultConfig,
+
+    enter: { translateY: -offset },
+    from: { translateY: 500 },
+    leave: { translateY: 500 },
+  };
+};
+
+export const ToastProvider: React.FunctionComponent<
+  ToastProviderProps
+> = props => {
+  const { children, offset = 16, position = 'top', getStyles } = props;
   const idCounterRef = React.useRef(0);
   // Use reducer because we want access previous value of state
   const [state, dispatch] = React.useReducer(reducer, initialState);
 
   const theme = useTheme();
 
+  console.log(position, 'position');
+
   const { containerStyle, wrapperStyle } = mergeStyles(
     getToastStyles,
     getStyles,
     theme.components.getToastStyles,
-  )({}, theme);
+  )({ offset, position }, theme);
 
   const createToastInstance = (toastSettings: ToastSettings): ToastInstance => {
     const uniqueId = ++idCounterRef.current;
@@ -98,13 +136,11 @@ export const ToastProvider = (props: ToastProviderProps) => {
     return toastInstance;
   }, []);
 
-  const transitions = useTransition(state.toasts, toast => toast.id, {
-    config: springDefaultConfig,
-
-    enter: { translateY: 10 },
-    from: { translateY: -500 },
-    leave: { translateY: -500 },
-  });
+  const transitions = useTransition(
+    state.toasts,
+    toast => toast.id,
+    getTransitionConfig(offset, position),
+  );
 
   return (
     <ToastContext.Provider

tests/__snapshots__/snapshot.test.js.snap

@@ -32619,7 +32619,7 @@ exports[`KitchenSink_1 1`] = `
             "maxWidth": "560px",
             "position": "fixed",
             "right": "32px",
-            "top": "10px",
+            "top": "0px",
             "zIndex": 100,
           }
         }
@@ -40333,7 +40333,7 @@ exports[`Toast_2 1`] = `
         "maxWidth": "560px",
         "position": "fixed",
         "right": "32px",
-        "top": "10px",
+        "top": "0px",
         "zIndex": 100,
       }
     }
@@ -40343,6 +40343,42 @@ exports[`Toast_2 1`] = `
 
 exports[`Toast_3 1`] = `<div />`;
 
+exports[`Toast_4 1`] = `<div />`;
+
+exports[`Toast_5 1`] = `
+<pre>
+  <code
+    className="language-tsx"
+  >
+    ToastStyles {
+  containerStyle: ViewStyle;
+  wrapperStyle: ViewStyle;
+}
+
+getStyles={(ToastProviderProps, Theme) =&gt; ToastProviderStyles}
+
+  </code>
+</pre>
+`;
+
+exports[`Toast_6 1`] = `
+<pre>
+  <code
+    className="language-tsx"
+  >
+    &lt;&gt;
+  {children}
+  &lt;View containerStyle&gt;
+    &lt;View wrapperStyle&gt;
+      &lt;Alert /&gt;
+    &lt;/View&gt;
+  &lt;/View&gt;
+&lt;/&gt;
+
+  </code>
+</pre>
+`;
+
 exports[`Visible_0 1`] = `
 <h1>
   Visible