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

IconGrid: refactor props to accept a whole IconEntry

Browse Source
This commit is contained in:
rektdeckard
2020-10-07 15:55:41 -04:00
parent c5ce2c21cb
commit 2750c84431
3 changed files with 17 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/IconGrid/DetailsPanel.tsx
View File

@@ -3,7 +3,7 @@ import { useRecoilValue, useSetRecoilState } from "recoil";
import { motion } from "framer-motion"; import { motion } from "framer-motion";
import { Svg2Png } from "svg2png-converter"; import { Svg2Png } from "svg2png-converter";
import { saveAs } from "file-saver"; import { saveAs } from "file-saver";
import { Icon, Copy, X, CheckCircle, Download } from "phosphor-react"; import { Copy, X, CheckCircle, Download } from "phosphor-react";
import { import {
iconWeightAtom, iconWeightAtom,
@@ -12,6 +12,8 @@ import {
iconPreviewOpenAtom, iconPreviewOpenAtom,
} from "../../state/atoms"; } from "../../state/atoms";
import useTransientState from "../../hooks/useTransientState"; import useTransientState from "../../hooks/useTransientState";
import TagCloud from "./TagCloud";
import { IconEntry } from "../../lib";
const panelVariants = { const panelVariants = {
open: { open: {
@@ -43,12 +45,12 @@ interface InfoPanelProps {
index: number; index: number;
spans: number; spans: number;
isDark: boolean; isDark: boolean;
name: string; entry: IconEntry;
Icon: Icon;
} }
const DetailsPanel: React.FC<InfoPanelProps> = (props) => { const DetailsPanel: React.FC<InfoPanelProps> = (props) => {
const { index, spans, isDark, name, Icon } = props; const { index, spans, isDark, entry } = props;
const { name, Icon, categories, tags } = entry;
const weight = useRecoilValue(iconWeightAtom); const weight = useRecoilValue(iconWeightAtom);
const size = useRecoilValue(iconSizeAtom); const size = useRecoilValue(iconSizeAtom);
const color = useRecoilValue(iconColorAtom); const color = useRecoilValue(iconColorAtom);
@@ -56,10 +58,12 @@ const DetailsPanel: React.FC<InfoPanelProps> = (props) => {
const [copied, setCopied] = useTransientState<string | false>(false, 2000); const [copied, setCopied] = useTransientState<string | false>(false, 2000);
const ref = useRef<SVGSVGElement>(null); const ref = useRef<SVGSVGElement>(null);
const buttonBarStyle = { color: isDark ? "white" : buttonColor }; const buttonBarStyle: React.CSSProperties = {
const snippetButtonStyle = color: isDark ? "white" : buttonColor,
};
const snippetButtonStyle: React.CSSProperties =
weight === "duotone" weight === "duotone"
? { color: disabledColor, "user-select": "none" } ? { color: disabledColor, userSelect: "none" }
: { color: buttonColor }; : { color: buttonColor };
const snippets = { const snippets = {

2
src/components/IconGrid/IconGrid.tsx
View File

@@ -52,7 +52,7 @@ const IconGrid: React.FC<IconGridProps> = () => {
index={index} index={index}
spans={spans} spans={spans}
isDark={isDark} isDark={isDark}
{...iconEntry} entry={iconEntry}
originOffset={originOffset} originOffset={originOffset}
/> />
))} ))}

10
src/components/IconGrid/IconGridItem.tsx
View File

@@ -6,17 +6,16 @@ import React, {
} from "react"; } from "react";
import { useRecoilState } from "recoil"; import { useRecoilState } from "recoil";
import { motion, AnimatePresence } from "framer-motion"; import { motion, AnimatePresence } from "framer-motion";
import { IconProps, Icon } from "phosphor-react";
import { iconPreviewOpenAtom } from "../../state/atoms"; import { iconPreviewOpenAtom } from "../../state/atoms";
import DetailsPanel from "./DetailsPanel"; import DetailsPanel from "./DetailsPanel";
import { IconEntry } from "../../lib";
interface IconGridItemProps extends IconProps { interface IconGridItemProps {
index: number; index: number;
spans: number; spans: number;
isDark: boolean; isDark: boolean;
name: string; entry: IconEntry;
Icon: Icon;
originOffset: MutableRefObject<{ top: number; left: number }>; originOffset: MutableRefObject<{ top: number; left: number }>;
} }
@@ -33,7 +32,8 @@ const itemVariants = {
}; };
const IconGridItem: React.FC<IconGridItemProps> = (props) => { const IconGridItem: React.FC<IconGridItemProps> = (props) => {
const { index, originOffset, name, Icon } = props; const { index, originOffset, entry } = props;
const { name, Icon } = entry;
const [open, setOpen] = useRecoilState(iconPreviewOpenAtom); const [open, setOpen] = useRecoilState(iconPreviewOpenAtom);
const isOpen = open === name; const isOpen = open === name;
const delayRef = useRef<number>(0); const delayRef = useRef<number>(0);