npm - @janrankenhohn/react-thumbnail-list - Versions diffs - 0.5.0 → 0.5.1 - Mend

@janrankenhohn/react-thumbnail-list 0.5.0 → 0.5.1

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

package/dist/index.cjs.js CHANGED Viewed

@@ -1,65 +1,34 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
-var material = require('@mui/material');
-var React = require('react');
-var jsxRuntime = require('react/jsx-runtime');
-var system = require('@mui/system');
-var SearchIcon = require('@mui/icons-material/Search');
-var ClearIcon = require('@mui/icons-material/Clear');
-var SwapVertIcon = require('@mui/icons-material/SwapVert');
-var SortIcon = require('@mui/icons-material/Sort');
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var SearchIcon__default = /*#__PURE__*/_interopDefaultLegacy(SearchIcon);
-var ClearIcon__default = /*#__PURE__*/_interopDefaultLegacy(ClearIcon);
-var SwapVertIcon__default = /*#__PURE__*/_interopDefaultLegacy(SwapVertIcon);
-var SortIcon__default = /*#__PURE__*/_interopDefaultLegacy(SortIcon);
-function HelloWorld() {
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("h1", null, "Hello World"), /*#__PURE__*/React__default["default"].createElement(material.Button, {
-    variant: "contained"
-  }, "Contained"));
-}
-/* eslint-disable @typescript-eslint/no-explicit-any */
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+var jsxRuntime = require('react/jsx-runtime');
+var material = require('@mui/material');
+var React = require('react');
+var system = require('@mui/system');
+var SearchIcon = require('@mui/icons-material/Search');
+var ClearIcon = require('@mui/icons-material/Clear');
+var lodash = require('lodash');
+var SwapVertIcon = require('@mui/icons-material/SwapVert');
+var SortIcon = require('@mui/icons-material/Sort');
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var SearchIcon__default = /*#__PURE__*/_interopDefaultLegacy(SearchIcon);
+var ClearIcon__default = /*#__PURE__*/_interopDefaultLegacy(ClearIcon);
+var SwapVertIcon__default = /*#__PURE__*/_interopDefaultLegacy(SwapVertIcon);
+var SortIcon__default = /*#__PURE__*/_interopDefaultLegacy(SortIcon);
 const ThumbnailListItemContext = React.createContext(undefined);
-// Create a custom hook to consume the context
 const useThumbnailListItemContext = () => {
     const context = React.useContext(ThumbnailListItemContext);
     if (!context) {
-        throw new Error('useMyContext must be used within a MyContextProvider');
+        throw new Error('no context provider available');
     }
     return context;
-};
-/**
- * Can be used as parent component to crop a wrapped image
- * @param props width: width for cropping
- * height: height for cropping
- * seperate xs and sm values for mui breakpoints
- * @returns component
- */
-function ImageCropper(props) {
-    const ThumbnailImageCrop = material.styled('div')((p) => ({
-        [p.theme.breakpoints.up('xs')]: {
-            minWidth: props.width.xs,
-            maxWidth: props.width.xs,
-            height: props.height.xs,
-            overflow: 'hidden'
-        },
-        [p.theme.breakpoints.up('sm')]: {
-            minWidth: props.width.sm,
-            maxwWidth: props.width.sm,
-            height: props.height.sm,
-        },
-    }));
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(ThumbnailImageCrop, { children: props.children }) }));
-}
+};
 /**
  * Creates a ellipies text with webkit css styles
  * @param props lineClamp: lines till ellipses
@@ -70,128 +39,64 @@ function EllipsisContainer(props) {
         [p.theme.breakpoints.up('xs')]: {
             overflow: 'hidden',
             display: '-webkit-box',
-            WebkitLineClamp: props.lineClamp.xs.toString(),
+            WebkitLineClamp: props.lineClamp.xs.toString() /* number of lines to show */,
             WebkitBoxOrient: 'vertical',
         },
         [p.theme.breakpoints.up('sm')]: {
             overflow: 'hidden',
             display: '-webkit-box',
-            WebkitLineClamp: props.lineClamp.sm.toString(),
-            WebkitBoxOrient: 'vertical', /* number of lines to show */
+            WebkitLineClamp: props.lineClamp.sm.toString() /* number of lines to show */,
+            WebkitBoxOrient: 'vertical' /* number of lines to show */,
         },
     }));
-    return (jsxRuntime.jsx(EllipsisContainer, { children: props.children }));
-}
+    return jsxRuntime.jsx(EllipsisContainer, { children: props.children });
+}
 function ThumbnailListItemTitle(props) {
-    const StyledCardContent = material.styled('div')((props) => ({
-        [props.theme.breakpoints.up('xs')]: {
-            'padding': props.theme.spacing(1),
-            'flex': '1 0 auto',
+    const StyledCardContent = material.styled('div')((p) => ({
+        [p.theme.breakpoints.up('xs')]: {
+            padding: p.theme.spacing(1),
+            flex: '1 0 auto',
             '&:last-child': { paddingBottom: 0 },
-            'overflow': 'hidden',
+            overflow: 'hidden',
         },
     }));
-    const children = React.Children.toArray(props.children);
-    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: 'h4', children: props.title }) }), jsxRuntime.jsx(system.Stack, { direction: "row", gap: 1, children: children.map((child, index) => jsxRuntime.jsx(material.Typography, { variant: "subtitle2", color: "text.secondary", children: child }, index)) })] }) }) });
-}
-function ThumbnailListItemInfoLabel(props) {
-    return jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(material.Stack, { textAlign: "right", justifyContent: "space-between", children: [jsxRuntime.jsx(material.Box, { textAlign: "right", padding: 1, children: props.topContent }), jsxRuntime.jsx(material.Box, { textAlign: "right", padding: 1, children: props.bottomContent })] }) });
-}
-// import {Link} from 'react-router-dom';
+    console.log('item title rerenders');
+    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 }) }) })] }) }) }));
+}
 const ThumbnailListItem = (props) => {
-    return jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(material.Card, { sx: { display: 'flex' }, children: jsxRuntime.jsx(material.CardActionArea, { children: jsxRuntime.jsxs(material.Stack, { direction: "row", width: "100%", children: [jsxRuntime.jsx(ImageCropper, { width: { xs: '98px', sm: '160px' }, height: { xs: '54px', sm: '90px' }, children: jsxRuntime.jsx(material.Box, { children: "Placeholder for image" }) }), jsxRuntime.jsx(material.Stack, { direction: "row", justifyContent: "space-between", width: "100%", gap: 1, children: props.children })] }) }) }) });
+    console.log('ThumbnailListItems renders');
+    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] })] }) }) }) }));
 };
-ThumbnailListItem.Title = ThumbnailListItemTitle;
-ThumbnailListItem.InfoLabel = ThumbnailListItemInfoLabel;
-function ThumbnailListMainContent( /* props: {children: ReactNode}*/) {
-    // const children = Children.toArray(props.children);
-    const { items } = useThumbnailListItemContext();
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: items.map((item) => {
-            return (jsxRuntime.jsx(material.Grid, { item: true, xs: 12, lg: 6, xl: 3, children: jsxRuntime.jsxs(ThumbnailListItem, { id: item.id,
-                    // link={item.link}
-                    thumbnailUrl: item.thumbnailUrl, children: [jsxRuntime.jsx(ThumbnailListItem.Title, { title: item.title, children: item.subTitle }), item.label] }) }, item.id));
-        }) }));
-}
-const ThumbnailListSearchField = () => {
-    const [input, setInput] = React.useState('');
-    const [showClearIcon, setShowClearIcon] = React.useState('hidden');
-    const { setSearchTerm } = useThumbnailListItemContext();
-    const handleChange = (value) => {
-        setInput(value);
-        setShowClearIcon(value === '' ? 'hidden' : '');
-        setSearchTerm(value);
-    };
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(material.FormControl, { children: jsxRuntime.jsx(material.TextField, { sx: { input: { color: 'white' } }, fullWidth: true, value: input, size: "small", variant: "outlined", onChange: (event) => handleChange(event.target.value), InputProps: {
-                    startAdornment: (jsxRuntime.jsx(material.InputAdornment, { position: "start", children: jsxRuntime.jsx(SearchIcon__default["default"], {}) })),
-                    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"], {}) }) })),
-                } }) }) }));
-};
-function ThumbnailListFilterTag(props) {
-    const theme = material.useTheme();
-    const handleOnClick = (value) => {
-        if (props.onClickCallback) {
-            props.onClickCallback(value);
-        }
-    };
-    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 }) }) }) }));
+var ThumbnailListItem$1 = React__default["default"].memo(ThumbnailListItem);
+const RatioWrapper = material.styled('div')(() => ({
+    // Assuming a 16:9 aspect ratio
+    paddingTop: '27.75%',
+    position: 'relative',
+    width: '100%',
+    '& > *': {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+    },
+}));
+function ThumbnailListMainContent(props) {
+    const { items, isLoading } = useThumbnailListItemContext();
+    console.log('main content rerenders');
+    const memoizedItems = React.useMemo(() => {
+        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)));
+    }, [items, props.muiBreakpoints]);
+    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 })] }));
 }
-function ThumbnailListFilterTags(props) {
-    const { tagFilterCallback, tagAndCondition } = useThumbnailListItemContext();
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: props.tags.map((tag) => {
-            return (jsxRuntime.jsx(ThumbnailListFilterTag, { label: tag.label, value: tag.value, variant: tagAndCondition.tag === tag.value ? 'filled' : 'outlined', collapseBreakpoint: props.collapseBreakpoint, onClickCallback: (value) => tagFilterCallback({ tag: value, condition: tag.condition }), icon: tag.icon }));
-        }) }));
-}
-/**
- * Displays a generic MUI select dropdown.
- * Optinal collapses to a sort icon at a certain breakpoint
- * @param props.label Select Label
- * @param props.width * Width of the input field
- * @param props.collapseBreakPoint * MUI breakpoint after that the select will collapse to the sort icon
- * @param props.onChangeCallback * Callback function that gets triggered once a item is selected
- * @param props.items * Array of items (name-value-pairs) that will be the select options
- * @returns Drowpdown Input Component
- */
-function DropdownInput(props) {
-    const [value, setValue] = React.useState(props.defaultValue ?? '');
-    const theme = material.useTheme();
-    const [anchorEl, setAnchorEl] = React.useState(null);
-    const handleChange = (value, name) => {
-        setValue(value);
-        setAnchorEl(null);
-        props.onChangeCallback(value, name);
-    };
-    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', id: "demo-simple-select-label", 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) => {
-                                return jsxRuntime.jsx(material.MenuItem, { value: item.value, children: item.name }, item.value);
-                            }) })] }) : (jsxRuntime.jsx(material.IconButton
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            , {
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                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))) })] }));
-}
-function ThumbnailListHeaderSort(props) {
-    const { setSortAscending, sortAscending, setSortBy } = useThumbnailListItemContext();
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(material.Box, { sx: { width: '-webkit-fill-available', textAlign: 'end' }, 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: 'md', label: 'sort', defaultValue: "creationTimeStamp", icon: jsxRuntime.jsx(material.Tooltip, { title: 'sort', children: jsxRuntime.jsx(SortIcon__default["default"], {}) }), items: props.items, onChangeCallback: (value) => setSortBy(value) })] }) }));
-}
-const ThumbnailListHeader = function (props) {
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(material.Grid, { item: true, xs: 12, children: jsxRuntime.jsx(material.Stack, { direction: "row", alignItems: "center", justifyContent: props.justifyContent ?? 'space-between', gap: 2, children: props.children }) }) }));
-};
-ThumbnailListHeader.SearchField = ThumbnailListSearchField;
-ThumbnailListHeader.FilterTags = ThumbnailListFilterTags;
-ThumbnailListHeader.Sort = ThumbnailListHeaderSort;
+ThumbnailListMainContent.defaultProps = {
+    spacing: 2,
+    muiBreakpoints: { xs: 12, sm: 6, md: 6, lg: 4, xl: 3 },
+};
 /**
  * Generic method that sorts an array of items based on an item key
  * @param values The array that should be sorted
@@ -229,20 +134,18 @@ function filterByTag(array, tagType, condition) {
     console.log('filter array');
     console.log(filteredArray);
     return [...filteredArray];
-}
-// /* eslint-disable @typescript-eslint/no-explicit-any */
-const useTagFilteredThumbnailListItems = ({ allItems, initialTag, initialCondition }) => {
+}
+const useTagFilteredThumbnailListItems = ({ allItems, initialTag, initialCondition, }) => {
     const [tagAndCondition, setTagAndCondition] = React.useState({ tag: initialTag, condition: initialCondition });
-    const [tagFilteredItems, setTagFilteredItems] = React.useState(allItems);
     const setTagWithCondition = (t, c) => {
         setTagAndCondition({ tag: t, condition: c });
     };
-    React.useEffect(() => {
-        const tagFiltered = tagAndCondition.tag === 'id' ?
-            allItems :
-            filterByTag(allItems, tagAndCondition.tag, tagAndCondition.condition);
-        setTagFilteredItems(tagFiltered);
+    const tagFilteredItems = React.useMemo(() => {
+        const tagFiltered = tagAndCondition.tag === 'id'
+            ? allItems
+            : filterByTag(allItems, tagAndCondition.tag, tagAndCondition.condition);
+        return tagFiltered;
     }, [allItems, tagAndCondition]);
     return {
         tagAndCondition,
@@ -250,8 +153,8 @@ const useTagFilteredThumbnailListItems = ({ allItems, initialTag, initialConditi
         tagFilteredItems,
         setTagWithCondition,
     };
-};
+};
 /**
  * Filters a list of event by a search term
  * @param allEvents event list that will be formatted
@@ -260,48 +163,159 @@ const useTagFilteredThumbnailListItems = ({ allItems, initialTag, initialConditi
  */
 const useFilteredThumbnailListItems = (allItems, initialSearchTerm = '') => {
     const [searchTerm, setSearchTerm] = React.useState(initialSearchTerm);
-    const [filteredItems, setFilteredItems] = React.useState(allItems);
-    React.useEffect(() => {
-        const filterEvents = () => {
-            const filtered = [...allItems].filter((item) => item.title.toLowerCase().includes(searchTerm.toLowerCase()));
-            setFilteredItems(filtered);
-        };
-        filterEvents();
+    const filteredItems = React.useMemo(() => {
+        const filtered = [...allItems].filter((item) => item.title.toLowerCase().includes(searchTerm.toLowerCase()));
+        return filtered;
     }, [allItems, searchTerm]);
     return { searchTerm, setSearchTerm, filteredItems };
-};
+};
 const useSortedThumbnailListItems = (allItems, initialSortBy, initialSortAscending) => {
     const [sortBy, setSortBy] = React.useState(initialSortBy);
     const [sortAscending, setSortAscending] = React.useState(initialSortAscending);
-    const [sortedItems, setSortedItems] = React.useState(allItems);
-    React.useEffect(() => {
+    const sortedItems = React.useMemo(() => {
         let sorted = orderByArray(allItems, sortBy);
         if (!sortAscending) {
             sorted = sorted.reverse();
         }
-        setSortedItems(sorted);
-    }, [allItems, sortBy, sortAscending, initialSortBy, initialSortAscending]);
+        return sorted;
+    }, [allItems, sortBy, sortAscending]);
     return { sortBy, sortAscending, setSortBy, setSortAscending, sortedItems };
-};
-const ThumbnailList = function (props) {
-    // const [originalItems, setOriginalItems] = useState(props.items);
-    const [listItems, setListItems] = React.useState(props.items);
-    const { sortedItems, setSortBy, setSortAscending, sortAscending } = useSortedThumbnailListItems(listItems, 'creationTimeStamp', false);
-    const { setSearchTerm, filteredItems } = useFilteredThumbnailListItems(sortedItems);
-    const { tagFilteredItems, setTagAndCondition, tagAndCondition } = useTagFilteredThumbnailListItems({ allItems: filteredItems, initialTag: 'id' });
-    console.log('tag filterd');
-    console.log(tagFilteredItems);
-    console.log(listItems);
+};
+const defaultConfiguration = {
+    sortBy: 'id',
+    sortAscending: true,
+    tag: 'id',
+};
+const ThumbnailListSearchField = () => {
+    const [input, setInput] = React.useState('');
+    const [showClearIcon, setShowClearIcon] = React.useState('hidden');
+    const { setSearchTerm } = useThumbnailListItemContext();
+    console.log('Searchfield rerenders');
+    const handleChange = (value) => {
+        setInput(value);
+        setShowClearIcon(value === '' ? 'hidden' : '');
+    };
+    const debouncedSetSearchTerm = React.useCallback(lodash.debounce(setSearchTerm, 50), []);
     React.useEffect(() => {
-        if (props.items) {
-            // setOriginalItems(props.items);
-            setListItems(props.items);
+        debouncedSetSearchTerm(input);
+        return () => {
+            debouncedSetSearchTerm.cancel();
+        };
+    }, [input, debouncedSetSearchTerm]);
+    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: {
+                    startAdornment: (jsxRuntime.jsx(material.InputAdornment, { position: "start", children: jsxRuntime.jsx(SearchIcon__default["default"], {}) })),
+                    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"], {}) }) })),
+                } }) }) }));
+};
+ThumbnailListSearchField.defaultProps = {
+    align: 'start',
+};
+var ThumbnailListSearchField$1 = React__default["default"].memo(ThumbnailListSearchField);
+function ThumbnailListFilterTag(props) {
+    const theme = material.useTheme();
+    const handleOnClick = (value) => {
+        if (props.onClickCallback) {
+            props.onClickCallback(value);
+        }
+    };
+    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 }) }) })) }));
+}
+function ThumbnailListFilterTags(props) {
+    const { tagFilterCallback, tagAndCondition } = useThumbnailListItemContext();
+    console.log('filter tags rerenders');
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: props.tags.map((tag, index) => {
+            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()}`));
+        }) }));
+}
+ThumbnailListFilterTags.defaultProps = {
+    align: 'start',
+    muiCollapseBreakpoint: 'md',
+};
+/**
+ * Displays a generic MUI select dropdown.
+ * Optinal collapses to a sort icon at a certain breakpoint
+ * @param props.label Select Label
+ * @param props.width * Width of the input field
+ * @param props.collapseBreakPoint * MUI breakpoint after that the select will collapse to the sort icon
+ * @param props.onChangeCallback * Callback function that gets triggered once a item is selected
+ * @param props.items * Array of items (name-value-pairs) that will be the select options
+ * @returns Drowpdown Input Component
+ */
+function DropdownInput(props) {
+    const [value, setValue] = React.useState(props.defaultValue ?? '');
+    const theme = material.useTheme();
+    const [anchorEl, setAnchorEl] = React.useState(null);
+    const handleChange = (value, name) => {
+        setValue(value);
+        setAnchorEl(null);
+        props.onChangeCallback(value, name);
+    };
+    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) => {
+                            return (jsxRuntime.jsx(material.MenuItem, { value: item.value, children: item.name }, item.value));
+                        }) })] })) : (jsxRuntime.jsx(material.IconButton
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            , {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                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))) })] }));
+}
+function ThumbnailListHeaderSort(props) {
+    const { setSortAscending, sortAscending, setSortBy, sortBy } = useThumbnailListItemContext();
+    console.log('Header sort rerenders');
+    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) => {
+                        return { name: i.label, value: i.key.toString() };
+                    }), onChangeCallback: (value) => setSortBy(value) })] }) }));
+}
+ThumbnailListHeaderSort.defaultProps = {
+    align: 'start',
+    muiBreakpoint: 'md',
+};
+const ThumbnailListHeader = function (props) {
+    const startAlignedItems = [];
+    const endAlignedItems = [];
+    // Iterate through each child to categorize them based on their 'align' prop
+    React.Children.forEach(props.children, (child) => {
+        if (React__default["default"].isValidElement(child)) {
+            const alignment = child.props.align || 'start';
+            if (alignment === 'end') {
+                endAlignedItems.push(child);
+            }
+            else {
+                startAlignedItems.push(child);
+            }
         }
-    }, [props.items]);
+    });
+    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] }) }));
+};
+ThumbnailListHeader.SearchField = ThumbnailListSearchField$1;
+ThumbnailListHeader.FilterTags = ThumbnailListFilterTags;
+ThumbnailListHeader.Sort = ThumbnailListHeaderSort;
+/**
+ * Main Component: Renders all sub components
+ * Includes ThumbnailList Provider for context data
+ * @param props react children, items
+ * @returns component
+ */
+function ThumbnailList(props) {
+    const combinedConfig = {
+        ...defaultConfiguration,
+        ...props.config, // This will override the defaults with any props that are not undefined
+    };
+    const [listItems, setListItems] = React.useState(props.items);
+    const { sortedItems, setSortBy, setSortAscending, sortAscending } = useSortedThumbnailListItems(listItems, combinedConfig.sortBy.toString(), combinedConfig.sortAscending);
+    const { tagFilteredItems, setTagAndCondition, tagAndCondition } = useTagFilteredThumbnailListItems({ allItems: sortedItems, initialTag: combinedConfig.tag.toString() });
+    const { setSearchTerm, filteredItems } = useFilteredThumbnailListItems(tagFilteredItems);
+    console.log('Thumbnaillist renders');
     return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(ThumbnailListItemContext.Provider, { value: {
-                items: tagFilteredItems,
+                items: filteredItems,
                 setItems: setListItems,
                 originalItems: listItems,
                 setOriginalItems: setListItems,
@@ -311,10 +325,11 @@ const ThumbnailList = function (props) {
                 setSortAscending: setSortAscending,
                 sortAscending: sortAscending,
                 setSortBy: setSortBy,
-            }, children: jsxRuntime.jsx(material.Grid, { container: true, spacing: 2, children: props.children }) }) }));
-};
+                sortBy: combinedConfig.sortBy.toString(),
+                isLoading: false,
+            }, children: jsxRuntime.jsx(material.Stack, { direction: "column", sx: { width: '100%', minWidth: '425px' }, children: props.children }) }) }));
+}
 ThumbnailList.MainContent = ThumbnailListMainContent;
-ThumbnailList.Header = ThumbnailListHeader;
-exports.HelloWorld = HelloWorld;
-exports.ThumbnailList = ThumbnailList;
+ThumbnailList.Header = ThumbnailListHeader;
+exports.ThumbnailList = ThumbnailList;

package/dist/index.esm.js CHANGED Viewed

@@ -1,53 +1,22 @@
-import { Button, styled, Box, Typography, Stack as Stack$1, Card, CardActionArea, Grid, FormControl, TextField, InputAdornment, IconButton, useTheme, useMediaQuery, Chip, Tooltip, InputLabel, Select, MenuItem, Menu } from '@mui/material';
-import React, { createContext, useContext, Children, useState, useEffect } from 'react';
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { Stack } from '@mui/system';
-import SearchIcon from '@mui/icons-material/Search';
-import ClearIcon from '@mui/icons-material/Clear';
-import SwapVertIcon from '@mui/icons-material/SwapVert';
-import SortIcon from '@mui/icons-material/Sort';
-function HelloWorld() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Hello World"), /*#__PURE__*/React.createElement(Button, {
-    variant: "contained"
-  }, "Contained"));
-}
-/* eslint-disable @typescript-eslint/no-explicit-any */
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { styled, Box, Typography, Card, CardActionArea, Stack as Stack$1, Grid, LinearProgress, FormControl, TextField, InputAdornment, IconButton, useTheme, useMediaQuery, Chip, Tooltip, InputLabel, Select, MenuItem, Menu } from '@mui/material';
+import React, { createContext, useContext, useMemo, useState, useCallback, useEffect, Children } from 'react';
+import { Stack } from '@mui/system';
+import SearchIcon from '@mui/icons-material/Search';
+import ClearIcon from '@mui/icons-material/Clear';
+import { debounce } from 'lodash';
+import SwapVertIcon from '@mui/icons-material/SwapVert';
+import SortIcon from '@mui/icons-material/Sort';
 const ThumbnailListItemContext = createContext(undefined);
-// Create a custom hook to consume the context
 const useThumbnailListItemContext = () => {
     const context = useContext(ThumbnailListItemContext);
     if (!context) {
-        throw new Error('useMyContext must be used within a MyContextProvider');
+        throw new Error('no context provider available');
     }
     return context;
-};
-/**
- * Can be used as parent component to crop a wrapped image
- * @param props width: width for cropping
- * height: height for cropping
- * seperate xs and sm values for mui breakpoints
- * @returns component
- */
-function ImageCropper(props) {
-    const ThumbnailImageCrop = styled('div')((p) => ({
-        [p.theme.breakpoints.up('xs')]: {
-            minWidth: props.width.xs,
-            maxWidth: props.width.xs,
-            height: props.height.xs,
-            overflow: 'hidden'
-        },
-        [p.theme.breakpoints.up('sm')]: {
-            minWidth: props.width.sm,
-            maxwWidth: props.width.sm,
-            height: props.height.sm,
-        },
-    }));
-    return (jsx(Fragment, { children: jsx(ThumbnailImageCrop, { children: props.children }) }));
-}
+};
 /**
  * Creates a ellipies text with webkit css styles
  * @param props lineClamp: lines till ellipses
@@ -58,128 +27,64 @@ function EllipsisContainer(props) {
         [p.theme.breakpoints.up('xs')]: {
             overflow: 'hidden',
             display: '-webkit-box',
-            WebkitLineClamp: props.lineClamp.xs.toString(),
+            WebkitLineClamp: props.lineClamp.xs.toString() /* number of lines to show */,
             WebkitBoxOrient: 'vertical',
         },
         [p.theme.breakpoints.up('sm')]: {
             overflow: 'hidden',
             display: '-webkit-box',
-            WebkitLineClamp: props.lineClamp.sm.toString(),
-            WebkitBoxOrient: 'vertical', /* number of lines to show */
+            WebkitLineClamp: props.lineClamp.sm.toString() /* number of lines to show */,
+            WebkitBoxOrient: 'vertical' /* number of lines to show */,
         },
     }));
-    return (jsx(EllipsisContainer, { children: props.children }));
-}
+    return jsx(EllipsisContainer, { children: props.children });
+}
 function ThumbnailListItemTitle(props) {
-    const StyledCardContent = styled('div')((props) => ({
-        [props.theme.breakpoints.up('xs')]: {
-            'padding': props.theme.spacing(1),
-            'flex': '1 0 auto',
+    const StyledCardContent = styled('div')((p) => ({
+        [p.theme.breakpoints.up('xs')]: {
+            padding: p.theme.spacing(1),
+            flex: '1 0 auto',
             '&:last-child': { paddingBottom: 0 },
-            'overflow': 'hidden',
+            overflow: 'hidden',
         },
     }));
-    const children = Children.toArray(props.children);
-    return jsx(Fragment, { children: jsx(Box, { children: jsxs(StyledCardContent, { children: [jsx(EllipsisContainer, { lineClamp: { xs: 1, sm: 2 }, children: jsx(Typography, { variant: 'h4', children: props.title }) }), jsx(Stack, { direction: "row", gap: 1, children: children.map((child, index) => jsx(Typography, { variant: "subtitle2", color: "text.secondary", children: child }, index)) })] }) }) });
-}
-function ThumbnailListItemInfoLabel(props) {
-    return jsx(Fragment, { children: jsxs(Stack$1, { textAlign: "right", justifyContent: "space-between", children: [jsx(Box, { textAlign: "right", padding: 1, children: props.topContent }), jsx(Box, { textAlign: "right", padding: 1, children: props.bottomContent })] }) });
-}
-// import {Link} from 'react-router-dom';
+    console.log('item title rerenders');
+    return (jsx(Fragment, { children: jsx(Box, { children: jsxs(StyledCardContent, { children: [jsx(EllipsisContainer, { lineClamp: { xs: 1, sm: 2 }, children: jsx(Typography, { variant: "subtitle2", sx: { fontWeight: 'bold' }, children: props.title }) }), jsx(Stack, { direction: "row", gap: 1, children: jsx(EllipsisContainer, { lineClamp: { xs: 1, sm: 2 }, children: jsx(Typography, { variant: "subtitle2", sx: { fontSize: '0.84rem' }, color: "text.secondary", children: props.subTitle }) }) })] }) }) }));
+}
 const ThumbnailListItem = (props) => {
-    return jsx(Fragment, { children: jsx(Card, { sx: { display: 'flex' }, children: jsx(CardActionArea, { children: jsxs(Stack$1, { direction: "row", width: "100%", children: [jsx(ImageCropper, { width: { xs: '98px', sm: '160px' }, height: { xs: '54px', sm: '90px' }, children: jsx(Box, { children: "Placeholder for image" }) }), jsx(Stack$1, { direction: "row", justifyContent: "space-between", width: "100%", gap: 1, children: props.children })] }) }) }) });
+    console.log('ThumbnailListItems renders');
+    return (jsx(Fragment, { children: jsx(Card, { sx: { display: 'flex' }, children: jsx(CardActionArea, { disabled: !props.onClick, onClick: () => props.onClick(props.id), children: jsxs(Stack$1, { direction: "row", width: "100%", children: [jsx("img", { src: props.thumbnailUrl, width: '45%' }), jsxs(Stack$1, { direction: "row", justifyContent: "space-between", width: "100%", gap: 1, children: [jsx(ThumbnailListItemTitle, { title: props.title, subTitle: props.subTitle }), props.infoLabel] })] }) }) }) }));
 };
-ThumbnailListItem.Title = ThumbnailListItemTitle;
-ThumbnailListItem.InfoLabel = ThumbnailListItemInfoLabel;
-function ThumbnailListMainContent( /* props: {children: ReactNode}*/) {
-    // const children = Children.toArray(props.children);
-    const { items } = useThumbnailListItemContext();
-    return (jsx(Fragment, { children: items.map((item) => {
-            return (jsx(Grid, { item: true, xs: 12, lg: 6, xl: 3, children: jsxs(ThumbnailListItem, { id: item.id,
-                    // link={item.link}
-                    thumbnailUrl: item.thumbnailUrl, children: [jsx(ThumbnailListItem.Title, { title: item.title, children: item.subTitle }), item.label] }) }, item.id));
-        }) }));
-}
-const ThumbnailListSearchField = () => {
-    const [input, setInput] = useState('');
-    const [showClearIcon, setShowClearIcon] = useState('hidden');
-    const { setSearchTerm } = useThumbnailListItemContext();
-    const handleChange = (value) => {
-        setInput(value);
-        setShowClearIcon(value === '' ? 'hidden' : '');
-        setSearchTerm(value);
-    };
-    return (jsx(Fragment, { children: jsx(FormControl, { children: jsx(TextField, { sx: { input: { color: 'white' } }, fullWidth: true, value: input, size: "small", variant: "outlined", onChange: (event) => handleChange(event.target.value), InputProps: {
-                    startAdornment: (jsx(InputAdornment, { position: "start", children: jsx(SearchIcon, {}) })),
-                    endAdornment: (jsx(InputAdornment, { position: "end", children: jsx(IconButton, { onClick: () => handleChange(''), sx: { visibility: showClearIcon, padding: 0 }, children: jsx(ClearIcon, {}) }) })),
-                } }) }) }));
-};
-function ThumbnailListFilterTag(props) {
-    const theme = useTheme();
-    const handleOnClick = (value) => {
-        if (props.onClickCallback) {
-            props.onClickCallback(value);
-        }
-    };
-    return (jsx(Fragment, { children: useMediaQuery(theme.breakpoints.up(props.collapseBreakpoint ?? 0)) || !props.icon ?
-            jsx(Fragment, { children: jsx(Chip, { label: props.label, variant: props.variant, onClick: props.onClickCallback ? () => handleOnClick(props.value) : undefined }) }) :
-            jsx(Fragment, { children: jsx(Tooltip, { title: props.label, children: jsx(IconButton, { onClick: props.onClickCallback ? () => handleOnClick(props.value) : undefined, children: props.icon }) }) }) }));
+var ThumbnailListItem$1 = React.memo(ThumbnailListItem);
+const RatioWrapper = styled('div')(() => ({
+    // Assuming a 16:9 aspect ratio
+    paddingTop: '27.75%',
+    position: 'relative',
+    width: '100%',
+    '& > *': {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+    },
+}));
+function ThumbnailListMainContent(props) {
+    const { items, isLoading } = useThumbnailListItemContext();
+    console.log('main content rerenders');
+    const memoizedItems = useMemo(() => {
+        return items.map((item) => (jsx(Grid, { item: true, xs: props.muiBreakpoints.xs, sm: props.muiBreakpoints.sm, md: props.muiBreakpoints.md, lg: props.muiBreakpoints.lg, xl: props.muiBreakpoints.xl, children: jsx(RatioWrapper, { children: jsx(ThumbnailListItem$1, { id: item.id, thumbnailUrl: item.thumbnailUrl, title: item.title, subTitle: item.subTitle, infoLabel: item.label, onClick: item.onClick }) }) }, item.id)));
+    }, [items, props.muiBreakpoints]);
+    return (jsxs(Fragment, { children: [jsx(Box, { sx: { mt: 0.75, mb: 0.75 }, children: jsx(LinearProgress, { sx: { opacity: isLoading ? 1 : 0 } }) }), jsx(Grid, { container: true, spacing: props.spacing, children: memoizedItems })] }));
 }
-function ThumbnailListFilterTags(props) {
-    const { tagFilterCallback, tagAndCondition } = useThumbnailListItemContext();
-    return (jsx(Fragment, { children: props.tags.map((tag) => {
-            return (jsx(ThumbnailListFilterTag, { label: tag.label, value: tag.value, variant: tagAndCondition.tag === tag.value ? 'filled' : 'outlined', collapseBreakpoint: props.collapseBreakpoint, onClickCallback: (value) => tagFilterCallback({ tag: value, condition: tag.condition }), icon: tag.icon }));
-        }) }));
-}
-/**
- * Displays a generic MUI select dropdown.
- * Optinal collapses to a sort icon at a certain breakpoint
- * @param props.label Select Label
- * @param props.width * Width of the input field
- * @param props.collapseBreakPoint * MUI breakpoint after that the select will collapse to the sort icon
- * @param props.onChangeCallback * Callback function that gets triggered once a item is selected
- * @param props.items * Array of items (name-value-pairs) that will be the select options
- * @returns Drowpdown Input Component
- */
-function DropdownInput(props) {
-    const [value, setValue] = useState(props.defaultValue ?? '');
-    const theme = useTheme();
-    const [anchorEl, setAnchorEl] = useState(null);
-    const handleChange = (value, name) => {
-        setValue(value);
-        setAnchorEl(null);
-        props.onChangeCallback(value, name);
-    };
-    return (jsxs(Fragment, { children: [useMediaQuery(theme.breakpoints.up(props.collapseBreakpoint ?? 0)) ?
-                jsxs(FormControl, { sx: { width: props.width, textAlign: 'start' }, children: [jsx(InputLabel, { size: 'small', id: "demo-simple-select-label", children: props.label }), jsx(Select, { value: value, size: 'small', label: props.label, onChange: (event) => handleChange(event.target.value, event.target.name), children: props.items.map((item) => {
-                                return jsx(MenuItem, { value: item.value, children: item.name }, item.value);
-                            }) })] }) : (jsx(IconButton
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            , {
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                onClick: (event) => setAnchorEl(event.currentTarget), children: props.icon })), jsx(Menu, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: () => setAnchorEl(null), children: props.items.map((item) => (jsx(MenuItem, { onClick: () => handleChange(item.value), children: item.name }, item.value))) })] }));
-}
-function ThumbnailListHeaderSort(props) {
-    const { setSortAscending, sortAscending, setSortBy } = useThumbnailListItemContext();
-    return (jsx(Fragment, { children: jsxs(Box, { sx: { width: '-webkit-fill-available', textAlign: 'end' }, children: [jsx(Tooltip, { title: "asc/desc", children: jsx(IconButton, { onClick: () => setSortAscending(!sortAscending), children: jsx(SwapVertIcon, {}) }) }), jsx(DropdownInput, { width: "130px", collapseBreakpoint: 'md', label: 'sort', defaultValue: "creationTimeStamp", icon: jsx(Tooltip, { title: 'sort', children: jsx(SortIcon, {}) }), items: props.items, onChangeCallback: (value) => setSortBy(value) })] }) }));
-}
-const ThumbnailListHeader = function (props) {
-    return (jsx(Fragment, { children: jsx(Grid, { item: true, xs: 12, children: jsx(Stack$1, { direction: "row", alignItems: "center", justifyContent: props.justifyContent ?? 'space-between', gap: 2, children: props.children }) }) }));
-};
-ThumbnailListHeader.SearchField = ThumbnailListSearchField;
-ThumbnailListHeader.FilterTags = ThumbnailListFilterTags;
-ThumbnailListHeader.Sort = ThumbnailListHeaderSort;
+ThumbnailListMainContent.defaultProps = {
+    spacing: 2,
+    muiBreakpoints: { xs: 12, sm: 6, md: 6, lg: 4, xl: 3 },
+};
 /**
  * Generic method that sorts an array of items based on an item key
  * @param values The array that should be sorted
@@ -217,20 +122,18 @@ function filterByTag(array, tagType, condition) {
     console.log('filter array');
     console.log(filteredArray);
     return [...filteredArray];
-}
-// /* eslint-disable @typescript-eslint/no-explicit-any */
-const useTagFilteredThumbnailListItems = ({ allItems, initialTag, initialCondition }) => {
+}
+const useTagFilteredThumbnailListItems = ({ allItems, initialTag, initialCondition, }) => {
     const [tagAndCondition, setTagAndCondition] = useState({ tag: initialTag, condition: initialCondition });
-    const [tagFilteredItems, setTagFilteredItems] = useState(allItems);
     const setTagWithCondition = (t, c) => {
         setTagAndCondition({ tag: t, condition: c });
     };
-    useEffect(() => {
-        const tagFiltered = tagAndCondition.tag === 'id' ?
-            allItems :
-            filterByTag(allItems, tagAndCondition.tag, tagAndCondition.condition);
-        setTagFilteredItems(tagFiltered);
+    const tagFilteredItems = useMemo(() => {
+        const tagFiltered = tagAndCondition.tag === 'id'
+            ? allItems
+            : filterByTag(allItems, tagAndCondition.tag, tagAndCondition.condition);
+        return tagFiltered;
     }, [allItems, tagAndCondition]);
     return {
         tagAndCondition,
@@ -238,8 +141,8 @@ const useTagFilteredThumbnailListItems = ({ allItems, initialTag, initialConditi
         tagFilteredItems,
         setTagWithCondition,
     };
-};
+};
 /**
  * Filters a list of event by a search term
  * @param allEvents event list that will be formatted
@@ -248,48 +151,159 @@ const useTagFilteredThumbnailListItems = ({ allItems, initialTag, initialConditi
  */
 const useFilteredThumbnailListItems = (allItems, initialSearchTerm = '') => {
     const [searchTerm, setSearchTerm] = useState(initialSearchTerm);
-    const [filteredItems, setFilteredItems] = useState(allItems);
-    useEffect(() => {
-        const filterEvents = () => {
-            const filtered = [...allItems].filter((item) => item.title.toLowerCase().includes(searchTerm.toLowerCase()));
-            setFilteredItems(filtered);
-        };
-        filterEvents();
+    const filteredItems = useMemo(() => {
+        const filtered = [...allItems].filter((item) => item.title.toLowerCase().includes(searchTerm.toLowerCase()));
+        return filtered;
     }, [allItems, searchTerm]);
     return { searchTerm, setSearchTerm, filteredItems };
-};
+};
 const useSortedThumbnailListItems = (allItems, initialSortBy, initialSortAscending) => {
     const [sortBy, setSortBy] = useState(initialSortBy);
     const [sortAscending, setSortAscending] = useState(initialSortAscending);
-    const [sortedItems, setSortedItems] = useState(allItems);
-    useEffect(() => {
+    const sortedItems = useMemo(() => {
         let sorted = orderByArray(allItems, sortBy);
         if (!sortAscending) {
             sorted = sorted.reverse();
         }
-        setSortedItems(sorted);
-    }, [allItems, sortBy, sortAscending, initialSortBy, initialSortAscending]);
+        return sorted;
+    }, [allItems, sortBy, sortAscending]);
     return { sortBy, sortAscending, setSortBy, setSortAscending, sortedItems };
-};
-const ThumbnailList = function (props) {
-    // const [originalItems, setOriginalItems] = useState(props.items);
-    const [listItems, setListItems] = useState(props.items);
-    const { sortedItems, setSortBy, setSortAscending, sortAscending } = useSortedThumbnailListItems(listItems, 'creationTimeStamp', false);
-    const { setSearchTerm, filteredItems } = useFilteredThumbnailListItems(sortedItems);
-    const { tagFilteredItems, setTagAndCondition, tagAndCondition } = useTagFilteredThumbnailListItems({ allItems: filteredItems, initialTag: 'id' });
-    console.log('tag filterd');
-    console.log(tagFilteredItems);
-    console.log(listItems);
+};
+const defaultConfiguration = {
+    sortBy: 'id',
+    sortAscending: true,
+    tag: 'id',
+};
+const ThumbnailListSearchField = () => {
+    const [input, setInput] = useState('');
+    const [showClearIcon, setShowClearIcon] = useState('hidden');
+    const { setSearchTerm } = useThumbnailListItemContext();
+    console.log('Searchfield rerenders');
+    const handleChange = (value) => {
+        setInput(value);
+        setShowClearIcon(value === '' ? 'hidden' : '');
+    };
+    const debouncedSetSearchTerm = useCallback(debounce(setSearchTerm, 50), []);
     useEffect(() => {
-        if (props.items) {
-            // setOriginalItems(props.items);
-            setListItems(props.items);
+        debouncedSetSearchTerm(input);
+        return () => {
+            debouncedSetSearchTerm.cancel();
+        };
+    }, [input, debouncedSetSearchTerm]);
+    return (jsx(Box, { sx: { marginLeft: 'auto' }, children: jsx(FormControl, { children: jsx(TextField, { fullWidth: true, value: input, size: "small", variant: "outlined", onChange: (event) => handleChange(event.target.value), InputProps: {
+                    startAdornment: (jsx(InputAdornment, { position: "start", children: jsx(SearchIcon, {}) })),
+                    endAdornment: (jsx(InputAdornment, { position: "end", children: jsx(IconButton, { onClick: () => handleChange(''), sx: { visibility: showClearIcon, padding: 0 }, children: jsx(ClearIcon, {}) }) })),
+                } }) }) }));
+};
+ThumbnailListSearchField.defaultProps = {
+    align: 'start',
+};
+var ThumbnailListSearchField$1 = React.memo(ThumbnailListSearchField);
+function ThumbnailListFilterTag(props) {
+    const theme = useTheme();
+    const handleOnClick = (value) => {
+        if (props.onClickCallback) {
+            props.onClickCallback(value);
+        }
+    };
+    return (jsx(Fragment, { children: useMediaQuery(theme.breakpoints.up(props.collapseBreakpoint ?? 0)) || !props.icon ? (jsx(Fragment, { children: jsx(Chip, { label: props.label, variant: props.variant, onClick: props.onClickCallback ? () => handleOnClick(props.value) : undefined }) })) : (jsx(Fragment, { children: jsx(Tooltip, { title: props.label, children: jsx(IconButton, { onClick: props.onClickCallback ? () => handleOnClick(props.value) : undefined, children: props.icon }) }) })) }));
+}
+function ThumbnailListFilterTags(props) {
+    const { tagFilterCallback, tagAndCondition } = useThumbnailListItemContext();
+    console.log('filter tags rerenders');
+    return (jsx(Fragment, { children: props.tags.map((tag, index) => {
+            return (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()}`));
+        }) }));
+}
+ThumbnailListFilterTags.defaultProps = {
+    align: 'start',
+    muiCollapseBreakpoint: 'md',
+};
+/**
+ * Displays a generic MUI select dropdown.
+ * Optinal collapses to a sort icon at a certain breakpoint
+ * @param props.label Select Label
+ * @param props.width * Width of the input field
+ * @param props.collapseBreakPoint * MUI breakpoint after that the select will collapse to the sort icon
+ * @param props.onChangeCallback * Callback function that gets triggered once a item is selected
+ * @param props.items * Array of items (name-value-pairs) that will be the select options
+ * @returns Drowpdown Input Component
+ */
+function DropdownInput(props) {
+    const [value, setValue] = useState(props.defaultValue ?? '');
+    const theme = useTheme();
+    const [anchorEl, setAnchorEl] = useState(null);
+    const handleChange = (value, name) => {
+        setValue(value);
+        setAnchorEl(null);
+        props.onChangeCallback(value, name);
+    };
+    return (jsxs(Fragment, { children: [useMediaQuery(theme.breakpoints.up(props.collapseBreakpoint ?? 0)) ? (jsxs(FormControl, { sx: { width: props.width, textAlign: 'start' }, children: [jsx(InputLabel, { size: "small", children: props.label }), jsx(Select, { value: value, size: "small", label: props.label, onChange: (event) => handleChange(event.target.value, event.target.name), children: props.items.map((item) => {
+                            return (jsx(MenuItem, { value: item.value, children: item.name }, item.value));
+                        }) })] })) : (jsx(IconButton
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            , {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                onClick: (event) => setAnchorEl(event.currentTarget), children: props.icon })), jsx(Menu, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: () => setAnchorEl(null), children: props.items.map((item) => (jsx(MenuItem, { onClick: () => handleChange(item.value), children: item.name }, item.value))) })] }));
+}
+function ThumbnailListHeaderSort(props) {
+    const { setSortAscending, sortAscending, setSortBy, sortBy } = useThumbnailListItemContext();
+    console.log('Header sort rerenders');
+    return (jsx(Fragment, { children: jsxs(Box, { sx: { minWidth: '80px' }, children: [jsx(Tooltip, { title: "asc/desc", children: jsx(IconButton, { onClick: () => setSortAscending(!sortAscending), children: jsx(SwapVertIcon, {}) }) }), jsx(DropdownInput, { width: "130px", collapseBreakpoint: props.muiBreakpoint, label: 'sort', defaultValue: sortBy, icon: jsx(Tooltip, { title: 'sort', children: jsx(SortIcon, {}) }), items: props.items.map((i) => {
+                        return { name: i.label, value: i.key.toString() };
+                    }), onChangeCallback: (value) => setSortBy(value) })] }) }));
+}
+ThumbnailListHeaderSort.defaultProps = {
+    align: 'start',
+    muiBreakpoint: 'md',
+};
+const ThumbnailListHeader = function (props) {
+    const startAlignedItems = [];
+    const endAlignedItems = [];
+    // Iterate through each child to categorize them based on their 'align' prop
+    Children.forEach(props.children, (child) => {
+        if (React.isValidElement(child)) {
+            const alignment = child.props.align || 'start';
+            if (alignment === 'end') {
+                endAlignedItems.push(child);
+            }
+            else {
+                startAlignedItems.push(child);
+            }
         }
-    }, [props.items]);
+    });
+    return (jsx(Fragment, { children: jsxs(Stack$1, { direction: "row", alignItems: "center", justifyContent: props.justifyContent ?? 'space-between', gap: 2, children: [jsx(Stack$1, { direction: "row", alignItems: "center", gap: 2, justifyContent: "start", children: startAlignedItems }), endAlignedItems] }) }));
+};
+ThumbnailListHeader.SearchField = ThumbnailListSearchField$1;
+ThumbnailListHeader.FilterTags = ThumbnailListFilterTags;
+ThumbnailListHeader.Sort = ThumbnailListHeaderSort;
+/**
+ * Main Component: Renders all sub components
+ * Includes ThumbnailList Provider for context data
+ * @param props react children, items
+ * @returns component
+ */
+function ThumbnailList(props) {
+    const combinedConfig = {
+        ...defaultConfiguration,
+        ...props.config, // This will override the defaults with any props that are not undefined
+    };
+    const [listItems, setListItems] = useState(props.items);
+    const { sortedItems, setSortBy, setSortAscending, sortAscending } = useSortedThumbnailListItems(listItems, combinedConfig.sortBy.toString(), combinedConfig.sortAscending);
+    const { tagFilteredItems, setTagAndCondition, tagAndCondition } = useTagFilteredThumbnailListItems({ allItems: sortedItems, initialTag: combinedConfig.tag.toString() });
+    const { setSearchTerm, filteredItems } = useFilteredThumbnailListItems(tagFilteredItems);
+    console.log('Thumbnaillist renders');
     return (jsx(Fragment, { children: jsx(ThumbnailListItemContext.Provider, { value: {
-                items: tagFilteredItems,
+                items: filteredItems,
                 setItems: setListItems,
                 originalItems: listItems,
                 setOriginalItems: setListItems,
@@ -299,9 +313,11 @@ const ThumbnailList = function (props) {
                 setSortAscending: setSortAscending,
                 sortAscending: sortAscending,
                 setSortBy: setSortBy,
-            }, children: jsx(Grid, { container: true, spacing: 2, children: props.children }) }) }));
-};
+                sortBy: combinedConfig.sortBy.toString(),
+                isLoading: false,
+            }, children: jsx(Stack$1, { direction: "column", sx: { width: '100%', minWidth: '425px' }, children: props.children }) }) }));
+}
 ThumbnailList.MainContent = ThumbnailListMainContent;
-ThumbnailList.Header = ThumbnailListHeader;
-export { HelloWorld, ThumbnailList };
+ThumbnailList.Header = ThumbnailListHeader;
+export { ThumbnailList };

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@janrankenhohn/react-thumbnail-list",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
   "files": [
@@ -43,6 +43,7 @@
     "@babel/core": "^7.23.9",
     "@babel/preset-env": "^7.23.9",
     "@babel/preset-react": "^7.23.3",
+    "@eslint/js": "^9.1.1",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-node-resolve": "^15.2.3",
@@ -51,22 +52,32 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/lodash": "^4.17.0",
+    "@typescript-eslint/eslint-plugin": "^7.8.0",
+    "@typescript-eslint/parser": "^7.8.0",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.34.1",
+    "globals": "^15.1.0",
+    "jest": "^27.5.1",
     "npm-run-all": "^4.1.5",
+    "prettier": "^3.2.5",
+    "react-router": "^6.26.1",
     "rollup": "^2.79.1",
     "rollup-plugin-delete": "^2.0.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-ts": "^3.4.5"
+    "rollup-plugin-ts": "^3.4.5",
+    "typescript-eslint": "^7.8.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.15.11",
     "@mui/material": "^5.15.11",
+    "lodash.debounce": "^4.0.8",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-scripts": "5.0.1",
-    "web-vitals": "^2.1.4",
-    "lodash.debounce": "^4.0.8"
+    "web-vitals": "^2.1.4"
   }
 }