new api

lib/src/commands/Commands.js

@@ -10,7 +10,7 @@ class Commands {
 
   setRoot(simpleApi) {
     const input = _.cloneDeep(simpleApi);
-    const layout = this.layoutTreeParser.parseFromSimpleJSON(input);
+    const layout = this.layoutTreeParser.parse(input);
     this.layoutTreeCrawler.crawl(layout);
     return this.nativeCommandsSender.setRoot(layout);
   }
@@ -29,7 +29,7 @@ class Commands {
 
   showModal(simpleApi) {
     const input = _.cloneDeep(simpleApi);
-    const layout = this.layoutTreeParser.parseFromSimpleJSON(input);
+    const layout = this.layoutTreeParser.parse(input);
     this.layoutTreeCrawler.crawl(layout);
     return this.nativeCommandsSender.showModal(layout);
   }
@@ -45,7 +45,7 @@ class Commands {
   push(onContainerId, containerData) {
     const input = _.cloneDeep(containerData);
     OptionsProcessor.processOptions(input);
-    const layout = this.layoutTreeParser.parseFromSimpleJSON(input);
+    const layout = this.layoutTreeParser.parse(input);
     this.layoutTreeCrawler.crawl(layout);
     return this.nativeCommandsSender.push(onContainerId, layout);
   }
@@ -62,19 +62,19 @@ class Commands {
     return this.nativeCommandsSender.popToRoot(containerId);
   }
 
-  showOverlay(type, options) {
-    let promise;
-    if (type === 'custom') {
-      const layout = this.layoutTreeParser.createDialogContainer({ name: options });
-      this.layoutTreeCrawler.crawl(layout);
-      promise = this.nativeCommandsSender.showOverlay(type, layout);
-    } else {
-      const input = _.cloneDeep(options);
-      OptionsProcessor.processOptions(input);
-      promise = this.nativeCommandsSender.showOverlay(type, input);
-    }
-    return promise;
-  }
+  // showOverlay(type, options) {
+    // let promise;
+    // if (type === 'custom') {
+    //   const layout = this.layoutTreeParser.createDialogContainer({ name: options });
+    //   this.layoutTreeCrawler.crawl(layout);
+    //   promise = this.nativeCommandsSender.showOverlay(type, layout);
+    // } else {
+    //   const input = _.cloneDeep(options);
+    //   OptionsProcessor.processOptions(input);
+    //   promise = this.nativeCommandsSender.showOverlay(type, input);
+    // }
+    // return promise;
+  // }
 
   dismissOverlay() {
     return this.nativeCommandsSender.dismissOverlay();

lib/src/commands/Commands.test.js

@@ -20,44 +20,41 @@ describe('Commands', () => {
   describe('setRoot', () => {
     it('sends setRoot to native after parsing into a correct layout tree', () => {
       uut.setRoot({
-        container: {
+        component: {
           name: 'com.example.MyScreen'
         }
       });
       expect(mockCommandsSender.setRoot).toHaveBeenCalledTimes(1);
       expect(mockCommandsSender.setRoot).toHaveBeenCalledWith({
-        type: 'ContainerStack',
-        id: 'ContainerStack+UNIQUE_ID',
-        data: {},
-        children: [
-          {
-            type: 'Container',
-            id: 'Container+UNIQUE_ID',
-            children: [],
-            data: {
-              name: 'com.example.MyScreen',
-              navigationOptions: {}
-            }
-          }
-        ]
+        type: 'Component',
+        id: 'Component+UNIQUE_ID',
+        children: [],
+        data: {
+          name: 'com.example.MyScreen',
+          navigationOptions: {}
+        }
       });
     });
 
     it('deep clones input to avoid mutation errors', () => {
       const obj = {};
-      uut.setRoot({ container: { name: 'bla', inner: obj } });
-      expect(mockCommandsSender.setRoot.mock.calls[0][0].children[0].data.inner).not.toBe(obj);
+      uut.setRoot({ component: { name: 'bla', inner: obj } });
+      expect(mockCommandsSender.setRoot.mock.calls[0][0].data.inner).not.toBe(obj);
     });
 
     it('passProps into containers', () => {
-      expect(store.getPropsForContainerId('Container+UNIQUE_ID')).toEqual({});
-      uut.setRoot(SimpleLayouts.singleScreenWithAditionalParams);
-      expect(store.getPropsForContainerId('Container+UNIQUE_ID')).toEqual(SimpleLayouts.passProps);
+      const passProps = {
+        fn: () => 'Hello'
+      };
+      expect(store.getPropsForContainerId('Component+UNIQUE_ID')).toEqual({});
+      uut.setRoot({ component: { name: 'asd', passProps } });
+      expect(store.getPropsForContainerId('Component+UNIQUE_ID')).toEqual(passProps);
+      expect(store.getPropsForContainerId('Component+UNIQUE_ID').fn()).toEqual('Hello');
     });
 
     it('returns a promise with the resolved layout', async () => {
       mockCommandsSender.setRoot.mockReturnValue(Promise.resolve('the resolved layout'));
-      const result = await uut.setRoot({ container: { name: 'com.example.MyScreen' } });
+      const result = await uut.setRoot({ component: { name: 'com.example.MyScreen' } });
       expect(result).toEqual('the resolved layout');
     });
   });
@@ -87,47 +84,45 @@ describe('Commands', () => {
   describe('showModal', () => {
     it('sends command to native after parsing into a correct layout tree', () => {
       uut.showModal({
-        container: {
+        component: {
           name: 'com.example.MyScreen'
         }
       });
       expect(mockCommandsSender.showModal).toHaveBeenCalledTimes(1);
       expect(mockCommandsSender.showModal).toHaveBeenCalledWith({
-        type: 'ContainerStack',
-        id: 'ContainerStack+UNIQUE_ID',
-        data: {},
-        children: [{
-          type: 'Container',
-          id: 'Container+UNIQUE_ID',
-          data: {
-            name: 'com.example.MyScreen',
-            navigationOptions: {}
-          },
-          children: []
-        }]
+        type: 'Component',
+        id: 'Component+UNIQUE_ID',
+        data: {
+          name: 'com.example.MyScreen',
+          navigationOptions: {}
+        },
+        children: []
       });
     });
 
     it('deep clones input to avoid mutation errors', () => {
       const obj = {};
-      uut.showModal({ container: { name: 'name', inner: obj } });
+      uut.showModal({ component: { name: 'name', inner: obj } });
       expect(mockCommandsSender.showModal.mock.calls[0][0].data.inner).not.toBe(obj);
     });
 
     it('passProps into containers', () => {
-      expect(store.getPropsForContainerId('Container+UNIQUE_ID')).toEqual({});
+      const passProps = {
+        fn: () => 'hello'
+      };
+      expect(store.getPropsForContainerId('Component+UNIQUE_ID')).toEqual({});
       uut.showModal({
-        container: {
+        component: {
           name: 'com.example.MyScreen',
-          passProps: SimpleLayouts.passProps
+          passProps
         }
       });
-      expect(store.getPropsForContainerId('Container+UNIQUE_ID')).toEqual(SimpleLayouts.passProps);
+      expect(store.getPropsForContainerId('Component+UNIQUE_ID')).toEqual(passProps);
     });
 
     it('returns a promise with the resolved layout', async () => {
       mockCommandsSender.showModal.mockReturnValue(Promise.resolve('the resolved layout'));
-      const result = await uut.showModal({ container: { name: 'com.example.MyScreen' } });
+      const result = await uut.showModal({ component: { name: 'com.example.MyScreen' } });
       expect(result).toEqual('the resolved layout');
     });
   });
@@ -163,22 +158,22 @@ describe('Commands', () => {
   describe('push', () => {
     it('deep clones input to avoid mutation errors', () => {
       const obj = {};
-      uut.push('theContainerId', { name: 'name', inner: { foo: obj } });
-      expect(mockCommandsSender.push.mock.calls[0][1].data.inner.foo).not.toBe(obj);
+      uut.push('theContainerId', { component: { name: 'name', passProps: { foo: obj } } });
+      expect(mockCommandsSender.push.mock.calls[0][1].data.passProps.foo).not.toBe(obj);
     });
 
     it('resolves with the parsed layout', async () => {
       mockCommandsSender.push.mockReturnValue(Promise.resolve('the resolved layout'));
-      const result = await uut.push('theContainerId', { name: 'com.example.MyScreen' });
+      const result = await uut.push('theContainerId', { component: { name: 'com.example.MyScreen' } });
       expect(result).toEqual('the resolved layout');
     });
 
     it('parses into correct layout node and sends to native', () => {
-      uut.push('theContainerId', { name: 'com.example.MyScreen' });
+      uut.push('theContainerId', { component: { name: 'com.example.MyScreen' } });
       expect(mockCommandsSender.push).toHaveBeenCalledTimes(1);
       expect(mockCommandsSender.push).toHaveBeenCalledWith('theContainerId', {
-        type: 'Container',
-        id: 'Container+UNIQUE_ID',
+        type: 'Component',
+        id: 'Component+UNIQUE_ID',
         data: {
           name: 'com.example.MyScreen',
           navigationOptions: {}
@@ -201,7 +196,8 @@ describe('Commands', () => {
             { type: 'sharedElement', fromId: 'title2', toId: 'title1', startDelay: 0, springVelocity: 0.2, duration: 0.5 }
           ],
           duration: 0.8
-        } };
+        }
+      };
       uut.pop('theContainerId', options);
       expect(mockCommandsSender.pop).toHaveBeenCalledTimes(1);
       expect(mockCommandsSender.pop).toHaveBeenCalledWith('theContainerId', options);
@@ -242,7 +238,7 @@ describe('Commands', () => {
     });
   });
 
-  describe('showOverlay', () => {
+  xdescribe('showOverlay', () => {
     it('deep clones input to avoid mutation errors', () => {
       const obj = { title: 'test' };
       uut.showOverlay('alert', obj);

lib/src/commands/LayoutTreeCrawler.js

@@ -14,7 +14,7 @@ class LayoutTreeCrawler {
     node.id = this.uniqueIdProvider.generate(node.type);
     node.data = node.data || {};
     node.children = node.children || [];
-    if ([LayoutTypes.Container, LayoutTypes.TopTab].includes(node.type)) {
+    if (_.isEqual(node.type, LayoutTypes.Component)) {
       this._handleContainer(node);
     }
     _.forEach(node.children, this.crawl);

lib/src/commands/LayoutTreeCrawler.test.js

@@ -13,38 +13,38 @@ describe('LayoutTreeCrawler', () => {
   });
 
   it('crawls a layout tree and adds unique id to each node', () => {
-    const node = { type: LayoutTypes.ContainerStack, children: [{ type: LayoutTypes.BottomTabs }] };
+    const node = { type: LayoutTypes.Stack, children: [{ type: LayoutTypes.BottomTabs }] };
     uut.crawl(node);
-    expect(node.id).toEqual('ContainerStack+UNIQUE_ID');
+    expect(node.id).toEqual('Stack+UNIQUE_ID');
     expect(node.children[0].id).toEqual('BottomTabs+UNIQUE_ID');
   });
 
   it('crawls a layout tree and ensures data exists', () => {
-    const node = { type: LayoutTypes.ContainerStack, children: [{ type: LayoutTypes.BottomTabs }] };
+    const node = { type: LayoutTypes.Stack, children: [{ type: LayoutTypes.BottomTabs }] };
     uut.crawl(node);
     expect(node.data).toEqual({});
     expect(node.children[0].data).toEqual({});
   });
 
   it('crawls a layout tree and ensures children exists', () => {
-    const node = { type: LayoutTypes.ContainerStack, children: [{ type: LayoutTypes.BottomTabs }] };
+    const node = { type: LayoutTypes.Stack, children: [{ type: LayoutTypes.BottomTabs }] };
     uut.crawl(node);
     expect(node.children[0].children).toEqual([]);
   });
 
   it('crawls a layout tree and asserts known layout type', () => {
-    const node = { type: LayoutTypes.ContainerStack, children: [{ type: 'Bob' }] };
+    const node = { type: LayoutTypes.Stack, children: [{ type: 'Bob' }] };
     expect(() => uut.crawl(node)).toThrow(new Error('Unknown layout type Bob'));
   });
 
-  it('saves passProps into store for Container nodes', () => {
+  it('saves passProps into store for Component nodes', () => {
     const node = {
       type: LayoutTypes.BottomTabs, children: [
-        { type: LayoutTypes.Container, data: { name: 'the name', passProps: { myProp: 123 } } }]
+        { type: LayoutTypes.Component, data: { name: 'the name', passProps: { myProp: 123 } } }]
     };
-    expect(store.getPropsForContainerId('Container+UNIQUE_ID')).toEqual({});
+    expect(store.getPropsForContainerId('Component+UNIQUE_ID')).toEqual({});
     uut.crawl(node);
-    expect(store.getPropsForContainerId('Container+UNIQUE_ID')).toEqual({ myProp: 123 });
+    expect(store.getPropsForContainerId('Component+UNIQUE_ID')).toEqual({ myProp: 123 });
   });
 
   it('Containers: injects navigationOptions from original container class static property', () => {
@@ -55,7 +55,7 @@ describe('LayoutTreeCrawler', () => {
       }
     };
 
-    const node = { type: LayoutTypes.Container, data: { name: 'theContainerName' } };
+    const node = { type: LayoutTypes.Component, data: { name: 'theContainerName' } };
     store.setOriginalContainerClassForName('theContainerName', MyContainer);
     uut.crawl(node);
     expect(node.data.navigationOptions).toEqual(theStyle);
@@ -83,7 +83,7 @@ describe('LayoutTreeCrawler', () => {
       }
     };
 
-    const node = { type: LayoutTypes.Container, data: { name: 'theContainerName', navigationOptions: passedOptions } };
+    const node = { type: LayoutTypes.Component, data: { name: 'theContainerName', navigationOptions: passedOptions } };
     store.setOriginalContainerClassForName('theContainerName', MyContainer);
 
     uut.crawl(node);
@@ -98,7 +98,7 @@ describe('LayoutTreeCrawler', () => {
     });
   });
 
-  it('Containers: deepClones navigationOptions', () => {
+  it('Component: deepClones navigationOptions', () => {
     const theStyle = {};
     const MyContainer = class {
       static get navigationOptions() {
@@ -106,21 +106,21 @@ describe('LayoutTreeCrawler', () => {
       }
     };
 
-    const node = { type: LayoutTypes.Container, data: { name: 'theContainerName' } };
+    const node = { type: LayoutTypes.Component, data: { name: 'theContainerName' } };
     store.setOriginalContainerClassForName('theContainerName', MyContainer);
     uut.crawl(node);
     expect(node.data.navigationOptions).not.toBe(theStyle);
   });
 
   it('Containers: must contain data name', () => {
-    const node = { type: LayoutTypes.Container, data: {} };
+    const node = { type: LayoutTypes.Component, data: {} };
     expect(() => uut.crawl(node)).toThrow(new Error('Missing container data.name'));
   });
 
   it('Containers: navigationOptions default obj', () => {
     const MyContainer = class { };
 
-    const node = { type: LayoutTypes.Container, data: { name: 'theContainerName' } };
+    const node = { type: LayoutTypes.Component, data: { name: 'theContainerName' } };
     store.setOriginalContainerClassForName('theContainerName', MyContainer);
     uut.crawl(node);
     expect(node.data.navigationOptions).toEqual({});
@@ -132,7 +132,7 @@ describe('LayoutTreeCrawler', () => {
 
     beforeEach(() => {
       navigationOptions = {};
-      node = { type: LayoutTypes.Container, data: { name: 'theContainerName', navigationOptions } };
+      node = { type: LayoutTypes.Component, data: { name: 'theContainerName', navigationOptions } };
     });
 
     it('processes colors into numeric AARRGGBB', () => {