andrea/phosphor-icons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

IconGrid: drop virtualization approach and bump to phosphor-react@0.1.8

Browse Source
This commit is contained in:
rektdeckard
2020-07-29 12:20:53 -04:00
parent d330f0b6d5
commit 105a1abc96
6 changed files with 5 additions and 240 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/IconGrid/IconGridRL.tsx
View File

@@ -1,34 +0,0 @@
import React from "react";
import { useRecoilValue } from "recoil";
import ReactList from "react-list";
import { filteredQueryResultsSelector } from "../../state/selectors";
import "./IconGrid.css";
type IconGridProps = {};
const IconGridRL: React.FC<IconGridProps> = () => {
const filteredQueryResults = useRecoilValue(filteredQueryResultsSelector);
const renderItem = (index: number, key: number | string) => {
const icon = filteredQueryResults[index];
return (
<div key={key} className="grid-item" style={{ width: 120}}>
{/* <img src={icon.asset} alt={`${icon.name} icon`} width="100%" /> */}
<div style={{ padding: 16 }}>{icon.name}</div>
</div>
);
};
return (
<div style={{ overflow: "auto", maxHeight: 400 }}>
<ReactList
itemRenderer={renderItem}
length={filteredQueryResults.length}
type="uniform"
/>
</div>
);
};
export default IconGridRL;

46
src/components/IconGrid/IconGridStatic.tsx
View File

@@ -1,46 +0,0 @@
import React from "react";
import { useRecoilValue } from "recoil";
import { motion } from "framer-motion";
import { filteredQueryResultsSelector } from "../../state/selectors";
import { iconColorAtom, iconSizeAtom, styleQueryAtom } from "../../state/atoms";
import "./IconGrid.css";
type IconGridProps = {};
// const variants = {
// open: { opacity: 1, x: 0 },
// closed: { opacity: 0, x: "-100%" },
// }
const whileHover = { boxShadow: "0 0 0 2px rgb(0, 0, 0)" };
const whileTap = { boxShadow: "0 0 0 4px rgb(139, 0, 139)" }
const transition = { duration: 0.2 };
const IconGrid: React.FC<IconGridProps> = () => {
const weight = useRecoilValue(styleQueryAtom);
const color = useRecoilValue(iconColorAtom);
const size = useRecoilValue(iconSizeAtom);
const filteredQueryResults = useRecoilValue(filteredQueryResultsSelector);
return (
<motion.div className="grid">
{filteredQueryResults.map(({ name, Icon }) => (
<motion.div
tabIndex={1}
key={name}
className="grid-item"
whileHover={whileHover}
whileTap={whileTap}
transition={transition}
>
<Icon color={color} size={size} weight={weight} />
<p>{name}</p>
</motion.div>
))}
</motion.div>
);
};
export default IconGrid;

20
src/components/IconGrid/IconGridUV.css
View File

@@ -1,20 +0,0 @@
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.grid-item {
margin: 4px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: aquamarine;
filter: grayscale(100%);
transition: filter 0.5s ease;
}
.grid-item:hover {
filter: grayscale(0%);
transition: 0.5s ease;
}

102
src/components/IconGrid/IconGridUV.tsx
View File

@@ -1,102 +0,0 @@
import React, { useRef, useCallback, useMemo } from "react";
import { useRecoilValue } from "recoil";
import { useVirtual } from "react-virtual";
import { filteredQueryResultsSelector } from "../../state/selectors";
// import { iconColorAtom, iconSizeAtom } from "../../state/atoms";
// import "./IconGridUV.css";
type IconGridProps = {};
const COLUMN_COUNT = 5;
const IconGrid: React.FC<IconGridProps> = () => {
const parentRef = useRef<HTMLDivElement>(null);
// const color = useRecoilValue(iconColorAtom);
// const size = useRecoilValue(iconSizeAtom);
const filteredQueryResults = useRecoilValue(filteredQueryResultsSelector);
// const categorizedQueryResults = useRecoilValue(categorizedQueryResultsSelector);
// console.log(categorizedQueryResults);
// const rowVirtualizer = useVirtual({
// size: useMemo(() => Math.ceil(filteredQueryResults.length / COLUMN_COUNT), [
// filteredQueryResults,
// ]),
// parentRef,
// estimateSize: useCallback(() => 220 * COLUMN_COUNT, []),
// });
const rowVirtualizer = useVirtual({
size: useMemo(() => Math.ceil(filteredQueryResults.length / COLUMN_COUNT), [
filteredQueryResults,
]),
parentRef,
estimateSize: useCallback(() => 240, []),
overscan: 5,
});
const columnVirtualizer = useVirtual({
horizontal: true,
size: COLUMN_COUNT,
parentRef,
estimateSize: useCallback(() => 160, []),
});
return (
<>
<div ref={parentRef} style={{ height: "90vh", width: "100%", overflowY: "auto" }}>
<div
style={{
height: `${rowVirtualizer.totalSize}px`,
// width: `${columnVirtualizer.totalSize}px`,
// height: `${rowVirtualizer.totalSize}px`,
width: "100%",
position: "relative",
}}
className="grid"
>
{rowVirtualizer.virtualItems.map((virtualRow) => (
<React.Fragment key={virtualRow.index}>
{columnVirtualizer.virtualItems.map((virtualColumn) => (
<div
key={virtualColumn.index}
style={{
position: "absolute",
top: 0,
left: 0,
width: `${virtualColumn.size}px`,
height: `${virtualRow.size}px`,
transform: `translateX(${virtualColumn.start}px) translateY(${virtualRow.start}px)`,
}}
className="grid-item"
>
{(function () {
const icon =
filteredQueryResults[
virtualRow.index * COLUMN_COUNT + virtualColumn.index
];
if (!icon) return null;
return (
<>
{/* <img
color={color}
style={{ height: size, width: size }}
src={icon.asset}
alt={`${icon.name} icon`}
width="100%"
/> */}
<p style={{ padding: 16 }}>{icon.name}</p>
</>
);
})()}
</div>
))}
</React.Fragment>
))}
</div>
</div>
</>
);
};
export default IconGrid;

34
src/components/IconGrid/IconGridVirtualized.tsx
View File

@@ -1,34 +0,0 @@
import React from "react";
import { useRecoilValue } from "recoil";
import { Grid } from "react-virtualized";
import { filteredQueryResultsSelector } from "../../state/selectors";
import "./IconGrid.css";
type IconGridProps = {};
const COLUMN_COUNT = 5;
export default class IconGridVirtualized extends React.PureComponent {
constructor(props: IconGridProps) {
super(props);
}
render() {
const filteredQueryResults = useRecoilValue(filteredQueryResultsSelector);
const cellRenderer = () => <div></div>
return (
<Grid
columnCount={COLUMN_COUNT}
columnWidth={100}
height={300}
rowCount={Math.ceil(filteredQueryResults.length / COLUMN_COUNT)}
rowHeight={220}
width={300}
cellRenderer={cellRenderer}
/>
)
}
}