Spaces:
Running
Running
File size: 3,083 Bytes
9cd6ddb |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 |
import { useState, useRef } from "react";
import { useClickAway } from "react-use";
import Picker, { useColorPicker } from "react-best-gradient-color-picker";
import classNames from "classnames";
import ColorPickerIcon from "@/assets/images/color-picker.svg";
import { IconType } from "@/types/editor";
import Image from "next/image";
export const ColorPicker = ({
value,
data,
gradients = true,
full = false,
onChange,
className,
}: {
value?: string;
data?: any;
gradients?: boolean;
full?: boolean;
onChange: (c: any, datas: any) => void;
className?: string;
}) => {
const [open, setOpen] = useState(false);
const ref = useRef(null);
const [color, setColor] = useState(value ?? "#fff");
const { getGradientObject } = useColorPicker(color, setColor);
useClickAway(ref, () => setOpen(false));
const renderBackground = (data: any) => {
if (data?.gradient?.enabled) {
if (data?.gradient?.type === "linearGradient") {
return {
background: `linear-gradient(${data?.gradient?.colours
?.map((e: any) => e.value)
.join(", ")})`,
};
} else {
return {
background: `radial-gradient(${data?.gradient?.colours
?.map((e: any) => e.value)
.join(", ")})`,
};
}
}
return { backgroundColor: data?.colour ?? data?.color ?? "#fff" };
};
return (
<div className="relative ml-[2px]">
<div
ref={ref}
className={classNames(
"bg-dark-500 z-[100] md:z-10 lg:rounded-md shadow-lg p-3 border border-dark-600 fixed md:absolute w-full md:w-max md:h-min bottom-0 md:-top-full left-0 transform md:translate-x-7",
{
"pointer-events-none opacity-0": !open,
}
)}
>
{open && (
<Picker
value={color}
hidePresets={true}
hideAdvancedSliders={true}
hideColorGuide={true}
hideInputType={true}
onChange={(c: string) => {
setColor(c);
const datas = getGradientObject();
onChange(c, datas);
}}
className={`${
data?.gradient?.enabled
? "color__picker_discotools--gradient"
: "color__picker_discotools"
} ${gradients ? "" : "color__picker without-gradients"}`}
/>
)}
</div>
<div
className={classNames(
`group flex items-center transition-all duration-200 hover:ring-opacity-100 ring-opacity-70 justify-center border-[1px] borderk-dark-600 ring-[1px] ring-white h-8 rounded cursor-pointer ${className}`,
{
"w-20": !full,
"w-full": full,
}
)}
style={data ? renderBackground(data) : { backgroundColor: color }}
onClick={() => setOpen(true)}
>
<Image
src={ColorPickerIcon}
width={12}
height={12}
alt="ColorPicker"
className="opacity-80"
/>
</div>
</div>
);
};
|