@janrankenhohn/react-thumbnail-list 0.5.1 → 0.5.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.
Files changed (3) hide show
  1. package/dist/index.cjs.js +545 -252
  2. package/dist/index.esm.js +545 -252
  3. package/package.json +1 -1
package/dist/index.cjs.js CHANGED
@@ -20,81 +20,189 @@ var ClearIcon__default = /*#__PURE__*/_interopDefaultLegacy(ClearIcon);
20
20
  var SwapVertIcon__default = /*#__PURE__*/_interopDefaultLegacy(SwapVertIcon);
21
21
  var SortIcon__default = /*#__PURE__*/_interopDefaultLegacy(SortIcon);
22
22
 
23
- const ThumbnailListItemContext = React.createContext(undefined);
24
- const useThumbnailListItemContext = () => {
25
- const context = React.useContext(ThumbnailListItemContext);
26
- if (!context) {
27
- throw new Error('no context provider available');
28
- }
29
- return context;
23
+ const ThumbnailListItemContext = /*#__PURE__*/React.createContext(undefined);
24
+ const useThumbnailListItemContext = () => {
25
+ const context = React.useContext(ThumbnailListItemContext);
26
+ if (!context) {
27
+ throw new Error('no context provider available');
28
+ }
29
+ return context;
30
30
  };
31
31
 
32
32
  /**
33
33
  * Creates a ellipies text with webkit css styles
34
34
  * @param props lineClamp: lines till ellipses
35
35
  * @returns component
36
- */
37
- function EllipsisContainer(props) {
38
- const EllipsisContainer = material.styled('div')((p) => ({
39
- [p.theme.breakpoints.up('xs')]: {
40
- overflow: 'hidden',
41
- display: '-webkit-box',
42
- WebkitLineClamp: props.lineClamp.xs.toString() /* number of lines to show */,
43
- WebkitBoxOrient: 'vertical',
44
- },
45
- [p.theme.breakpoints.up('sm')]: {
46
- overflow: 'hidden',
47
- display: '-webkit-box',
48
- WebkitLineClamp: props.lineClamp.sm.toString() /* number of lines to show */,
49
- WebkitBoxOrient: 'vertical' /* number of lines to show */,
50
- },
51
- }));
52
- return jsxRuntime.jsx(EllipsisContainer, { children: props.children });
36
+ */
37
+ function EllipsisContainer(props) {
38
+ const EllipsisContainer = material.styled('div')(p => ({
39
+ [p.theme.breakpoints.up('xs')]: {
40
+ overflow: 'hidden',
41
+ display: '-webkit-box',
42
+ WebkitLineClamp: props.lineClamp.xs.toString() /* number of lines to show */,
43
+ WebkitBoxOrient: 'vertical'
44
+ },
45
+ [p.theme.breakpoints.up('sm')]: {
46
+ overflow: 'hidden',
47
+ display: '-webkit-box',
48
+ WebkitLineClamp: props.lineClamp.sm.toString() /* number of lines to show */,
49
+ WebkitBoxOrient: 'vertical' /* number of lines to show */
50
+ }
51
+ }));
52
+ return jsxRuntime.jsx(EllipsisContainer, {
53
+ children: props.children
54
+ });
53
55
  }
54
56
 
55
- function ThumbnailListItemTitle(props) {
56
- const StyledCardContent = material.styled('div')((p) => ({
57
- [p.theme.breakpoints.up('xs')]: {
58
- padding: p.theme.spacing(1),
59
- flex: '1 0 auto',
60
- '&:last-child': { paddingBottom: 0 },
61
- overflow: 'hidden',
62
- },
63
- }));
64
- console.log('item title rerenders');
65
- return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(material.Box, { children: jsxRuntime.jsxs(StyledCardContent, { children: [jsxRuntime.jsx(EllipsisContainer, { lineClamp: { xs: 1, sm: 2 }, children: jsxRuntime.jsx(material.Typography, { variant: "subtitle2", sx: { fontWeight: 'bold' }, children: props.title }) }), jsxRuntime.jsx(system.Stack, { direction: "row", gap: 1, children: jsxRuntime.jsx(EllipsisContainer, { lineClamp: { xs: 1, sm: 2 }, children: jsxRuntime.jsx(material.Typography, { variant: "subtitle2", sx: { fontSize: '0.84rem' }, color: "text.secondary", children: props.subTitle }) }) })] }) }) }));
57
+ function ThumbnailListItemTitle(props) {
58
+ const StyledCardContent = material.styled('div')(p => ({
59
+ [p.theme.breakpoints.up('xs')]: {
60
+ padding: p.theme.spacing(1),
61
+ flex: '1 0 auto',
62
+ '&:last-child': {
63
+ paddingBottom: 0
64
+ },
65
+ overflow: 'hidden'
66
+ }
67
+ }));
68
+ console.log('item title rerenders');
69
+ return jsxRuntime.jsx(jsxRuntime.Fragment, {
70
+ children: jsxRuntime.jsx(material.Box, {
71
+ children: jsxRuntime.jsxs(StyledCardContent, {
72
+ children: [jsxRuntime.jsx(EllipsisContainer, {
73
+ lineClamp: {
74
+ xs: 1,
75
+ sm: 2
76
+ },
77
+ children: jsxRuntime.jsx(material.Typography, {
78
+ variant: "subtitle2",
79
+ sx: {
80
+ fontWeight: 'bold'
81
+ },
82
+ children: props.title
83
+ })
84
+ }), jsxRuntime.jsx(system.Stack, {
85
+ direction: "row",
86
+ gap: 1,
87
+ children: jsxRuntime.jsx(EllipsisContainer, {
88
+ lineClamp: {
89
+ xs: 1,
90
+ sm: 2
91
+ },
92
+ children: jsxRuntime.jsx(material.Typography, {
93
+ variant: "subtitle2",
94
+ sx: {
95
+ fontSize: '0.84rem'
96
+ },
97
+ color: "text.secondary",
98
+ children: props.subTitle
99
+ })
100
+ })
101
+ })]
102
+ })
103
+ })
104
+ });
66
105
  }
67
106
 
68
- const ThumbnailListItem = (props) => {
69
- console.log('ThumbnailListItems renders');
70
- return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(material.Card, { sx: { display: 'flex' }, children: jsxRuntime.jsx(material.CardActionArea, { disabled: !props.onClick, onClick: () => props.onClick(props.id), children: jsxRuntime.jsxs(material.Stack, { direction: "row", width: "100%", children: [jsxRuntime.jsx("img", { src: props.thumbnailUrl, width: '45%' }), jsxRuntime.jsxs(material.Stack, { direction: "row", justifyContent: "space-between", width: "100%", gap: 1, children: [jsxRuntime.jsx(ThumbnailListItemTitle, { title: props.title, subTitle: props.subTitle }), props.infoLabel] })] }) }) }) }));
71
- };
72
- var ThumbnailListItem$1 = React__default["default"].memo(ThumbnailListItem);
107
+ const ThumbnailListItem = props => {
108
+ console.log('ThumbnailListItems renders');
109
+ return jsxRuntime.jsx(jsxRuntime.Fragment, {
110
+ children: jsxRuntime.jsx(material.Card, {
111
+ sx: {
112
+ display: 'flex'
113
+ },
114
+ children: jsxRuntime.jsx(material.CardActionArea, {
115
+ disabled: !props.onClick,
116
+ onClick: () => props.onClick(props.id),
117
+ children: jsxRuntime.jsxs(material.Stack, {
118
+ direction: "row",
119
+ width: "100%",
120
+ children: [jsxRuntime.jsx("img", {
121
+ src: props.thumbnailUrl,
122
+ width: '45%'
123
+ }), jsxRuntime.jsxs(material.Stack, {
124
+ direction: "row",
125
+ justifyContent: "space-between",
126
+ width: "100%",
127
+ gap: 1,
128
+ children: [jsxRuntime.jsx(ThumbnailListItemTitle, {
129
+ title: props.title,
130
+ subTitle: props.subTitle
131
+ }), props.infoLabel]
132
+ })]
133
+ })
134
+ })
135
+ })
136
+ });
137
+ };
138
+ var ThumbnailListItem$1 = /*#__PURE__*/React__default["default"].memo(ThumbnailListItem);
73
139
 
74
- const RatioWrapper = material.styled('div')(() => ({
75
- // Assuming a 16:9 aspect ratio
76
- paddingTop: '27.75%',
77
- position: 'relative',
78
- width: '100%',
79
- '& > *': {
80
- position: 'absolute',
81
- top: 0,
82
- left: 0,
83
- right: 0,
84
- bottom: 0,
85
- },
86
- }));
87
- function ThumbnailListMainContent(props) {
88
- const { items, isLoading } = useThumbnailListItemContext();
89
- console.log('main content rerenders');
90
- const memoizedItems = React.useMemo(() => {
91
- return items.map((item) => (jsxRuntime.jsx(material.Grid, { item: true, xs: props.muiBreakpoints.xs, sm: props.muiBreakpoints.sm, md: props.muiBreakpoints.md, lg: props.muiBreakpoints.lg, xl: props.muiBreakpoints.xl, children: jsxRuntime.jsx(RatioWrapper, { children: jsxRuntime.jsx(ThumbnailListItem$1, { id: item.id, thumbnailUrl: item.thumbnailUrl, title: item.title, subTitle: item.subTitle, infoLabel: item.label, onClick: item.onClick }) }) }, item.id)));
92
- }, [items, props.muiBreakpoints]);
93
- return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(material.Box, { sx: { mt: 0.75, mb: 0.75 }, children: jsxRuntime.jsx(material.LinearProgress, { sx: { opacity: isLoading ? 1 : 0 } }) }), jsxRuntime.jsx(material.Grid, { container: true, spacing: props.spacing, children: memoizedItems })] }));
94
- }
95
- ThumbnailListMainContent.defaultProps = {
96
- spacing: 2,
97
- muiBreakpoints: { xs: 12, sm: 6, md: 6, lg: 4, xl: 3 },
140
+ const RatioWrapper = material.styled('div')(() => ({
141
+ // Assuming a 16:9 aspect ratio
142
+ paddingTop: '27.75%',
143
+ position: 'relative',
144
+ width: '100%',
145
+ '& > *': {
146
+ position: 'absolute',
147
+ top: 0,
148
+ left: 0,
149
+ right: 0,
150
+ bottom: 0
151
+ }
152
+ }));
153
+ function ThumbnailListMainContent(props) {
154
+ const {
155
+ items,
156
+ isLoading
157
+ } = useThumbnailListItemContext();
158
+ console.log('main content rerenders');
159
+ const memoizedItems = React.useMemo(() => {
160
+ return items.map(item => jsxRuntime.jsx(material.Grid, {
161
+ item: true,
162
+ xs: props.muiBreakpoints.xs,
163
+ sm: props.muiBreakpoints.sm,
164
+ md: props.muiBreakpoints.md,
165
+ lg: props.muiBreakpoints.lg,
166
+ xl: props.muiBreakpoints.xl,
167
+ children: jsxRuntime.jsx(RatioWrapper, {
168
+ children: jsxRuntime.jsx(ThumbnailListItem$1, {
169
+ id: item.id,
170
+ thumbnailUrl: item.thumbnailUrl,
171
+ title: item.title,
172
+ subTitle: item.subTitle,
173
+ infoLabel: item.label,
174
+ onClick: item.onClick
175
+ })
176
+ })
177
+ }, item.id));
178
+ }, [items, props.muiBreakpoints]);
179
+ return jsxRuntime.jsxs(jsxRuntime.Fragment, {
180
+ children: [jsxRuntime.jsx(material.Box, {
181
+ sx: {
182
+ mt: 0.75,
183
+ mb: 0.75
184
+ },
185
+ children: jsxRuntime.jsx(material.LinearProgress, {
186
+ sx: {
187
+ opacity: isLoading ? 1 : 0
188
+ }
189
+ })
190
+ }), jsxRuntime.jsx(material.Grid, {
191
+ container: true,
192
+ spacing: props.spacing,
193
+ children: memoizedItems
194
+ })]
195
+ });
196
+ }
197
+ ThumbnailListMainContent.defaultProps = {
198
+ spacing: 2,
199
+ muiBreakpoints: {
200
+ xs: 12,
201
+ sm: 6,
202
+ md: 6,
203
+ lg: 4,
204
+ xl: 3
205
+ }
98
206
  };
99
207
 
100
208
  /**
@@ -102,57 +210,66 @@ ThumbnailListMainContent.defaultProps = {
102
210
  * @param values The array that should be sorted
103
211
  * @param orderType The key of the entity that the array should be sorted by
104
212
  * @returns A new reference of the ordered array
105
- */
106
- function orderByArray(values, orderType) {
107
- return [...values].sort((a, b) => {
108
- const valueA = getComparableValue(a[orderType]);
109
- const valueB = getComparableValue(b[orderType]);
110
- return compareValues(valueA, valueB);
111
- });
112
- }
113
- function getComparableValue(value) {
114
- if (typeof value === 'number') {
115
- return value;
116
- }
117
- else {
118
- return String(value);
119
- }
120
- }
121
- function compareValues(a, b) {
122
- if (typeof a === 'string' && typeof b === 'string') {
123
- return a.localeCompare(b, undefined, { sensitivity: 'base' });
124
- }
125
- else {
126
- return a < b ? -1 : a > b ? 1 : 0;
127
- }
128
- }
129
- function filterByTag(array, tagType, condition) {
130
- const filteredArray = array.filter((item) => {
131
- const tagValue = item[tagType];
132
- return condition ? condition(tagValue) : !!tagValue;
133
- });
134
- console.log('filter array');
135
- console.log(filteredArray);
136
- return [...filteredArray];
213
+ */
214
+ function orderByArray(values, orderType) {
215
+ return [...values].sort((a, b) => {
216
+ const valueA = getComparableValue(a[orderType]);
217
+ const valueB = getComparableValue(b[orderType]);
218
+ return compareValues(valueA, valueB);
219
+ });
220
+ }
221
+ function getComparableValue(value) {
222
+ if (typeof value === 'number') {
223
+ return value;
224
+ } else {
225
+ return String(value);
226
+ }
227
+ }
228
+ function compareValues(a, b) {
229
+ if (typeof a === 'string' && typeof b === 'string') {
230
+ return a.localeCompare(b, undefined, {
231
+ sensitivity: 'base'
232
+ });
233
+ } else {
234
+ return a < b ? -1 : a > b ? 1 : 0;
235
+ }
236
+ }
237
+ function filterByTag(array, tagType, condition) {
238
+ const filteredArray = array.filter(item => {
239
+ const tagValue = item[tagType];
240
+ return condition ? condition(tagValue) : !!tagValue;
241
+ });
242
+ console.log('filter array');
243
+ console.log(filteredArray);
244
+ return [...filteredArray];
137
245
  }
138
246
 
139
- const useTagFilteredThumbnailListItems = ({ allItems, initialTag, initialCondition, }) => {
140
- const [tagAndCondition, setTagAndCondition] = React.useState({ tag: initialTag, condition: initialCondition });
141
- const setTagWithCondition = (t, c) => {
142
- setTagAndCondition({ tag: t, condition: c });
143
- };
144
- const tagFilteredItems = React.useMemo(() => {
145
- const tagFiltered = tagAndCondition.tag === 'id'
146
- ? allItems
147
- : filterByTag(allItems, tagAndCondition.tag, tagAndCondition.condition);
148
- return tagFiltered;
149
- }, [allItems, tagAndCondition]);
150
- return {
151
- tagAndCondition,
152
- setTagAndCondition,
153
- tagFilteredItems,
154
- setTagWithCondition,
155
- };
247
+ const useTagFilteredThumbnailListItems = _ref => {
248
+ let {
249
+ allItems,
250
+ initialTag,
251
+ initialCondition
252
+ } = _ref;
253
+ const [tagAndCondition, setTagAndCondition] = React.useState({
254
+ tag: initialTag,
255
+ condition: initialCondition
256
+ });
257
+ const setTagWithCondition = (t, c) => {
258
+ setTagAndCondition({
259
+ tag: t,
260
+ condition: c
261
+ });
262
+ };
263
+ const tagFilteredItems = React.useMemo(() => {
264
+ const tagFiltered = tagAndCondition.tag === 'id' ? allItems : filterByTag(allItems, tagAndCondition.tag, tagAndCondition.condition);
265
+ return tagFiltered;
266
+ }, [allItems, tagAndCondition]);
267
+ return {
268
+ tagAndCondition,
269
+ setTagAndCondition,
270
+ tagFilteredItems,
271
+ setTagWithCondition
272
+ };
156
273
  };
157
274
 
158
275
  /**
@@ -160,81 +277,153 @@ const useTagFilteredThumbnailListItems = ({ allItems, initialTag, initialConditi
160
277
  * @param allEvents event list that will be formatted
161
278
  * @param initialSearchTerm
162
279
  * @returns
163
- */
164
- const useFilteredThumbnailListItems = (allItems, initialSearchTerm = '') => {
165
- const [searchTerm, setSearchTerm] = React.useState(initialSearchTerm);
166
- const filteredItems = React.useMemo(() => {
167
- const filtered = [...allItems].filter((item) => item.title.toLowerCase().includes(searchTerm.toLowerCase()));
168
- return filtered;
169
- }, [allItems, searchTerm]);
170
- return { searchTerm, setSearchTerm, filteredItems };
280
+ */
281
+ const useFilteredThumbnailListItems = function (allItems) {
282
+ let initialSearchTerm = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
283
+ const [searchTerm, setSearchTerm] = React.useState(initialSearchTerm);
284
+ const filteredItems = React.useMemo(() => {
285
+ const filtered = [...allItems].filter(item => item.title.toLowerCase().includes(searchTerm.toLowerCase()));
286
+ return filtered;
287
+ }, [allItems, searchTerm]);
288
+ return {
289
+ searchTerm,
290
+ setSearchTerm,
291
+ filteredItems
292
+ };
171
293
  };
172
294
 
173
- const useSortedThumbnailListItems = (allItems, initialSortBy, initialSortAscending) => {
174
- const [sortBy, setSortBy] = React.useState(initialSortBy);
175
- const [sortAscending, setSortAscending] = React.useState(initialSortAscending);
176
- const sortedItems = React.useMemo(() => {
177
- let sorted = orderByArray(allItems, sortBy);
178
- if (!sortAscending) {
179
- sorted = sorted.reverse();
180
- }
181
- return sorted;
182
- }, [allItems, sortBy, sortAscending]);
183
- return { sortBy, sortAscending, setSortBy, setSortAscending, sortedItems };
295
+ const useSortedThumbnailListItems = (allItems, initialSortBy, initialSortAscending) => {
296
+ const [sortBy, setSortBy] = React.useState(initialSortBy);
297
+ const [sortAscending, setSortAscending] = React.useState(initialSortAscending);
298
+ const sortedItems = React.useMemo(() => {
299
+ let sorted = orderByArray(allItems, sortBy);
300
+ if (!sortAscending) {
301
+ sorted = sorted.reverse();
302
+ }
303
+ return sorted;
304
+ }, [allItems, sortBy, sortAscending]);
305
+ return {
306
+ sortBy,
307
+ sortAscending,
308
+ setSortBy,
309
+ setSortAscending,
310
+ sortedItems
311
+ };
184
312
  };
185
313
 
186
- const defaultConfiguration = {
187
- sortBy: 'id',
188
- sortAscending: true,
189
- tag: 'id',
314
+ const defaultConfiguration = {
315
+ sortBy: 'id',
316
+ sortAscending: true,
317
+ tag: 'id'
190
318
  };
191
319
 
192
- const ThumbnailListSearchField = () => {
193
- const [input, setInput] = React.useState('');
194
- const [showClearIcon, setShowClearIcon] = React.useState('hidden');
195
- const { setSearchTerm } = useThumbnailListItemContext();
196
- console.log('Searchfield rerenders');
197
- const handleChange = (value) => {
198
- setInput(value);
199
- setShowClearIcon(value === '' ? 'hidden' : '');
200
- };
201
- const debouncedSetSearchTerm = React.useCallback(lodash.debounce(setSearchTerm, 50), []);
202
- React.useEffect(() => {
203
- debouncedSetSearchTerm(input);
204
- return () => {
205
- debouncedSetSearchTerm.cancel();
206
- };
207
- }, [input, debouncedSetSearchTerm]);
208
- return (jsxRuntime.jsx(material.Box, { sx: { marginLeft: 'auto' }, children: jsxRuntime.jsx(material.FormControl, { children: jsxRuntime.jsx(material.TextField, { fullWidth: true, value: input, size: "small", variant: "outlined", onChange: (event) => handleChange(event.target.value), InputProps: {
209
- startAdornment: (jsxRuntime.jsx(material.InputAdornment, { position: "start", children: jsxRuntime.jsx(SearchIcon__default["default"], {}) })),
210
- endAdornment: (jsxRuntime.jsx(material.InputAdornment, { position: "end", children: jsxRuntime.jsx(material.IconButton, { onClick: () => handleChange(''), sx: { visibility: showClearIcon, padding: 0 }, children: jsxRuntime.jsx(ClearIcon__default["default"], {}) }) })),
211
- } }) }) }));
212
- };
213
- ThumbnailListSearchField.defaultProps = {
214
- align: 'start',
215
- };
216
- var ThumbnailListSearchField$1 = React__default["default"].memo(ThumbnailListSearchField);
320
+ const ThumbnailListSearchField = () => {
321
+ const [input, setInput] = React.useState('');
322
+ const [showClearIcon, setShowClearIcon] = React.useState('hidden');
323
+ const {
324
+ setSearchTerm
325
+ } = useThumbnailListItemContext();
326
+ console.log('Searchfield rerenders');
327
+ const handleChange = value => {
328
+ setInput(value);
329
+ setShowClearIcon(value === '' ? 'hidden' : '');
330
+ };
331
+ const debouncedSetSearchTerm = React.useCallback(lodash.debounce(setSearchTerm, 50), []);
332
+ React.useEffect(() => {
333
+ debouncedSetSearchTerm(input);
334
+ return () => {
335
+ debouncedSetSearchTerm.cancel();
336
+ };
337
+ }, [input, debouncedSetSearchTerm]);
338
+ return jsxRuntime.jsx(material.Box, {
339
+ sx: {
340
+ marginLeft: 'auto'
341
+ },
342
+ children: jsxRuntime.jsx(material.FormControl, {
343
+ children: jsxRuntime.jsx(material.TextField, {
344
+ fullWidth: true,
345
+ value: input,
346
+ size: "small",
347
+ variant: "outlined",
348
+ onChange: event => handleChange(event.target.value),
349
+ InputProps: {
350
+ startAdornment: jsxRuntime.jsx(material.InputAdornment, {
351
+ position: "start",
352
+ children: jsxRuntime.jsx(SearchIcon__default["default"], {})
353
+ }),
354
+ endAdornment: jsxRuntime.jsx(material.InputAdornment, {
355
+ position: "end",
356
+ children: jsxRuntime.jsx(material.IconButton, {
357
+ onClick: () => handleChange(''),
358
+ sx: {
359
+ visibility: showClearIcon,
360
+ padding: 0
361
+ },
362
+ children: jsxRuntime.jsx(ClearIcon__default["default"], {})
363
+ })
364
+ })
365
+ }
366
+ })
367
+ })
368
+ });
369
+ };
370
+ ThumbnailListSearchField.defaultProps = {
371
+ align: 'start'
372
+ };
373
+ var ThumbnailListSearchField$1 = /*#__PURE__*/React__default["default"].memo(ThumbnailListSearchField);
217
374
 
218
- function ThumbnailListFilterTag(props) {
219
- const theme = material.useTheme();
220
- const handleOnClick = (value) => {
221
- if (props.onClickCallback) {
222
- props.onClickCallback(value);
223
- }
224
- };
225
- return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: material.useMediaQuery(theme.breakpoints.up(props.collapseBreakpoint ?? 0)) || !props.icon ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(material.Chip, { label: props.label, variant: props.variant, onClick: props.onClickCallback ? () => handleOnClick(props.value) : undefined }) })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(material.Tooltip, { title: props.label, children: jsxRuntime.jsx(material.IconButton, { onClick: props.onClickCallback ? () => handleOnClick(props.value) : undefined, children: props.icon }) }) })) }));
375
+ function ThumbnailListFilterTag(props) {
376
+ var _props$collapseBreakp;
377
+ const theme = material.useTheme();
378
+ const handleOnClick = value => {
379
+ if (props.onClickCallback) {
380
+ props.onClickCallback(value);
381
+ }
382
+ };
383
+ return jsxRuntime.jsx(jsxRuntime.Fragment, {
384
+ children: material.useMediaQuery(theme.breakpoints.up((_props$collapseBreakp = props.collapseBreakpoint) !== null && _props$collapseBreakp !== void 0 ? _props$collapseBreakp : 0)) || !props.icon ? jsxRuntime.jsx(jsxRuntime.Fragment, {
385
+ children: jsxRuntime.jsx(material.Chip, {
386
+ label: props.label,
387
+ variant: props.variant,
388
+ onClick: props.onClickCallback ? () => handleOnClick(props.value) : undefined
389
+ })
390
+ }) : jsxRuntime.jsx(jsxRuntime.Fragment, {
391
+ children: jsxRuntime.jsx(material.Tooltip, {
392
+ title: props.label,
393
+ children: jsxRuntime.jsx(material.IconButton, {
394
+ onClick: props.onClickCallback ? () => handleOnClick(props.value) : undefined,
395
+ children: props.icon
396
+ })
397
+ })
398
+ })
399
+ });
226
400
  }
227
401
 
228
- function ThumbnailListFilterTags(props) {
229
- const { tagFilterCallback, tagAndCondition } = useThumbnailListItemContext();
230
- console.log('filter tags rerenders');
231
- return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: props.tags.map((tag, index) => {
232
- return (jsxRuntime.jsx(ThumbnailListFilterTag, { label: tag.label, value: tag.key.toString(), variant: tagAndCondition.tag === tag.key ? 'filled' : 'outlined', collapseBreakpoint: props.muiCollapseBreakpoint, onClickCallback: (value) => tagFilterCallback({ tag: value, condition: tag.condition }), icon: tag.icon }, `${index}_${tag.key.toString()}`));
233
- }) }));
234
- }
235
- ThumbnailListFilterTags.defaultProps = {
236
- align: 'start',
237
- muiCollapseBreakpoint: 'md',
402
+ function ThumbnailListFilterTags(props) {
403
+ const {
404
+ tagFilterCallback,
405
+ tagAndCondition
406
+ } = useThumbnailListItemContext();
407
+ console.log('filter tags rerenders');
408
+ return jsxRuntime.jsx(jsxRuntime.Fragment, {
409
+ children: props.tags.map((tag, index) => {
410
+ return jsxRuntime.jsx(ThumbnailListFilterTag, {
411
+ label: tag.label,
412
+ value: tag.key.toString(),
413
+ variant: tagAndCondition.tag === tag.key ? 'filled' : 'outlined',
414
+ collapseBreakpoint: props.muiCollapseBreakpoint,
415
+ onClickCallback: value => tagFilterCallback({
416
+ tag: value,
417
+ condition: tag.condition
418
+ }),
419
+ icon: tag.icon
420
+ }, "".concat(index, "_").concat(tag.key.toString()));
421
+ })
422
+ });
423
+ }
424
+ ThumbnailListFilterTags.defaultProps = {
425
+ align: 'start',
426
+ muiCollapseBreakpoint: 'md'
238
427
  };
239
428
 
240
429
  /**
@@ -246,56 +435,133 @@ ThumbnailListFilterTags.defaultProps = {
246
435
  * @param props.onChangeCallback * Callback function that gets triggered once a item is selected
247
436
  * @param props.items * Array of items (name-value-pairs) that will be the select options
248
437
  * @returns Drowpdown Input Component
249
- */
250
- function DropdownInput(props) {
251
- const [value, setValue] = React.useState(props.defaultValue ?? '');
252
- const theme = material.useTheme();
253
- const [anchorEl, setAnchorEl] = React.useState(null);
254
- const handleChange = (value, name) => {
255
- setValue(value);
256
- setAnchorEl(null);
257
- props.onChangeCallback(value, name);
258
- };
259
- return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [material.useMediaQuery(theme.breakpoints.up(props.collapseBreakpoint ?? 0)) ? (jsxRuntime.jsxs(material.FormControl, { sx: { width: props.width, textAlign: 'start' }, children: [jsxRuntime.jsx(material.InputLabel, { size: "small", children: props.label }), jsxRuntime.jsx(material.Select, { value: value, size: "small", label: props.label, onChange: (event) => handleChange(event.target.value, event.target.name), children: props.items.map((item) => {
260
- return (jsxRuntime.jsx(material.MenuItem, { value: item.value, children: item.name }, item.value));
261
- }) })] })) : (jsxRuntime.jsx(material.IconButton
262
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
263
- , {
264
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
265
- onClick: (event) => setAnchorEl(event.currentTarget), children: props.icon })), jsxRuntime.jsx(material.Menu, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: () => setAnchorEl(null), children: props.items.map((item) => (jsxRuntime.jsx(material.MenuItem, { onClick: () => handleChange(item.value), children: item.name }, item.value))) })] }));
438
+ */
439
+ function DropdownInput(props) {
440
+ var _props$defaultValue, _props$collapseBreakp;
441
+ const [value, setValue] = React.useState((_props$defaultValue = props.defaultValue) !== null && _props$defaultValue !== void 0 ? _props$defaultValue : '');
442
+ const theme = material.useTheme();
443
+ const [anchorEl, setAnchorEl] = React.useState(null);
444
+ const handleChange = (value, name) => {
445
+ setValue(value);
446
+ setAnchorEl(null);
447
+ props.onChangeCallback(value, name);
448
+ };
449
+ return jsxRuntime.jsxs(jsxRuntime.Fragment, {
450
+ children: [material.useMediaQuery(theme.breakpoints.up((_props$collapseBreakp = props.collapseBreakpoint) !== null && _props$collapseBreakp !== void 0 ? _props$collapseBreakp : 0)) ? jsxRuntime.jsxs(material.FormControl, {
451
+ sx: {
452
+ width: props.width,
453
+ textAlign: 'start'
454
+ },
455
+ children: [jsxRuntime.jsx(material.InputLabel, {
456
+ size: "small",
457
+ children: props.label
458
+ }), jsxRuntime.jsx(material.Select, {
459
+ value: value,
460
+ size: "small",
461
+ label: props.label,
462
+ onChange: event => handleChange(event.target.value, event.target.name),
463
+ children: props.items.map(item => {
464
+ return jsxRuntime.jsx(material.MenuItem, {
465
+ value: item.value,
466
+ children: item.name
467
+ }, item.value);
468
+ })
469
+ })]
470
+ }) : jsxRuntime.jsx(material.IconButton
471
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
472
+ , {
473
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
474
+ onClick: event => setAnchorEl(event.currentTarget),
475
+ children: props.icon
476
+ }), jsxRuntime.jsx(material.Menu, {
477
+ anchorEl: anchorEl,
478
+ open: Boolean(anchorEl),
479
+ onClose: () => setAnchorEl(null),
480
+ children: props.items.map(item => jsxRuntime.jsx(material.MenuItem, {
481
+ onClick: () => handleChange(item.value),
482
+ children: item.name
483
+ }, item.value))
484
+ })]
485
+ });
266
486
  }
267
487
 
268
- function ThumbnailListHeaderSort(props) {
269
- const { setSortAscending, sortAscending, setSortBy, sortBy } = useThumbnailListItemContext();
270
- console.log('Header sort rerenders');
271
- return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(material.Box, { sx: { minWidth: '80px' }, children: [jsxRuntime.jsx(material.Tooltip, { title: "asc/desc", children: jsxRuntime.jsx(material.IconButton, { onClick: () => setSortAscending(!sortAscending), children: jsxRuntime.jsx(SwapVertIcon__default["default"], {}) }) }), jsxRuntime.jsx(DropdownInput, { width: "130px", collapseBreakpoint: props.muiBreakpoint, label: 'sort', defaultValue: sortBy, icon: jsxRuntime.jsx(material.Tooltip, { title: 'sort', children: jsxRuntime.jsx(SortIcon__default["default"], {}) }), items: props.items.map((i) => {
272
- return { name: i.label, value: i.key.toString() };
273
- }), onChangeCallback: (value) => setSortBy(value) })] }) }));
274
- }
275
- ThumbnailListHeaderSort.defaultProps = {
276
- align: 'start',
277
- muiBreakpoint: 'md',
488
+ function ThumbnailListHeaderSort(props) {
489
+ const {
490
+ setSortAscending,
491
+ sortAscending,
492
+ setSortBy,
493
+ sortBy
494
+ } = useThumbnailListItemContext();
495
+ console.log('Header sort rerenders');
496
+ return jsxRuntime.jsx(jsxRuntime.Fragment, {
497
+ children: jsxRuntime.jsxs(material.Box, {
498
+ sx: {
499
+ minWidth: '80px'
500
+ },
501
+ children: [jsxRuntime.jsx(material.Tooltip, {
502
+ title: "asc/desc",
503
+ children: jsxRuntime.jsx(material.IconButton, {
504
+ onClick: () => setSortAscending(!sortAscending),
505
+ children: jsxRuntime.jsx(SwapVertIcon__default["default"], {})
506
+ })
507
+ }), jsxRuntime.jsx(DropdownInput, {
508
+ width: "130px",
509
+ collapseBreakpoint: props.muiBreakpoint,
510
+ label: 'sort',
511
+ defaultValue: sortBy,
512
+ icon: jsxRuntime.jsx(material.Tooltip, {
513
+ title: 'sort',
514
+ children: jsxRuntime.jsx(SortIcon__default["default"], {})
515
+ }),
516
+ items: props.items.map(i => {
517
+ return {
518
+ name: i.label,
519
+ value: i.key.toString()
520
+ };
521
+ }),
522
+ onChangeCallback: value => setSortBy(value)
523
+ })]
524
+ })
525
+ });
526
+ }
527
+ ThumbnailListHeaderSort.defaultProps = {
528
+ align: 'start',
529
+ muiBreakpoint: 'md'
278
530
  };
279
531
 
280
- const ThumbnailListHeader = function (props) {
281
- const startAlignedItems = [];
282
- const endAlignedItems = [];
283
- // Iterate through each child to categorize them based on their 'align' prop
284
- React.Children.forEach(props.children, (child) => {
285
- if (React__default["default"].isValidElement(child)) {
286
- const alignment = child.props.align || 'start';
287
- if (alignment === 'end') {
288
- endAlignedItems.push(child);
289
- }
290
- else {
291
- startAlignedItems.push(child);
292
- }
293
- }
294
- });
295
- return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(material.Stack, { direction: "row", alignItems: "center", justifyContent: props.justifyContent ?? 'space-between', gap: 2, children: [jsxRuntime.jsx(material.Stack, { direction: "row", alignItems: "center", gap: 2, justifyContent: "start", children: startAlignedItems }), endAlignedItems] }) }));
296
- };
297
- ThumbnailListHeader.SearchField = ThumbnailListSearchField$1;
298
- ThumbnailListHeader.FilterTags = ThumbnailListFilterTags;
532
+ const ThumbnailListHeader = function (props) {
533
+ var _props$justifyContent;
534
+ const startAlignedItems = [];
535
+ const endAlignedItems = [];
536
+ // Iterate through each child to categorize them based on their 'align' prop
537
+ React.Children.forEach(props.children, child => {
538
+ if ( /*#__PURE__*/React__default["default"].isValidElement(child)) {
539
+ const alignment = child.props.align || 'start';
540
+ if (alignment === 'end') {
541
+ endAlignedItems.push(child);
542
+ } else {
543
+ startAlignedItems.push(child);
544
+ }
545
+ }
546
+ });
547
+ return jsxRuntime.jsx(jsxRuntime.Fragment, {
548
+ children: jsxRuntime.jsxs(material.Stack, {
549
+ direction: "row",
550
+ alignItems: "center",
551
+ justifyContent: (_props$justifyContent = props.justifyContent) !== null && _props$justifyContent !== void 0 ? _props$justifyContent : 'space-between',
552
+ gap: 2,
553
+ children: [jsxRuntime.jsx(material.Stack, {
554
+ direction: "row",
555
+ alignItems: "center",
556
+ gap: 2,
557
+ justifyContent: "start",
558
+ children: startAlignedItems
559
+ }), endAlignedItems]
560
+ })
561
+ });
562
+ };
563
+ ThumbnailListHeader.SearchField = ThumbnailListSearchField$1;
564
+ ThumbnailListHeader.FilterTags = ThumbnailListFilterTags;
299
565
  ThumbnailListHeader.Sort = ThumbnailListHeaderSort;
300
566
 
301
567
  /**
@@ -303,33 +569,60 @@ ThumbnailListHeader.Sort = ThumbnailListHeaderSort;
303
569
  * Includes ThumbnailList Provider for context data
304
570
  * @param props react children, items
305
571
  * @returns component
306
- */
307
- function ThumbnailList(props) {
308
- const combinedConfig = {
309
- ...defaultConfiguration,
310
- ...props.config, // This will override the defaults with any props that are not undefined
311
- };
312
- const [listItems, setListItems] = React.useState(props.items);
313
- const { sortedItems, setSortBy, setSortAscending, sortAscending } = useSortedThumbnailListItems(listItems, combinedConfig.sortBy.toString(), combinedConfig.sortAscending);
314
- const { tagFilteredItems, setTagAndCondition, tagAndCondition } = useTagFilteredThumbnailListItems({ allItems: sortedItems, initialTag: combinedConfig.tag.toString() });
315
- const { setSearchTerm, filteredItems } = useFilteredThumbnailListItems(tagFilteredItems);
316
- console.log('Thumbnaillist renders');
317
- return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(ThumbnailListItemContext.Provider, { value: {
318
- items: filteredItems,
319
- setItems: setListItems,
320
- originalItems: listItems,
321
- setOriginalItems: setListItems,
322
- tagFilterCallback: setTagAndCondition,
323
- tagAndCondition: tagAndCondition,
324
- setSearchTerm: setSearchTerm,
325
- setSortAscending: setSortAscending,
326
- sortAscending: sortAscending,
327
- setSortBy: setSortBy,
328
- sortBy: combinedConfig.sortBy.toString(),
329
- isLoading: false,
330
- }, children: jsxRuntime.jsx(material.Stack, { direction: "column", sx: { width: '100%', minWidth: '425px' }, children: props.children }) }) }));
331
- }
332
- ThumbnailList.MainContent = ThumbnailListMainContent;
572
+ */
573
+ function ThumbnailList(props) {
574
+ const combinedConfig = {
575
+ ...defaultConfiguration,
576
+ ...props.config // This will override the defaults with any props that are not undefined
577
+ };
578
+ const [listItems, setListItems] = React.useState(props.items);
579
+ const {
580
+ sortedItems,
581
+ setSortBy,
582
+ setSortAscending,
583
+ sortAscending
584
+ } = useSortedThumbnailListItems(listItems, combinedConfig.sortBy.toString(), combinedConfig.sortAscending);
585
+ const {
586
+ tagFilteredItems,
587
+ setTagAndCondition,
588
+ tagAndCondition
589
+ } = useTagFilteredThumbnailListItems({
590
+ allItems: sortedItems,
591
+ initialTag: combinedConfig.tag.toString()
592
+ });
593
+ const {
594
+ setSearchTerm,
595
+ filteredItems
596
+ } = useFilteredThumbnailListItems(tagFilteredItems);
597
+ console.log('Thumbnaillist renders');
598
+ return jsxRuntime.jsx(jsxRuntime.Fragment, {
599
+ children: jsxRuntime.jsx(ThumbnailListItemContext.Provider, {
600
+ value: {
601
+ items: filteredItems,
602
+ setItems: setListItems,
603
+ originalItems: listItems,
604
+ setOriginalItems: setListItems,
605
+ tagFilterCallback: setTagAndCondition,
606
+ tagAndCondition: tagAndCondition,
607
+ setSearchTerm: setSearchTerm,
608
+ setSortAscending: setSortAscending,
609
+ sortAscending: sortAscending,
610
+ setSortBy: setSortBy,
611
+ sortBy: combinedConfig.sortBy.toString(),
612
+ isLoading: false
613
+ },
614
+ children: jsxRuntime.jsx(material.Stack, {
615
+ direction: "column",
616
+ sx: {
617
+ width: '100%',
618
+ minWidth: '425px'
619
+ },
620
+ children: props.children
621
+ })
622
+ })
623
+ });
624
+ }
625
+ ThumbnailList.MainContent = ThumbnailListMainContent;
333
626
  ThumbnailList.Header = ThumbnailListHeader;
334
627
 
335
628
  exports.ThumbnailList = ThumbnailList;