binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: icon picker (#689)

Browse source 
* feat: icon picker

* style: icon picker modal

---------

Co-authored-by: Dakshesh Jain <dakshesh.jain14@gmail.com>
This commit is contained in:
Kunal Vishwakarma 2023-04-03 23:54:26 +05:30 • committed by GitHub
parent 007ed0afa4
commit a1f0f43992
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 720 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

128
apps/app/components/emoji-icon-picker/index.tsx
View file

@ -1,10 +1,13 @@
import React, { useEffect, useState, useRef } from "react";
// headless ui
import { Tab, Transition, Popover } from "@headlessui/react";
// react colors
import { TwitterPicker } from "react-color";
// types
import { Props } from "./types";
// emojis
import emojis from "./emojis.json";
import icons from "./icons.json";
// helpers
import { getRecentEmojis, saveRecentEmoji } from "./helpers";
import { getRandomEmoji } from "helpers/common.helper";
@ -22,10 +25,18 @@ const tabOptions = [
},
];
const EmojiIconPicker: React.FC<Props> = ({ label, value, onChange }) => {
const EmojiIconPicker: React.FC<Props> = ({
label,
value,
onChange,
onIconColorChange,
onIconsClick,
}) => {
const ref = useRef<HTMLDivElement>(null);
const [isOpen, setIsOpen] = useState(false);
const [openColorPicker, setOpenColorPicker] = useState(false);
const [activeColor, setActiveColor] = useState<string>("#020617");
const [recentEmojis, setRecentEmojis] = useState<string[]>([]);
@ -58,20 +69,25 @@ const EmojiIconPicker: React.FC<Props> = ({ label, value, onChange }) => {
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Popover.Panel className="absolute z-10 mt-2 w-80 rounded-lg bg-white shadow-lg">
<div className="h-72 w-80 overflow-auto rounded border bg-white p-2 shadow-2xl">
<Popover.Panel className="absolute z-10 mt-2 w-[250px] rounded-[4px] bg-white shadow-lg">
<div className="h-[230px] w-[250px] overflow-auto border rounded-[4px] bg-white p-2 shadow-xl">
<Tab.Group as="div" className="flex h-full w-full flex-col">
<Tab.List className="flex-0 -mx-2 flex justify-around gap-1 border-b p-1">
<Tab.List className="flex-0 -mx-2 flex justify-around gap-1 p-1">
{tabOptions.map((tab) => (
<Tab
key={tab.key}
className={({ selected }) =>
`-my-1 w-1/2 border-b py-2 text-center text-sm font-medium outline-none transition-colors ${
selected ? "border-theme" : "border-transparent"
}`
}
>
{tab.title}
<Tab key={tab.key} as={React.Fragment}>
{({ selected }) => (
<button
type="button"
onClick={() => {
setOpenColorPicker(false);
}}
className={`-my-1 w-1/2 border-b pb-2 text-center text-sm font-medium outline-none transition-colors ${
selected ? "border-theme" : "border-transparent"
}`}
>
{tab.title}
</button>
)}
</Tab>
))}
</Tab.List>
@ -79,12 +95,12 @@ const EmojiIconPicker: React.FC<Props> = ({ label, value, onChange }) => {
<Tab.Panel>
{recentEmojis.length > 0 && (
<div className="py-2">
<h3 className="mb-2">Recent Emojis</h3>
<div className="grid grid-cols-9 gap-2">
{/* <h3 className="mb-2">Recent Emojis</h3> */}
<div className="grid grid-cols-10">
{recentEmojis.map((emoji) => (
<button
type="button"
className="select-none text-lg hover:bg-hover-gray"
className="h-4 w-4 select-none text-sm hover:bg-hover-gray flex items-center justify-between"
key={emoji}
onClick={() => {
onChange(emoji);
@ -97,13 +113,14 @@ const EmojiIconPicker: React.FC<Props> = ({ label, value, onChange }) => {
</div>
</div>
)}
<hr className="w-full h-[1px] mb-2" />
<div>
<h3 className="mb-2">All Emojis</h3>
<div className="grid grid-cols-9 gap-2">
{/* <h3 className="mb-1">All Emojis</h3> */}
<div className="grid grid-cols-10 gap-y-1">
{emojis.map((emoji) => (
<button
type="button"
className="select-none text-lg hover:bg-hover-gray"
className="h-4 w-4 mb-1 select-none text-sm hover:bg-hover-gray flex items-center"
key={emoji}
onClick={() => {
onChange(emoji);
@ -117,9 +134,76 @@ const EmojiIconPicker: React.FC<Props> = ({ label, value, onChange }) => {
</div>
</div>
</Tab.Panel>
<Tab.Panel className="flex h-full w-full flex-col items-center justify-center">
<p>Coming Soon...</p>
</Tab.Panel>
<div className="py-2">
<div className="relative">
<div className="pb-2 flex items-center justify-between">
{[
"#D687FF",
"#F7AE59",
"#FF6B00",
"#8CC1FF",
"#FCBE1D",
"#18904F",
"#ADF672",
"#05C3FF",
"#000000",
].map((curCol) => (
<span
className="w-4 h-4 rounded-full cursor-pointer"
style={{ backgroundColor: curCol }}
onClick={() => setActiveColor(curCol)}
/>
))}
<button
type="button"
onClick={() => setOpenColorPicker((prev) => !prev)}
className="flex items-center gap-1"
>
<span
className="w-4 h-4 rounded-full conical-gradient"
style={{ backgroundColor: activeColor }}
/>
</button>
</div>
<div>
<TwitterPicker
className={`m-2 !absolute top-4 left-4 z-10 ${
openColorPicker ? "block" : "hidden"
}`}
color={activeColor}
onChange={(color) => {
setActiveColor(color.hex);
if (onIconColorChange) onIconColorChange(color.hex);
}}
triangle="hide"
width="205px"
/>
</div>
</div>
<hr className="w-full h-[1px] mb-1" />
<Tab.Panel className="flex h-full w-full flex-col justify-center">
<div className="grid grid-cols-10 mt-1 ml-1 gap-1">
{icons.material_rounded.map((icon) => (
<button
type="button"
className="h-4 w-4 mb-1 select-none text-lg hover:bg-hover-gray flex items-center"
key={icon.name}
onClick={() => {
if (onIconsClick) onIconsClick(icon.name);
setIsOpen(false);
}}
>
<span
style={{ color: activeColor }}
className="material-symbols-rounded text-base"
>
{icon.name}
</span>
</button>
))}
</div>
</Tab.Panel>
</div>
</Tab.Panels>
</Tab.Group>
</div>