[v2] (restore) Typings for styling options and layouts (#3931)

* Added all styling options and WIP comments

* Completed screen options and layout types

* Added typings to the main entrypoint

* Added buttons too

* Optional fields

* Fixes js unit tests

lib/src/Navigation.ts

@@ -13,6 +13,8 @@ import { CommandsObserver } from './events/CommandsObserver';
 import { Constants } from './adapters/Constants';
 import { ComponentType } from 'react';
 import { ComponentEventsObserver } from './events/ComponentEventsObserver';
+import { LayoutRoot, Layout } from './interfaces/Layout';
+import { Options } from './interfaces/Options';
 
 export class Navigation {
   public readonly Element: React.ComponentType<{ elementId: any; resizeMode?: any; }>;
@@ -64,28 +66,28 @@ export class Navigation {
   /**
    * Reset the app to a new layout
    */
-  public setRoot(layout): Promise<any> {
+  public setRoot(layout: LayoutRoot): Promise<any> {
     return this.commands.setRoot(layout);
   }
 
   /**
    * Set default options to all screens. Useful for declaring a consistent style across the app.
    */
-  public setDefaultOptions(options): void {
+  public setDefaultOptions(options: Options): void {
     this.commands.setDefaultOptions(options);
   }
 
   /**
    * Change a component's navigation options
    */
-  public mergeOptions(componentId: string, options): void {
+  public mergeOptions(componentId: string, options: Options): void {
     this.commands.mergeOptions(componentId, options);
   }
 
   /**
    * Show a screen as a modal.
    */
-  public showModal(layout): Promise<any> {
+  public showModal(layout: Layout): Promise<any> {
     return this.commands.showModal(layout);
   }
 
@@ -106,7 +108,7 @@ export class Navigation {
   /**
    * Push a new layout into this screen's navigation stack.
    */
-  public push(componentId: string, layout): Promise<any> {
+  public push(componentId: string, layout: Layout): Promise<any> {
     return this.commands.push(componentId, layout);
   }
 
@@ -134,14 +136,14 @@ export class Navigation {
   /**
    * Sets new root component to stack.
    */
-  public setStackRoot(componentId: string, layout): Promise<any> {
+  public setStackRoot(componentId: string, layout: Layout): Promise<any> {
     return this.commands.setStackRoot(componentId, layout);
   }
 
   /**
    * Show overlay on top of the entire app
    */
-  public showOverlay(layout): Promise<any> {
+  public showOverlay(layout: Layout): Promise<any> {
     return this.commands.showOverlay(layout);
   }
 

lib/src/adapters/NativeCommandsSender.ts

@@ -22,15 +22,15 @@ export class NativeCommandsSender {
     return this.nativeCommandsModule.push(commandId, onComponentId, layout);
   }
 
-  pop(commandId: string, componentId: string, options: object) {
+  pop(commandId: string, componentId: string, options?: object) {
     return this.nativeCommandsModule.pop(commandId, componentId, options);
   }
 
-  popTo(commandId: string, componentId: string, options: object) {
+  popTo(commandId: string, componentId: string, options?: object) {
     return this.nativeCommandsModule.popTo(commandId, componentId, options);
   }
 
-  popToRoot(commandId: string, componentId: string, options: object) {
+  popToRoot(commandId: string, componentId: string, options?: object) {
     return this.nativeCommandsModule.popToRoot(commandId, componentId, options);
   }
 
@@ -42,11 +42,11 @@ export class NativeCommandsSender {
     return this.nativeCommandsModule.showModal(commandId, layout);
   }
 
-  dismissModal(commandId: string, componentId: string, options: object) {
+  dismissModal(commandId: string, componentId: string, options?: object) {
     return this.nativeCommandsModule.dismissModal(commandId, componentId, options);
   }
 
-  dismissAllModals(commandId: string, options: object) {
+  dismissAllModals(commandId: string, options?: object) {
     return this.nativeCommandsModule.dismissAllModals(commandId, options);
   }
 

lib/src/commands/Commands.test.ts

@@ -54,7 +54,7 @@ describe('Commands', () => {
 
     it('deep clones input to avoid mutation errors', () => {
       const obj = {};
-      uut.setRoot({ root: { component: { name: 'bla', inner: obj } } });
+      uut.setRoot({ root: { component: { name: 'bla', inner: obj } as any } });
       expect(mockCommandsSender.setRoot.mock.calls[0][1].root.data.inner).not.toBe(obj);
     });
 
@@ -137,12 +137,12 @@ describe('Commands', () => {
   describe('mergeOptions', () => {
     it('deep clones input to avoid mutation errors', () => {
       const obj = { title: 'test' };
-      uut.mergeOptions('theComponentId', obj);
+      uut.mergeOptions('theComponentId', obj as any);
       expect(mockCommandsSender.mergeOptions.mock.calls[0][1]).not.toBe(obj);
     });
 
     it('passes options for component', () => {
-      uut.mergeOptions('theComponentId', { title: '1' });
+      uut.mergeOptions('theComponentId', { title: '1' } as any);
       expect(mockCommandsSender.mergeOptions).toHaveBeenCalledTimes(1);
       expect(mockCommandsSender.mergeOptions).toHaveBeenCalledWith('theComponentId', { title: '1' });
     });
@@ -151,7 +151,7 @@ describe('Commands', () => {
   describe('setDefaultOptions', () => {
     it('deep clones input to avoid mutation errors', () => {
       const obj = { title: 'test' };
-      uut.setDefaultOptions(obj);
+      uut.setDefaultOptions(obj as any);
       expect(mockCommandsSender.setDefaultOptions.mock.calls[0][0]).not.toBe(obj);
     });
   });
@@ -177,7 +177,7 @@ describe('Commands', () => {
 
     it('deep clones input to avoid mutation errors', () => {
       const obj = {};
-      uut.showModal({ component: { name: 'name', inner: obj } });
+      uut.showModal({ component: { name: 'name', inner: obj } as any });
       expect(mockCommandsSender.showModal.mock.calls[0][1].data.inner).not.toBe(obj);
     });
 
@@ -271,7 +271,7 @@ describe('Commands', () => {
           duration: 0.8
         }
       };
-      uut.pop('theComponentId', options);
+      uut.pop('theComponentId', options as any);
       expect(mockCommandsSender.pop).toHaveBeenCalledTimes(1);
       expect(mockCommandsSender.pop).toHaveBeenCalledWith('pop+UNIQUE_ID', 'theComponentId', options);
     });
@@ -348,7 +348,7 @@ describe('Commands', () => {
 
     it('deep clones input to avoid mutation errors', () => {
       const obj = {};
-      uut.showOverlay({ component: { name: 'name', inner: obj } });
+      uut.showOverlay({ component: { name: 'name', inner: obj } as any });
       expect(mockCommandsSender.showOverlay.mock.calls[0][1].data.inner).not.toBe(obj);
     });
 

lib/src/commands/Commands.ts

@@ -2,6 +2,8 @@ import * as _ from 'lodash';
 import { CommandsObserver } from '../events/CommandsObserver';
 import { NativeCommandsSender } from '../adapters/NativeCommandsSender';
 import { UniqueIdProvider } from '../adapters/UniqueIdProvider';
+import { Options } from '../interfaces/Options';
+import { Layout, LayoutRoot } from '../interfaces/Layout';
 
 export class Commands {
   constructor(
@@ -12,7 +14,7 @@ export class Commands {
     private readonly uniqueIdProvider: UniqueIdProvider) {
   }
 
-  public setRoot(simpleApi) {
+  public setRoot(simpleApi: LayoutRoot) {
     const input = _.cloneDeep(simpleApi);
     const root = this.layoutTreeParser.parse(input.root);
     this.layoutTreeCrawler.crawl(root);
@@ -35,7 +37,7 @@ export class Commands {
     return result;
   }
 
-  public setDefaultOptions(options) {
+  public setDefaultOptions(options: Options) {
     const input = _.cloneDeep(options);
     this.layoutTreeCrawler.processOptions(input);
 
@@ -43,7 +45,7 @@ export class Commands {
     this.commandsObserver.notify('setDefaultOptions', { options });
   }
 
-  public mergeOptions(componentId, options) {
+  public mergeOptions(componentId: string, options: Options) {
     const input = _.cloneDeep(options);
     this.layoutTreeCrawler.processOptions(input);
 
@@ -51,7 +53,7 @@ export class Commands {
     this.commandsObserver.notify('mergeOptions', { componentId, options });
   }
 
-  public showModal(simpleApi) {
+  public showModal(simpleApi: Layout) {
     const input = _.cloneDeep(simpleApi);
     const layout = this.layoutTreeParser.parse(input);
     this.layoutTreeCrawler.crawl(layout);
@@ -62,21 +64,21 @@ export class Commands {
     return result;
   }
 
-  public dismissModal(componentId, mergeOptions?) {
+  public dismissModal(componentId, mergeOptions?: Options) {
     const commandId = this.uniqueIdProvider.generate('dismissModal');
     const result = this.nativeCommandsSender.dismissModal(commandId, componentId, mergeOptions);
     this.commandsObserver.notify('dismissModal', { commandId, componentId, mergeOptions});
     return result;
   }
 
-  public dismissAllModals(mergeOptions?) {
+  public dismissAllModals(mergeOptions?: Options) {
     const commandId = this.uniqueIdProvider.generate('dismissAllModals');
     const result = this.nativeCommandsSender.dismissAllModals(commandId, mergeOptions);
     this.commandsObserver.notify('dismissAllModals', { commandId, mergeOptions });
     return result;
   }
 
-  public push(componentId, simpleApi) {
+  public push(componentId: string, simpleApi: Layout) {
     const input = _.cloneDeep(simpleApi);
 
     const layout = this.layoutTreeParser.parse(input);
@@ -88,28 +90,28 @@ export class Commands {
     return result;
   }
 
-  public pop(componentId, mergeOptions?) {
+  public pop(componentId: string, mergeOptions?: Options) {
     const commandId = this.uniqueIdProvider.generate('pop');
     const result = this.nativeCommandsSender.pop(commandId, componentId, mergeOptions);
     this.commandsObserver.notify('pop', { commandId, componentId, mergeOptions });
     return result;
   }
 
-  public popTo(componentId, mergeOptions?) {
+  public popTo(componentId: string, mergeOptions?: Options) {
     const commandId = this.uniqueIdProvider.generate('popTo');
     const result = this.nativeCommandsSender.popTo(commandId, componentId, mergeOptions);
     this.commandsObserver.notify('popTo', { commandId, componentId, mergeOptions });
     return result;
   }
 
-  public popToRoot(componentId, mergeOptions?) {
+  public popToRoot(componentId: string, mergeOptions?: Options) {
     const commandId = this.uniqueIdProvider.generate('popToRoot');
     const result = this.nativeCommandsSender.popToRoot(commandId, componentId, mergeOptions);
     this.commandsObserver.notify('popToRoot', { commandId, componentId, mergeOptions });
     return result;
   }
 
-  public setStackRoot(componentId, simpleApi) {
+  public setStackRoot(componentId: string, simpleApi: Layout) {
     const input = _.cloneDeep(simpleApi);
 
     const layout = this.layoutTreeParser.parse(input);
@@ -121,7 +123,7 @@ export class Commands {
     return result;
   }
 
-  public showOverlay(simpleApi) {
+  public showOverlay(simpleApi: Layout) {
     const input = _.cloneDeep(simpleApi);
 
     const layout = this.layoutTreeParser.parse(input);
@@ -133,7 +135,7 @@ export class Commands {
     return result;
   }
 
-  public dismissOverlay(componentId) {
+  public dismissOverlay(componentId: string) {
     const commandId = this.uniqueIdProvider.generate('dismissOverlay');
     const result = this.nativeCommandsSender.dismissOverlay(commandId, componentId);
     this.commandsObserver.notify('dismissOverlay', { commandId, componentId });

lib/src/interfaces/Layout.ts

@@ -0,0 +1,142 @@
+import { Options, OptionsSplitView } from './Options';
+
+export interface LayoutComponent {
+  /**
+   * Component reference id, Auto generated if empty
+   */
+  id?: string;
+  /**
+   * Name of your component
+   */
+  name: string;
+  /**
+   * Styling options
+   */
+  options?: Options;
+  /**
+   * Properties to pass down to the component
+   */
+  passProps?: object;
+}
+
+export interface LayoutStackChildren {
+  /**
+   * Set component
+   */
+  component?: LayoutComponent;
+}
+
+export interface LayoutStack {
+  /**
+   * Set ID of the stack so you can use Navigation.mergeOptions to
+   * update options
+   */
+  id?: string;
+  /**
+   * Set children screens
+   */
+  children?: LayoutStackChildren[];
+  /**
+   * Set options
+   */
+  options?: Options;
+}
+
+export interface LayoutBottomTabsChildren {
+  /**
+   * Set stack
+   */
+  stack?: LayoutStack;
+  /**
+   * Set component
+   */
+  component?: LayoutComponent;
+}
+
+export interface LayoutBottomTabs {
+  /**
+   * Set ID of the stack so you can use Navigation.mergeOptions to
+   * update options
+   */
+  id?: string;
+  /**
+   * Set the children screens
+   */
+  children?: LayoutBottomTabsChildren[];
+  /**
+   * Set the bottom tabs options
+   */
+  options?: Options;
+}
+
+export interface LayoutSideMenu {
+  /**
+   * Set ID of the stack so you can use Navigation.mergeOptions to
+   * update options
+   */
+  id?: string;
+  /**
+   * Set the left side bar
+   */
+  left?: LayoutStackChildren;
+  /**
+   * Set the center view
+   */
+  center?: Layout;
+  /**
+   * Set the right side bar
+   */
+  right?: LayoutStackChildren;
+}
+
+export interface LayoutSplitView {
+  /**
+   * Set ID of the stack so you can use Navigation.mergeOptions to
+   * update options
+   */
+  id?: string;
+  /**
+   * Set master layout (the smaller screen, sidebar)
+   */
+  master?: Layout;
+  /**
+   * Set detail layout (the larger screen, flexes)
+   */
+  detail?: Layout;
+  /**
+   * Configure split view
+   */
+  options?: OptionsSplitView;
+}
+
+export interface LayoutRoot {
+  /**
+   * Set the root
+   */
+  root?: Layout;
+  modals?: any;
+  overlays?: any;
+}
+
+export interface Layout {
+  /**
+   * Set the component
+   */
+  component?: LayoutComponent;
+  /**
+   * Set the stack
+   */
+  stack?: LayoutStack;
+  /**
+   * Set the bottom tabs
+   */
+  bottomTabs?: LayoutBottomTabs;
+  /**
+   * Set the side menu
+   */
+  sideMenu?: LayoutSideMenu;
+  /**
+   * Set the split view
+   */
+  splitView?: LayoutSplitView;
+}

lib/src/interfaces/Options.ts

@@ -11,20 +11,20 @@ export interface OptionsSplitView {
    * Master view display mode
    * @default 'auto'
    */
-  displayMode: 'auto' | 'visible' | 'hidden' | 'overlay';
+  displayMode?: 'auto' | 'visible' | 'hidden' | 'overlay';
   /**
    * Master view side. Leading is left. Trailing is right.
    * @default 'leading'
    */
-  primaryEdge: 'leading' | 'trailing';
+  primaryEdge?: 'leading' | 'trailing';
   /**
    * Set the minimum width of master view
    */
-  minWidth: number;
+  minWidth?: number;
   /**
    * Set the maximum width of master view
    */
-  maxWidth: number;
+  maxWidth?: number;
 }
 
 export interface OptionsStatusBar {
@@ -156,7 +156,7 @@ export interface OptionsTopBarBackButton {
   /**
    * Image to show as the back button
    */
-  icon: ImageRequireSource;
+  icon?: ImageRequireSource;
   /**
    * Weither the back button is visible or not
    * @default true
@@ -231,7 +231,7 @@ export interface OptionsTopBarButton {
   /**
    * Set testID for reference in E2E tests
    */
-  testID: string;
+  testID?: string;
 }
 
 export interface OptionsTopBar {
@@ -555,11 +555,11 @@ export interface OptionsAnimationPropertyConfig {
   /**
    * Animate from this value, ex. 0
    */
-  from: number;
+  from?: number;
   /**
    * Animate to this value, ex. 1
    */
-  to: number;
+  to?: number;
   /**
    * Animation duration
    * @default 300