Bläddra i källkod

Revert "[v2] Typings for styling options and layouts (#3626)"

This reverts commit d5839a5392.
yogevbd 6 år sedan
förälder
incheckning
86b9867989
4 ändrade filer med 26 tillägg och 170 borttagningar
  1. 7
    7
      lib/src/Navigation.ts
  2. 7
    7
      lib/src/commands/Commands.test.ts
  3. 12
    14
      lib/src/commands/Commands.ts
  4. 0
    142
      lib/src/interfaces/Layout.ts

+ 7
- 7
lib/src/Navigation.ts Visa fil

64
   /**
64
   /**
65
    * Reset the app to a new layout
65
    * Reset the app to a new layout
66
    */
66
    */
67
-  public setRoot(layout: LayoutRoot): Promise<any> {
67
+  public setRoot(layout): Promise<any> {
68
     return this.commands.setRoot(layout);
68
     return this.commands.setRoot(layout);
69
   }
69
   }
70
 
70
 
71
   /**
71
   /**
72
    * Set default options to all screens. Useful for declaring a consistent style across the app.
72
    * Set default options to all screens. Useful for declaring a consistent style across the app.
73
    */
73
    */
74
-  public setDefaultOptions(options: Options): void {
74
+  public setDefaultOptions(options): void {
75
     this.commands.setDefaultOptions(options);
75
     this.commands.setDefaultOptions(options);
76
   }
76
   }
77
 
77
 
78
   /**
78
   /**
79
    * Change a component's navigation options
79
    * Change a component's navigation options
80
    */
80
    */
81
-  public mergeOptions(componentId: string, options: Options): void {
81
+  public mergeOptions(componentId: string, options): void {
82
     this.commands.mergeOptions(componentId, options);
82
     this.commands.mergeOptions(componentId, options);
83
   }
83
   }
84
 
84
 
85
   /**
85
   /**
86
    * Show a screen as a modal.
86
    * Show a screen as a modal.
87
    */
87
    */
88
-  public showModal(layout: Layout): Promise<any> {
88
+  public showModal(layout): Promise<any> {
89
     return this.commands.showModal(layout);
89
     return this.commands.showModal(layout);
90
   }
90
   }
91
 
91
 
106
   /**
106
   /**
107
    * Push a new layout into this screen's navigation stack.
107
    * Push a new layout into this screen's navigation stack.
108
    */
108
    */
109
-  public push(componentId: string, layout: Layout): Promise<any> {
109
+  public push(componentId: string, layout): Promise<any> {
110
     return this.commands.push(componentId, layout);
110
     return this.commands.push(componentId, layout);
111
   }
111
   }
112
 
112
 
134
   /**
134
   /**
135
    * Sets new root component to stack.
135
    * Sets new root component to stack.
136
    */
136
    */
137
-  public setStackRoot(componentId: string, layout: Layout): Promise<any> {
137
+  public setStackRoot(componentId: string, layout): Promise<any> {
138
     return this.commands.setStackRoot(componentId, layout);
138
     return this.commands.setStackRoot(componentId, layout);
139
   }
139
   }
140
 
140
 
141
   /**
141
   /**
142
    * Show overlay on top of the entire app
142
    * Show overlay on top of the entire app
143
    */
143
    */
144
-  public showOverlay(layout: Layout): Promise<any> {
144
+  public showOverlay(layout): Promise<any> {
145
     return this.commands.showOverlay(layout);
145
     return this.commands.showOverlay(layout);
146
   }
146
   }
147
 
147
 

+ 7
- 7
lib/src/commands/Commands.test.ts Visa fil

54
 
54
 
55
     it('deep clones input to avoid mutation errors', () => {
55
     it('deep clones input to avoid mutation errors', () => {
56
       const obj = {};
56
       const obj = {};
57
-      uut.setRoot({ root: { component: { name: 'bla', inner: obj } as any } });
57
+      uut.setRoot({ root: { component: { name: 'bla', inner: obj } } });
58
       expect(mockCommandsSender.setRoot.mock.calls[0][1].root.data.inner).not.toBe(obj);
58
       expect(mockCommandsSender.setRoot.mock.calls[0][1].root.data.inner).not.toBe(obj);
59
     });
59
     });
60
 
60
 
137
   describe('mergeOptions', () => {
137
   describe('mergeOptions', () => {
138
     it('deep clones input to avoid mutation errors', () => {
138
     it('deep clones input to avoid mutation errors', () => {
139
       const obj = { title: 'test' };
139
       const obj = { title: 'test' };
140
-      uut.mergeOptions('theComponentId', obj as any);
140
+      uut.mergeOptions('theComponentId', obj);
141
       expect(mockCommandsSender.mergeOptions.mock.calls[0][1]).not.toBe(obj);
141
       expect(mockCommandsSender.mergeOptions.mock.calls[0][1]).not.toBe(obj);
142
     });
142
     });
143
 
143
 
144
     it('passes options for component', () => {
144
     it('passes options for component', () => {
145
-      uut.mergeOptions('theComponentId', { title: '1' } as any);
145
+      uut.mergeOptions('theComponentId', { title: '1' });
146
       expect(mockCommandsSender.mergeOptions).toHaveBeenCalledTimes(1);
146
       expect(mockCommandsSender.mergeOptions).toHaveBeenCalledTimes(1);
147
       expect(mockCommandsSender.mergeOptions).toHaveBeenCalledWith('theComponentId', { title: '1' });
147
       expect(mockCommandsSender.mergeOptions).toHaveBeenCalledWith('theComponentId', { title: '1' });
148
     });
148
     });
151
   describe('setDefaultOptions', () => {
151
   describe('setDefaultOptions', () => {
152
     it('deep clones input to avoid mutation errors', () => {
152
     it('deep clones input to avoid mutation errors', () => {
153
       const obj = { title: 'test' };
153
       const obj = { title: 'test' };
154
-      uut.setDefaultOptions(obj as any);
154
+      uut.setDefaultOptions(obj);
155
       expect(mockCommandsSender.setDefaultOptions.mock.calls[0][0]).not.toBe(obj);
155
       expect(mockCommandsSender.setDefaultOptions.mock.calls[0][0]).not.toBe(obj);
156
     });
156
     });
157
   });
157
   });
177
 
177
 
178
     it('deep clones input to avoid mutation errors', () => {
178
     it('deep clones input to avoid mutation errors', () => {
179
       const obj = {};
179
       const obj = {};
180
-      uut.showModal({ component: { name: 'name', inner: obj } as any });
180
+      uut.showModal({ component: { name: 'name', inner: obj } });
181
       expect(mockCommandsSender.showModal.mock.calls[0][1].data.inner).not.toBe(obj);
181
       expect(mockCommandsSender.showModal.mock.calls[0][1].data.inner).not.toBe(obj);
182
     });
182
     });
183
 
183
 
271
           duration: 0.8
271
           duration: 0.8
272
         }
272
         }
273
       };
273
       };
274
-      uut.pop('theComponentId', options as any);
274
+      uut.pop('theComponentId', options);
275
       expect(mockCommandsSender.pop).toHaveBeenCalledTimes(1);
275
       expect(mockCommandsSender.pop).toHaveBeenCalledTimes(1);
276
       expect(mockCommandsSender.pop).toHaveBeenCalledWith('pop+UNIQUE_ID', 'theComponentId', options);
276
       expect(mockCommandsSender.pop).toHaveBeenCalledWith('pop+UNIQUE_ID', 'theComponentId', options);
277
     });
277
     });
348
 
348
 
349
     it('deep clones input to avoid mutation errors', () => {
349
     it('deep clones input to avoid mutation errors', () => {
350
       const obj = {};
350
       const obj = {};
351
-      uut.showOverlay({ component: { name: 'name', inner: obj } as any });
351
+      uut.showOverlay({ component: { name: 'name', inner: obj } });
352
       expect(mockCommandsSender.showOverlay.mock.calls[0][1].data.inner).not.toBe(obj);
352
       expect(mockCommandsSender.showOverlay.mock.calls[0][1].data.inner).not.toBe(obj);
353
     });
353
     });
354
 
354
 

+ 12
- 14
lib/src/commands/Commands.ts Visa fil

2
 import { CommandsObserver } from '../events/CommandsObserver';
2
 import { CommandsObserver } from '../events/CommandsObserver';
3
 import { NativeCommandsSender } from '../adapters/NativeCommandsSender';
3
 import { NativeCommandsSender } from '../adapters/NativeCommandsSender';
4
 import { UniqueIdProvider } from '../adapters/UniqueIdProvider';
4
 import { UniqueIdProvider } from '../adapters/UniqueIdProvider';
5
-import { Options } from '../interfaces/Options';
6
-import { Layout, LayoutRoot } from '../interfaces/Layout';
7
 
5
 
8
 export class Commands {
6
 export class Commands {
9
   constructor(
7
   constructor(
14
     private readonly uniqueIdProvider: UniqueIdProvider) {
12
     private readonly uniqueIdProvider: UniqueIdProvider) {
15
   }
13
   }
16
 
14
 
17
-  public setRoot(simpleApi: LayoutRoot) {
15
+  public setRoot(simpleApi) {
18
     const input = _.cloneDeep(simpleApi);
16
     const input = _.cloneDeep(simpleApi);
19
     const root = this.layoutTreeParser.parse(input.root);
17
     const root = this.layoutTreeParser.parse(input.root);
20
     this.layoutTreeCrawler.crawl(root);
18
     this.layoutTreeCrawler.crawl(root);
37
     return result;
35
     return result;
38
   }
36
   }
39
 
37
 
40
-  public setDefaultOptions(options: Options) {
38
+  public setDefaultOptions(options) {
41
     const input = _.cloneDeep(options);
39
     const input = _.cloneDeep(options);
42
     this.layoutTreeCrawler.processOptions(input);
40
     this.layoutTreeCrawler.processOptions(input);
43
 
41
 
45
     this.commandsObserver.notify('setDefaultOptions', { options });
43
     this.commandsObserver.notify('setDefaultOptions', { options });
46
   }
44
   }
47
 
45
 
48
-  public mergeOptions(componentId: string, options: Options) {
46
+  public mergeOptions(componentId, options) {
49
     const input = _.cloneDeep(options);
47
     const input = _.cloneDeep(options);
50
     this.layoutTreeCrawler.processOptions(input);
48
     this.layoutTreeCrawler.processOptions(input);
51
 
49
 
53
     this.commandsObserver.notify('mergeOptions', { componentId, options });
51
     this.commandsObserver.notify('mergeOptions', { componentId, options });
54
   }
52
   }
55
 
53
 
56
-  public showModal(simpleApi: Layout) {
54
+  public showModal(simpleApi) {
57
     const input = _.cloneDeep(simpleApi);
55
     const input = _.cloneDeep(simpleApi);
58
     const layout = this.layoutTreeParser.parse(input);
56
     const layout = this.layoutTreeParser.parse(input);
59
     this.layoutTreeCrawler.crawl(layout);
57
     this.layoutTreeCrawler.crawl(layout);
64
     return result;
62
     return result;
65
   }
63
   }
66
 
64
 
67
-  public dismissModal(componentId: string) {
65
+  public dismissModal(componentId) {
68
     const commandId = this.uniqueIdProvider.generate('dismissModal');
66
     const commandId = this.uniqueIdProvider.generate('dismissModal');
69
     const result = this.nativeCommandsSender.dismissModal(commandId, componentId);
67
     const result = this.nativeCommandsSender.dismissModal(commandId, componentId);
70
     this.commandsObserver.notify('dismissModal', { commandId, componentId });
68
     this.commandsObserver.notify('dismissModal', { commandId, componentId });
78
     return result;
76
     return result;
79
   }
77
   }
80
 
78
 
81
-  public push(componentId: string, simpleApi: Layout) {
79
+  public push(componentId, simpleApi) {
82
     const input = _.cloneDeep(simpleApi);
80
     const input = _.cloneDeep(simpleApi);
83
 
81
 
84
     const layout = this.layoutTreeParser.parse(input);
82
     const layout = this.layoutTreeParser.parse(input);
90
     return result;
88
     return result;
91
   }
89
   }
92
 
90
 
93
-  public pop(componentId: string, options: Options) {
91
+  public pop(componentId, options) {
94
     const commandId = this.uniqueIdProvider.generate('pop');
92
     const commandId = this.uniqueIdProvider.generate('pop');
95
     const result = this.nativeCommandsSender.pop(commandId, componentId, options);
93
     const result = this.nativeCommandsSender.pop(commandId, componentId, options);
96
     this.commandsObserver.notify('pop', { commandId, componentId, options });
94
     this.commandsObserver.notify('pop', { commandId, componentId, options });
97
     return result;
95
     return result;
98
   }
96
   }
99
 
97
 
100
-  public popTo(componentId: string) {
98
+  public popTo(componentId) {
101
     const commandId = this.uniqueIdProvider.generate('popTo');
99
     const commandId = this.uniqueIdProvider.generate('popTo');
102
     const result = this.nativeCommandsSender.popTo(commandId, componentId);
100
     const result = this.nativeCommandsSender.popTo(commandId, componentId);
103
     this.commandsObserver.notify('popTo', { commandId, componentId });
101
     this.commandsObserver.notify('popTo', { commandId, componentId });
104
     return result;
102
     return result;
105
   }
103
   }
106
 
104
 
107
-  public popToRoot(componentId: string) {
105
+  public popToRoot(componentId) {
108
     const commandId = this.uniqueIdProvider.generate('popToRoot');
106
     const commandId = this.uniqueIdProvider.generate('popToRoot');
109
     const result = this.nativeCommandsSender.popToRoot(commandId, componentId);
107
     const result = this.nativeCommandsSender.popToRoot(commandId, componentId);
110
     this.commandsObserver.notify('popToRoot', { commandId, componentId });
108
     this.commandsObserver.notify('popToRoot', { commandId, componentId });
111
     return result;
109
     return result;
112
   }
110
   }
113
 
111
 
114
-  public setStackRoot(componentId: string, simpleApi: Layout) {
112
+  public setStackRoot(componentId, simpleApi) {
115
     const input = _.cloneDeep(simpleApi);
113
     const input = _.cloneDeep(simpleApi);
116
 
114
 
117
     const layout = this.layoutTreeParser.parse(input);
115
     const layout = this.layoutTreeParser.parse(input);
123
     return result;
121
     return result;
124
   }
122
   }
125
 
123
 
126
-  public showOverlay(simpleApi: Layout) {
124
+  public showOverlay(simpleApi) {
127
     const input = _.cloneDeep(simpleApi);
125
     const input = _.cloneDeep(simpleApi);
128
 
126
 
129
     const layout = this.layoutTreeParser.parse(input);
127
     const layout = this.layoutTreeParser.parse(input);
135
     return result;
133
     return result;
136
   }
134
   }
137
 
135
 
138
-  public dismissOverlay(componentId: string) {
136
+  public dismissOverlay(componentId) {
139
     const commandId = this.uniqueIdProvider.generate('dismissOverlay');
137
     const commandId = this.uniqueIdProvider.generate('dismissOverlay');
140
     const result = this.nativeCommandsSender.dismissOverlay(commandId, componentId);
138
     const result = this.nativeCommandsSender.dismissOverlay(commandId, componentId);
141
     this.commandsObserver.notify('dismissOverlay', { commandId, componentId });
139
     this.commandsObserver.notify('dismissOverlay', { commandId, componentId });

+ 0
- 142
lib/src/interfaces/Layout.ts Visa fil

1
-import { Options, OptionsSplitView } from './Options';
2
-
3
-export interface LayoutComponent {
4
-  /**
5
-   * Component reference id, Auto generated if empty
6
-   */
7
-  id?: string;
8
-  /**
9
-   * Name of your component
10
-   */
11
-  name: string;
12
-  /**
13
-   * Styling options
14
-   */
15
-  options?: Options;
16
-  /**
17
-   * Properties to pass down to the component
18
-   */
19
-  passProps?: object;
20
-}
21
-
22
-export interface LayoutStackChildren {
23
-  /**
24
-   * Set component
25
-   */
26
-  component?: LayoutComponent;
27
-}
28
-
29
-export interface LayoutStack {
30
-  /**
31
-   * Set ID of the stack so you can use Navigation.mergeOptions to
32
-   * update options
33
-   */
34
-  id?: string;
35
-  /**
36
-   * Set children screens
37
-   */
38
-  children?: LayoutStackChildren[];
39
-  /**
40
-   * Set options
41
-   */
42
-  options?: Options;
43
-}
44
-
45
-export interface LayoutBottomTabsChildren {
46
-  /**
47
-   * Set stack
48
-   */
49
-  stack?: LayoutStack;
50
-  /**
51
-   * Set component
52
-   */
53
-  component?: LayoutComponent;
54
-}
55
-
56
-export interface LayoutBottomTabs {
57
-  /**
58
-   * Set ID of the stack so you can use Navigation.mergeOptions to
59
-   * update options
60
-   */
61
-  id?: string;
62
-  /**
63
-   * Set the children screens
64
-   */
65
-  children?: LayoutBottomTabsChildren[];
66
-  /**
67
-   * Set the bottom tabs options
68
-   */
69
-  options?: Options;
70
-}
71
-
72
-export interface LayoutSideMenu {
73
-  /**
74
-   * Set ID of the stack so you can use Navigation.mergeOptions to
75
-   * update options
76
-   */
77
-  id?: string;
78
-  /**
79
-   * Set the left side bar
80
-   */
81
-  left?: LayoutStackChildren;
82
-  /**
83
-   * Set the center view
84
-   */
85
-  center?: Layout;
86
-  /**
87
-   * Set the right side bar
88
-   */
89
-  right?: LayoutStackChildren;
90
-}
91
-
92
-export interface LayoutSplitView {
93
-  /**
94
-   * Set ID of the stack so you can use Navigation.mergeOptions to
95
-   * update options
96
-   */
97
-  id?: string;
98
-  /**
99
-   * Set master layout (the smaller screen, sidebar)
100
-   */
101
-  master: Layout;
102
-  /**
103
-   * Set detail layout (the larger screen, flexes)
104
-   */
105
-  detail: Layout;
106
-  /**
107
-   * Configure split view
108
-   */
109
-  options?: OptionsSplitView;
110
-}
111
-
112
-export interface LayoutRoot {
113
-  /**
114
-   * Set the root
115
-   */
116
-  root: Layout;
117
-  modals?: any;
118
-  overlays?: any;
119
-}
120
-
121
-export interface Layout {
122
-  /**
123
-   * Set the component
124
-   */
125
-  component?: LayoutComponent;
126
-  /**
127
-   * Set the stack
128
-   */
129
-  stack?: LayoutStack;
130
-  /**
131
-   * Set the bottom tabs
132
-   */
133
-  bottomTabs?: LayoutBottomTabs;
134
-  /**
135
-   * Set the side menu
136
-   */
137
-  sideMenu?: LayoutSideMenu;
138
-  /**
139
-   * Set the split view
140
-   */
141
-  splitView?: LayoutSplitView;
142
-}