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

Add sample icons and refactor Icon interface

Browse Source
This commit is contained in:
rektdeckard
2020-07-15 18:06:16 -04:00
parent 50b114ee7a
commit 8888227be1
9 changed files with 1203 additions and 1209 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/state/atoms.ts
View File

@@ -1,5 +1,5 @@
import { atom } from "recoil";
import { IconFillStyle } from "../lib/Icon";
import { IconStyle } from "../lib/Icon";
/**
* ATOM
@@ -8,14 +8,12 @@ import { IconFillStyle } from "../lib/Icon";
* updates will result in a re-render of all components subscribed to that atom:
*/
export type IconStyleQuery = IconFillStyle | null | undefined;
export const searchQueryAtom = atom<string>({
key: "searchQueryAtom",
default: "",
});
export const styleQueryAtom = atom<IconStyleQuery>({
export const styleQueryAtom = atom<IconStyle>({
key: "styleQueryAtom",
default: undefined,
default: IconStyle.REGULAR,
});

20
src/state/selectors.ts
View File

@@ -1,7 +1,7 @@
import { selector } from "recoil";
import { searchQueryAtom, styleQueryAtom, IconStyleQuery } from "./atoms";
import { ICON_LIST as list } from "../data/iconList";
import { Icon } from "../lib/Icon";
import { searchQueryAtom, styleQueryAtom } from "./atoms";
import { iconList } from "../lib/iconList";
import { Icon, IconStyle } from "../lib/Icon";
/**
* SELECTOR
@@ -14,16 +14,12 @@ const isQueryMatch = (icon: Icon, query: string): boolean => {
return (
icon.name.includes(query) ||
icon.tags.some((tag) => tag.toLowerCase().includes(query)) ||
icon.categories.some((category) =>
category.toLowerCase().includes(query)
) ||
icon.style.type.toString().includes(query) ||
!!icon.style.weight?.includes(query)
icon.categories.some((category) => category.toLowerCase().includes(query))
);
};
const isStyleMatch = (icon: Icon, style: IconStyleQuery): boolean => {
return !style || icon.style.type === style;
const isStyleMatch = (icon: Icon, style?: IconStyle): boolean => {
return !style || icon.style === style;
};
export const filteredQueryResultsSelector = selector({
@@ -32,9 +28,9 @@ export const filteredQueryResultsSelector = selector({
const query = get(searchQueryAtom).trim().toLowerCase();
const style = get(styleQueryAtom);
if (!query && !style) return list;
if (!query && !style) return iconList;
return list.filter((icon) => {
return iconList.filter((icon) => {
return isStyleMatch(icon, style) && isQueryMatch(icon, query);
});
},