xwx.moe/el.xwx.moe
xwx.moe/ el.xwx.moe
1
0
Disbranĉigi 0
Fontkodo Issues Tirpetoj Actions Packages Projects Eldonoj Wiki Activity

minor fix

This commit is contained in:
daniel31x13 2024-11-08 05:24:18 -05:00
parent b14e77bdf9
commit 0de5caffa1
1 changed files with 4 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
components/IconGrid.tsx
View File

@ -18,7 +18,6 @@ type Props = {
}; };
const IconGrid = ({ query, color, weight, iconName, setIconName }: Props) => { const IconGrid = ({ query, color, weight, iconName, setIconName }: Props) => {
// Memoize the filtered results to avoid recalculations on each render
const filteredIcons = useMemo(() => { const filteredIcons = useMemo(() => {
if (!query) { if (!query) {
return icons; return icons;
@ -26,12 +25,10 @@ const IconGrid = ({ query, color, weight, iconName, setIconName }: Props) => {
return fuse.search(query).map((result) => result.item); return fuse.search(query).map((result) => result.item);
}, [query]); }, [query]);
// Grid configuration
const columnCount = 6; const columnCount = 6;
const rowCount = Math.ceil(filteredIcons.length / columnCount); const rowCount = Math.ceil(filteredIcons.length / columnCount);
const GUTTER_SIZE = 5; const GUTTER_SIZE = 5;
// Render a single cell (icon) in the grid
const Cell = ({ columnIndex, rowIndex, style }: any) => { const Cell = ({ columnIndex, rowIndex, style }: any) => {
const index = rowIndex * columnCount + columnIndex; const index = rowIndex * columnCount + columnIndex;
if (index >= filteredIcons.length) return null; // Prevent overflow if (index >= filteredIcons.length) return null; // Prevent overflow
@ -60,7 +57,7 @@ const IconGrid = ({ query, color, weight, iconName, setIconName }: Props) => {
); );
}; };
const innerElementType = forwardRef(({ style, ...rest }: any, ref) => ( const InnerElementType = forwardRef(({ style, ...rest }: any, ref) => (
<div <div
ref={ref} ref={ref}
style={{ style={{
@ -72,13 +69,15 @@ const IconGrid = ({ query, color, weight, iconName, setIconName }: Props) => {
/> />
)); ));
InnerElementType.displayName = "InnerElementType";
return ( return (
<Grid <Grid
columnCount={columnCount} columnCount={columnCount}
rowCount={rowCount} rowCount={rowCount}
columnWidth={50} columnWidth={50}
rowHeight={50} rowHeight={50}
innerElementType={innerElementType} innerElementType={InnerElementType}
width={320} width={320}
height={158} height={158}
itemData={filteredIcons} itemData={filteredIcons}