app-studio 0.1.44 → 0.2.2
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/README.md +59 -62
- package/dist/appstudio.cjs.development.js +2130 -0
- package/dist/appstudio.cjs.development.js.map +1 -0
- package/dist/appstudio.cjs.production.min.js +2 -0
- package/dist/appstudio.cjs.production.min.js.map +1 -0
- package/dist/appstudio.esm.js +2092 -0
- package/dist/appstudio.esm.js.map +1 -0
- package/dist/appstudio.umd.development.js +2133 -0
- package/dist/appstudio.umd.development.js.map +1 -0
- package/dist/appstudio.umd.production.min.js +2 -0
- package/dist/appstudio.umd.production.min.js.map +1 -0
- package/dist/components/Animation.d.ts +633 -0
- package/dist/components/Element.d.ts +14 -10
- package/dist/components/Form.d.ts +3 -3
- package/dist/components/Image.d.ts +2 -2
- package/dist/components/Text.d.ts +2 -2
- package/dist/components/View.d.ts +2 -2
- package/dist/index.d.ts +1 -0
- package/dist/index.js +2 -2
- package/dist/utils/animation.d.ts +4 -0
- package/dist/utils/constants.d.ts +17 -0
- package/dist/utils/style.d.ts +5 -2
- package/package.json +11 -7
- package/dist/app-studio.cjs.development.js +0 -954
- package/dist/app-studio.cjs.development.js.map +0 -1
- package/dist/app-studio.cjs.production.min.js +0 -5
- package/dist/app-studio.cjs.production.min.js.map +0 -1
- package/dist/app-studio.esm.js +0 -915
- package/dist/app-studio.esm.js.map +0 -1
|
@@ -1,954 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
|
|
6
|
-
|
|
7
|
-
var React = require('react');
|
|
8
|
-
var React__default = _interopDefault(React);
|
|
9
|
-
var Color = _interopDefault(require('color-convert'));
|
|
10
|
-
var styled = _interopDefault(require('styled-components'));
|
|
11
|
-
|
|
12
|
-
const palette = {
|
|
13
|
-
white: {
|
|
14
|
-
50: 'rgba(255, 255, 255, 0.04)',
|
|
15
|
-
100: 'rgba(255, 255, 255, 0.08)',
|
|
16
|
-
200: 'rgba(255, 255, 255, 0.16)',
|
|
17
|
-
300: 'rgba(255, 255, 255, 0.24)',
|
|
18
|
-
400: 'rgba(255, 255, 255, 0.36)',
|
|
19
|
-
500: 'rgba(255, 255, 255, 0.48)',
|
|
20
|
-
600: 'rgba(255, 255, 255, 0.64)',
|
|
21
|
-
700: 'rgba(255, 255, 255, 0.80)',
|
|
22
|
-
800: 'rgba(255, 255, 255, 0.92)',
|
|
23
|
-
900: 'rgba(255, 255, 255, 1)'
|
|
24
|
-
},
|
|
25
|
-
black: {
|
|
26
|
-
50: 'rgba(0, 0, 0, 0.04)',
|
|
27
|
-
100: 'rgba(0, 0, 0, 0.08)',
|
|
28
|
-
200: 'rgba(0, 0, 0, 0.16)',
|
|
29
|
-
300: 'rgba(0, 0, 0, 0.24)',
|
|
30
|
-
400: 'rgba(0, 0, 0, 0.36)',
|
|
31
|
-
500: 'rgba(0, 0, 0, 0.48)',
|
|
32
|
-
600: 'rgba(0, 0, 0, 0.64)',
|
|
33
|
-
700: 'rgba(0, 0, 0, 0.80)',
|
|
34
|
-
800: 'rgba(0, 0, 0, 0.92)',
|
|
35
|
-
900: 'rgba(0, 0, 0, 1)'
|
|
36
|
-
},
|
|
37
|
-
rose: {
|
|
38
|
-
50: '#fff1f2',
|
|
39
|
-
100: '#ffe4e6',
|
|
40
|
-
200: '#fecdd3',
|
|
41
|
-
300: '#fda4af',
|
|
42
|
-
400: '#fb7185',
|
|
43
|
-
500: '#f43f5e',
|
|
44
|
-
600: '#e11d48',
|
|
45
|
-
700: '#be123c',
|
|
46
|
-
800: '#9f1239',
|
|
47
|
-
900: '#881337'
|
|
48
|
-
},
|
|
49
|
-
pink: {
|
|
50
|
-
50: '#fdf2f8',
|
|
51
|
-
100: '#fce7f3',
|
|
52
|
-
200: '#fbcfe8',
|
|
53
|
-
300: '#f9a8d4',
|
|
54
|
-
400: '#f472b6',
|
|
55
|
-
500: '#ec4899',
|
|
56
|
-
600: '#db2777',
|
|
57
|
-
700: '#be185d',
|
|
58
|
-
800: '#9d174d',
|
|
59
|
-
900: '#831843'
|
|
60
|
-
},
|
|
61
|
-
fuchsia: {
|
|
62
|
-
50: '#fdf4ff',
|
|
63
|
-
100: '#fae8ff',
|
|
64
|
-
200: '#f5d0fe',
|
|
65
|
-
300: '#f0abfc',
|
|
66
|
-
400: '#e879f9',
|
|
67
|
-
500: '#d946ef',
|
|
68
|
-
600: '#c026d3',
|
|
69
|
-
700: '#a21caf',
|
|
70
|
-
800: '#86198f',
|
|
71
|
-
900: '#701a75'
|
|
72
|
-
},
|
|
73
|
-
purple: {
|
|
74
|
-
50: '#faf5ff',
|
|
75
|
-
100: '#f3e8ff',
|
|
76
|
-
200: '#e9d5ff',
|
|
77
|
-
300: '#d8b4fe',
|
|
78
|
-
400: '#c084fc',
|
|
79
|
-
500: '#a855f7',
|
|
80
|
-
600: '#9333ea',
|
|
81
|
-
700: '#7e22ce',
|
|
82
|
-
800: '#6b21a8',
|
|
83
|
-
900: '#581c87'
|
|
84
|
-
},
|
|
85
|
-
violet: {
|
|
86
|
-
50: '#f5f3ff',
|
|
87
|
-
100: '#ede9fe',
|
|
88
|
-
200: '#ddd6fe',
|
|
89
|
-
300: '#c4b5fd',
|
|
90
|
-
400: '#a78bfa',
|
|
91
|
-
500: '#8b5cf6',
|
|
92
|
-
600: '#7c3aed',
|
|
93
|
-
700: '#6d28d9',
|
|
94
|
-
800: '#5b21b6',
|
|
95
|
-
900: '#4c1d95'
|
|
96
|
-
},
|
|
97
|
-
indigo: {
|
|
98
|
-
50: '#eef2ff',
|
|
99
|
-
100: '#e0e7ff',
|
|
100
|
-
200: '#c7d2fe',
|
|
101
|
-
300: '#a5b4fc',
|
|
102
|
-
400: '#818cf8',
|
|
103
|
-
500: '#6366f1',
|
|
104
|
-
600: '#4f46e5',
|
|
105
|
-
700: '#4338ca',
|
|
106
|
-
800: '#3730a3',
|
|
107
|
-
900: '#312e81'
|
|
108
|
-
},
|
|
109
|
-
blue: {
|
|
110
|
-
50: '#eff6ff',
|
|
111
|
-
100: '#dbeafe',
|
|
112
|
-
200: '#bfdbfe',
|
|
113
|
-
300: '#93c5fd',
|
|
114
|
-
400: '#60a5fa',
|
|
115
|
-
500: '#3b82f6',
|
|
116
|
-
600: '#2563eb',
|
|
117
|
-
700: '#1d4ed8',
|
|
118
|
-
800: '#1e40af',
|
|
119
|
-
900: '#1e3a8a'
|
|
120
|
-
},
|
|
121
|
-
lightBlue: {
|
|
122
|
-
50: '#f0f9ff',
|
|
123
|
-
100: '#e0f2fe',
|
|
124
|
-
200: '#bae6fd',
|
|
125
|
-
300: '#7dd3fc',
|
|
126
|
-
400: '#38bdf8',
|
|
127
|
-
500: '#0ea5e9',
|
|
128
|
-
600: '#0284c7',
|
|
129
|
-
700: '#0369a1',
|
|
130
|
-
800: '#075985',
|
|
131
|
-
900: '#0c4a6e'
|
|
132
|
-
},
|
|
133
|
-
cyan: {
|
|
134
|
-
50: '#ecfeff',
|
|
135
|
-
100: '#cffafe',
|
|
136
|
-
200: '#a5f3fc',
|
|
137
|
-
300: '#67e8f9',
|
|
138
|
-
400: '#22d3ee',
|
|
139
|
-
500: '#06b6d4',
|
|
140
|
-
600: '#0891b2',
|
|
141
|
-
700: '#0e7490',
|
|
142
|
-
800: '#155e75',
|
|
143
|
-
900: '#164e63'
|
|
144
|
-
},
|
|
145
|
-
teal: {
|
|
146
|
-
50: '#f0fdfa',
|
|
147
|
-
100: '#ccfbf1',
|
|
148
|
-
200: '#99f6e4',
|
|
149
|
-
300: '#5eead4',
|
|
150
|
-
400: '#2dd4bf',
|
|
151
|
-
500: '#14b8a6',
|
|
152
|
-
600: '#0d9488',
|
|
153
|
-
700: '#0f766e',
|
|
154
|
-
800: '#115e59',
|
|
155
|
-
900: '#134e4a'
|
|
156
|
-
},
|
|
157
|
-
emerald: {
|
|
158
|
-
50: '#ecfdf5',
|
|
159
|
-
100: '#d1fae5',
|
|
160
|
-
200: '#a7f3d0',
|
|
161
|
-
300: '#6ee7b7',
|
|
162
|
-
400: '#34d399',
|
|
163
|
-
500: '#10b981',
|
|
164
|
-
600: '#059669',
|
|
165
|
-
700: '#047857',
|
|
166
|
-
800: '#065f46',
|
|
167
|
-
900: '#064e3b'
|
|
168
|
-
},
|
|
169
|
-
green: {
|
|
170
|
-
50: '#f0fdf4',
|
|
171
|
-
100: '#dcfce7',
|
|
172
|
-
200: '#bbf7d0',
|
|
173
|
-
300: '#86efac',
|
|
174
|
-
400: '#4ade80',
|
|
175
|
-
500: '#22c55e',
|
|
176
|
-
600: '#16a34a',
|
|
177
|
-
700: '#15803d',
|
|
178
|
-
800: '#166534',
|
|
179
|
-
900: '#14532d'
|
|
180
|
-
},
|
|
181
|
-
lime: {
|
|
182
|
-
50: '#f7fee7',
|
|
183
|
-
100: '#ecfccb',
|
|
184
|
-
200: '#d9f99d',
|
|
185
|
-
300: '#bef264',
|
|
186
|
-
400: '#a3e635',
|
|
187
|
-
500: '#84cc16',
|
|
188
|
-
600: '#65a30d',
|
|
189
|
-
700: '#4d7c0f',
|
|
190
|
-
800: '#3f6212',
|
|
191
|
-
900: '#365314'
|
|
192
|
-
},
|
|
193
|
-
yellow: {
|
|
194
|
-
50: '#fefce8',
|
|
195
|
-
100: '#fef9c3',
|
|
196
|
-
200: '#fef08a',
|
|
197
|
-
300: '#fde047',
|
|
198
|
-
400: '#facc15',
|
|
199
|
-
500: '#eab308',
|
|
200
|
-
600: '#ca8a04',
|
|
201
|
-
700: '#a16207',
|
|
202
|
-
800: '#854d0e',
|
|
203
|
-
900: '#713f12'
|
|
204
|
-
},
|
|
205
|
-
amber: {
|
|
206
|
-
50: '#fffbeb',
|
|
207
|
-
100: '#fef3c7',
|
|
208
|
-
200: '#fde68a',
|
|
209
|
-
300: '#fcd34d',
|
|
210
|
-
400: '#fbbf24',
|
|
211
|
-
500: '#f59e0b',
|
|
212
|
-
600: '#d97706',
|
|
213
|
-
700: '#b45309',
|
|
214
|
-
800: '#92400e',
|
|
215
|
-
900: '#78350f'
|
|
216
|
-
},
|
|
217
|
-
orange: {
|
|
218
|
-
50: '#fff7ed',
|
|
219
|
-
100: '#ffedd5',
|
|
220
|
-
200: '#fed7aa',
|
|
221
|
-
300: '#fdba74',
|
|
222
|
-
400: '#fb923c',
|
|
223
|
-
500: '#f97316',
|
|
224
|
-
600: '#ea580c',
|
|
225
|
-
700: '#c2410c',
|
|
226
|
-
800: '#9a3412',
|
|
227
|
-
900: '#7c2d12'
|
|
228
|
-
},
|
|
229
|
-
red: {
|
|
230
|
-
50: '#fef2f2',
|
|
231
|
-
100: '#fee2e2',
|
|
232
|
-
200: '#fecaca',
|
|
233
|
-
300: '#fca5a5',
|
|
234
|
-
400: '#f87171',
|
|
235
|
-
500: '#ef4444',
|
|
236
|
-
600: '#dc2626',
|
|
237
|
-
700: '#b91c1c',
|
|
238
|
-
800: '#991b1b',
|
|
239
|
-
900: '#7f1d1d'
|
|
240
|
-
},
|
|
241
|
-
warmGray: {
|
|
242
|
-
50: '#fafaf9',
|
|
243
|
-
100: '#f5f5f4',
|
|
244
|
-
200: '#e7e5e4',
|
|
245
|
-
300: '#d6d3d1',
|
|
246
|
-
400: '#a8a29e',
|
|
247
|
-
500: '#78716c',
|
|
248
|
-
600: '#57534e',
|
|
249
|
-
700: '#44403c',
|
|
250
|
-
800: '#292524',
|
|
251
|
-
900: '#1c1917'
|
|
252
|
-
},
|
|
253
|
-
trueGray: {
|
|
254
|
-
50: '#fafafa',
|
|
255
|
-
100: '#f5f5f5',
|
|
256
|
-
200: '#e5e5e5',
|
|
257
|
-
300: '#d4d4d4',
|
|
258
|
-
400: '#a3a3a3',
|
|
259
|
-
500: '#737373',
|
|
260
|
-
600: '#525252',
|
|
261
|
-
700: '#404040',
|
|
262
|
-
800: '#262626',
|
|
263
|
-
900: '#171717'
|
|
264
|
-
},
|
|
265
|
-
gray: {
|
|
266
|
-
50: '#fafafa',
|
|
267
|
-
100: '#f4f4f5',
|
|
268
|
-
200: '#e4e4e7',
|
|
269
|
-
300: '#d4d4d8',
|
|
270
|
-
400: '#a1a1aa',
|
|
271
|
-
500: '#71717a',
|
|
272
|
-
600: '#52525b',
|
|
273
|
-
700: '#3f3f46',
|
|
274
|
-
800: '#27272a',
|
|
275
|
-
900: '#18181b'
|
|
276
|
-
},
|
|
277
|
-
dark: {
|
|
278
|
-
50: '#18181b',
|
|
279
|
-
100: '#27272a',
|
|
280
|
-
200: '#3f3f46',
|
|
281
|
-
300: '#52525b',
|
|
282
|
-
400: '#71717a',
|
|
283
|
-
500: '#a1a1aa',
|
|
284
|
-
600: '#d4d4d8',
|
|
285
|
-
700: '#e4e4e7',
|
|
286
|
-
800: '#f4f4f5',
|
|
287
|
-
900: '#fafafa'
|
|
288
|
-
},
|
|
289
|
-
coolGray: {
|
|
290
|
-
50: '#f9fafb',
|
|
291
|
-
100: '#f3f4f6',
|
|
292
|
-
200: '#e5e7eb',
|
|
293
|
-
300: '#d1d5db',
|
|
294
|
-
400: '#9ca3af',
|
|
295
|
-
500: '#6b7280',
|
|
296
|
-
600: '#4b5563',
|
|
297
|
-
700: '#374151',
|
|
298
|
-
800: '#1f2937',
|
|
299
|
-
900: '#111827'
|
|
300
|
-
},
|
|
301
|
-
blueGray: {
|
|
302
|
-
50: '#f8fafc',
|
|
303
|
-
100: '#f1f5f9',
|
|
304
|
-
200: '#e2e8f0',
|
|
305
|
-
300: '#cbd5e1',
|
|
306
|
-
400: '#94a3b8',
|
|
307
|
-
500: '#64748b',
|
|
308
|
-
600: '#475569',
|
|
309
|
-
700: '#334155',
|
|
310
|
-
800: '#1e293b',
|
|
311
|
-
900: '#0f172a'
|
|
312
|
-
}
|
|
313
|
-
};
|
|
314
|
-
|
|
315
|
-
const defaultThemeMain = {
|
|
316
|
-
primary: 'color.black',
|
|
317
|
-
secondary: 'color.blue',
|
|
318
|
-
success: 'color.green.500',
|
|
319
|
-
error: 'color.red.500',
|
|
320
|
-
warning: 'color.orange.500',
|
|
321
|
-
disabled: 'color.gray.500',
|
|
322
|
-
loading: 'color.dark.500'
|
|
323
|
-
};
|
|
324
|
-
const defaultColors = {
|
|
325
|
-
white: '#FFFFFF',
|
|
326
|
-
black: '#000000',
|
|
327
|
-
red: '#FF0000',
|
|
328
|
-
green: '#00FF00',
|
|
329
|
-
blue: '#0000FF',
|
|
330
|
-
yellow: '#FFFF00',
|
|
331
|
-
cyan: '#00FFFF',
|
|
332
|
-
magenta: '#FF00FF',
|
|
333
|
-
grey: '#808080',
|
|
334
|
-
orange: '#FFA500',
|
|
335
|
-
brown: '#A52A2A',
|
|
336
|
-
purple: '#800080',
|
|
337
|
-
pink: '#FFC0CB',
|
|
338
|
-
lime: '#00FF00',
|
|
339
|
-
teal: '#008080',
|
|
340
|
-
navy: '#000080',
|
|
341
|
-
olive: '#808000',
|
|
342
|
-
maroon: '#800000',
|
|
343
|
-
gold: '#FFD700',
|
|
344
|
-
silver: '#C0C0C0',
|
|
345
|
-
indigo: '#4B0082',
|
|
346
|
-
violet: '#EE82EE',
|
|
347
|
-
beige: '#F5F5DC',
|
|
348
|
-
turquoise: '#40E0D0',
|
|
349
|
-
coral: '#FF7F50',
|
|
350
|
-
chocolate: '#D2691E',
|
|
351
|
-
skyBlue: '#87CEEB',
|
|
352
|
-
plum: '#DDA0DD',
|
|
353
|
-
darkGreen: '#006400',
|
|
354
|
-
salmon: '#FA8072'
|
|
355
|
-
};
|
|
356
|
-
const ThemeContext = /*#__PURE__*/React.createContext({
|
|
357
|
-
getColor: name => {
|
|
358
|
-
return name;
|
|
359
|
-
},
|
|
360
|
-
colors: {
|
|
361
|
-
main: defaultColors,
|
|
362
|
-
palette: palette
|
|
363
|
-
},
|
|
364
|
-
theme: {
|
|
365
|
-
main: defaultThemeMain,
|
|
366
|
-
components: {}
|
|
367
|
-
}
|
|
368
|
-
});
|
|
369
|
-
const useTheme = () => React.useContext(ThemeContext);
|
|
370
|
-
const ThemeProvider = _ref => {
|
|
371
|
-
let {
|
|
372
|
-
theme = {
|
|
373
|
-
main: defaultThemeMain,
|
|
374
|
-
components: {}
|
|
375
|
-
},
|
|
376
|
-
colors = {
|
|
377
|
-
main: defaultColors,
|
|
378
|
-
palette: palette
|
|
379
|
-
},
|
|
380
|
-
children
|
|
381
|
-
} = _ref;
|
|
382
|
-
const getColor = name => {
|
|
383
|
-
if (name === 'transparent') return name;
|
|
384
|
-
try {
|
|
385
|
-
// Si le nom commence par "theme.", nous recherchons dans les couleurs du thème
|
|
386
|
-
if (name.startsWith('theme.')) {
|
|
387
|
-
const keys = name.split('.');
|
|
388
|
-
if (keys[1] !== undefined && typeof theme.components[keys[1]] == 'object' && theme.components[keys[1]][keys[2]] !== undefined) {
|
|
389
|
-
return getColor(theme.components[keys[1]][keys[2]]);
|
|
390
|
-
} else if (theme.main[keys[1]] && theme.main[keys[1]] !== undefined) {
|
|
391
|
-
return getColor(theme.main[keys[1]]);
|
|
392
|
-
} else {
|
|
393
|
-
console.log('Color ' + name + ' not found');
|
|
394
|
-
}
|
|
395
|
-
}
|
|
396
|
-
// Si le nom commence par "color.", nous recherchons dans la palette
|
|
397
|
-
else if (name.startsWith('color.')) {
|
|
398
|
-
const keys = name.split('.'); // Retirer le préfixe "color."
|
|
399
|
-
if (colors.palette && colors.palette[keys[1]][keys[2]] !== undefined) {
|
|
400
|
-
return colors.palette[keys[1]][keys[2]];
|
|
401
|
-
} else if (colors.palette && colors.palette[keys[1]][parseInt(keys[2])] !== undefined) {
|
|
402
|
-
return colors.palette[keys[1]][parseInt(keys[2])];
|
|
403
|
-
} else if (colors.main && colors.main[keys[1]] !== undefined) {
|
|
404
|
-
return colors.main[keys[1]];
|
|
405
|
-
} else {
|
|
406
|
-
console.log('Color ' + name + ' not found');
|
|
407
|
-
}
|
|
408
|
-
}
|
|
409
|
-
} catch (e) {}
|
|
410
|
-
return name;
|
|
411
|
-
};
|
|
412
|
-
return /*#__PURE__*/React__default.createElement(ThemeContext.Provider, {
|
|
413
|
-
value: {
|
|
414
|
-
getColor,
|
|
415
|
-
theme: {
|
|
416
|
-
main: {
|
|
417
|
-
...defaultThemeMain,
|
|
418
|
-
...theme.main
|
|
419
|
-
},
|
|
420
|
-
components: {
|
|
421
|
-
...theme.components
|
|
422
|
-
}
|
|
423
|
-
},
|
|
424
|
-
colors: {
|
|
425
|
-
main: {
|
|
426
|
-
...defaultColors,
|
|
427
|
-
...colors.main
|
|
428
|
-
},
|
|
429
|
-
palette: {
|
|
430
|
-
...palette,
|
|
431
|
-
...colors.palette
|
|
432
|
-
}
|
|
433
|
-
}
|
|
434
|
-
}
|
|
435
|
-
}, children);
|
|
436
|
-
};
|
|
437
|
-
|
|
438
|
-
const Shadows = {
|
|
439
|
-
0: {
|
|
440
|
-
shadowColor: '#000',
|
|
441
|
-
shadowOffset: {
|
|
442
|
-
width: 1,
|
|
443
|
-
height: 2
|
|
444
|
-
},
|
|
445
|
-
shadowOpacity: 0.18,
|
|
446
|
-
shadowRadius: 1.0
|
|
447
|
-
},
|
|
448
|
-
1: {
|
|
449
|
-
shadowColor: '#000',
|
|
450
|
-
shadowOffset: {
|
|
451
|
-
width: 2,
|
|
452
|
-
height: 2
|
|
453
|
-
},
|
|
454
|
-
shadowOpacity: 0.2,
|
|
455
|
-
shadowRadius: 1.41
|
|
456
|
-
},
|
|
457
|
-
2: {
|
|
458
|
-
shadowColor: '#000',
|
|
459
|
-
shadowOffset: {
|
|
460
|
-
width: 3,
|
|
461
|
-
height: 3
|
|
462
|
-
},
|
|
463
|
-
shadowOpacity: 0.22,
|
|
464
|
-
shadowRadius: 2.22
|
|
465
|
-
},
|
|
466
|
-
3: {
|
|
467
|
-
shadowColor: '#000',
|
|
468
|
-
shadowOffset: {
|
|
469
|
-
width: 4,
|
|
470
|
-
height: 4
|
|
471
|
-
},
|
|
472
|
-
shadowOpacity: 0.23,
|
|
473
|
-
shadowRadius: 2.62
|
|
474
|
-
},
|
|
475
|
-
4: {
|
|
476
|
-
shadowColor: '#000',
|
|
477
|
-
shadowOffset: {
|
|
478
|
-
width: 5,
|
|
479
|
-
height: 5
|
|
480
|
-
},
|
|
481
|
-
shadowOpacity: 0.25,
|
|
482
|
-
shadowRadius: 3.84
|
|
483
|
-
},
|
|
484
|
-
5: {
|
|
485
|
-
shadowColor: '#000',
|
|
486
|
-
shadowOffset: {
|
|
487
|
-
width: 6,
|
|
488
|
-
height: 6
|
|
489
|
-
},
|
|
490
|
-
shadowOpacity: 0.27,
|
|
491
|
-
shadowRadius: 4.65
|
|
492
|
-
},
|
|
493
|
-
6: {
|
|
494
|
-
shadowColor: '#000',
|
|
495
|
-
shadowOffset: {
|
|
496
|
-
width: 7,
|
|
497
|
-
height: 7
|
|
498
|
-
},
|
|
499
|
-
shadowOpacity: 0.29,
|
|
500
|
-
shadowRadius: 4.65
|
|
501
|
-
},
|
|
502
|
-
7: {
|
|
503
|
-
shadowColor: '#000',
|
|
504
|
-
shadowOffset: {
|
|
505
|
-
width: 8,
|
|
506
|
-
height: 8
|
|
507
|
-
},
|
|
508
|
-
shadowOpacity: 0.3,
|
|
509
|
-
shadowRadius: 4.65
|
|
510
|
-
},
|
|
511
|
-
8: {
|
|
512
|
-
shadowColor: '#000',
|
|
513
|
-
shadowOffset: {
|
|
514
|
-
width: 9,
|
|
515
|
-
height: 9
|
|
516
|
-
},
|
|
517
|
-
shadowOpacity: 0.32,
|
|
518
|
-
shadowRadius: 5.46
|
|
519
|
-
},
|
|
520
|
-
9: {
|
|
521
|
-
shadowColor: '#000',
|
|
522
|
-
shadowOffset: {
|
|
523
|
-
width: 10,
|
|
524
|
-
height: 10
|
|
525
|
-
},
|
|
526
|
-
shadowOpacity: 0.34,
|
|
527
|
-
shadowRadius: 6.27
|
|
528
|
-
}
|
|
529
|
-
};
|
|
530
|
-
|
|
531
|
-
const StyleProps = /*#__PURE__*/new Set(['alignContent', 'alignItems', 'alignSelf', 'alignmentBaseline', 'all', 'animation', 'animationDelay', 'animationDirection', 'animationDuration', 'animationFillMode', 'animationIterationCount', 'animationName', 'animationPlayState', 'animationTimingFunction', 'appearance', 'backdropFilter', 'backfaceVisibility', 'background', 'backgroundAttachment', 'backgroundBlendMode', 'backgroundClip', 'backgroundColor', 'backgroundImage', 'backgroundOrigin', 'backgroundPosition', 'backgroundPositionX', 'backgroundPositionY', 'backgroundRepeat', 'backgroundRepeatX', 'backgroundRepeatY', 'backgroundSize', 'baselineShift', 'blockSize', 'border', 'borderBlockEnd', 'borderBlockEndColor', 'borderBlockEndStyle', 'borderBlockEndWidth', 'borderBlockStart', 'borderBlockStartColor', 'borderBlockStartStyle', 'borderBlockStartWidth', 'borderBottom', 'borderBottomColor', 'borderBottomLeftRadius', 'borderBottomRightRadius', 'borderBottomStyle', 'borderBottomWidth', 'borderCollapse', 'borderColor', 'borderImage', 'borderImageOutset', 'borderImageRepeat', 'borderImageSlice', 'borderImageSource', 'borderImageWidth', 'borderInlineEnd', 'borderInlineEndColor', 'borderInlineEndStyle', 'borderInlineEndWidth', 'borderInlineStart', 'borderInlineStartColor', 'borderInlineStartStyle', 'borderInlineStartWidth', 'borderLeft', 'borderLeftColor', 'borderLeftStyle', 'borderLeftWidth', 'borderRadius', 'borderRight', 'borderRightColor', 'borderRightStyle', 'borderRightWidth', 'borderSpacing', 'borderStyle', 'borderTop', 'borderTopColor', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderTopStyle', 'borderTopWidth', 'borderWidth', 'bottom', 'boxShadow', 'boxSizing', 'breakAfter', 'breakBefore', 'breakInside', 'bufferedRendering', 'captionSide', 'caretColor', 'clear', 'clip', 'clipPath', 'clipRule', 'color', 'colorInterpolation', 'colorInterpolationFilters', 'colorRendering', 'columnCount', 'columnFill', 'columnGap', 'columnRule', 'columnRuleColor', 'columnRuleStyle', 'columnRuleWidth', 'columnSpan', 'columnWidth', 'columns', 'contain', 'content', 'counterIncrement', 'counterReset', 'cursor', 'cx', 'cy', 'd', 'direction', 'display', 'dominantBaseline', 'emptyCells', 'fill', 'fillOpacity', 'fillRule', 'filter', 'flex', 'flexBasis', 'flexDirection', 'flexFlow', 'flexGrow', 'flexShrink', 'flexWrap', 'float', 'floodColor', 'floodOpacity', 'font', 'fontDisplay', 'fontFamily', 'fontFeatureSettings', 'fontKerning', 'fontSize', 'fontStretch', 'fontStyle', 'fontVariant', 'fontVariantCaps', 'fontVariantEastAsian', 'fontVariantLigatures', 'fontVariantNumeric', 'fontVariationSettings', 'fontWeight', 'gap', 'grid', 'gridArea', 'gridAutoColumns', 'gridAutoFlow', 'gridAutoRows', 'gridColumn', 'gridColumnEnd', 'gridColumnGap', 'gridColumnStart', 'gridGap', 'gridRow', 'gridRowEnd', 'gridRowGap', 'gridRowStart', 'gridTemplate', 'gridTemplateAreas', 'gridTemplateColumns', 'gridTemplateRows', 'height', 'hyphens', 'imageRendering', 'inlineSize', 'isolation', 'justifyContent', 'justifyItems', 'justifySelf', 'left', 'letterSpacing', 'lightingColor', 'lineBreak', 'lineHeight', 'listStyle', 'listStyleImage', 'listStylePosition', 'listStyleType', 'margin', 'marginBlockEnd', 'marginBlockStart', 'marginBottom', 'marginInlineEnd', 'marginInlineStart', 'marginLeft', 'marginRight', 'marginTop', 'marker', 'markerEnd', 'markerMid', 'markerStart', 'mask', 'maskType', 'maxBlockSize', 'maxHeight', 'maxInlineSize', 'maxWidth', 'maxZoom', 'minBlockSize', 'minHeight', 'minInlineSize', 'minWidth', 'minZoom', 'mixBlendMode', 'objectFit', 'objectPosition', 'offset', 'offsetDistance', 'offsetPath', 'offsetRotate', 'opacity', 'order', 'orientation', 'orphans', 'outline', 'outlineColor', 'outlineOffset', 'outlineStyle', 'outlineWidth', 'overflow', 'overflowAnchor', 'overflowWrap', 'overflowX', 'overflowY', 'overscrollBehavior', 'overscrollBehaviorBlock', 'overscrollBehaviorInline', 'overscrollBehaviorX', 'overscrollBehaviorY', 'padding', 'paddingBlockEnd', 'paddingBlockStart', 'paddingBottom', 'paddingInlineEnd', 'paddingInlineStart', 'paddingLeft', 'paddingRight', 'paddingTop', 'page', 'pageBreakAfter', 'pageBreakBefore', 'pageBreakInside', 'paintOrder', 'perspective', 'perspectiveOrigin', 'placeContent', 'placeItems', 'placeSelf', 'pointerEvents', 'position', 'quotes', 'r', 'resize', 'right', 'rowGap', 'rx', 'ry', 'scrollBehavior', 'scrollMargin', 'scrollMarginBlock', 'scrollMarginBlockEnd', 'scrollMarginBlockStart', 'scrollMarginBottom', 'scrollMarginInline', 'scrollMarginInlineEnd', 'scrollMarginInlineStart', 'scrollMarginLeft', 'scrollMarginRight', 'scrollMarginTop', 'scrollPadding', 'scrollPaddingBlock', 'scrollPaddingBlockEnd', 'scrollPaddingBlockStart', 'scrollPaddingBottom', 'scrollPaddingInline', 'scrollPaddingInlineEnd', 'scrollPaddingInlineStart', 'scrollPaddingLeft', 'scrollPaddingRight', 'scrollPaddingTop', 'scrollSnapAlign', 'scrollSnapStop', 'scrollSnapType', 'shapeImageThreshold', 'shapeMargin', 'shapeOutside', 'shapeRendering', 'size', 'speak', 'src', 'stopColor', 'stopOpacity', 'stroke', 'strokeDasharray', 'strokeDashoffset', 'strokeLinecap', 'strokeLinejoin', 'strokeMiterlimit', 'strokeOpacity', 'strokeWidth', 'tabSize', 'tableLayout', 'textAlign', 'textAlignLast', 'textAnchor', 'textCombineUpright', 'textDecoration', 'textDecorationColor', 'textDecorationLine', 'textDecorationSkipInk', 'textDecorationStyle', 'textIndent', 'textOrientation', 'textOverflow', 'textRendering', 'textShadow', 'textSizeAdjust', 'textTransform', 'textUnderlinePosition', 'top', 'touchAction', 'transform', 'transformBox', 'transformOrigin', 'transformStyle', 'transition', 'transitionDelay', 'transitionDuration', 'transitionProperty', 'transitionTimingFunction', 'unicodeBidi', 'unicodeRange', 'userSelect', 'userZoom', 'vectorEffect', 'verticalAlign', 'visibility', 'whiteSpace', 'widows', 'width', 'willChange', 'wordBreak', 'wordSpacing', 'wordWrap', 'writingMode', 'x', 'y', 'zIndex', 'zoom', 'alwaysBounceHorizontal', 'alwaysBounceVertical', 'automaticallyAdjustContentInsets', 'bounces', 'bouncesZoom', 'canCancelContentTouches', 'centerContent', 'contentLayoutStyle', 'contentInset', 'contentInsetAdjustmentBehavior', 'contentOffset', 'decelerationRate', 'directionalLockEnabled', 'disableIntervalMomentum', 'disableScrollViewPanResponder', 'endFillColor', 'fadingEdgeLength', 'horizontal', 'indicatorStyle', 'invertStickyHeaders', 'keyboardDismissMode', 'keyboardShouldPersistTaps', 'maintainVisibleContentPosition', 'maximumZoomScale', 'minimumZoomScale', 'nestedScrollEnabled', 'onContentSizeChange', 'onMomentumScrollBegin', 'onMomentumScrollEnd', 'onScroll', 'onScrollBeginDrag', 'onScrollEndDrag', 'onScrollToTop', 'overScrollMode', 'pagingEnabled', 'persistentScrollbar', 'pinchGestureEnabled', 'refreshControl', 'removeClippedSubviews', 'scrollBarThumbImage', 'scrollEnabled', 'scrollEventThrottle', 'scrollIndicatorInsets', 'scrollPerfTag', 'scrollToOverflowEnabled', 'scrollsToTop', 'DEPRECATED_sendUpdatedChildFrames', 'showsHorizontalScrollIndicator', 'showsVerticalScrollIndicator', 'snapToAlignment', 'snapToEnd', 'snapToInterval', 'snapToOffsets', 'snapToStart', 'stickyHeaderIndices', 'zoomScale', 'borderRightColor', 'backfaceVisibility', 'borderBottomColor', 'borderBottomEndRadius', 'borderBottomLeftRadius', 'borderBottomRightRadius', 'borderBottomStartRadius', 'borderBottomWidth', 'borderColor', 'borderEndColor', 'borderLeftColor', 'borderLeftWidth', 'borderRadius', 'backgroundColor', 'borderRightWidth', 'borderStartColor', 'borderStyle', 'borderTopColor', 'borderTopEndRadius', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderTopStartRadius', 'borderTopWidth', 'borderWidth', 'border', 'opacity', 'elevation', 'shadowColor', 'shadowOffset', 'shadowOpacity', 'shadowRadius', 'alignContent', 'alignItems', 'alignSelf', 'aspectRatio', 'borderBottomWidth', 'borderEndWidth', 'borderLeftWidth', 'borderRightWidth', 'borderStartWidth', 'borderTopWidth', 'borderWidth', 'bottom', 'direction', 'display', 'end', 'flex', 'flexBasis', 'flexDirection', 'flexGrow', 'flexShrink', 'flexWrap', 'height', 'justifyContent', 'left', 'margin', 'marginBottom', 'marginEnd', 'marginHorizontal', 'marginLeft', 'marginRight', 'marginStart', 'marginTop', 'marginVertical', 'maxHeight', 'maxWidth', 'minHeight', 'minWidth', 'overflow', 'overflowX', 'overflowY', 'padding', 'paddingBottom', 'paddingEnd', 'paddingHorizontal', 'paddingLeft', 'paddingRight', 'paddingStart', 'paddingTop', 'paddingVertical', 'position', 'right', 'start', 'top', 'width', 'zIndex', 'borderTopRightRadius', 'backfaceVisibility', 'borderBottomLeftRadius', 'borderBottomRightRadius', 'borderColor', 'borderRadius', 'borderTopLeftRadius', 'backgroundColor', 'borderWidth', 'opacity', 'overflow', 'overflowX', 'overflowY', 'resizeMode', 'tintColor', 'overlayColor', 'transform', 'transformMatrix', 'rotation', 'scaleX', 'scaleY', 'translateX', 'translateY', 'perspective', 'rotate', 'rotateX', 'rotateY', 'rotateZ', 'scale', 'skewX', 'skewY', 'testID', 'decomposedMatrix']);
|
|
532
|
-
const nonStyleAttributes = /*#__PURE__*/new Set(['length', 'parentRule', 'src']);
|
|
533
|
-
const isStyleProp = property => {
|
|
534
|
-
return StyleProps.has(property) || nonStyleAttributes.has(property);
|
|
535
|
-
};
|
|
536
|
-
|
|
537
|
-
const defaultBreakpointsConfig = {
|
|
538
|
-
xs: 0,
|
|
539
|
-
sm: 340,
|
|
540
|
-
md: 560,
|
|
541
|
-
lg: 1080,
|
|
542
|
-
xl: 1300
|
|
543
|
-
};
|
|
544
|
-
const defaultDeviceConfig = {
|
|
545
|
-
mobile: ['xs', 'sm'],
|
|
546
|
-
tablet: ['md', 'lg'],
|
|
547
|
-
desktop: ['lg', 'xl']
|
|
548
|
-
};
|
|
549
|
-
const getMediaQueries = b => {
|
|
550
|
-
const defaultKeys = Object.keys(b);
|
|
551
|
-
const breakpointValue = defaultKeys.map(breakpoint => {
|
|
552
|
-
const value = {
|
|
553
|
-
breakpoint: breakpoint,
|
|
554
|
-
min: b[breakpoint],
|
|
555
|
-
max: 0
|
|
556
|
-
};
|
|
557
|
-
return value;
|
|
558
|
-
}).sort((a, b) => a.min - b.min);
|
|
559
|
-
breakpointValue.reduce((a, b) => {
|
|
560
|
-
if (b) a.max = b.min;
|
|
561
|
-
return b;
|
|
562
|
-
});
|
|
563
|
-
const query = {};
|
|
564
|
-
breakpointValue.map(sizeScreen => {
|
|
565
|
-
query[sizeScreen.breakpoint] = `only screen ${sizeScreen.min && sizeScreen.min >= 0 ? 'and (min-width:' + sizeScreen.min + 'px)' : ''} ${sizeScreen.max && sizeScreen.max >= 0 ? 'and (max-width:' + sizeScreen.max + 'px)' : ''}`;
|
|
566
|
-
});
|
|
567
|
-
return query;
|
|
568
|
-
};
|
|
569
|
-
const defaultScreenConfig = {
|
|
570
|
-
breakpoints: defaultBreakpointsConfig,
|
|
571
|
-
devices: defaultDeviceConfig,
|
|
572
|
-
mediaQueries: /*#__PURE__*/getMediaQueries(defaultBreakpointsConfig)
|
|
573
|
-
};
|
|
574
|
-
const ResponsiveContext = /*#__PURE__*/React.createContext(defaultScreenConfig);
|
|
575
|
-
const useResponsiveContext = () => React.useContext(ResponsiveContext);
|
|
576
|
-
const ResponsiveProvider = _ref => {
|
|
577
|
-
let {
|
|
578
|
-
breakpoints = defaultBreakpointsConfig,
|
|
579
|
-
devices = defaultDeviceConfig,
|
|
580
|
-
children
|
|
581
|
-
} = _ref;
|
|
582
|
-
return /*#__PURE__*/React__default.createElement(ResponsiveContext.Provider, {
|
|
583
|
-
value: {
|
|
584
|
-
breakpoints,
|
|
585
|
-
devices,
|
|
586
|
-
mediaQueries: getMediaQueries(breakpoints)
|
|
587
|
-
}
|
|
588
|
-
}, children);
|
|
589
|
-
};
|
|
590
|
-
|
|
591
|
-
// Liste des propriétés numériques
|
|
592
|
-
const NumberProps = ['numberOfLines', 'fontWeight', 'timeStamp', 'flex', 'flexGrow', 'flexShrink', 'order', 'zIndex', 'aspectRatio', 'shadowOpacity', 'shadowRadius', 'scale', 'opacity', 'min', 'max', 'now'];
|
|
593
|
-
// Stocke si une propriété est numérique
|
|
594
|
-
const NumberPropsStyle = {};
|
|
595
|
-
NumberProps.forEach(property => {
|
|
596
|
-
NumberPropsStyle[property] = true;
|
|
597
|
-
});
|
|
598
|
-
// Fonction pour définir la taille de l'élément
|
|
599
|
-
const setSize = (newSize, styleProps) => {
|
|
600
|
-
styleProps.height = styleProps.width = newSize; // Définit la hauteur et la largeur
|
|
601
|
-
};
|
|
602
|
-
// Fonction pour appliquer les styles à un composant
|
|
603
|
-
const applyStyle = props => {
|
|
604
|
-
const {
|
|
605
|
-
getColor
|
|
606
|
-
} = useTheme(); // Utilise le hook pour obtenir les couleurs du thème
|
|
607
|
-
const {
|
|
608
|
-
mediaQueries,
|
|
609
|
-
devices
|
|
610
|
-
} = useResponsiveContext(); // Utilise le contexte responsive
|
|
611
|
-
// eslint-disable-next-line prefer-const
|
|
612
|
-
let styleProps = {}; // Stocke les styles
|
|
613
|
-
// Applique un curseur pointeur si un gestionnaire de clic est présent
|
|
614
|
-
if (props.onClick && styleProps.cursor == undefined) {
|
|
615
|
-
styleProps.cursor = 'pointer';
|
|
616
|
-
}
|
|
617
|
-
// Gère la taille de l'élément
|
|
618
|
-
const size = props.height !== undefined && props.width !== undefined && props.height === props.width ? props.height : props.size ? props.size : null;
|
|
619
|
-
if (size) {
|
|
620
|
-
setSize(size, styleProps); // Applique la taille
|
|
621
|
-
}
|
|
622
|
-
// Gère le padding et la marge
|
|
623
|
-
if (props.paddingHorizontal) {
|
|
624
|
-
styleProps.paddingLeft = props.paddingHorizontal;
|
|
625
|
-
styleProps.paddingRight = props.paddingHorizontal;
|
|
626
|
-
}
|
|
627
|
-
if (props.marginHorizontal) {
|
|
628
|
-
styleProps.marginLeft = props.marginHorizontal;
|
|
629
|
-
styleProps.marginRight = props.marginHorizontal;
|
|
630
|
-
}
|
|
631
|
-
if (props.paddingVertical) {
|
|
632
|
-
styleProps.paddingTop = props.paddingVertical;
|
|
633
|
-
styleProps.paddingBottom = props.paddingVertical;
|
|
634
|
-
}
|
|
635
|
-
if (props.marginVertical) {
|
|
636
|
-
styleProps.marginTop = props.marginVertical;
|
|
637
|
-
styleProps.marginBottom = props.marginVertical;
|
|
638
|
-
}
|
|
639
|
-
// Applique les ombres si spécifié
|
|
640
|
-
if (props.shadow) {
|
|
641
|
-
if (typeof props.shadow === 'number' || typeof props.shadow === 'boolean') {
|
|
642
|
-
const shadowValue = typeof props.shadow === 'number' && Shadows[props.shadow] !== undefined ? props.shadow : 2;
|
|
643
|
-
if (Shadows[shadowValue]) {
|
|
644
|
-
const shadowColor = Color.hex.rgb(Shadows[shadowValue].shadowColor).join(',');
|
|
645
|
-
styleProps['boxShadow'] = `${Shadows[shadowValue].shadowOffset.height}px ${Shadows[shadowValue].shadowOffset.width}px ${Shadows[shadowValue].shadowRadius}px rgba(${shadowColor},${Shadows[shadowValue].shadowOpacity})`;
|
|
646
|
-
}
|
|
647
|
-
} else {
|
|
648
|
-
const shadowColor = Color.hex.rgb(props.shadow.shadowColor).join(',');
|
|
649
|
-
styleProps['boxShadow'] = `${props.shadow.shadowOffset.height}px ${props.shadow.shadowOffset.width}px ${props.shadow.shadowRadius}px rgba(${shadowColor},${props.shadow.shadowOpacity})`;
|
|
650
|
-
}
|
|
651
|
-
delete props['shadow'];
|
|
652
|
-
}
|
|
653
|
-
// Gère les styles pour des médias spécifiques
|
|
654
|
-
if (props.only) {
|
|
655
|
-
const {
|
|
656
|
-
only,
|
|
657
|
-
...newProps
|
|
658
|
-
} = props;
|
|
659
|
-
only.map(o => {
|
|
660
|
-
});
|
|
661
|
-
const styleKeys = Object.keys(newProps).filter(key => isStyleProp(key));
|
|
662
|
-
styleKeys.map(key => {
|
|
663
|
-
only.map(o => {
|
|
664
|
-
props.media[o][key] = newProps[key];
|
|
665
|
-
});
|
|
666
|
-
delete props[key];
|
|
667
|
-
});
|
|
668
|
-
delete props['only'];
|
|
669
|
-
}
|
|
670
|
-
// Gère les styles CSS personnalisés
|
|
671
|
-
if (props.css) {
|
|
672
|
-
const {
|
|
673
|
-
css
|
|
674
|
-
} = props;
|
|
675
|
-
props = {
|
|
676
|
-
...css,
|
|
677
|
-
props
|
|
678
|
-
};
|
|
679
|
-
delete props['css'];
|
|
680
|
-
}
|
|
681
|
-
// Applique les styles
|
|
682
|
-
Object.keys(props).map(property => {
|
|
683
|
-
if (property !== 'shadow' && property !== 'size') {
|
|
684
|
-
if (isStyleProp(property) || property == 'on' || property == 'media') {
|
|
685
|
-
if (typeof props[property] === 'object') {
|
|
686
|
-
if (property === 'on') {
|
|
687
|
-
for (const event in props[property]) {
|
|
688
|
-
styleProps['&:' + event] = applyStyle(props[property][event]);
|
|
689
|
-
}
|
|
690
|
-
} else if (property === 'media') {
|
|
691
|
-
for (const screenOrDevices in props[property]) {
|
|
692
|
-
if (mediaQueries[screenOrDevices] !== undefined && props[property][screenOrDevices] !== undefined) {
|
|
693
|
-
styleProps['@media ' + mediaQueries[screenOrDevices]] = applyStyle(props[property][screenOrDevices]);
|
|
694
|
-
} else if (devices[screenOrDevices] !== undefined) {
|
|
695
|
-
for (const deviceScreen in devices[screenOrDevices]) {
|
|
696
|
-
if (mediaQueries[devices[screenOrDevices][deviceScreen]] !== undefined && props[property][screenOrDevices] !== undefined) {
|
|
697
|
-
styleProps['@media ' + mediaQueries[devices[screenOrDevices][deviceScreen]]] = applyStyle(props[property][screenOrDevices]);
|
|
698
|
-
}
|
|
699
|
-
}
|
|
700
|
-
}
|
|
701
|
-
}
|
|
702
|
-
} else {
|
|
703
|
-
styleProps[property] = applyStyle(props[property]);
|
|
704
|
-
}
|
|
705
|
-
} else if (typeof props[property] === 'number' && NumberPropsStyle[property] === undefined) {
|
|
706
|
-
styleProps[property] = props[property] + 'px';
|
|
707
|
-
} else if (property.toLowerCase().indexOf('color') !== -1) {
|
|
708
|
-
styleProps[property] = getColor(props[property]);
|
|
709
|
-
} else {
|
|
710
|
-
styleProps[property] = props[property];
|
|
711
|
-
}
|
|
712
|
-
}
|
|
713
|
-
}
|
|
714
|
-
});
|
|
715
|
-
return styleProps;
|
|
716
|
-
};
|
|
717
|
-
// Clés à exclure lors de la création du composant stylisé
|
|
718
|
-
const excludedKeys = /*#__PURE__*/new Set(['on', 'shadow', 'only', 'media', 'css', 'paddingHorizontal', 'paddingVertical', 'marginHorizontal', 'marginVertical']);
|
|
719
|
-
const includeKeys = /*#__PURE__*/new Set(['src', 'alt', 'style']);
|
|
720
|
-
// Crée un composant div stylisé, en excluant certaines props
|
|
721
|
-
const ElementComponent = /*#__PURE__*/styled.div.withConfig({
|
|
722
|
-
shouldForwardProp: key => {
|
|
723
|
-
return !excludedKeys.has(key) && !isStyleProp(key) || includeKeys.has(key);
|
|
724
|
-
}
|
|
725
|
-
})`
|
|
726
|
-
// Applique les styles dynamiques en utilisant la fonction applyStyle
|
|
727
|
-
${props => props.css}
|
|
728
|
-
`;
|
|
729
|
-
const useStyledProps = props => {
|
|
730
|
-
const styledProps = applyStyle(props);
|
|
731
|
-
// Filtrer les props pour exclure celles qui sont utilisées pour le style
|
|
732
|
-
const newProps = Object.keys(props).reduce((acc, key) => {
|
|
733
|
-
if (!excludedKeys.has(key) && !isStyleProp(key) || includeKeys.has(key)) {
|
|
734
|
-
acc[key] = props[key];
|
|
735
|
-
}
|
|
736
|
-
return acc;
|
|
737
|
-
}, {});
|
|
738
|
-
return {
|
|
739
|
-
newProps,
|
|
740
|
-
styledProps
|
|
741
|
-
};
|
|
742
|
-
};
|
|
743
|
-
const Element = props => {
|
|
744
|
-
// eslint-disable-next-line prefer-const
|
|
745
|
-
let {
|
|
746
|
-
onPress,
|
|
747
|
-
...rest
|
|
748
|
-
} = props;
|
|
749
|
-
// eslint-disable-next-line prefer-const
|
|
750
|
-
let {
|
|
751
|
-
newProps,
|
|
752
|
-
styledProps
|
|
753
|
-
} = useStyledProps(rest);
|
|
754
|
-
if (onPress) {
|
|
755
|
-
newProps.onClick = onPress;
|
|
756
|
-
}
|
|
757
|
-
// Rendu du composant avec les props
|
|
758
|
-
return /*#__PURE__*/React__default.createElement(ElementComponent, Object.assign({}, rest, {
|
|
759
|
-
css: styledProps
|
|
760
|
-
}));
|
|
761
|
-
};
|
|
762
|
-
|
|
763
|
-
const View = /*#__PURE__*/React__default.memo(props => /*#__PURE__*/React__default.createElement(Element, Object.assign({}, props)));
|
|
764
|
-
const Div = View;
|
|
765
|
-
const SafeArea = View;
|
|
766
|
-
const Scroll = /*#__PURE__*/React__default.memo(props => /*#__PURE__*/React__default.createElement(View, Object.assign({
|
|
767
|
-
overflow: 'auto'
|
|
768
|
-
}, props)));
|
|
769
|
-
const Span = /*#__PURE__*/React__default.memo(props => /*#__PURE__*/React__default.createElement(Element, Object.assign({}, props, {
|
|
770
|
-
as: "span"
|
|
771
|
-
})));
|
|
772
|
-
|
|
773
|
-
const Image = /*#__PURE__*/React__default.memo(props => /*#__PURE__*/React__default.createElement(Element, Object.assign({}, props, {
|
|
774
|
-
as: "img"
|
|
775
|
-
})));
|
|
776
|
-
|
|
777
|
-
const Text = /*#__PURE__*/React__default.memo(props => {
|
|
778
|
-
return /*#__PURE__*/React__default.createElement(Element, Object.assign({}, props));
|
|
779
|
-
});
|
|
780
|
-
|
|
781
|
-
// Utilisation de React.memo pour une meilleure performance
|
|
782
|
-
const Form = /*#__PURE__*/React__default.memo(props => /*#__PURE__*/React__default.createElement(Element, Object.assign({}, props, {
|
|
783
|
-
as: "form"
|
|
784
|
-
})));
|
|
785
|
-
const Input = /*#__PURE__*/React__default.memo(props => /*#__PURE__*/React__default.createElement(Element, Object.assign({}, props, {
|
|
786
|
-
as: "input"
|
|
787
|
-
})));
|
|
788
|
-
const Button = /*#__PURE__*/React__default.memo(props => /*#__PURE__*/React__default.createElement(Element, Object.assign({}, props, {
|
|
789
|
-
as: "button"
|
|
790
|
-
})));
|
|
791
|
-
|
|
792
|
-
const Typography = {
|
|
793
|
-
letterSpacings: {
|
|
794
|
-
tighter: -0.08,
|
|
795
|
-
tight: -0.4,
|
|
796
|
-
normal: 0,
|
|
797
|
-
wide: 0.4,
|
|
798
|
-
wider: 0.8,
|
|
799
|
-
widest: 1.6
|
|
800
|
-
},
|
|
801
|
-
lineHeights: {
|
|
802
|
-
xs: 10,
|
|
803
|
-
sm: 12,
|
|
804
|
-
md: 14,
|
|
805
|
-
lg: 16,
|
|
806
|
-
xl: 20,
|
|
807
|
-
'2xl': 24,
|
|
808
|
-
'3xl': 30,
|
|
809
|
-
'4xl': 36,
|
|
810
|
-
'5xl': 48,
|
|
811
|
-
'6xl': 64
|
|
812
|
-
},
|
|
813
|
-
fontWeights: {
|
|
814
|
-
hairline: 100,
|
|
815
|
-
thin: 200,
|
|
816
|
-
light: 300,
|
|
817
|
-
normal: 400,
|
|
818
|
-
medium: 500,
|
|
819
|
-
semiBold: 600,
|
|
820
|
-
bold: 700,
|
|
821
|
-
extraBold: 800,
|
|
822
|
-
black: 900
|
|
823
|
-
},
|
|
824
|
-
fontSizes: {
|
|
825
|
-
xs: 10,
|
|
826
|
-
sm: 12,
|
|
827
|
-
md: 14,
|
|
828
|
-
lg: 16,
|
|
829
|
-
xl: 20,
|
|
830
|
-
'2xl': 24,
|
|
831
|
-
'3xl': 30,
|
|
832
|
-
'4xl': 36,
|
|
833
|
-
'5xl': 48,
|
|
834
|
-
'6xl': 64
|
|
835
|
-
}
|
|
836
|
-
};
|
|
837
|
-
|
|
838
|
-
/**
|
|
839
|
-
* whether in browser env
|
|
840
|
-
*/
|
|
841
|
-
const isBrowser = () => typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined';
|
|
842
|
-
/**
|
|
843
|
-
* get window.g_initialProps
|
|
844
|
-
*/
|
|
845
|
-
const getWindowInitialProps = () => isBrowser() ? window.g_initialProps : undefined;
|
|
846
|
-
/**
|
|
847
|
-
* whether SSR success in client
|
|
848
|
-
*/
|
|
849
|
-
const isSSR = ! /*#__PURE__*/isBrowser();
|
|
850
|
-
function isDev() {
|
|
851
|
-
let dev = false;
|
|
852
|
-
if (isBrowser()) {
|
|
853
|
-
dev = !(window.location.hostname.indexOf('localhost') === -1);
|
|
854
|
-
}
|
|
855
|
-
return dev;
|
|
856
|
-
}
|
|
857
|
-
function isProd() {
|
|
858
|
-
if (isBrowser()) {
|
|
859
|
-
if (window && window.location && window.location.hostname) {
|
|
860
|
-
return window.location.hostname.includes('localhost') || window.location.hostname.includes('develop');
|
|
861
|
-
}
|
|
862
|
-
}
|
|
863
|
-
return false;
|
|
864
|
-
}
|
|
865
|
-
function isMobile() {
|
|
866
|
-
return navigator.userAgent.match(/(iPhone|iPod|Android|ios|iPad)/i);
|
|
867
|
-
}
|
|
868
|
-
|
|
869
|
-
const useMount = callback => {
|
|
870
|
-
React.useEffect(() => {
|
|
871
|
-
callback();
|
|
872
|
-
}, []);
|
|
873
|
-
};
|
|
874
|
-
|
|
875
|
-
const createQuery = (keyScreen, query, set) => {
|
|
876
|
-
const mql = window.matchMedia(query);
|
|
877
|
-
const onChange = () => {
|
|
878
|
-
if (!!mql.matches) {
|
|
879
|
-
set(keyScreen);
|
|
880
|
-
}
|
|
881
|
-
};
|
|
882
|
-
mql.addListener(onChange);
|
|
883
|
-
if (!!mql.matches) {
|
|
884
|
-
set(keyScreen);
|
|
885
|
-
}
|
|
886
|
-
return () => {
|
|
887
|
-
mql.removeListener(onChange);
|
|
888
|
-
};
|
|
889
|
-
};
|
|
890
|
-
const useResponsive = () => {
|
|
891
|
-
const {
|
|
892
|
-
breakpoints,
|
|
893
|
-
devices,
|
|
894
|
-
mediaQueries
|
|
895
|
-
} = useResponsiveContext();
|
|
896
|
-
const [screen, setScreen] = React.useState('xs');
|
|
897
|
-
const [orientation, setOrientation] = React.useState('landscape');
|
|
898
|
-
useMount(() => {
|
|
899
|
-
for (const screenSize in mediaQueries) {
|
|
900
|
-
createQuery(screenSize, mediaQueries[screenSize], setScreen);
|
|
901
|
-
}
|
|
902
|
-
createQuery('landscape', 'only screen and (orientation: landscape)', setOrientation);
|
|
903
|
-
createQuery('portrait', 'only screen and (orientation: portrait)', setOrientation);
|
|
904
|
-
});
|
|
905
|
-
const on = device => {
|
|
906
|
-
return devices[device].includes(screen);
|
|
907
|
-
};
|
|
908
|
-
const is = s => {
|
|
909
|
-
return s == screen;
|
|
910
|
-
};
|
|
911
|
-
return {
|
|
912
|
-
breakpoints,
|
|
913
|
-
devices,
|
|
914
|
-
orientation,
|
|
915
|
-
screen,
|
|
916
|
-
on,
|
|
917
|
-
is
|
|
918
|
-
};
|
|
919
|
-
};
|
|
920
|
-
|
|
921
|
-
exports.Button = Button;
|
|
922
|
-
exports.Div = Div;
|
|
923
|
-
exports.Element = Element;
|
|
924
|
-
exports.Form = Form;
|
|
925
|
-
exports.Image = Image;
|
|
926
|
-
exports.Input = Input;
|
|
927
|
-
exports.ResponsiveContext = ResponsiveContext;
|
|
928
|
-
exports.ResponsiveProvider = ResponsiveProvider;
|
|
929
|
-
exports.SafeArea = SafeArea;
|
|
930
|
-
exports.Scroll = Scroll;
|
|
931
|
-
exports.Shadows = Shadows;
|
|
932
|
-
exports.Span = Span;
|
|
933
|
-
exports.Text = Text;
|
|
934
|
-
exports.ThemeContext = ThemeContext;
|
|
935
|
-
exports.ThemeProvider = ThemeProvider;
|
|
936
|
-
exports.Typography = Typography;
|
|
937
|
-
exports.View = View;
|
|
938
|
-
exports.applyStyle = applyStyle;
|
|
939
|
-
exports.createQuery = createQuery;
|
|
940
|
-
exports.defaultColors = defaultColors;
|
|
941
|
-
exports.defaultThemeMain = defaultThemeMain;
|
|
942
|
-
exports.getWindowInitialProps = getWindowInitialProps;
|
|
943
|
-
exports.isBrowser = isBrowser;
|
|
944
|
-
exports.isDev = isDev;
|
|
945
|
-
exports.isMobile = isMobile;
|
|
946
|
-
exports.isProd = isProd;
|
|
947
|
-
exports.isSSR = isSSR;
|
|
948
|
-
exports.palette = palette;
|
|
949
|
-
exports.setSize = setSize;
|
|
950
|
-
exports.useMount = useMount;
|
|
951
|
-
exports.useResponsive = useResponsive;
|
|
952
|
-
exports.useResponsiveContext = useResponsiveContext;
|
|
953
|
-
exports.useTheme = useTheme;
|
|
954
|
-
//# sourceMappingURL=app-studio.cjs.development.js.map
|