Handle merge buttons style

lib/src/commands/LayoutTreeCrawler.test.ts

@@ -104,6 +104,128 @@ describe('LayoutTreeCrawler', () => {
     });
   });
 
+  it('Components: extract button style from passedOptions buttons array and merge it to all buttons', () => {
+    const MyComponent = class {
+      static get options() {
+        return {
+          topBar: {
+            leftButtons: [{
+              id: 'id'
+            }],
+            rightButtons: [{
+              id: 'id2'
+            }]
+          }
+        };
+      }
+    };
+
+    const passedOptions = {
+      topBar: {
+        leftButtons: [{
+          font: 'Helvetica'
+        }],
+        rightButtons: []
+      }
+    };
+
+    const node = { type: LayoutType.Component, data: { name: 'theComponentName', options: passedOptions } };
+    store.setOriginalComponentClassForName('theComponentName', MyComponent);
+
+    uut.crawl(node);
+
+    expect(node.data.options).toEqual({
+      topBar: {
+        leftButtons: [{
+          id: 'id',
+          font: 'Helvetica'
+        }],
+        rightButtons: [{
+          id: 'id2'
+        }]
+      }
+    });
+  });
+
+  it('Components: empty buttons array should not affect static buttons', () => {
+    const MyComponent = class {
+      static get options() {
+        return {
+          topBar: {
+            leftButtons: [{
+              id: 'id'
+            }],
+            rightButtons: [{
+              id: 'id2'
+            }]
+          }
+        };
+      }
+    };
+
+    const passedOptions = {
+      topBar: {
+        leftButtons: [{
+          id: 'id'
+        }],
+        rightButtons: []
+      }
+    };
+
+    const node = { type: LayoutType.Component, data: { name: 'theComponentName', options: passedOptions } };
+    store.setOriginalComponentClassForName('theComponentName', MyComponent);
+
+    uut.crawl(node);
+
+    expect(node.data.options).toEqual({
+      topBar: {
+        leftButtons: [{
+          id: 'id'
+        }],
+        rightButtons: [{
+          id: 'id2'
+        }]
+      }
+    });
+  });
+
+  it('Components: undefined passed buttons should not affect static buttons', () => {
+    const MyComponent = class {
+      static get options() {
+        return {
+          topBar: {
+            leftButtons: [{
+              id: 'id'
+            }],
+            rightButtons: [{
+              id: 'id2'
+            }]
+          }
+        };
+      }
+    };
+
+    const passedOptions = {
+      topBar: {}
+    };
+
+    const node = { type: LayoutType.Component, data: { name: 'theComponentName', options: passedOptions } };
+    store.setOriginalComponentClassForName('theComponentName', MyComponent);
+
+    uut.crawl(node);
+
+    expect(node.data.options).toEqual({
+      topBar: {
+        leftButtons: [{
+          id: 'id'
+        }],
+        rightButtons: [{
+          id: 'id2'
+        }]
+      }
+    });
+  });
+
   it('Component: deepClones options', () => {
     const theStyle = {};
     const MyComponent = class {

lib/src/commands/LayoutTreeCrawler.ts

@@ -54,9 +54,46 @@ export class LayoutTreeCrawler {
     const clazz = this.store.getOriginalComponentClassForName(node.data.name) || {};
     const staticOptions = _.cloneDeep(clazz.options) || {};
     const passedOptions = node.data.options || {};
+    this._mergeButtonsStyles(passedOptions, staticOptions);
     node.data.options = _.merge({}, staticOptions, passedOptions);
   }
 
+  _mergeButtonsStyles(passedOptions, staticOptions) {
+    if (passedOptions.topBar) {
+      const leftButtons = passedOptions.topBar.leftButtons;
+      if (leftButtons) {
+        const leftButtonsStyle = this._extractButtonsStyle(leftButtons);
+        this._applyButtonsStyle(staticOptions.topBar.leftButtons, leftButtonsStyle);
+        this._applyButtonsStyle(passedOptions.topBar.leftButtons, leftButtonsStyle);
+      }
+
+      const rightButtons = passedOptions.topBar.rightButtons;
+      if (rightButtons) {
+        const rightButtonsStyle = this._extractButtonsStyle(rightButtons);
+        this._applyButtonsStyle(staticOptions.topBar.rightButtons, rightButtonsStyle);
+        this._applyButtonsStyle(passedOptions.topBar.rightButtons, rightButtonsStyle);
+      }
+    }
+  }
+
+  _extractButtonsStyle(buttons) {
+    return buttons.find((button) => {
+      if (button.id === undefined) {
+        const index = buttons.indexOf(button);
+        buttons.splice(index, 1);
+        return button;
+      } else {
+        return undefined;
+      }
+    });
+  }
+
+  _applyButtonsStyle(buttons, style) {
+    buttons.forEach((button) => {
+      _.merge(button, style);
+    });
+  }
+
   _assertKnownLayoutType(type) {
     if (!LayoutType[type]) {
       throw new Error(`Unknown layout type ${type}`);