@admin-layout/gluestack-ui-mobile 12.2.4-alpha.85 → 12.2.5-alpha.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +9 -77
- package/lib/components/FlightCards/FlightCards.d.ts +40 -0
- package/lib/components/FlightCards/FlightCards.js +134 -0
- package/lib/components/FlightCards/FlightCards.js.map +1 -0
- package/lib/components/FlightCards/index.d.ts +2 -0
- package/lib/components/FlightCards/index.js +2 -0
- package/lib/components/FlightCards/index.js.map +1 -0
- package/lib/components/InputToolBar/InputToolBar.js +8 -4
- package/lib/components/InputToolBar/InputToolBar.js.map +1 -1
- package/lib/components/WithConfiguration.d.ts +1 -6
- package/lib/components/WithConfiguration.js +1 -4
- package/lib/components/WithConfiguration.js.map +1 -1
- package/lib/components/WithPermission.d.ts +1 -11
- package/lib/components/WithPermission.js +0 -8
- package/lib/components/WithPermission.js.map +1 -1
- package/lib/components/index.d.ts +1 -0
- package/lib/components/index.js +1 -0
- package/lib/components/index.js.map +1 -1
- package/lib/components/usePermissionAutoFetch.d.ts +4 -56
- package/lib/components/usePermissionAutoFetch.js +7 -19
- package/lib/components/usePermissionAutoFetch.js.map +1 -1
- package/lib/components/useSetting.d.ts +11 -6
- package/lib/components/useSetting.js +10 -75
- package/lib/components/useSetting.js.map +1 -1
- package/lib/tailwind.config.js +3 -0
- package/lib/tailwind.config.js.map +1 -1
- package/lib/utils/generateMobileNavigations.js +37 -8
- package/lib/utils/generateMobileNavigations.js.map +1 -1
- package/package.json +6 -6
- package/src/components/FlightCards/FlightCards.tsx +266 -0
- package/src/components/FlightCards/index.ts +2 -0
- package/src/components/InputToolBar/InputToolBar.tsx +8 -4
- package/src/components/WithConfiguration.tsx +1 -5
- package/src/components/WithPermission.tsx +0 -9
- package/src/components/index.ts +1 -0
- package/src/components/usePermissionAutoFetch.tsx +7 -22
- package/src/components/useSetting.tsx +22 -100
- package/src/tailwind.config.js +202 -198
- package/src/utils/generateMobileNavigations.ts +34 -6
package/src/tailwind.config.js
CHANGED
|
@@ -1,198 +1,202 @@
|
|
|
1
|
-
import gluestackPlugin from '@gluestack-ui/nativewind-utils/tailwind-plugin';
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
'
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
'hard-
|
|
190
|
-
'
|
|
191
|
-
'
|
|
192
|
-
'
|
|
193
|
-
'
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
}
|
|
1
|
+
import gluestackPlugin from '@gluestack-ui/nativewind-utils/tailwind-plugin';
|
|
2
|
+
import { createRequire } from 'module';
|
|
3
|
+
|
|
4
|
+
var require = createRequire(import.meta.url);
|
|
5
|
+
var module = { exports: {} };
|
|
6
|
+
|
|
7
|
+
/** @type {import('tailwindcss').Config} */
|
|
8
|
+
module.exports = {
|
|
9
|
+
darkMode: 'media',
|
|
10
|
+
content: ['./index.js', './components/**/*.{tsx,jsx,ts,js}'],
|
|
11
|
+
presets: [require('nativewind/preset')],
|
|
12
|
+
safelist: [
|
|
13
|
+
{
|
|
14
|
+
pattern:
|
|
15
|
+
/(bg|border|text|stroke|fill)-(primary|secondary|tertiary|error|success|warning|info|typography|outline|background|indicator)-(0|50|100|200|300|400|500|600|700|800|900|950|white|gray|black|error|warning|muted|success|info|light|dark|primary)/,
|
|
16
|
+
},
|
|
17
|
+
],
|
|
18
|
+
theme: {
|
|
19
|
+
extend: {
|
|
20
|
+
colors: {
|
|
21
|
+
primary: {
|
|
22
|
+
0: 'rgb(var(--color-primary-0)/<alpha-value>)',
|
|
23
|
+
50: 'rgb(var(--color-primary-50)/<alpha-value>)',
|
|
24
|
+
100: 'rgb(var(--color-primary-100)/<alpha-value>)',
|
|
25
|
+
200: 'rgb(var(--color-primary-200)/<alpha-value>)',
|
|
26
|
+
300: 'rgb(var(--color-primary-300)/<alpha-value>)',
|
|
27
|
+
400: 'rgb(var(--color-primary-400)/<alpha-value>)',
|
|
28
|
+
500: 'rgb(var(--color-primary-500)/<alpha-value>)',
|
|
29
|
+
600: 'rgb(var(--color-primary-600)/<alpha-value>)',
|
|
30
|
+
700: 'rgb(var(--color-primary-700)/<alpha-value>)',
|
|
31
|
+
800: 'rgb(var(--color-primary-800)/<alpha-value>)',
|
|
32
|
+
900: 'rgb(var(--color-primary-900)/<alpha-value>)',
|
|
33
|
+
950: 'rgb(var(--color-primary-950)/<alpha-value>)',
|
|
34
|
+
},
|
|
35
|
+
secondary: {
|
|
36
|
+
0: 'rgb(var(--color-secondary-0)/<alpha-value>)',
|
|
37
|
+
50: 'rgb(var(--color-secondary-50)/<alpha-value>)',
|
|
38
|
+
100: 'rgb(var(--color-secondary-100)/<alpha-value>)',
|
|
39
|
+
200: 'rgb(var(--color-secondary-200)/<alpha-value>)',
|
|
40
|
+
300: 'rgb(var(--color-secondary-300)/<alpha-value>)',
|
|
41
|
+
400: 'rgb(var(--color-secondary-400)/<alpha-value>)',
|
|
42
|
+
500: 'rgb(var(--color-secondary-500)/<alpha-value>)',
|
|
43
|
+
600: 'rgb(var(--color-secondary-600)/<alpha-value>)',
|
|
44
|
+
700: 'rgb(var(--color-secondary-700)/<alpha-value>)',
|
|
45
|
+
800: 'rgb(var(--color-secondary-800)/<alpha-value>)',
|
|
46
|
+
900: 'rgb(var(--color-secondary-900)/<alpha-value>)',
|
|
47
|
+
950: 'rgb(var(--color-secondary-950)/<alpha-value>)',
|
|
48
|
+
},
|
|
49
|
+
tertiary: {
|
|
50
|
+
50: 'rgb(var(--color-tertiary-50)/<alpha-value>)',
|
|
51
|
+
100: 'rgb(var(--color-tertiary-100)/<alpha-value>)',
|
|
52
|
+
200: 'rgb(var(--color-tertiary-200)/<alpha-value>)',
|
|
53
|
+
300: 'rgb(var(--color-tertiary-300)/<alpha-value>)',
|
|
54
|
+
400: 'rgb(var(--color-tertiary-400)/<alpha-value>)',
|
|
55
|
+
500: 'rgb(var(--color-tertiary-500)/<alpha-value>)',
|
|
56
|
+
600: 'rgb(var(--color-tertiary-600)/<alpha-value>)',
|
|
57
|
+
700: 'rgb(var(--color-tertiary-700)/<alpha-value>)',
|
|
58
|
+
800: 'rgb(var(--color-tertiary-800)/<alpha-value>)',
|
|
59
|
+
900: 'rgb(var(--color-tertiary-900)/<alpha-value>)',
|
|
60
|
+
950: 'rgb(var(--color-tertiary-950)/<alpha-value>)',
|
|
61
|
+
},
|
|
62
|
+
error: {
|
|
63
|
+
0: 'rgb(var(--color-error-0)/<alpha-value>)',
|
|
64
|
+
50: 'rgb(var(--color-error-50)/<alpha-value>)',
|
|
65
|
+
100: 'rgb(var(--color-error-100)/<alpha-value>)',
|
|
66
|
+
200: 'rgb(var(--color-error-200)/<alpha-value>)',
|
|
67
|
+
300: 'rgb(var(--color-error-300)/<alpha-value>)',
|
|
68
|
+
400: 'rgb(var(--color-error-400)/<alpha-value>)',
|
|
69
|
+
500: 'rgb(var(--color-error-500)/<alpha-value>)',
|
|
70
|
+
600: 'rgb(var(--color-error-600)/<alpha-value>)',
|
|
71
|
+
700: 'rgb(var(--color-error-700)/<alpha-value>)',
|
|
72
|
+
800: 'rgb(var(--color-error-800)/<alpha-value>)',
|
|
73
|
+
900: 'rgb(var(--color-error-900)/<alpha-value>)',
|
|
74
|
+
950: 'rgb(var(--color-error-950)/<alpha-value>)',
|
|
75
|
+
},
|
|
76
|
+
success: {
|
|
77
|
+
0: 'rgb(var(--color-success-0)/<alpha-value>)',
|
|
78
|
+
50: 'rgb(var(--color-success-50)/<alpha-value>)',
|
|
79
|
+
100: 'rgb(var(--color-success-100)/<alpha-value>)',
|
|
80
|
+
200: 'rgb(var(--color-success-200)/<alpha-value>)',
|
|
81
|
+
300: 'rgb(var(--color-success-300)/<alpha-value>)',
|
|
82
|
+
400: 'rgb(var(--color-success-400)/<alpha-value>)',
|
|
83
|
+
500: 'rgb(var(--color-success-500)/<alpha-value>)',
|
|
84
|
+
600: 'rgb(var(--color-success-600)/<alpha-value>)',
|
|
85
|
+
700: 'rgb(var(--color-success-700)/<alpha-value>)',
|
|
86
|
+
800: 'rgb(var(--color-success-800)/<alpha-value>)',
|
|
87
|
+
900: 'rgb(var(--color-success-900)/<alpha-value>)',
|
|
88
|
+
950: 'rgb(var(--color-success-950)/<alpha-value>)',
|
|
89
|
+
},
|
|
90
|
+
warning: {
|
|
91
|
+
0: 'rgb(var(--color-warning-0)/<alpha-value>)',
|
|
92
|
+
50: 'rgb(var(--color-warning-50)/<alpha-value>)',
|
|
93
|
+
100: 'rgb(var(--color-warning-100)/<alpha-value>)',
|
|
94
|
+
200: 'rgb(var(--color-warning-200)/<alpha-value>)',
|
|
95
|
+
300: 'rgb(var(--color-warning-300)/<alpha-value>)',
|
|
96
|
+
400: 'rgb(var(--color-warning-400)/<alpha-value>)',
|
|
97
|
+
500: 'rgb(var(--color-warning-500)/<alpha-value>)',
|
|
98
|
+
600: 'rgb(var(--color-warning-600)/<alpha-value>)',
|
|
99
|
+
700: 'rgb(var(--color-warning-700)/<alpha-value>)',
|
|
100
|
+
800: 'rgb(var(--color-warning-800)/<alpha-value>)',
|
|
101
|
+
900: 'rgb(var(--color-warning-900)/<alpha-value>)',
|
|
102
|
+
950: 'rgb(var(--color-warning-950)/<alpha-value>)',
|
|
103
|
+
},
|
|
104
|
+
info: {
|
|
105
|
+
0: 'rgb(var(--color-info-0)/<alpha-value>)',
|
|
106
|
+
50: 'rgb(var(--color-info-50)/<alpha-value>)',
|
|
107
|
+
100: 'rgb(var(--color-info-100)/<alpha-value>)',
|
|
108
|
+
200: 'rgb(var(--color-info-200)/<alpha-value>)',
|
|
109
|
+
300: 'rgb(var(--color-info-300)/<alpha-value>)',
|
|
110
|
+
400: 'rgb(var(--color-info-400)/<alpha-value>)',
|
|
111
|
+
500: 'rgb(var(--color-info-500)/<alpha-value>)',
|
|
112
|
+
600: 'rgb(var(--color-info-600)/<alpha-value>)',
|
|
113
|
+
700: 'rgb(var(--color-info-700)/<alpha-value>)',
|
|
114
|
+
800: 'rgb(var(--color-info-800)/<alpha-value>)',
|
|
115
|
+
900: 'rgb(var(--color-info-900)/<alpha-value>)',
|
|
116
|
+
950: 'rgb(var(--color-info-950)/<alpha-value>)',
|
|
117
|
+
},
|
|
118
|
+
typography: {
|
|
119
|
+
0: 'rgb(var(--color-typography-0)/<alpha-value>)',
|
|
120
|
+
50: 'rgb(var(--color-typography-50)/<alpha-value>)',
|
|
121
|
+
100: 'rgb(var(--color-typography-100)/<alpha-value>)',
|
|
122
|
+
200: 'rgb(var(--color-typography-200)/<alpha-value>)',
|
|
123
|
+
300: 'rgb(var(--color-typography-300)/<alpha-value>)',
|
|
124
|
+
400: 'rgb(var(--color-typography-400)/<alpha-value>)',
|
|
125
|
+
500: 'rgb(var(--color-typography-500)/<alpha-value>)',
|
|
126
|
+
600: 'rgb(var(--color-typography-600)/<alpha-value>)',
|
|
127
|
+
700: 'rgb(var(--color-typography-700)/<alpha-value>)',
|
|
128
|
+
800: 'rgb(var(--color-typography-800)/<alpha-value>)',
|
|
129
|
+
900: 'rgb(var(--color-typography-900)/<alpha-value>)',
|
|
130
|
+
950: 'rgb(var(--color-typography-950)/<alpha-value>)',
|
|
131
|
+
white: '#FFFFFF',
|
|
132
|
+
gray: '#D4D4D4',
|
|
133
|
+
black: '#181718',
|
|
134
|
+
},
|
|
135
|
+
outline: {
|
|
136
|
+
0: 'rgb(var(--color-outline-0)/<alpha-value>)',
|
|
137
|
+
50: 'rgb(var(--color-outline-50)/<alpha-value>)',
|
|
138
|
+
100: 'rgb(var(--color-outline-100)/<alpha-value>)',
|
|
139
|
+
200: 'rgb(var(--color-outline-200)/<alpha-value>)',
|
|
140
|
+
300: 'rgb(var(--color-outline-300)/<alpha-value>)',
|
|
141
|
+
400: 'rgb(var(--color-outline-400)/<alpha-value>)',
|
|
142
|
+
500: 'rgb(var(--color-outline-500)/<alpha-value>)',
|
|
143
|
+
600: 'rgb(var(--color-outline-600)/<alpha-value>)',
|
|
144
|
+
700: 'rgb(var(--color-outline-700)/<alpha-value>)',
|
|
145
|
+
800: 'rgb(var(--color-outline-800)/<alpha-value>)',
|
|
146
|
+
900: 'rgb(var(--color-outline-900)/<alpha-value>)',
|
|
147
|
+
950: 'rgb(var(--color-outline-950)/<alpha-value>)',
|
|
148
|
+
},
|
|
149
|
+
background: {
|
|
150
|
+
0: 'rgb(var(--color-background-0)/<alpha-value>)',
|
|
151
|
+
50: 'rgb(var(--color-background-50)/<alpha-value>)',
|
|
152
|
+
100: 'rgb(var(--color-background-100)/<alpha-value>)',
|
|
153
|
+
200: 'rgb(var(--color-background-200)/<alpha-value>)',
|
|
154
|
+
300: 'rgb(var(--color-background-300)/<alpha-value>)',
|
|
155
|
+
400: 'rgb(var(--color-background-400)/<alpha-value>)',
|
|
156
|
+
500: 'rgb(var(--color-background-500)/<alpha-value>)',
|
|
157
|
+
600: 'rgb(var(--color-background-600)/<alpha-value>)',
|
|
158
|
+
700: 'rgb(var(--color-background-700)/<alpha-value>)',
|
|
159
|
+
800: 'rgb(var(--color-background-800)/<alpha-value>)',
|
|
160
|
+
900: 'rgb(var(--color-background-900)/<alpha-value>)',
|
|
161
|
+
950: 'rgb(var(--color-background-950)/<alpha-value>)',
|
|
162
|
+
error: 'rgb(var(--color-background-error)/<alpha-value>)',
|
|
163
|
+
warning: 'rgb(var(--color-background-warning)/<alpha-value>)',
|
|
164
|
+
muted: 'rgb(var(--color-background-muted)/<alpha-value>)',
|
|
165
|
+
success: 'rgb(var(--color-background-success)/<alpha-value>)',
|
|
166
|
+
info: 'rgb(var(--color-background-info)/<alpha-value>)',
|
|
167
|
+
light: '#FBFBFB',
|
|
168
|
+
dark: '#181719',
|
|
169
|
+
},
|
|
170
|
+
indicator: {
|
|
171
|
+
primary: 'rgb(var(--color-indicator-primary)/<alpha-value>)',
|
|
172
|
+
info: 'rgb(var(--color-indicator-info)/<alpha-value>)',
|
|
173
|
+
error: 'rgb(var(--color-indicator-error)/<alpha-value>)',
|
|
174
|
+
},
|
|
175
|
+
},
|
|
176
|
+
fontFamily: {
|
|
177
|
+
heading: undefined,
|
|
178
|
+
body: undefined,
|
|
179
|
+
mono: undefined,
|
|
180
|
+
roboto: ['Roboto', 'sans-serif'],
|
|
181
|
+
},
|
|
182
|
+
fontWeight: {
|
|
183
|
+
extrablack: '950',
|
|
184
|
+
},
|
|
185
|
+
fontSize: {
|
|
186
|
+
'2xs': '10px',
|
|
187
|
+
},
|
|
188
|
+
boxShadow: {
|
|
189
|
+
'hard-1': '-2px 2px 8px 0px rgba(38, 38, 38, 0.20)',
|
|
190
|
+
'hard-2': '0px 3px 10px 0px rgba(38, 38, 38, 0.20)',
|
|
191
|
+
'hard-3': '2px 2px 8px 0px rgba(38, 38, 38, 0.20)',
|
|
192
|
+
'hard-4': '0px -3px 10px 0px rgba(38, 38, 38, 0.20)',
|
|
193
|
+
'hard-5': '0px 2px 10px 0px rgba(38, 38, 38, 0.10)',
|
|
194
|
+
'soft-1': '0px 0px 10px rgba(38, 38, 38, 0.1)',
|
|
195
|
+
'soft-2': '0px 0px 20px rgba(38, 38, 38, 0.2)',
|
|
196
|
+
'soft-3': '0px 0px 30px rgba(38, 38, 38, 0.1)',
|
|
197
|
+
'soft-4': '0px 0px 40px rgba(38, 38, 38, 0.1)',
|
|
198
|
+
},
|
|
199
|
+
},
|
|
200
|
+
},
|
|
201
|
+
plugins: [gluestackPlugin],
|
|
202
|
+
};
|
|
@@ -77,6 +77,7 @@ export class GenerateMobileNavigations {
|
|
|
77
77
|
#customTabBarPath: string;
|
|
78
78
|
#customDrawerPath: string;
|
|
79
79
|
#customHeaderPath: string;
|
|
80
|
+
#lazyRouteScreens: boolean;
|
|
80
81
|
#i18Options: any;
|
|
81
82
|
#iconsRepository: string;
|
|
82
83
|
|
|
@@ -97,6 +98,18 @@ export class GenerateMobileNavigations {
|
|
|
97
98
|
this.#customTabBarPath = config?.mobileConfig?.customTabBarPath ?? '';
|
|
98
99
|
this.#customDrawerPath = config?.mobileConfig?.customDrawerPath ?? '';
|
|
99
100
|
this.#customHeaderPath = config?.mobileConfig?.customHeaderPath ?? '';
|
|
101
|
+
/**
|
|
102
|
+
* Opt-in: emit route screens as `React.lazy(() => import(...))` instead of
|
|
103
|
+
* static imports, so a screen's module graph is only evaluated when the
|
|
104
|
+
* user actually navigates to it.
|
|
105
|
+
*
|
|
106
|
+
* Off by default because it changes WHEN a screen's module side effects
|
|
107
|
+
* run, which every app should opt into deliberately. `compute.ts` already
|
|
108
|
+
* declares routes as `component: () => import('./screens/X')`; this makes
|
|
109
|
+
* the generator honour that shape instead of flattening it to a static
|
|
110
|
+
* import.
|
|
111
|
+
*/
|
|
112
|
+
this.#lazyRouteScreens = config?.mobileConfig?.lazyRouteScreens ?? false;
|
|
100
113
|
this.#i18Options = config?.i18n ?? {};
|
|
101
114
|
}
|
|
102
115
|
|
|
@@ -683,6 +696,9 @@ export class GenerateMobileNavigations {
|
|
|
683
696
|
|
|
684
697
|
let moduleNumber = 0;
|
|
685
698
|
let importStatements = '';
|
|
699
|
+
// `const` declarations emitted AFTER the import block: React.lazy() calls
|
|
700
|
+
// and the Suspense fallback, which are values, not imports.
|
|
701
|
+
let lazyScreenDeclarations = '';
|
|
686
702
|
let moduleContent = '';
|
|
687
703
|
let moduleRender = '';
|
|
688
704
|
let stackNavigator = '';
|
|
@@ -693,6 +709,11 @@ export class GenerateMobileNavigations {
|
|
|
693
709
|
const regex = /\.(tsx|ts|jsx|js)$/i;
|
|
694
710
|
|
|
695
711
|
importStatements += `import * as React from 'react';\n`;
|
|
712
|
+
if (this.#lazyRouteScreens) {
|
|
713
|
+
// Shown only while a screen's module is being fetched/evaluated.
|
|
714
|
+
importStatements += `import { ActivityIndicator, View } from 'react-native';\n`;
|
|
715
|
+
lazyScreenDeclarations += `const RouteScreenFallback = () => (<View style={{flex:1,alignItems:'center',justifyContent:'center'}}><ActivityIndicator /></View>);\n`;
|
|
716
|
+
}
|
|
696
717
|
importStatements += `import AuthWrapper from '@admin-layout/gluestack-ui-mobile/lib/components/AuthWrapper.js';\n`;
|
|
697
718
|
|
|
698
719
|
if (unauthenticatedComponentPath)
|
|
@@ -730,7 +751,14 @@ export class GenerateMobileNavigations {
|
|
|
730
751
|
customUnauthenticatedComponentNames += `${customUnauthenticatedComponentName},`;
|
|
731
752
|
}
|
|
732
753
|
|
|
733
|
-
|
|
754
|
+
// A lazy screen must not be a static import, or the whole module
|
|
755
|
+
// graph is evaluated at launch. `React.lazy` needs the DEFAULT
|
|
756
|
+
// export, which is exactly what the static form assumed too.
|
|
757
|
+
if (this.#lazyRouteScreens) {
|
|
758
|
+
lazyScreenDeclarations += `const Component${moduleNumber} = React.lazy(() => import('${pkgRouteConfig.componentPath}'));\n`;
|
|
759
|
+
} else {
|
|
760
|
+
importStatements += `import Component${moduleNumber} from '${pkgRouteConfig.componentPath}';\n`;
|
|
761
|
+
}
|
|
734
762
|
const options = JSON.stringify({ ...(pkgRouteConfig?.props?.options || {}) });
|
|
735
763
|
moduleContent += `<Stack.Screen
|
|
736
764
|
key="${pkgRouteConfig.key}"
|
|
@@ -749,10 +777,10 @@ export class GenerateMobileNavigations {
|
|
|
749
777
|
auth={${pkgRouteConfig?.props?.initialParams?.auth ?? false}}
|
|
750
778
|
authority={${JSON.stringify(pkgRouteConfig?.authority) ?? null}}
|
|
751
779
|
extraPermissions={${JSON.stringify(pkgRouteConfig?.extraPermissions) ?? null}}
|
|
752
|
-
component={<Component${moduleNumber} {...props}
|
|
780
|
+
component={${this.#lazyRouteScreens ? '<React.Suspense fallback={<RouteScreenFallback />}>' : ''}<Component${moduleNumber} {...props}
|
|
753
781
|
permissions={${JSON.stringify(pkgRouteConfig?.authority) ?? null}}
|
|
754
782
|
extraPermissions={${JSON.stringify(pkgRouteConfig?.extraPermissions) ?? null}}
|
|
755
|
-
|
|
783
|
+
/>${this.#lazyRouteScreens ? '</React.Suspense>' : ''}}
|
|
756
784
|
${
|
|
757
785
|
pkgRouteConfig?.unauthenticatedComponent && customUnauthenticatedComponentPath
|
|
758
786
|
? `unauthenticatedComponent={<${customUnauthenticatedComponentName}/>}`
|
|
@@ -805,7 +833,7 @@ export class GenerateMobileNavigations {
|
|
|
805
833
|
moduleContent += `</Stack.Group>`;
|
|
806
834
|
moduleRender = `export default ({Stack,...rest}) => { return (<>${moduleContent}</>)}`;
|
|
807
835
|
}
|
|
808
|
-
stackNavigator = importStatements + '\n' + moduleRender;
|
|
836
|
+
stackNavigator = importStatements + '\n' + lazyScreenDeclarations + '\n' + moduleRender;
|
|
809
837
|
let stackNavigation = stackNavigator;
|
|
810
838
|
stackNavigation = await prettier.format(stackNavigation, { parser: 'babel' });
|
|
811
839
|
const stackDirName = path.dirname(stackDirPath);
|
|
@@ -1176,14 +1204,14 @@ export class GenerateMobileNavigations {
|
|
|
1176
1204
|
}
|
|
1177
1205
|
}}
|
|
1178
1206
|
|
|
1179
|
-
/>)}
|
|
1207
|
+
/>)},`
|
|
1180
1208
|
: ''
|
|
1181
1209
|
}
|
|
1182
1210
|
${
|
|
1183
1211
|
pkgRouteConfig?.customHeader &&
|
|
1184
1212
|
Object.keys(pkgRouteConfig.customHeader)?.length &&
|
|
1185
1213
|
customHeaderComponentPath
|
|
1186
|
-
?
|
|
1214
|
+
? `header: (props) => <${customHeaderName} {...props} {...${JSON.stringify(
|
|
1187
1215
|
pkgRouteConfig?.customHeader?.props ?? '',
|
|
1188
1216
|
)}} />`
|
|
1189
1217
|
: ''
|