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

package.json

@@ -6,23 +6,24 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "@types/file-saver": "^2.0.1",
     "@types/jest": "^24.0.0",
     "@types/node": "^12.0.0",
     "@types/react": "^16.9.43",
     "@types/react-dom": "^16.9.8",
     "@types/react-list": "^0.8.5",
     "@types/react-virtualized": "^9.21.10",
+    "@types/tinycolor2": "^1.4.2",
+    "file-saver": "^2.0.2",
     "framer-motion": "^2.1.0",
-    "phosphor-react": "^0.1.6",
+    "phosphor-react": "^0.1.8",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-dropdown-select": "^4.4.2",
-    "react-list": "^0.8.15",
     "react-scripts": "3.4.1",
     "react-use": "^15.3.2",
-    "react-virtual": "^2.2.1",
-    "react-virtualized": "^9.21.2",
     "recoil": "^0.0.10",
+    "tinycolor2": "^1.4.1",
     "typescript": "^3.9.6"
   },
   "scripts": {

src/components/IconGrid/IconGridRL.tsx

@@ -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;

src/components/IconGrid/IconGridStatic.tsx

@@ -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;

src/components/IconGrid/IconGridUV.css

@@ -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;
-}

src/components/IconGrid/IconGridUV.tsx

@@ -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;

src/components/IconGrid/IconGridVirtualized.tsx

@@ -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}
-      />
-    )
-  }
-}