refactor OptionsProcessor

lib/src/commands/Commands.ts

@@ -5,12 +5,13 @@ export class Commands {
   private nativeCommandsSender;
   private layoutTreeParser;
   private layoutTreeCrawler;
-  private optionsProcessor = new OptionsProcessor();
+  private optionsProcessor: OptionsProcessor;
 
   constructor(nativeCommandsSender, layoutTreeParser, layoutTreeCrawler) {
     this.nativeCommandsSender = nativeCommandsSender;
     this.layoutTreeParser = layoutTreeParser;
     this.layoutTreeCrawler = layoutTreeCrawler;
+    this.optionsProcessor = new OptionsProcessor(this.layoutTreeCrawler.store);
   }
 
   setRoot(simpleApi) {
@@ -22,13 +23,13 @@ export class Commands {
 
   setDefaultOptions(options) {
     const input = _.cloneDeep(options);
-    this.optionsProcessor.processOptions(input, this.layoutTreeCrawler.store);
+    this.optionsProcessor.processOptions(input);
     this.nativeCommandsSender.setDefaultOptions(input);
   }
 
   setOptions(componentId, options) {
     const input = _.cloneDeep(options);
-    this.optionsProcessor.processOptions(input, this.layoutTreeCrawler.store);
+    this.optionsProcessor.processOptions(input);
     this.nativeCommandsSender.setOptions(componentId, input);
   }
 
@@ -49,7 +50,7 @@ export class Commands {
 
   push(onComponentId, componentData) {
     const input = _.cloneDeep(componentData);
-    this.optionsProcessor.processOptions(input, this.layoutTreeCrawler.store);
+    this.optionsProcessor.processOptions(input);
     const layout = this.layoutTreeParser.parse(input);
     this.layoutTreeCrawler.crawl(layout);
     return this.nativeCommandsSender.push(onComponentId, layout);
@@ -69,7 +70,7 @@ export class Commands {
 
   showOverlay(componentData) {
     const input = _.cloneDeep(componentData);
-    this.optionsProcessor.processOptions(input, this.layoutTreeCrawler.store);
+    this.optionsProcessor.processOptions(input);
 
     const layout = this.layoutTreeParser.parse(input);
     this.layoutTreeCrawler.crawl(layout);

lib/src/commands/LayoutTreeCrawler.ts

@@ -15,11 +15,12 @@ export interface LayoutNode {
 }
 
 export class LayoutTreeCrawler {
-  private optionsProcessor = new OptionsProcessor();
+  private optionsProcessor: OptionsProcessor;
   constructor(
     private readonly uniqueIdProvider: any,
     public readonly store: any) {
     this.crawl = this.crawl.bind(this);
+    this.optionsProcessor = new OptionsProcessor(store);
   }
 
   crawl(node: LayoutNode): void {
@@ -30,7 +31,7 @@ export class LayoutTreeCrawler {
     if (node.type === LayoutType.Component) {
       this._handleComponent(node);
     }
-    this.optionsProcessor.processOptions(node.data.options, this.store);
+    this.optionsProcessor.processOptions(node.data.options);
     _.forEach(node.children, this.crawl);
   }
 

lib/src/commands/OptionsProcessor.test.ts

@@ -8,53 +8,53 @@ describe('navigation options', () => {
   beforeEach(() => {
     options = {};
     store = new Store();
-    uut = new OptionsProcessor();
+    uut = new OptionsProcessor(store);
   });
 
   it('processes colors into numeric AARRGGBB', () => {
     options.someKeyColor = 'red';
     options.color = 'blue';
-    uut.processOptions(options, store);
+    uut.processOptions(options);
     expect(options.someKeyColor).toEqual(0xffff0000);
     expect(options.color).toEqual(0xff0000ff);
 
     options.someKeyColor = 'yellow';
-    uut.processOptions(options, store);
+    uut.processOptions(options);
     expect(options.someKeyColor).toEqual(0xffffff00);
   });
 
   it('processes numeric colors', () => {
     options.someKeyColor = '#123456';
-    uut.processOptions(options, store);
+    uut.processOptions(options);
     expect(options.someKeyColor).toEqual(0xff123456);
 
     options.someKeyColor = 0x123456ff; // wut
-    uut.processOptions(options, store);
+    uut.processOptions(options);
     expect(options.someKeyColor).toEqual(0xff123456);
   });
 
   it('process colors with rgb functions', () => {
     options.someKeyColor = 'rgb(255, 0, 255)';
-    uut.processOptions(options, store);
+    uut.processOptions(options);
     expect(options.someKeyColor).toEqual(0xffff00ff);
   });
 
   it('process colors with special words', () => {
     options.someKeyColor = 'fuchsia';
-    uut.processOptions(options, store);
+    uut.processOptions(options);
     expect(options.someKeyColor).toEqual(0xffff00ff);
   });
 
   it('process colors with hsla functions', () => {
     options.someKeyColor = 'hsla(360, 100%, 100%, 1.0)';
-    uut.processOptions(options, store);
+    uut.processOptions(options);
 
     expect(options.someKeyColor).toEqual(0xffffffff);
   });
 
   it('unknown colors return undefined', () => {
     options.someKeyColor = 'wut';
-    uut.processOptions(options, store);
+    uut.processOptions(options);
     expect(options.someKeyColor).toEqual(undefined);
   });
 
@@ -62,7 +62,7 @@ describe('navigation options', () => {
     options.otherKeyColor = 'red';
     options.yetAnotherColor = 'blue';
     options.andAnotherColor = 'rgb(0, 255, 0)';
-    uut.processOptions(options, store);
+    uut.processOptions(options);
     expect(options.otherKeyColor).toEqual(0xffff0000);
     expect(options.yetAnotherColor).toEqual(0xff0000ff);
     expect(options.andAnotherColor).toEqual(0xff00ff00);
@@ -70,14 +70,14 @@ describe('navigation options', () => {
 
   it('keys ending with Color case sensitive', () => {
     options.otherKey_color = 'red'; // eslint-disable-line camelcase
-    uut.processOptions(options, store);
+    uut.processOptions(options);
     expect(options.otherKey_color).toEqual('red');
   });
 
   it('any nested recursive keys ending with Color', () => {
     options.topBar = { textColor: 'red' };
     options.topBar.innerMostObj = { anotherColor: 'yellow' };
-    uut.processOptions(options, store);
+    uut.processOptions(options);
     expect(options.topBar.textColor).toEqual(0xffff0000);
     expect(options.topBar.innerMostObj.anotherColor).toEqual(0xffffff00);
   });
@@ -90,7 +90,7 @@ describe('navigation options', () => {
       myIcon: 'require("https://wix.github.io/react-native-navigation/_images/logo.png");',
       myOtherValue: 'value'
     };
-    uut.processOptions(options, store);
+    uut.processOptions(options);
 
     // As we can't import external images and we don't want to add an image here
     // I assign the icons to strings (what the require would generally look like)
@@ -106,7 +106,7 @@ describe('navigation options', () => {
     const passProps = { prop: 'prop' };
     options.rightButtons = [{ passProps, id: '1' }];
 
-    uut.processOptions({ o: options }, store);
+    uut.processOptions({ o: options });
 
     expect(store.getPropsForId('1')).toEqual(passProps);
   });
@@ -115,7 +115,7 @@ describe('navigation options', () => {
     const passProps = { prop: 'prop' };
     options.rightButtons = [{ passProps }];
 
-    uut.processOptions({ o: options }, store);
+    uut.processOptions({ o: options });
 
     expect(store.getPropsForId('1')).toEqual({});
   });
@@ -125,14 +125,14 @@ describe('navigation options', () => {
     options.topBar = { textColor: 'red' };
     options.topBar.innerMostObj = { anotherColor: 'yellow' };
 
-    uut.processOptions({ o: options }, store);
+    uut.processOptions({ o: options });
 
     expect(options.topBar.textColor).toEqual(0xffff0000);
   });
 
   it('undefined value return undefined ', () => {
     options.someImage = undefined;
-    uut.processOptions(options, store);
+    uut.processOptions(options);
 
     expect(options.someImage).toEqual(undefined);
   });

lib/src/commands/OptionsProcessor.ts

@@ -3,33 +3,41 @@ import { processColor } from 'react-native';
 import * as resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource';
 
 export class OptionsProcessor {
-  public processOptions(options, store) {
+  constructor(public store) { }
+
+  public processOptions(options) {
     _.forEach(options, (value, key) => {
       if (!value) { return; }
 
-      if (_.isEqual(key, 'color') || _.endsWith(key, 'Color')) {
-        options[key] = processColor(value);
-      }
-
-      if (_.isEqual(key, 'icon') || _.isEqual(key, 'image') || _.endsWith(key, 'Icon') || _.endsWith(key, 'Image')) {
-        options[key] = resolveAssetSource(options[key]);
-      }
-
-      if (_.endsWith(key, 'Buttons')) {
-        this.saveButtonsPassProps(value, store);
-      }
+      this.processColors(key, value, options);
+      this.processImages(key, value, options);
+      this.processButtonsPassProps(key, value);
 
       if (_.isObject(value) || _.isArray(value)) {
-        this.processOptions(value, store);
+        this.processOptions(value);
       }
     });
   }
 
-  private saveButtonsPassProps(array, store) {
-    _.forEach(array, (value) => {
-      if (value.passProps && value.id) {
-        store.setPropsForId(value.id, value.passProps);
-      }
-    });
+  private processColors(key, value, options) {
+    if (_.isEqual(key, 'color') || _.endsWith(key, 'Color')) {
+      options[key] = processColor(value);
+    }
+  }
+
+  private processImages(key, value, options) {
+    if (_.isEqual(key, 'icon') || _.isEqual(key, 'image') || _.endsWith(key, 'Icon') || _.endsWith(key, 'Image')) {
+      options[key] = resolveAssetSource(value);
+    }
+  }
+
+  private processButtonsPassProps(key, value) {
+    if (_.endsWith(key, 'Buttons')) {
+      _.forEach(value, (button) => {
+        if (button.passProps && button.id) {
+          this.store.setPropsForId(button.id, button.passProps);
+        }
+      });
+    }
   }
 }