progressed icon picker component
This commit is contained in:
daniel31x13
parent
dc388ebba5
commit
ae2324ecd3
|
|
@ -1,31 +1,26 @@
|
|||
import { icons } from "@/lib/client/icons";
|
||||
import React, { useMemo, useState } from "react";
|
||||
import React, { useMemo, useState, lazy, Suspense } from "react";
|
||||
import Fuse from "fuse.js";
|
||||
import TextInput from "./TextInput";
|
||||
import Popover from "./Popover";
|
||||
import { HexColorPicker } from "react-colorful";
|
||||
import { useTranslation } from "next-i18next";
|
||||
import Icon from "./Icon";
|
||||
|
||||
const fuse = new Fuse(icons, {
|
||||
keys: [{ name: "name", weight: 4 }, "tags", "categories"],
|
||||
threshold: 0.2,
|
||||
useExtendedSearch: true,
|
||||
});
|
||||
import { IconWeight } from "@phosphor-icons/react";
|
||||
|
||||
type Props = {
|
||||
onClose: Function;
|
||||
alignment?: "left" | "right" | "bottom" | "top";
|
||||
alignment?: "left" | "right";
|
||||
color: string;
|
||||
setColor: Function;
|
||||
iconName: string;
|
||||
iconName?: string;
|
||||
setIconName: Function;
|
||||
weight: "light" | "regular" | "bold" | "fill" | "duotone";
|
||||
weight: "light" | "regular" | "bold" | "fill" | "duotone" | "thin";
|
||||
setWeight: Function;
|
||||
reset: Function;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
const IconPicker = ({
|
||||
onClose,
|
||||
alignment,
|
||||
color,
|
||||
setColor,
|
||||
|
|
@ -34,8 +29,17 @@ const IconPicker = ({
|
|||
weight,
|
||||
setWeight,
|
||||
className,
|
||||
reset,
|
||||
}: Props) => {
|
||||
const fuse = new Fuse(icons, {
|
||||
keys: [{ name: "name", weight: 4 }, "tags", "categories"],
|
||||
threshold: 0.2,
|
||||
useExtendedSearch: true,
|
||||
});
|
||||
|
||||
const { t } = useTranslation();
|
||||
const [query, setQuery] = useState("");
|
||||
const [iconPicker, setIconPicker] = useState(false);
|
||||
|
||||
const filteredQueryResultsSelector = useMemo(() => {
|
||||
if (!query) {
|
||||
|
|
@ -45,26 +49,43 @@ const IconPicker = ({
|
|||
}, [query]);
|
||||
|
||||
return (
|
||||
<Popover
|
||||
onClose={onClose}
|
||||
className={
|
||||
className +
|
||||
" bg-base-200 border border-neutral-content p-3 h-72 w-72 overflow-y-auto rounded-lg"
|
||||
}
|
||||
<div className="relative">
|
||||
<div
|
||||
onClick={() => setIconPicker(!iconPicker)}
|
||||
className="btn btn-square w-20 h-20"
|
||||
>
|
||||
<div>
|
||||
<div className="mb-3 flex gap-3">
|
||||
<div className="w-full flex flex-col justify-between">
|
||||
{iconName ? (
|
||||
<Icon
|
||||
icon={iconName}
|
||||
size={80}
|
||||
weight={weight as any}
|
||||
color={color}
|
||||
className="mx-auto"
|
||||
size={60}
|
||||
weight={(weight || "regular") as IconWeight}
|
||||
color={color || "#0ea5e9"}
|
||||
/>
|
||||
|
||||
) : (
|
||||
<i
|
||||
className="bi-folder-fill text-6xl"
|
||||
style={{ color: color || "#0ea5e9" }}
|
||||
></i>
|
||||
)}
|
||||
</div>
|
||||
{iconPicker && (
|
||||
<Popover
|
||||
onClose={() => setIconPicker(false)}
|
||||
className={
|
||||
className +
|
||||
" fade-in bg-base-200 border border-neutral-content p-2 h-44 w-[22.5rem] rounded-lg backdrop-blur-sm bg-opacity-90 top-20 left-0 lg:-translate-x-1/3"
|
||||
}
|
||||
>
|
||||
<div className="flex gap-2 h-full w-full">
|
||||
<div className="flex flex-col gap-2 h-full w-fit color-picker">
|
||||
<div
|
||||
className="btn btn-ghost btn-xs"
|
||||
onClick={reset as React.MouseEventHandler<HTMLDivElement>}
|
||||
>
|
||||
{t("reset")}
|
||||
</div>
|
||||
<select
|
||||
className="border border-neutral-content bg-base-100 focus:outline-none focus:border-primary duration-100 w-full rounded-[0.375rem] h-7"
|
||||
className="border border-neutral-content bg-base-100 focus:outline-none focus:border-primary duration-100 w-full rounded-md h-7"
|
||||
value={weight}
|
||||
onChange={(e) => setWeight(e.target.value)}
|
||||
>
|
||||
|
|
@ -75,25 +96,25 @@ const IconPicker = ({
|
|||
<option value="fill">Fill</option>
|
||||
<option value="duotone">Duotone</option>
|
||||
</select>
|
||||
</div>
|
||||
<HexColorPicker color={color} onChange={(e) => setColor(e)} />
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2 w-fit">
|
||||
<TextInput
|
||||
className="p-2 rounded w-full mb-3 h-7 text-sm"
|
||||
className="p-2 rounded w-full h-7 text-sm"
|
||||
placeholder="Search icons"
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
/>
|
||||
|
||||
<div className="grid grid-cols-5 gap-1 w-full">
|
||||
<div className="grid grid-cols-4 gap-1 w-full overflow-y-auto h-32 border border-neutral-content bg-base-100 rounded-md p-2">
|
||||
{filteredQueryResultsSelector.map((icon) => {
|
||||
const IconComponent = icon.Icon;
|
||||
return (
|
||||
<div
|
||||
key={icon.pascal_name}
|
||||
onClick={() => setIconName(icon.pascal_name)}
|
||||
className={`cursor-pointer btn p-1 box-border ${
|
||||
className={`cursor-pointer btn p-1 box-border bg-base-100 border-none aspect-square ${
|
||||
icon.pascal_name === iconName
|
||||
? "outline outline-1 outline-primary"
|
||||
: ""
|
||||
|
|
@ -105,7 +126,10 @@ const IconPicker = ({
|
|||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Popover>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
import React, { useState } from "react";
|
||||
import TextInput from "@/components/TextInput";
|
||||
import { HexColorPicker } from "react-colorful";
|
||||
import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
|
||||
import Modal from "../Modal";
|
||||
import { useTranslation } from "next-i18next";
|
||||
|
|
@ -8,6 +7,7 @@ import { useUpdateCollection } from "@/hooks/store/collections";
|
|||
import toast from "react-hot-toast";
|
||||
import IconPicker from "../IconPicker";
|
||||
import Icon from "../Icon";
|
||||
import { IconWeight } from "@phosphor-icons/react";
|
||||
|
||||
type Props = {
|
||||
onClose: Function;
|
||||
|
|
@ -22,7 +22,6 @@ export default function EditCollectionModal({
|
|||
const [collection, setCollection] =
|
||||
useState<CollectionIncludingMembersAndLinkCount>(activeCollection);
|
||||
|
||||
const [iconPicker, setIconPicker] = useState(false);
|
||||
const [submitLoader, setSubmitLoader] = useState(false);
|
||||
const updateCollection = useUpdateCollection();
|
||||
|
||||
|
|
@ -59,10 +58,32 @@ export default function EditCollectionModal({
|
|||
<div className="divider mb-3 mt-1"></div>
|
||||
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="flex flex-col sm:flex-row gap-3">
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="flex gap-3 items-end">
|
||||
<IconPicker
|
||||
color={collection.color || "#0ea5e9"}
|
||||
setColor={(color: string) =>
|
||||
setCollection({ ...collection, color })
|
||||
}
|
||||
weight={(collection.iconWeight || "regular") as IconWeight}
|
||||
setWeight={(iconWeight: string) =>
|
||||
setCollection({ ...collection, iconWeight })
|
||||
}
|
||||
iconName={collection.icon as string}
|
||||
setIconName={(icon: string) =>
|
||||
setCollection({ ...collection, icon })
|
||||
}
|
||||
reset={() =>
|
||||
setCollection({
|
||||
...collection,
|
||||
color: "#0ea5e9",
|
||||
icon: "",
|
||||
iconWeight: "",
|
||||
})
|
||||
}
|
||||
/>
|
||||
<div className="w-full">
|
||||
<p className="mb-2">{t("name")}</p>
|
||||
<div className="flex flex-col gap-3">
|
||||
<TextInput
|
||||
className="bg-base-200"
|
||||
value={collection.name}
|
||||
|
|
@ -71,46 +92,6 @@ export default function EditCollectionModal({
|
|||
setCollection({ ...collection, name: e.target.value })
|
||||
}
|
||||
/>
|
||||
<div>
|
||||
<p className="w-full mb-2">{t("color")}</p>
|
||||
<div className="color-picker flex justify-between items-center">
|
||||
<div className="flex flex-col gap-2 items-center w-32 relative">
|
||||
<Icon
|
||||
icon={collection.icon as string}
|
||||
size={80}
|
||||
weight={collection.iconWeight as any}
|
||||
color={collection.color as string}
|
||||
onClick={() => setIconPicker(true)}
|
||||
/>
|
||||
{iconPicker && (
|
||||
<IconPicker
|
||||
onClose={() => setIconPicker(false)}
|
||||
className="top-20"
|
||||
color={collection.color as string}
|
||||
setColor={(color: string) =>
|
||||
setCollection({ ...collection, color })
|
||||
}
|
||||
weight={collection.iconWeight as any}
|
||||
setWeight={(iconWeight: string) =>
|
||||
setCollection({ ...collection, iconWeight })
|
||||
}
|
||||
iconName={collection.icon as string}
|
||||
setIconName={(icon: string) =>
|
||||
setCollection({ ...collection, icon })
|
||||
}
|
||||
/>
|
||||
)}
|
||||
<div
|
||||
className="btn btn-ghost btn-xs"
|
||||
onClick={() =>
|
||||
setCollection({ ...collection, color: "#0ea5e9" })
|
||||
}
|
||||
>
|
||||
{t("reset")}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -88,13 +88,10 @@ function App({
|
|||
{icon}
|
||||
<span data-testid="toast-message">{message}</span>
|
||||
{t.type !== "loading" && (
|
||||
<button
|
||||
className="btn btn-xs outline-none btn-circle btn-ghost"
|
||||
<div
|
||||
data-testid="close-toast-button"
|
||||
onClick={() => toast.dismiss(t.id)}
|
||||
>
|
||||
<i className="bi bi-x"></i>
|
||||
</button>
|
||||
></div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -144,15 +144,16 @@
|
|||
|
||||
/* For react-colorful */
|
||||
.color-picker .react-colorful {
|
||||
width: 100%;
|
||||
height: 7.5rem;
|
||||
height: 7rem;
|
||||
width: 7rem;
|
||||
}
|
||||
.color-picker .react-colorful__hue {
|
||||
height: 1rem;
|
||||
}
|
||||
.color-picker .react-colorful__pointer {
|
||||
width: 1.3rem;
|
||||
height: 1.3rem;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
/* For the Link banner */
|
||||
|
|
|
|||
Ŝarĝante…
Reference in New Issue