Procházet zdrojové kódy

refactor OptionsProcessor

Daniel Zlotin před 7 roky
rodič
revize
1bf950a297

+ 6
- 5
lib/src/commands/Commands.ts Zobrazit soubor

5
   private nativeCommandsSender;
5
   private nativeCommandsSender;
6
   private layoutTreeParser;
6
   private layoutTreeParser;
7
   private layoutTreeCrawler;
7
   private layoutTreeCrawler;
8
-  private optionsProcessor = new OptionsProcessor();
8
+  private optionsProcessor: OptionsProcessor;
9
 
9
 
10
   constructor(nativeCommandsSender, layoutTreeParser, layoutTreeCrawler) {
10
   constructor(nativeCommandsSender, layoutTreeParser, layoutTreeCrawler) {
11
     this.nativeCommandsSender = nativeCommandsSender;
11
     this.nativeCommandsSender = nativeCommandsSender;
12
     this.layoutTreeParser = layoutTreeParser;
12
     this.layoutTreeParser = layoutTreeParser;
13
     this.layoutTreeCrawler = layoutTreeCrawler;
13
     this.layoutTreeCrawler = layoutTreeCrawler;
14
+    this.optionsProcessor = new OptionsProcessor(this.layoutTreeCrawler.store);
14
   }
15
   }
15
 
16
 
16
   setRoot(simpleApi) {
17
   setRoot(simpleApi) {
22
 
23
 
23
   setDefaultOptions(options) {
24
   setDefaultOptions(options) {
24
     const input = _.cloneDeep(options);
25
     const input = _.cloneDeep(options);
25
-    this.optionsProcessor.processOptions(input, this.layoutTreeCrawler.store);
26
+    this.optionsProcessor.processOptions(input);
26
     this.nativeCommandsSender.setDefaultOptions(input);
27
     this.nativeCommandsSender.setDefaultOptions(input);
27
   }
28
   }
28
 
29
 
29
   setOptions(componentId, options) {
30
   setOptions(componentId, options) {
30
     const input = _.cloneDeep(options);
31
     const input = _.cloneDeep(options);
31
-    this.optionsProcessor.processOptions(input, this.layoutTreeCrawler.store);
32
+    this.optionsProcessor.processOptions(input);
32
     this.nativeCommandsSender.setOptions(componentId, input);
33
     this.nativeCommandsSender.setOptions(componentId, input);
33
   }
34
   }
34
 
35
 
49
 
50
 
50
   push(onComponentId, componentData) {
51
   push(onComponentId, componentData) {
51
     const input = _.cloneDeep(componentData);
52
     const input = _.cloneDeep(componentData);
52
-    this.optionsProcessor.processOptions(input, this.layoutTreeCrawler.store);
53
+    this.optionsProcessor.processOptions(input);
53
     const layout = this.layoutTreeParser.parse(input);
54
     const layout = this.layoutTreeParser.parse(input);
54
     this.layoutTreeCrawler.crawl(layout);
55
     this.layoutTreeCrawler.crawl(layout);
55
     return this.nativeCommandsSender.push(onComponentId, layout);
56
     return this.nativeCommandsSender.push(onComponentId, layout);
69
 
70
 
70
   showOverlay(componentData) {
71
   showOverlay(componentData) {
71
     const input = _.cloneDeep(componentData);
72
     const input = _.cloneDeep(componentData);
72
-    this.optionsProcessor.processOptions(input, this.layoutTreeCrawler.store);
73
+    this.optionsProcessor.processOptions(input);
73
 
74
 
74
     const layout = this.layoutTreeParser.parse(input);
75
     const layout = this.layoutTreeParser.parse(input);
75
     this.layoutTreeCrawler.crawl(layout);
76
     this.layoutTreeCrawler.crawl(layout);

+ 3
- 2
lib/src/commands/LayoutTreeCrawler.ts Zobrazit soubor

15
 }
15
 }
16
 
16
 
17
 export class LayoutTreeCrawler {
17
 export class LayoutTreeCrawler {
18
-  private optionsProcessor = new OptionsProcessor();
18
+  private optionsProcessor: OptionsProcessor;
19
   constructor(
19
   constructor(
20
     private readonly uniqueIdProvider: any,
20
     private readonly uniqueIdProvider: any,
21
     public readonly store: any) {
21
     public readonly store: any) {
22
     this.crawl = this.crawl.bind(this);
22
     this.crawl = this.crawl.bind(this);
23
+    this.optionsProcessor = new OptionsProcessor(store);
23
   }
24
   }
24
 
25
 
25
   crawl(node: LayoutNode): void {
26
   crawl(node: LayoutNode): void {
30
     if (node.type === LayoutType.Component) {
31
     if (node.type === LayoutType.Component) {
31
       this._handleComponent(node);
32
       this._handleComponent(node);
32
     }
33
     }
33
-    this.optionsProcessor.processOptions(node.data.options, this.store);
34
+    this.optionsProcessor.processOptions(node.data.options);
34
     _.forEach(node.children, this.crawl);
35
     _.forEach(node.children, this.crawl);
35
   }
36
   }
36
 
37
 

+ 17
- 17
lib/src/commands/OptionsProcessor.test.ts Zobrazit soubor

8
   beforeEach(() => {
8
   beforeEach(() => {
9
     options = {};
9
     options = {};
10
     store = new Store();
10
     store = new Store();
11
-    uut = new OptionsProcessor();
11
+    uut = new OptionsProcessor(store);
12
   });
12
   });
13
 
13
 
14
   it('processes colors into numeric AARRGGBB', () => {
14
   it('processes colors into numeric AARRGGBB', () => {
15
     options.someKeyColor = 'red';
15
     options.someKeyColor = 'red';
16
     options.color = 'blue';
16
     options.color = 'blue';
17
-    uut.processOptions(options, store);
17
+    uut.processOptions(options);
18
     expect(options.someKeyColor).toEqual(0xffff0000);
18
     expect(options.someKeyColor).toEqual(0xffff0000);
19
     expect(options.color).toEqual(0xff0000ff);
19
     expect(options.color).toEqual(0xff0000ff);
20
 
20
 
21
     options.someKeyColor = 'yellow';
21
     options.someKeyColor = 'yellow';
22
-    uut.processOptions(options, store);
22
+    uut.processOptions(options);
23
     expect(options.someKeyColor).toEqual(0xffffff00);
23
     expect(options.someKeyColor).toEqual(0xffffff00);
24
   });
24
   });
25
 
25
 
26
   it('processes numeric colors', () => {
26
   it('processes numeric colors', () => {
27
     options.someKeyColor = '#123456';
27
     options.someKeyColor = '#123456';
28
-    uut.processOptions(options, store);
28
+    uut.processOptions(options);
29
     expect(options.someKeyColor).toEqual(0xff123456);
29
     expect(options.someKeyColor).toEqual(0xff123456);
30
 
30
 
31
     options.someKeyColor = 0x123456ff; // wut
31
     options.someKeyColor = 0x123456ff; // wut
32
-    uut.processOptions(options, store);
32
+    uut.processOptions(options);
33
     expect(options.someKeyColor).toEqual(0xff123456);
33
     expect(options.someKeyColor).toEqual(0xff123456);
34
   });
34
   });
35
 
35
 
36
   it('process colors with rgb functions', () => {
36
   it('process colors with rgb functions', () => {
37
     options.someKeyColor = 'rgb(255, 0, 255)';
37
     options.someKeyColor = 'rgb(255, 0, 255)';
38
-    uut.processOptions(options, store);
38
+    uut.processOptions(options);
39
     expect(options.someKeyColor).toEqual(0xffff00ff);
39
     expect(options.someKeyColor).toEqual(0xffff00ff);
40
   });
40
   });
41
 
41
 
42
   it('process colors with special words', () => {
42
   it('process colors with special words', () => {
43
     options.someKeyColor = 'fuchsia';
43
     options.someKeyColor = 'fuchsia';
44
-    uut.processOptions(options, store);
44
+    uut.processOptions(options);
45
     expect(options.someKeyColor).toEqual(0xffff00ff);
45
     expect(options.someKeyColor).toEqual(0xffff00ff);
46
   });
46
   });
47
 
47
 
48
   it('process colors with hsla functions', () => {
48
   it('process colors with hsla functions', () => {
49
     options.someKeyColor = 'hsla(360, 100%, 100%, 1.0)';
49
     options.someKeyColor = 'hsla(360, 100%, 100%, 1.0)';
50
-    uut.processOptions(options, store);
50
+    uut.processOptions(options);
51
 
51
 
52
     expect(options.someKeyColor).toEqual(0xffffffff);
52
     expect(options.someKeyColor).toEqual(0xffffffff);
53
   });
53
   });
54
 
54
 
55
   it('unknown colors return undefined', () => {
55
   it('unknown colors return undefined', () => {
56
     options.someKeyColor = 'wut';
56
     options.someKeyColor = 'wut';
57
-    uut.processOptions(options, store);
57
+    uut.processOptions(options);
58
     expect(options.someKeyColor).toEqual(undefined);
58
     expect(options.someKeyColor).toEqual(undefined);
59
   });
59
   });
60
 
60
 
62
     options.otherKeyColor = 'red';
62
     options.otherKeyColor = 'red';
63
     options.yetAnotherColor = 'blue';
63
     options.yetAnotherColor = 'blue';
64
     options.andAnotherColor = 'rgb(0, 255, 0)';
64
     options.andAnotherColor = 'rgb(0, 255, 0)';
65
-    uut.processOptions(options, store);
65
+    uut.processOptions(options);
66
     expect(options.otherKeyColor).toEqual(0xffff0000);
66
     expect(options.otherKeyColor).toEqual(0xffff0000);
67
     expect(options.yetAnotherColor).toEqual(0xff0000ff);
67
     expect(options.yetAnotherColor).toEqual(0xff0000ff);
68
     expect(options.andAnotherColor).toEqual(0xff00ff00);
68
     expect(options.andAnotherColor).toEqual(0xff00ff00);
70
 
70
 
71
   it('keys ending with Color case sensitive', () => {
71
   it('keys ending with Color case sensitive', () => {
72
     options.otherKey_color = 'red'; // eslint-disable-line camelcase
72
     options.otherKey_color = 'red'; // eslint-disable-line camelcase
73
-    uut.processOptions(options, store);
73
+    uut.processOptions(options);
74
     expect(options.otherKey_color).toEqual('red');
74
     expect(options.otherKey_color).toEqual('red');
75
   });
75
   });
76
 
76
 
77
   it('any nested recursive keys ending with Color', () => {
77
   it('any nested recursive keys ending with Color', () => {
78
     options.topBar = { textColor: 'red' };
78
     options.topBar = { textColor: 'red' };
79
     options.topBar.innerMostObj = { anotherColor: 'yellow' };
79
     options.topBar.innerMostObj = { anotherColor: 'yellow' };
80
-    uut.processOptions(options, store);
80
+    uut.processOptions(options);
81
     expect(options.topBar.textColor).toEqual(0xffff0000);
81
     expect(options.topBar.textColor).toEqual(0xffff0000);
82
     expect(options.topBar.innerMostObj.anotherColor).toEqual(0xffffff00);
82
     expect(options.topBar.innerMostObj.anotherColor).toEqual(0xffffff00);
83
   });
83
   });
90
       myIcon: 'require("https://wix.github.io/react-native-navigation/_images/logo.png");',
90
       myIcon: 'require("https://wix.github.io/react-native-navigation/_images/logo.png");',
91
       myOtherValue: 'value'
91
       myOtherValue: 'value'
92
     };
92
     };
93
-    uut.processOptions(options, store);
93
+    uut.processOptions(options);
94
 
94
 
95
     // As we can't import external images and we don't want to add an image here
95
     // As we can't import external images and we don't want to add an image here
96
     // I assign the icons to strings (what the require would generally look like)
96
     // I assign the icons to strings (what the require would generally look like)
106
     const passProps = { prop: 'prop' };
106
     const passProps = { prop: 'prop' };
107
     options.rightButtons = [{ passProps, id: '1' }];
107
     options.rightButtons = [{ passProps, id: '1' }];
108
 
108
 
109
-    uut.processOptions({ o: options }, store);
109
+    uut.processOptions({ o: options });
110
 
110
 
111
     expect(store.getPropsForId('1')).toEqual(passProps);
111
     expect(store.getPropsForId('1')).toEqual(passProps);
112
   });
112
   });
115
     const passProps = { prop: 'prop' };
115
     const passProps = { prop: 'prop' };
116
     options.rightButtons = [{ passProps }];
116
     options.rightButtons = [{ passProps }];
117
 
117
 
118
-    uut.processOptions({ o: options }, store);
118
+    uut.processOptions({ o: options });
119
 
119
 
120
     expect(store.getPropsForId('1')).toEqual({});
120
     expect(store.getPropsForId('1')).toEqual({});
121
   });
121
   });
125
     options.topBar = { textColor: 'red' };
125
     options.topBar = { textColor: 'red' };
126
     options.topBar.innerMostObj = { anotherColor: 'yellow' };
126
     options.topBar.innerMostObj = { anotherColor: 'yellow' };
127
 
127
 
128
-    uut.processOptions({ o: options }, store);
128
+    uut.processOptions({ o: options });
129
 
129
 
130
     expect(options.topBar.textColor).toEqual(0xffff0000);
130
     expect(options.topBar.textColor).toEqual(0xffff0000);
131
   });
131
   });
132
 
132
 
133
   it('undefined value return undefined ', () => {
133
   it('undefined value return undefined ', () => {
134
     options.someImage = undefined;
134
     options.someImage = undefined;
135
-    uut.processOptions(options, store);
135
+    uut.processOptions(options);
136
 
136
 
137
     expect(options.someImage).toEqual(undefined);
137
     expect(options.someImage).toEqual(undefined);
138
   });
138
   });

+ 27
- 19
lib/src/commands/OptionsProcessor.ts Zobrazit soubor

3
 import * as resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource';
3
 import * as resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource';
4
 
4
 
5
 export class OptionsProcessor {
5
 export class OptionsProcessor {
6
-  public processOptions(options, store) {
6
+  constructor(public store) { }
7
+
8
+  public processOptions(options) {
7
     _.forEach(options, (value, key) => {
9
     _.forEach(options, (value, key) => {
8
       if (!value) { return; }
10
       if (!value) { return; }
9
 
11
 
10
-      if (_.isEqual(key, 'color') || _.endsWith(key, 'Color')) {
11
-        options[key] = processColor(value);
12
-      }
13
-
14
-      if (_.isEqual(key, 'icon') || _.isEqual(key, 'image') || _.endsWith(key, 'Icon') || _.endsWith(key, 'Image')) {
15
-        options[key] = resolveAssetSource(options[key]);
16
-      }
17
-
18
-      if (_.endsWith(key, 'Buttons')) {
19
-        this.saveButtonsPassProps(value, store);
20
-      }
12
+      this.processColors(key, value, options);
13
+      this.processImages(key, value, options);
14
+      this.processButtonsPassProps(key, value);
21
 
15
 
22
       if (_.isObject(value) || _.isArray(value)) {
16
       if (_.isObject(value) || _.isArray(value)) {
23
-        this.processOptions(value, store);
17
+        this.processOptions(value);
24
       }
18
       }
25
     });
19
     });
26
   }
20
   }
27
 
21
 
28
-  private saveButtonsPassProps(array, store) {
29
-    _.forEach(array, (value) => {
30
-      if (value.passProps && value.id) {
31
-        store.setPropsForId(value.id, value.passProps);
32
-      }
33
-    });
22
+  private processColors(key, value, options) {
23
+    if (_.isEqual(key, 'color') || _.endsWith(key, 'Color')) {
24
+      options[key] = processColor(value);
25
+    }
26
+  }
27
+
28
+  private processImages(key, value, options) {
29
+    if (_.isEqual(key, 'icon') || _.isEqual(key, 'image') || _.endsWith(key, 'Icon') || _.endsWith(key, 'Image')) {
30
+      options[key] = resolveAssetSource(value);
31
+    }
32
+  }
33
+
34
+  private processButtonsPassProps(key, value) {
35
+    if (_.endsWith(key, 'Buttons')) {
36
+      _.forEach(value, (button) => {
37
+        if (button.passProps && button.id) {
38
+          this.store.setPropsForId(button.id, button.passProps);
39
+        }
40
+      });
41
+    }
34
   }
42
   }
35
 }
43
 }