LayoutTreeParser redesign

lib/src/commands/Examples.js

@@ -13,7 +13,7 @@ const topBarOptions = {
 
 const singleComponent = {
   component: {
-    name: 'myReactComponent'
+    name: 'MyReactComponent'
   }
 };
 
@@ -21,13 +21,13 @@ const stackOfComponentsWithTopBar = {
   stack: [
     {
       component: {
-        name: 'myReactComponent1'
+        name: 'MyReactComponent1'
       }
     },
 
     {
       component: {
-        name: 'myReactComponent2',
+        name: 'MyReactComponent2',
         options: topBarOptions // optional
       }
     }
@@ -40,7 +40,7 @@ const bottomTabs = {
     stackOfComponentsWithTopBar,
     {
       component: {
-        name: 'myReactComponent1'
+        name: 'MyReactComponent1'
       }
     }
   ]
@@ -61,8 +61,7 @@ const topTabs = {
     singleComponent,
     singleComponent,
     stackOfComponentsWithTopBar
-  ],
-  options: topBarOptions
+  ]
 };
 
 const complexLayout = {
@@ -76,6 +75,8 @@ const complexLayout = {
           stack: [
             {
               topTabs: [
+                stackOfComponentsWithTopBar,
+                stackOfComponentsWithTopBar,
                 {
                   topTabs: [
                     singleComponent,
@@ -85,9 +86,7 @@ const complexLayout = {
                     stackOfComponentsWithTopBar
                   ],
                   options: topBarOptions
-                },
-                stackOfComponentsWithTopBar,
-                stackOfComponentsWithTopBar
+                }
               ]
             }
           ]
@@ -101,6 +100,7 @@ module.exports = {
   passProps,
   topBarOptions,
   singleComponent,
+  stackOfComponentsWithTopBar,
   bottomTabs,
   sideMenu,
   topTabs,

lib/src/commands/LayoutTreeParser.js

@@ -2,97 +2,91 @@ const _ = require('lodash');
 const LayoutTypes = require('./LayoutTypes');
 
 class LayoutTreeParser {
+  constructor() {
+    this.parse = this.parse.bind(this);
+  }
+
   /**
-   * returns correct layout tree of {type, children, data?}
+   * returns correct layout tree of nodes which are { type, data, children }
    */
-  parseFromSimpleJSON(simpleJsonApi) {
-    if (simpleJsonApi.sideMenu) {
-      return this._createSideMenu(simpleJsonApi);
-    }
-    if (simpleJsonApi.bottomTabs) {
-      return this._createTabs(simpleJsonApi.bottomTabs);
-    }
-    if (simpleJsonApi.topTabs) {
-      return this._createTopTabs(simpleJsonApi);
-    }
-    if (simpleJsonApi.name) {
-      return this._createContainer(simpleJsonApi);
+  parse(api) {
+    if (api.topTabs) {
+      return this._topTabs(api.topTabs);
+    } else if (api.sideMenu) {
+      return this._sideMenu(api.sideMenu);
+    } else if (api.bottomTabs) {
+      return this._bottomTabs(api.bottomTabs);
+    } else if (api.stack) {
+      return this._stack(api.stack);
+    } else if (api.component) {
+      return this._component(api.component);
     }
-    return this._createContainerStackWithContainerData(simpleJsonApi.container);
+    throw new Error(`unknown LayoutType "${_.keys(api)}"`);
   }
 
-  createDialogContainer(data) {
-    return {
-      type: LayoutTypes.CustomDialog,
-      data,
-      children: []
-    };
-  }
-
-  _createTabs(tabs) {
-    return {
-      type: LayoutTypes.BottomTabs,
-      children: _.map(tabs, (t) => this._createContainerStackWithContainerData(t.container))
-    };
-  }
-
-  _createTopTabs(node) {
+  _topTabs(api) {
     return {
       type: LayoutTypes.TopTabs,
-      data: _.pick(node, 'navigationOptions'),
-      children: _.map(node.topTabs, (t) => this._createTopTab(t))
+      data: {},
+      children: _.map(api, this.parse)
     };
   }
 
-  _createTopTab(data) {
-    return {
-      type: LayoutTypes.TopTab,
-      data,
-      children: []
-    };
-  }
-
-  _createContainerStackWithContainerData(containerData) {
-    return {
-      type: LayoutTypes.ContainerStack,
-      children: [this._createContainer(containerData)]
-    };
-  }
-
-  _createSideMenu(layout) {
+  _sideMenu(api) {
     return {
       type: LayoutTypes.SideMenuRoot,
-      children: this._createSideMenuChildren(layout)
+      data: {},
+      children: this._sideMenuChildren(api)
     };
   }
 
-  _createSideMenuChildren(layout) {
+  _sideMenuChildren(api) {
+    if (!api.center) {
+      throw new Error(`sideMenu.center is required`);
+    }
     const children = [];
-    if (layout.sideMenu.left) {
+    if (api.left) {
       children.push({
         type: LayoutTypes.SideMenuLeft,
-        children: [this._createContainer(layout.sideMenu.left.container)]
+        data: {},
+        children: [this.parse(api.left)]
       });
     }
     children.push({
       type: LayoutTypes.SideMenuCenter,
-      children: [
-        layout.bottomTabs ? this._createTabs(layout.bottomTabs) : this._createContainerStackWithContainerData(layout.container)
-      ]
+      data: {},
+      children: [this.parse(api.center)]
     });
-    if (layout.sideMenu.right) {
+    if (api.right) {
       children.push({
         type: LayoutTypes.SideMenuRight,
-        children: [this._createContainer(layout.sideMenu.right.container)]
+        data: {},
+        children: [this.parse(api.right)]
       });
     }
     return children;
   }
 
-  _createContainer(data) {
+  _bottomTabs(api) {
     return {
-      type: LayoutTypes.Container,
-      data,
+      type: LayoutTypes.BottomTabs,
+      data: {},
+      children: _.map(api, this.parse)
+    };
+  }
+
+  _stack(api) {
+    return {
+      type: LayoutTypes.ComponentStack,
+      data: {},
+      children: _.map(api, this.parse)
+    };
+  }
+
+  _component(api) {
+    return { 
+      type: LayoutTypes.Component,
+      data: api,
       children: []
     };
   }

lib/src/commands/LayoutTreeParser.test.js

@@ -1,4 +1,7 @@
 const LayoutTreeParser = require('./LayoutTreeParser');
+const Examples = require('./Examples');
+const LayoutTypes = require('./LayoutTypes');
+const _ = require('lodash');
 
 describe('LayoutTreeParser', () => {
   let uut;
@@ -7,325 +10,109 @@ describe('LayoutTreeParser', () => {
     uut = new LayoutTreeParser();
   });
 
-  describe('parseFromSimpleJSON', () => {
-    it('parses single screen', () => {
-      expect(uut.parseFromSimpleJSON(SimpleLayouts.singleScreenApp))
-        .toEqual({
-          type: 'ContainerStack',
-          children: [
-            {
-              type: 'Container',
-              data: {
-                name: 'com.example.MyScreen'
-              },
-              children: []
-            }
-          ]
-        });
+  describe('parses into { type, data, children }', () => {
+    it('unknown type', () => {
+      expect(() => uut.parse({ wut: {} })).toThrow(new Error('unknown LayoutType "wut"'));
     });
 
-    it('parses single screen with props', () => {
-      expect(uut.parseFromSimpleJSON(SimpleLayouts.singleScreenWithAditionalParams))
-        .toEqual({
-          type: 'ContainerStack',
-          children: [
-            {
-              type: 'Container',
-              children: [],
-              data: {
-                name: 'com.example.MyScreen',
-                passProps: SimpleLayouts.passProps,
-                style: {},
-                buttons: {}
-              }
-            }
-          ]
-        });
-      const parsedPropsFn = uut.parseFromSimpleJSON(SimpleLayouts.singleScreenWithAditionalParams)
-        .children[0].data.passProps.fnProp;
-      expect(parsedPropsFn).toBe(SimpleLayouts.passProps.fnProp);
-      expect(parsedPropsFn()).toEqual('Hello from a function');
+    it('single component', () => {
+      expect(uut.parse(Examples.singleComponent)).toEqual({
+        type: LayoutTypes.Component,
+        data: { name: 'MyReactComponent' },
+        children: []
+      });
     });
 
-    it('parses tab based', () => {
-      expect(uut.parseFromSimpleJSON(SimpleLayouts.tabBasedApp))
-        .toEqual({
-          type: 'BottomTabs',
-          children: [
-            {
-              type: 'ContainerStack',
-              children: [
-                {
-                  type: 'Container',
-                  children: [],
-                  data: {
-                    name: 'com.example.ATab'
-                  }
-                }
-              ]
-            },
-            {
-              type: 'ContainerStack',
-              children: [
-                {
-                  type: 'Container',
-                  children: [],
-                  data: {
-                    name: 'com.example.SecondTab'
-                  }
-                }
-              ]
-            },
-            {
-              type: 'ContainerStack',
-              children: [
-                {
-                  type: 'Container',
-                  children: [],
-                  data: {
-                    name: 'com.example.ATab'
-                  }
-                }
-              ]
-            }
-          ]
-        });
+    it('pass props', () => {
+      const result = uut.parse({
+        component: {
+          name: 'MyScreen',
+          passProps: Examples.passProps
+        }
+      });
+      expect(result).toEqual({
+        type: LayoutTypes.Component,
+        data: { name: 'MyScreen', passProps: Examples.passProps },
+        children: []
+      });
+      expect(result.data.passProps).toBe(Examples.passProps);
+      expect(result.data.passProps.fnProp()).toEqual('Hello from a function');
     });
 
-    it('parses side menus', () => {
-      expect(uut.parseFromSimpleJSON(SimpleLayouts.singleWithSideMenu))
-        .toEqual({
-          type: 'SideMenuRoot',
-          children: [
-            {
-              type: 'SideMenuLeft',
-              children: [
-                {
-                  type: 'Container',
-                  data: {
-                    name: 'com.example.SideMenu'
-                  },
-                  children: []
-                }
-              ]
-            },
-            {
-              type: 'SideMenuCenter',
-              children: [
-                {
-                  type: 'ContainerStack',
-                  children: [
-                    {
-                      type: 'Container',
-                      data: {
-                        name: 'com.example.MyScreen'
-                      },
-                      children: []
-                    }
-                  ]
-                }
-              ]
-            }
-          ]
-        });
+    it('stack of components with top bar', () => {
+      expect(uut.parse(Examples.stackOfComponentsWithTopBar)).toEqual({
+        type: LayoutTypes.ComponentStack,
+        data: {},
+        children: [
+          {
+            type: LayoutTypes.Component,
+            data: { name: 'MyReactComponent1' },
+            children: []
+          },
+          {
+            type: LayoutTypes.Component,
+            data: { name: 'MyReactComponent2', options: Examples.topBarOptions },
+            children: []
+          }
+        ]
+      });
     });
 
-    it('parses side menu right', () => {
-      expect(uut.parseFromSimpleJSON(SimpleLayouts.singleWithRightSideMenu))
-        .toEqual({
-          type: 'SideMenuRoot',
-          children: [
-            {
-              type: 'SideMenuCenter',
-              children: [
-                {
-                  type: 'ContainerStack',
-                  children: [
-                    {
-                      type: 'Container',
-                      data: {
-                        name: 'com.example.MyScreen'
-                      },
-                      children: []
-                    }
-                  ]
-                }
-              ]
-            },
-            {
-              type: 'SideMenuRight',
-              children: [
-                {
-                  type: 'Container',
-                  data: {
-                    name: 'com.example.SideMenu'
-                  },
-                  children: []
-                }
-              ]
-            }
-          ]
-        });
+    it('bottom tabs', () => {
+      const result = uut.parse(Examples.bottomTabs);
+      expect(_.keys(result)).toEqual(['type', 'data', 'children']);
+      expect(result.type).toEqual(LayoutTypes.BottomTabs);
+      expect(result.data).toEqual({});
+      expect(result.children.length).toEqual(3);
+      expect(result.children[0].type).toEqual(LayoutTypes.ComponentStack);
+      expect(result.children[1].type).toEqual(LayoutTypes.ComponentStack);
+      expect(result.children[2].type).toEqual(LayoutTypes.Component);
     });
 
-    it('parses both side menus', () => {
-      expect(uut.parseFromSimpleJSON(SimpleLayouts.singleWithBothMenus))
-        .toEqual({
-          type: 'SideMenuRoot',
-          children: [
-            {
-              type: 'SideMenuLeft',
-              children: [
-                {
-                  type: 'Container',
-                  data: {
-                    name: 'com.example.Menu1'
-                  },
-                  children: []
-                }
-              ]
-            },
-            {
-              type: 'SideMenuCenter',
-              children: [
-                {
-                  type: 'ContainerStack',
-                  children: [
-                    {
-                      type: 'Container',
-                      data: {
-                        name: 'com.example.MyScreen'
-                      },
-                      children: []
-                    }
-                  ]
-                }
-              ]
-            },
-            {
-              type: 'SideMenuRight',
-              children: [
-                {
-                  type: 'Container',
-                  data: {
-                    name: 'com.example.Menu2'
-                  },
-                  children: []
-                }
-              ]
-            }
-          ]
-        });
+    it('side menus', () => {
+      const result = uut.parse(Examples.sideMenu);
+      expect(_.keys(result)).toEqual(['type', 'data', 'children']);
+      expect(result.type).toEqual(LayoutTypes.SideMenuRoot);
+      expect(result.data).toEqual({});
+      expect(result.children.length).toEqual(3);
+      expect(result.children[0].type).toEqual(LayoutTypes.SideMenuLeft);
+      expect(result.children[1].type).toEqual(LayoutTypes.SideMenuCenter);
+      expect(result.children[2].type).toEqual(LayoutTypes.SideMenuRight);
+      expect(result.children[0].children.length).toEqual(1);
+      expect(result.children[0].children[0].type).toEqual(LayoutTypes.Component);
+      expect(result.children[1].children.length).toEqual(1);
+      expect(result.children[1].children[0].type).toEqual(LayoutTypes.ComponentStack);
+      expect(result.children[2].children.length).toEqual(1);
+      expect(result.children[2].children[0].type).toEqual(LayoutTypes.Component);
     });
 
-    it('parses bottomTabs with side menus', () => {
-      expect(uut.parseFromSimpleJSON(SimpleLayouts.tabBasedWithBothSideMenus))
-        .toEqual({
-          type: 'SideMenuRoot',
-          children: [
-            {
-              type: 'SideMenuLeft',
-              children: [
-                {
-                  type: 'Container',
-                  data: {
-                    name: 'com.example.Menu1'
-                  },
-                  children: []
-                }
-              ]
-            },
-            {
-              type: 'SideMenuCenter',
-              children: [
-                {
-                  type: 'BottomTabs',
-                  children: [
-                    {
-                      type: 'ContainerStack',
-                      children: [
-                        {
-                          type: 'Container',
-                          data: {
-                            name: 'com.example.FirstTab'
-                          },
-                          children: []
-                        }
-                      ]
-                    },
-                    {
-                      type: 'ContainerStack',
-                      children: [
-                        {
-                          type: 'Container',
-                          data: {
-                            name: 'com.example.SecondTab'
-                          },
-                          children: []
-                        }
-                      ]
-                    }
-                  ]
-                }
-              ]
-            },
-            {
-              type: 'SideMenuRight',
-              children: [
-                {
-                  type: 'Container',
-                  data: {
-                    name: 'com.example.Menu2'
-                  },
-                  children: []
-                }
-              ]
-            }
-          ]
-        });
+    it('side menu center is require', () => {
+      expect(() => uut.parse({ sideMenu: {} })).toThrow(new Error('sideMenu.center is required'));
     });
 
-    it('parses bottomTabs with side menus', () => {
-      expect(uut.parseFromSimpleJSON(SimpleLayouts.singleScreenWithTopTabs))
-        .toEqual({
-          type: 'TopTabs',
-          children: [
-            {
-              type: 'TopTab',
-              data: {
-                name: 'navigation.playground.TextScreen'
-              },
-              children: []
-            },
-            {
-              type: 'TopTab',
-              data: {
-                name: 'navigation.playground.TextScreen'
-              },
-              children: []
-            },
-            {
-              type: 'TopTab',
-              data: {
-                name: 'navigation.playground.TextScreen'
-              },
-              children: []
-            }
-          ],
-          data: {}
-        });
+    it('top tabs', () => {
+      const result = uut.parse(Examples.topTabs);
+      expect(_.keys(result)).toEqual(['type', 'data', 'children']);
+      expect(result.type).toEqual(LayoutTypes.TopTabs);
+      expect(result.data).toEqual({});
+      expect(result.children.length).toEqual(5);
+      expect(result.children[0].type).toEqual(LayoutTypes.Component);
+      expect(result.children[1].type).toEqual(LayoutTypes.Component);
+      expect(result.children[2].type).toEqual(LayoutTypes.Component);
+      expect(result.children[3].type).toEqual(LayoutTypes.Component);
+      expect(result.children[4].type).toEqual(LayoutTypes.ComponentStack);
     });
-  });
-
-  describe('createContainer', () => {
-    it('creates container object with passed data', () => {
-      expect(uut.parseFromSimpleJSON({ name: 'theContainer', foo: 'bar' })).toEqual({ type: 'Container', data: { name: 'theContainer', foo: 'bar' }, children: [] });
-    });
-  });
 
-  describe('createDialogContainer', () => {
-    it('creates dialog container object with passed data', () => {
-      expect(uut.createDialogContainer({ foo: 'bar' })).toEqual({ type: 'CustomDialog', data: { foo: 'bar' }, children: [] });
+    it('complex layout example', () => {
+      const result = uut.parse(Examples.complexLayout);
+      expect(result.type).toEqual('SideMenuRoot');
+      expect(result.children[1].type).toEqual('SideMenuCenter');
+      expect(result.children[1].children[0].type).toEqual('BottomTabs');
+      expect(result.children[1].children[0].children[2].type).toEqual('ComponentStack');
+      expect(result.children[1].children[0].children[2].children[0].type).toEqual('TopTabs');
+      expect(result.children[1].children[0].children[2].children[0].children[2].type).toEqual('TopTabs');
+      expect(result.children[1].children[0].children[2].children[0].children[2].children[4].type).toEqual('ComponentStack');
+      // expect(result.children[1].children[0].children[2].children[0].children[2].data).toEqual({ options: {} });
     });
   });
 });