From 200e59db8ab44b497fafdf68ad9478927703b0c2 Mon Sep 17 00:00:00 2001
From: Jonathan Gertig <jonthan.gertig@enfusionsystems.com>
Date: Wed, 21 Sep 2022 12:51:48 +0900
Subject: [PATCH] feat: Add support for setting z-index

---
 src/ToastUI.tsx                      |  5 +++--
 src/components/AnimatedContainer.tsx |  4 +++-
 src/types/index.ts                   | 18 +++++++++++++++---
 src/useToast.ts                      |  8 ++++----
 4 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/src/ToastUI.tsx b/src/ToastUI.tsx
index b8f4130c8..7a9eb16b0 100644
--- a/src/ToastUI.tsx
+++ b/src/ToastUI.tsx
@@ -14,7 +14,7 @@ import {
 
 export type ToastUIProps = {
   isVisible: boolean;
-  options: Required<ToastOptions>;
+  options: ToastOptions;
   data: ToastData;
   show: (params: ToastShowParams) => void;
   hide: (params: ToastHideParams) => void;
@@ -65,7 +65,7 @@ function renderComponent({
 
 export function ToastUI(props: ToastUIProps) {
   const { isVisible, options, hide } = props;
-  const { position, topOffset, bottomOffset, keyboardOffset } = options;
+  const { position, topOffset, bottomOffset, keyboardOffset, containerZIndex } = options;
 
   return (
     <AnimatedContainer
@@ -74,6 +74,7 @@ export function ToastUI(props: ToastUIProps) {
       topOffset={topOffset}
       bottomOffset={bottomOffset}
       keyboardOffset={keyboardOffset}
+      containerZIndex={containerZIndex}
       onHide={hide}>
       {renderComponent(props)}
     </AnimatedContainer>
diff --git a/src/components/AnimatedContainer.tsx b/src/components/AnimatedContainer.tsx
index 4a28fcd89..44750149c 100644
--- a/src/components/AnimatedContainer.tsx
+++ b/src/components/AnimatedContainer.tsx
@@ -18,6 +18,7 @@ export type AnimatedContainerProps = {
   isVisible: boolean;
   position: ToastPosition;
   topOffset: number;
+  containerZIndex?: number;
   bottomOffset: number;
   keyboardOffset: number;
   onHide: () => void;
@@ -74,6 +75,7 @@ export function AnimatedContainer({
   bottomOffset,
   keyboardOffset,
   onHide,
+  containerZIndex,
   onRestorePosition = noop
 }: AnimatedContainerProps) {
   const { log } = useLogger();
@@ -124,7 +126,7 @@ export function AnimatedContainer({
     <Animated.View
       testID={getTestId('AnimatedContainer')}
       onLayout={computeViewDimensions}
-      style={[styles.base, styles[position], animationStyles]}
+      style={[styles.base, styles[position], animationStyles, typeof containerZIndex === "number" ? { zIndex: containerZIndex } : {}]}
       // This container View is never the target of touch events but its subviews can be.
       // By doing this, tapping buttons behind the Toast is allowed
       pointerEvents='box-none'
diff --git a/src/types/index.ts b/src/types/index.ts
index 6b353e159..e52f2260b 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -13,7 +13,7 @@ export type ReactChildren = React.ReactNode;
 export type ToastType = string;
 export type ToastPosition = 'top' | 'bottom';
 
-export type ToastOptions = {
+type ToastOptionsBase = {
   /**
    * Toast type.
    * Default value: `success`
@@ -54,6 +54,11 @@ export type ToastOptions = {
    * Default value: `10`
    */
   keyboardOffset?: number;
+  /**
+   * z-index of the animated container for the toasts
+   * Default value: undefined
+   */
+  containerZIndex?: number;
   /**
    * Called when Toast is shown
    */
@@ -79,7 +84,9 @@ export type ToastData = {
   text2?: string;
 };
 
-export type ToastShowParams = ToastData & ToastOptions;
+export type ToastOptions = Required<Omit<ToastOptionsBase, "containerZIndex">> & Pick<ToastOptionsBase, "containerZIndex">
+
+export type ToastShowParams = ToastData & Partial<ToastOptions>;
 
 export type ToastHideParams = void;
 
@@ -172,6 +179,11 @@ export type ToastProps = {
    * Default value: `10`
    */
   keyboardOffset?: number;
+  /**
+   * z-index of the animated container for the toasts
+   * Default value: undefined
+   */
+   containerZIndex?: number;
   /**
    * Called when any Toast is shown
    */
@@ -184,4 +196,4 @@ export type ToastProps = {
    * Called on any Toast press
    */
   onPress?: () => void;
-};
+};
\ No newline at end of file
diff --git a/src/useToast.ts b/src/useToast.ts
index ae494db0a..39516ac3d 100644
--- a/src/useToast.ts
+++ b/src/useToast.ts
@@ -11,7 +11,7 @@ export const DEFAULT_DATA: ToastData = {
   text2: undefined
 };
 
-export const DEFAULT_OPTIONS: Required<ToastOptions> = {
+export const DEFAULT_OPTIONS: ToastOptions = {
   type: 'success',
   position: 'top',
   autoHide: true,
@@ -38,9 +38,9 @@ export function useToast({ defaultOptions }: UseToastParams) {
   const initialOptions = mergeIfDefined(
     DEFAULT_OPTIONS,
     defaultOptions
-  ) as Required<ToastOptions>;
+  ) as ToastOptions;
   const [options, setOptions] =
-    React.useState<Required<ToastOptions>>(initialOptions);
+    React.useState<ToastOptions>(initialOptions);
 
   const onAutoHide = React.useCallback(() => {
     log('Auto hiding');
@@ -94,7 +94,7 @@ export function useToast({ defaultOptions }: UseToastParams) {
           onHide,
           onPress,
           props
-        }) as Required<ToastOptions>
+        }) as ToastOptions
       );
       // TODO: validate input
       // TODO: use a queue when Toast is already visible