1import { optionalRequire } from '../../navigation/routeBuilder';
2import ComponentListScreen, { ListElement } from '../ComponentListScreen';
3
4export const ImageScreens = [
5  {
6    name: 'Comparison with original image',
7    route: 'image/comparison',
8    options: {},
9    getComponent() {
10      return optionalRequire(() => require('./ImageComparisonScreen'));
11    },
12  },
13  {
14    name: 'List with thousands images',
15    route: 'image/flashlist',
16    options: {},
17    getComponent() {
18      return optionalRequire(() => require('./ImageFlashListScreen'));
19    },
20  },
21  {
22    name: 'Image formats',
23    route: 'image/formats',
24    getComponent() {
25      return optionalRequire(() => require('./ImageFormatsScreen'));
26    },
27  },
28  {
29    name: 'Resizable image',
30    route: 'image/resizable',
31    getComponent() {
32      return optionalRequire(() => require('./ImageResizableScreen'));
33    },
34  },
35  {
36    name: 'Content fit and position',
37    route: 'image/content-fit',
38    getComponent() {
39      return optionalRequire(() => require('./ImageContentFitScreen'));
40    },
41  },
42  {
43    name: 'Events',
44    route: 'image/events',
45    getComponent() {
46      return optionalRequire(() => require('./ImageEventsScreen'));
47    },
48  },
49  {
50    name: 'Prioritizing images',
51    route: 'image/priority',
52    getComponent() {
53      return optionalRequire(() => require('./ImagePriorityScreen'));
54    },
55  },
56  {
57    name: 'Placeholder',
58    route: 'image/placeholder',
59    getComponent() {
60      return optionalRequire(() => require('./ImagePlaceholderScreen'));
61    },
62  },
63  {
64    name: 'Transitions',
65    route: 'image/transitions',
66    getComponent() {
67      return optionalRequire(() => require('./ImageTransitionsScreen'));
68    },
69  },
70  {
71    name: 'Blurhash',
72    route: 'image/blurhash',
73    getComponent() {
74      return optionalRequire(() => require('./ImageBlurhashScreen'));
75    },
76  },
77  {
78    name: 'Custom cache key',
79    route: 'image/cache-key',
80    getComponent() {
81      return optionalRequire(() => require('./ImageCacheKeyScreen'));
82    },
83  },
84];
85
86export default function ImageScreen() {
87  const apis: ListElement[] = ImageScreens.map((screen) => {
88    return {
89      name: screen.name,
90      isAvailable: true,
91      route: `/components/${screen.route}`,
92    };
93  });
94  return <ComponentListScreen apis={apis} sort={false} />;
95}
96