#949

.eslintrc

@@ -3,6 +3,7 @@
     "es6": true,
     "node": true
   },
+  "parser": "babel-eslint",
   "parserOptions": {
     "ecmaVersion": 8,
     "sourceType": "module",

e2e/app.test.js

@@ -186,6 +186,17 @@ describe('reload app', async () => {
   });
 });
 
+describe('screen style - static', () => {
+  beforeEach(async () => {
+    await device.relaunchApp();
+  });
+
+  it('declare a static style object on container component', async () => {
+    await elementByLabel('Push').tap();
+    await expect(elementByLabel('Static Title')).toBeVisible();
+  });
+});
+
 function elementByLabel(label) {
   return element(by.label(label));
 }

lib/src/commands/AppCommands.js

@@ -16,7 +16,7 @@ export default class AppCommands {
 
   showModal(simpleApi) {
     const input = _.cloneDeep(simpleApi);
-    const layout = this.layoutTreeParser.createContainer(input);
+    const layout = this.layoutTreeParser.parseFromSimpleJSON(input);
     this.layoutTreeCrawler.crawl(layout);
     return this.nativeCommandsSender.showModal(layout);
   }

lib/src/commands/AppCommands.test.js

@@ -37,7 +37,8 @@ describe('AppCommands', () => {
             id: 'Container+UNIQUE_ID',
             children: [],
             data: {
-              name: 'com.example.MyScreen'
+              name: 'com.example.MyScreen',
+              navigationStyle: {}
             }
           }
         ]
@@ -46,7 +47,7 @@ describe('AppCommands', () => {
 
     it('deep clones input to avoid mutation errors', () => {
       const obj = {};
-      uut.setRoot({ container: { inner: obj } });
+      uut.setRoot({ container: { name: 'bla', inner: obj } });
       expect(mockCommandsSender.setRoot.mock.calls[0][0].children[0].data.inner).not.toBe(obj);
     });
 
@@ -66,30 +67,40 @@ describe('AppCommands', () => {
   describe('showModal', () => {
     it('sends command to native after parsing into a correct layout tree', () => {
       uut.showModal({
-        name: 'com.example.MyScreen'
+        container: {
+          name: 'com.example.MyScreen'
+        }
       });
       expect(mockCommandsSender.showModal).toHaveBeenCalledTimes(1);
       expect(mockCommandsSender.showModal).toHaveBeenCalledWith({
-        type: 'Container',
-        id: 'Container+UNIQUE_ID',
-        children: [],
-        data: {
-          name: 'com.example.MyScreen'
-        }
+        type: "ContainerStack",
+        id: "ContainerStack+UNIQUE_ID",
+        data: {},
+        children: [{
+          type: "Container",
+          id: "Container+UNIQUE_ID",
+          data: {
+            name: "com.example.MyScreen",
+            navigationStyle: {}
+          },
+          children: []
+        }]
       });
     });
 
     it('deep clones input to avoid mutation errors', () => {
       const obj = {};
-      uut.showModal({ inner: obj });
+      uut.showModal({ container: { 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({});
       uut.showModal({
-        name: 'com.example.MyScreen',
-        passProps: SimpleLayouts.passProps
+        container: {
+          name: 'com.example.MyScreen',
+          passProps: SimpleLayouts.passProps
+        }
       });
       expect(store.getPropsForContainerId('Container+UNIQUE_ID')).toEqual(SimpleLayouts.passProps);
     });

lib/src/commands/ContainerCommands.test.js

@@ -23,7 +23,7 @@ describe('ContainerCommands', () => {
   describe('push', () => {
     it('deep clones input to avoid mutation errors', () => {
       const obj = {};
-      uut.push({ inner: { foo: obj } });
+      uut.push({ name: 'name', inner: { foo: obj } });
       expect(mockCommandsSender.push.mock.calls[0][1].data.inner.foo).not.toBe(obj);
     });
 
@@ -39,7 +39,10 @@ describe('ContainerCommands', () => {
       expect(mockCommandsSender.push).toHaveBeenCalledWith('myUniqueId', {
         type: 'Container',
         id: 'Container+UNIQUE_ID',
-        data: { name: 'com.example.MyScreen' },
+        data: {
+          name: 'com.example.MyScreen',
+          navigationStyle: {}
+        },
         children: []
       });
     });

lib/src/commands/LayoutTreeCrawler.js

@@ -14,14 +14,27 @@ export default class LayoutTreeCrawler {
     node.data = node.data || {};
     node.children = node.children || [];
     if (node.type === LayoutTypes.Container) {
-      this.store.setPropsForContainerId(node.id, node.data.passProps);
+      this._handleContainer(node);
     }
     _.forEach(node.children, this.crawl);
   }
 
+  _handleContainer(node) {
+    this._assertContainerDataName(node);
+    this.store.setPropsForContainerId(node.id, node.data.passProps);
+    const clazz = this.store.getOriginalContainerClassForName(node.data.name);
+    node.data.navigationStyle = _.cloneDeep(_.get(clazz, 'navigationStyle', {}));
+  }
+
   _assertKnownLayoutType(type) {
     if (!_.includes(LayoutTypes, type)) {
       throw new Error(`Unknown layout type ${type}`);
     }
   }
+
+  _assertContainerDataName(container) {
+    if (!container.data.name) {
+      throw new Error('Missing container data.name');
+    }
+  }
 }

lib/src/commands/LayoutTreeCrawler.test.js

@@ -13,34 +13,75 @@ describe('LayoutTreeCrawler', () => {
   });
 
   it('crawls a layout tree and adds unique id to each node', () => {
-    const node = { type: LayoutTypes.Container, children: [{ type: LayoutTypes.BottomTabs }] };
+    const node = { type: LayoutTypes.ContainerStack, children: [{ type: LayoutTypes.BottomTabs }] };
     uut.crawl(node);
-    expect(node.id).toEqual('Container+UNIQUE_ID');
+    expect(node.id).toEqual('ContainerStack+UNIQUE_ID');
     expect(node.children[0].id).toEqual('BottomTabs+UNIQUE_ID');
   });
 
   it('crawls a layout tree and ensures data exists', () => {
-    const node = { type: LayoutTypes.Container, children: [{ type: LayoutTypes.BottomTabs }] };
+    const node = { type: LayoutTypes.ContainerStack, 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.Container, children: [{ type: LayoutTypes.BottomTabs }] };
+    const node = { type: LayoutTypes.ContainerStack, 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.Container, children: [{ type: 'Bob' }] };
+    const node = { type: LayoutTypes.ContainerStack, children: [{ type: 'Bob' }] };
     expect(() => uut.crawl(node)).toThrow(new Error('Unknown layout type Bob'));
   });
 
   it('saves passProps into store for Container nodes', () => {
-    const node = { type: LayoutTypes.BottomTabs, children: [{ type: LayoutTypes.Container, data: { passProps: { myProp: 123 } } }] };
+    const node = {
+      type: LayoutTypes.BottomTabs, children: [
+        { type: LayoutTypes.Container, data: { name: 'the name', passProps: { myProp: 123 } } }]
+    };
     expect(store.getPropsForContainerId('Container+UNIQUE_ID')).toEqual({});
     uut.crawl(node);
     expect(store.getPropsForContainerId('Container+UNIQUE_ID')).toEqual({ myProp: 123 });
   });
+
+  it('Containers: injects navigationStyle from original container class static property', () => {
+    const theStyle = {};
+    const MyContainer = class {
+      static navigationStyle = theStyle;
+    };
+
+    const node = { type: LayoutTypes.Container, data: { name: 'theContainerName' } };
+    store.setOriginalContainerClassForName('theContainerName', MyContainer);
+    uut.crawl(node);
+    expect(node.data.navigationStyle).toEqual(theStyle);
+  });
+
+  it('Containers: deepClones navigationStyle', () => {
+    const theStyle = {};
+    const MyContainer = class {
+      static navigationStyle = theStyle;
+    };
+
+    const node = { type: LayoutTypes.Container, data: { name: 'theContainerName' } };
+    store.setOriginalContainerClassForName('theContainerName', MyContainer);
+    uut.crawl(node);
+    expect(node.data.navigationStyle).not.toBe(theStyle);
+  });
+
+  it('Containers: must contain data name', () => {
+    const node = { type: LayoutTypes.Container, data: {} };
+    expect(() => uut.crawl(node)).toThrow(new Error('Missing container data.name'));
+  });
+
+  it('Containers: navigationStyle default obj', () => {
+    const MyContainer = class { };
+
+    const node = { type: LayoutTypes.Container, data: { name: 'theContainerName' } };
+    store.setOriginalContainerClassForName('theContainerName', MyContainer);
+    uut.crawl(node);
+    expect(node.data.navigationStyle).toEqual({});
+  });
 });

lib/src/containers/ContainerRegistry.js

@@ -9,7 +9,7 @@ export default class ContainerRegistry {
   registerContainer(containerName, getContainerFunc) {
     const OriginalContainer = getContainerFunc();
     const NavigationContainer = ContainerWrapper.wrap(containerName, OriginalContainer, this.store);
-    this.store.setContainerClassForName(containerName, NavigationContainer);
+    this.store.setOriginalContainerClassForName(containerName, OriginalContainer);
     AppRegistry.registerComponent(containerName, () => NavigationContainer);
   }
 }

lib/src/containers/ContainerRegistry.test.js

@@ -28,12 +28,12 @@ describe('ContainerRegistry', () => {
     expect(AppRegistry.registerComponent.mock.calls[0][0]).toEqual('example.MyContainer.name');
   });
 
-  it('saves the container wrapped into the store', () => {
-    expect(store.getContainerClassForName('example.MyContainer.name')).toBeUndefined();
+  it('saves the original container into the store', () => {
+    expect(store.getOriginalContainerClassForName('example.MyContainer.name')).toBeUndefined();
     uut.registerContainer('example.MyContainer.name', () => MyContainer);
-    const Class = store.getContainerClassForName('example.MyContainer.name');
+    const Class = store.getOriginalContainerClassForName('example.MyContainer.name');
     expect(Class).not.toBeUndefined();
-    expect(Class).not.toEqual(MyContainer);
+    expect(Class).toEqual(MyContainer);
     expect(Object.getPrototypeOf(Class)).toEqual(Component);
   });
 

lib/src/containers/Store.js

@@ -15,11 +15,11 @@ export default class Store {
     return _.get(this.propsByContainerId, containerId, {});
   }
 
-  setContainerClassForName(containerName, ContainerClass) {
+  setOriginalContainerClassForName(containerName, ContainerClass) {
     _.set(this.containersByName, containerName, ContainerClass);
   }
 
-  getContainerClassForName(containerName) {
+  getOriginalContainerClassForName(containerName) {
     return _.get(this.containersByName, containerName);
   }
 

lib/src/containers/Store.test.js

@@ -22,12 +22,12 @@ describe('Store', () => {
     expect(uut.getPropsForContainerId('container1')).toEqual({});
   });
 
-  it('holds containers classes by containerName', () => {
+  it('holds original containers classes by containerName', () => {
     const MyComponent = class {
       //
     };
-    uut.setContainerClassForName('example.mycontainer', MyComponent);
-    expect(uut.getContainerClassForName('example.mycontainer')).toEqual(MyComponent);
+    uut.setOriginalContainerClassForName('example.mycontainer', MyComponent);
+    expect(uut.getOriginalContainerClassForName('example.mycontainer')).toEqual(MyComponent);
   });
 
   it('holds container refs by id', () => {

package.json

@@ -53,6 +53,7 @@
     "babel-cli": "6.x.x",
     "babel-core": "6.x.x",
     "babel-polyfill": "6.x.x",
+    "babel-eslint": "7.x.x",
     "babel-preset-react-native": "1.x.x",
     "babel-register": "6.x.x",
     "babel-jest": "18.x.x",

playground/src/containers/PushedScreen.js

@@ -10,6 +10,10 @@ import {
 import Navigation from 'react-native-navigation';
 
 class PushedScreen extends Component {
+  static navigationStyle = {
+    title: 'Static Title'
+  }
+
   constructor(props) {
     super(props);
     this.onClickPush = this.onClickPush.bind(this);

wallaby.js

@@ -13,14 +13,14 @@ module.exports = function (wallaby) {
 
     files: [
       'package.json',
-      'src/**/*.js',
-      '!src/**/*.test.js',
+      'lib/src/**/*.js',
+      '!lib/src/**/*.test.js',
       'integration/**/*.js',
       '!integration/**/*.test.js'
     ],
 
     tests: [
-      'src/**/*.test.js',
+      'lib/src/**/*.test.js',
       'integration/**/*.test.js'
     ],
 

yarn.lock

@@ -279,7 +279,7 @@ babel-core@6.x.x, babel-core@^6.0.0, babel-core@^6.21.0, babel-core@^6.23.0, bab
     slash "^1.0.0"
     source-map "^0.5.0"
 
-babel-eslint@7.1.1:
+babel-eslint@7.1.1, babel-eslint@7.x.x:
   version "7.1.1"
   resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-7.1.1.tgz#8a6a884f085aa7060af69cfc77341c2f99370fb2"
   dependencies: