navigation actions better logic

src/navio-navigation.tsx

@@ -51,16 +51,16 @@ export class NavioNavigation<
   // ===========
   protected navigate = <
     T extends ScreenName | StackName | TabName | ModalName,
-    Props extends object | undefined,
+    Params extends object | undefined,
   >(
     name: T,
-    props?: Props,
+    params?: Params,
   ): void => {
     if (this.navIsReady) {
       this.navRef.current?.dispatch(
         CommonActions.navigate({
           name: name as string,
-          params: props,
+          params,
         }),
       );
     }
@@ -70,97 +70,209 @@ export class NavioNavigation<
   // | Actions |
   // ===========
   /**
-   * `push(...)` is used to navigate to a new screen in the stack.
+   * `push(...)` action adds a route on top of the stack and navigates forward to it.
    *
    * @param name ScreenName
-   * @param props Props
+   * @param params Params
    */
-  push<T extends ScreenName, Props extends object | undefined>(name: T, props?: Props) {
+  push<T extends ScreenName, Params extends object | undefined>(name: T, params?: Params) {
     if (this.navIsReady) {
-      this.navRef.current?.dispatch(StackActions.push(name as string, props));
+      this.navRef.current?.dispatch(StackActions.push(name as string, params));
     }
   }
 
   /**
-   * `pushStack(...)` is used to navigate to a new stack. It will "hide" tabs.
-   *
-   * @param name StackName
+   * `goBack()` action creator allows to go back to the previous route in history.
    */
-  pushStack<T extends StackName>(name: T) {
+  goBack() {
     if (this.navIsReady) {
-      this.navigate(name);
+      this.navRef.current?.goBack();
     }
   }
 
   /**
-   * `goBack()` is used to navigate back in the stack.
+   * `setRoot(...)` action sets a new root of the app.
+   *
+   * Tips: It can be used to switch between Auth and App stacks.
+   *
+   * @param name 'Tabs' | StackName | DrawerName
    */
-  goBack() {
+  setRoot<T extends RootName>(name: T) {
     if (this.navIsReady) {
-      this.navRef.current?.goBack();
+      this.navRef.current?.dispatch(
+        CommonActions.reset({
+          routes: [{name}],
+        }),
+      );
     }
   }
 
   /**
-   * `pop(...)` is used to navigate to a previous screen in the stack.
+   * `setParams(...)` action allows to update params for a certain route.
    *
-   * @param count number
+   * @param name all available navigation keys. Leave `undefined` if applying for the focused route.
+   * @param params object
    */
-  pop(count?: number) {
+  setParams<T extends string>(name: T, params: object) {
+    // TODO think about how to take all names and not getting plain string when some name is not defined
     if (this.navIsReady) {
-      this.navRef.current?.dispatch(StackActions.pop(count));
+      this.navRef.current?.dispatch({
+        ...CommonActions.setParams(params),
+        source: name as string,
+      });
     }
   }
 
   /**
-   * `popToPop()` is used to navigate to the first screen in the stack, dismissing all others.
+   * `stack` contains navigation actions for stack-based navigators.
+   *
+   * Available methods:
+   *
+   * `push`, `pop`, `popToTop`
+   *
    */
-  popToTop() {
-    if (this.navIsReady) {
-      this.navRef.current?.dispatch(StackActions.popToTop());
-    }
+  get stack() {
+    // local copy of current instance
+    const self = this;
+
+    return {
+      /**
+       * `push(...)` action adds a route on top of the stack and navigates forward to it.
+       *
+       * Tips: It will "hide" tabs.
+       *
+       * @param name StackName
+       */
+      push<T extends StackName>(name: T) {
+        if (self.navIsReady) {
+          self.navigate(name);
+        }
+      },
+
+      /**
+       * `pop(...)` action takes you back to a previous screen in the stack.
+       *
+       * @param count number
+       */
+      pop(count?: number) {
+        if (self.navIsReady) {
+          self.navRef.current?.dispatch(StackActions.pop(count));
+        }
+      },
+
+      /**
+       * `popToPop()` action takes you back to the first screen in the stack, dismissing all the others.
+       */
+      popToTop() {
+        if (self.navIsReady) {
+          self.navRef.current?.dispatch(StackActions.popToTop());
+        }
+      },
+    };
   }
 
   /**
-   * `show(...)` is used to show a modal.
+   * `tab` contains navigation actions for tab-based navigators.
+   *
+   * Available methods:
+   *
+   * `jumpTo`
    *
-   * @param name ModalName
    */
-  show<T extends ModalName>(name: T) {
-    if (this.navIsReady) {
-      this.navigate(name);
-    }
+  get tab() {
+    // local copy of current instance
+    const self = this;
+
+    return {
+      /**
+       * `jumpTo(...)` action can be used to jump to an existing route in the tab navigator.
+       *
+       * @param name TabName
+       */
+      jumpTo<T extends TabName>(name: T) {
+        if (self.navIsReady) {
+          self.navRef.current?.dispatch(TabActions.jumpTo(name as string));
+        }
+      },
+    };
   }
 
   /**
-   * `jumpTo(...)` is used to change the current tab.
+   * `modal` contains navigation actions for modals.
+   *
+   * Available methods:
+   *
+   * `show`
    *
-   * @param name TabName
    */
-  jumpTo<T extends TabName>(name: T) {
-    if (this.navIsReady) {
-      this.navRef.current?.dispatch(TabActions.jumpTo(name as string));
-    }
+  get modal() {
+    // local copy of current instance
+    const self = this;
+
+    return {
+      /**
+       * `show(...)` action can be used to show an existing modal.
+       *
+       * @param name ModalName
+       */
+      show<T extends ModalName>(name: T) {
+        if (self.navIsReady) {
+          self.navigate(name);
+        }
+      },
+    };
   }
 
   /**
-   * `setRoot(...)` is used to set a new root of the app. It can be used to switch between Auth and App stacks.
+   * `drawer` contains navigation actions for drawer-based navigators.
+   *
+   * Available methods:
+   *
+   * `open`, `close`, `toggle`, `jumpTo`
    *
-   * @param name 'Tabs' | StackName | DrawerName
    */
-  setRoot<T extends RootName>(name: T) {
-    if (this.navIsReady) {
-      this.navRef.current?.dispatch(
-        CommonActions.reset({
-          routes: [{name}],
-        }),
-      );
-    }
-  }
+  get drawer() {
+    // local copy of current instance
+    const self = this;
 
-  drawerJumpTo<T extends DrawerContentName>(name: T) {
-    if (this.navIsReady) {
-      this.navRef.current?.dispatch(DrawerActions.jumpTo(name as string));
-    }
+    return {
+      /**
+       * `open()` action can be used to open the drawer pane.
+       */
+      open() {
+        if (self.navIsReady) {
+          self.navRef.current?.dispatch(DrawerActions.openDrawer());
+        }
+      },
+
+      /**
+       * `close()` action can be used to close the drawer pane.
+       */
+      close() {
+        if (self.navIsReady) {
+          self.navRef.current?.dispatch(DrawerActions.closeDrawer());
+        }
+      },
+
+      /**
+       * `toggle()` action can be used to open the drawer pane if closed, or close if open.
+       */
+      toggle() {
+        if (self.navIsReady) {
+          self.navRef.current?.dispatch(DrawerActions.toggleDrawer());
+        }
+      },
+
+      /**
+       * `jumpTo(...)` action can be used to jump to an existing route in the drawer navigator.
+       *
+       * @param name StackName
+       */
+      jumpTo<T extends DrawerContentName>(name: T) {
+        if (self.navIsReady) {
+          self.navRef.current?.dispatch(DrawerActions.jumpTo(name as string));
+        }
+      },
+    };
   }
 }