forked from github/plane
feat: icon picker (#689)
* feat: icon picker * style: icon picker modal --------- Co-authored-by: Dakshesh Jain <dakshesh.jain14@gmail.com>
This commit is contained in:
Kunal Vishwakarma
GitHub
parent
007ed0afa4
commit
a1f0f43992
607
apps/app/components/emoji-icon-picker/icons.json
Normal file
607
apps/app/components/emoji-icon-picker/icons.json
Normal file
@ -0,0 +1,607 @@
|
||||
{
|
||||
"material_rounded": [
|
||||
{
|
||||
"name": "search"
|
||||
},
|
||||
{
|
||||
"name": "home"
|
||||
},
|
||||
{
|
||||
"name": "menu"
|
||||
},
|
||||
{
|
||||
"name": "close"
|
||||
},
|
||||
{
|
||||
"name": "settings"
|
||||
},
|
||||
{
|
||||
"name": "done"
|
||||
},
|
||||
{
|
||||
"name": "check_circle"
|
||||
},
|
||||
{
|
||||
"name": "favorite"
|
||||
},
|
||||
{
|
||||
"name": "add"
|
||||
},
|
||||
{
|
||||
"name": "delete"
|
||||
},
|
||||
{
|
||||
"name": "arrow_back"
|
||||
},
|
||||
{
|
||||
"name": "star"
|
||||
},
|
||||
{
|
||||
"name": "logout"
|
||||
},
|
||||
{
|
||||
"name": "add_circle"
|
||||
},
|
||||
{
|
||||
"name": "cancel"
|
||||
},
|
||||
{
|
||||
"name": "arrow_drop_down"
|
||||
},
|
||||
{
|
||||
"name": "more_vert"
|
||||
},
|
||||
{
|
||||
"name": "check"
|
||||
},
|
||||
{
|
||||
"name": "check_box"
|
||||
},
|
||||
{
|
||||
"name": "toggle_on"
|
||||
},
|
||||
{
|
||||
"name": "open_in_new"
|
||||
},
|
||||
{
|
||||
"name": "refresh"
|
||||
},
|
||||
{
|
||||
"name": "login"
|
||||
},
|
||||
{
|
||||
"name": "radio_button_unchecked"
|
||||
},
|
||||
{
|
||||
"name": "more_horiz"
|
||||
},
|
||||
{
|
||||
"name": "apps"
|
||||
},
|
||||
{
|
||||
"name": "radio_button_checked"
|
||||
},
|
||||
{
|
||||
"name": "download"
|
||||
},
|
||||
{
|
||||
"name": "remove"
|
||||
},
|
||||
{
|
||||
"name": "toggle_off"
|
||||
},
|
||||
{
|
||||
"name": "bolt"
|
||||
},
|
||||
{
|
||||
"name": "arrow_upward"
|
||||
},
|
||||
{
|
||||
"name": "filter_list"
|
||||
},
|
||||
{
|
||||
"name": "delete_forever"
|
||||
},
|
||||
{
|
||||
"name": "autorenew"
|
||||
},
|
||||
{
|
||||
"name": "key"
|
||||
},
|
||||
{
|
||||
"name": "sort"
|
||||
},
|
||||
{
|
||||
"name": "sync"
|
||||
},
|
||||
{
|
||||
"name": "add_box"
|
||||
},
|
||||
{
|
||||
"name": "block"
|
||||
},
|
||||
{
|
||||
"name": "restart_alt"
|
||||
},
|
||||
{
|
||||
"name": "menu_open"
|
||||
},
|
||||
{
|
||||
"name": "shopping_cart_checkout"
|
||||
},
|
||||
{
|
||||
"name": "expand_circle_down"
|
||||
},
|
||||
{
|
||||
"name": "backspace"
|
||||
},
|
||||
{
|
||||
"name": "undo"
|
||||
},
|
||||
{
|
||||
"name": "done_all"
|
||||
},
|
||||
{
|
||||
"name": "do_not_disturb_on"
|
||||
},
|
||||
{
|
||||
"name": "open_in_full"
|
||||
},
|
||||
{
|
||||
"name": "double_arrow"
|
||||
},
|
||||
{
|
||||
"name": "sync_alt"
|
||||
},
|
||||
{
|
||||
"name": "zoom_in"
|
||||
},
|
||||
{
|
||||
"name": "done_outline"
|
||||
},
|
||||
{
|
||||
"name": "drag_indicator"
|
||||
},
|
||||
{
|
||||
"name": "fullscreen"
|
||||
},
|
||||
{
|
||||
"name": "star_half"
|
||||
},
|
||||
{
|
||||
"name": "settings_accessibility"
|
||||
},
|
||||
{
|
||||
"name": "reply"
|
||||
},
|
||||
{
|
||||
"name": "exit_to_app"
|
||||
},
|
||||
{
|
||||
"name": "unfold_more"
|
||||
},
|
||||
{
|
||||
"name": "library_add"
|
||||
},
|
||||
{
|
||||
"name": "cached"
|
||||
},
|
||||
{
|
||||
"name": "select_check_box"
|
||||
},
|
||||
{
|
||||
"name": "terminal"
|
||||
},
|
||||
{
|
||||
"name": "change_circle"
|
||||
},
|
||||
{
|
||||
"name": "disabled_by_default"
|
||||
},
|
||||
{
|
||||
"name": "swap_horiz"
|
||||
},
|
||||
{
|
||||
"name": "swap_vert"
|
||||
},
|
||||
{
|
||||
"name": "app_registration"
|
||||
},
|
||||
{
|
||||
"name": "download_for_offline"
|
||||
},
|
||||
{
|
||||
"name": "close_fullscreen"
|
||||
},
|
||||
{
|
||||
"name": "file_open"
|
||||
},
|
||||
{
|
||||
"name": "minimize"
|
||||
},
|
||||
{
|
||||
"name": "open_with"
|
||||
},
|
||||
{
|
||||
"name": "dataset"
|
||||
},
|
||||
{
|
||||
"name": "add_task"
|
||||
},
|
||||
{
|
||||
"name": "start"
|
||||
},
|
||||
{
|
||||
"name": "keyboard_voice"
|
||||
},
|
||||
{
|
||||
"name": "create_new_folder"
|
||||
},
|
||||
{
|
||||
"name": "forward"
|
||||
},
|
||||
{
|
||||
"name": "download"
|
||||
},
|
||||
{
|
||||
"name": "settings_applications"
|
||||
},
|
||||
{
|
||||
"name": "compare_arrows"
|
||||
},
|
||||
{
|
||||
"name": "redo"
|
||||
},
|
||||
{
|
||||
"name": "zoom_out"
|
||||
},
|
||||
{
|
||||
"name": "publish"
|
||||
},
|
||||
{
|
||||
"name": "html"
|
||||
},
|
||||
{
|
||||
"name": "token"
|
||||
},
|
||||
{
|
||||
"name": "switch_access_shortcut"
|
||||
},
|
||||
{
|
||||
"name": "fullscreen_exit"
|
||||
},
|
||||
{
|
||||
"name": "sort_by_alpha"
|
||||
},
|
||||
{
|
||||
"name": "delete_sweep"
|
||||
},
|
||||
{
|
||||
"name": "indeterminate_check_box"
|
||||
},
|
||||
{
|
||||
"name": "view_timeline"
|
||||
},
|
||||
{
|
||||
"name": "settings_backup_restore"
|
||||
},
|
||||
{
|
||||
"name": "arrow_drop_down_circle"
|
||||
},
|
||||
{
|
||||
"name": "assistant_navigation"
|
||||
},
|
||||
{
|
||||
"name": "sync_problem"
|
||||
},
|
||||
{
|
||||
"name": "clear_all"
|
||||
},
|
||||
{
|
||||
"name": "density_medium"
|
||||
},
|
||||
{
|
||||
"name": "heart_plus"
|
||||
},
|
||||
{
|
||||
"name": "filter_alt_off"
|
||||
},
|
||||
{
|
||||
"name": "expand"
|
||||
},
|
||||
{
|
||||
"name": "subdirectory_arrow_right"
|
||||
},
|
||||
{
|
||||
"name": "download_done"
|
||||
},
|
||||
{
|
||||
"name": "arrow_outward"
|
||||
},
|
||||
{
|
||||
"name": "123"
|
||||
},
|
||||
{
|
||||
"name": "swipe_left"
|
||||
},
|
||||
{
|
||||
"name": "auto_mode"
|
||||
},
|
||||
{
|
||||
"name": "saved_search"
|
||||
},
|
||||
{
|
||||
"name": "place_item"
|
||||
},
|
||||
{
|
||||
"name": "system_update_alt"
|
||||
},
|
||||
{
|
||||
"name": "javascript"
|
||||
},
|
||||
{
|
||||
"name": "search_off"
|
||||
},
|
||||
{
|
||||
"name": "output"
|
||||
},
|
||||
{
|
||||
"name": "select_all"
|
||||
},
|
||||
{
|
||||
"name": "fit_screen"
|
||||
},
|
||||
{
|
||||
"name": "swipe_up"
|
||||
},
|
||||
{
|
||||
"name": "dynamic_form"
|
||||
},
|
||||
{
|
||||
"name": "hide_source"
|
||||
},
|
||||
{
|
||||
"name": "swipe_right"
|
||||
},
|
||||
{
|
||||
"name": "switch_access_shortcut_add"
|
||||
},
|
||||
{
|
||||
"name": "browse_gallery"
|
||||
},
|
||||
{
|
||||
"name": "css"
|
||||
},
|
||||
{
|
||||
"name": "density_small"
|
||||
},
|
||||
{
|
||||
"name": "assistant_direction"
|
||||
},
|
||||
{
|
||||
"name": "check_small"
|
||||
},
|
||||
{
|
||||
"name": "youtube_searched_for"
|
||||
},
|
||||
{
|
||||
"name": "move_up"
|
||||
},
|
||||
{
|
||||
"name": "swap_horizontal_circle"
|
||||
},
|
||||
{
|
||||
"name": "data_thresholding"
|
||||
},
|
||||
{
|
||||
"name": "install_mobile"
|
||||
},
|
||||
{
|
||||
"name": "move_down"
|
||||
},
|
||||
{
|
||||
"name": "dataset_linked"
|
||||
},
|
||||
{
|
||||
"name": "keyboard_command_key"
|
||||
},
|
||||
{
|
||||
"name": "view_kanban"
|
||||
},
|
||||
{
|
||||
"name": "swipe_down"
|
||||
},
|
||||
{
|
||||
"name": "key_off"
|
||||
},
|
||||
{
|
||||
"name": "transcribe"
|
||||
},
|
||||
{
|
||||
"name": "send_time_extension"
|
||||
},
|
||||
{
|
||||
"name": "swipe_down_alt"
|
||||
},
|
||||
{
|
||||
"name": "swipe_left_alt"
|
||||
},
|
||||
{
|
||||
"name": "swipe_right_alt"
|
||||
},
|
||||
{
|
||||
"name": "swipe_up_alt"
|
||||
},
|
||||
{
|
||||
"name": "keyboard_option_key"
|
||||
},
|
||||
{
|
||||
"name": "cycle"
|
||||
},
|
||||
{
|
||||
"name": "rebase"
|
||||
},
|
||||
{
|
||||
"name": "rebase_edit"
|
||||
},
|
||||
{
|
||||
"name": "empty_dashboard"
|
||||
},
|
||||
{
|
||||
"name": "magic_exchange"
|
||||
},
|
||||
{
|
||||
"name": "acute"
|
||||
},
|
||||
{
|
||||
"name": "point_scan"
|
||||
},
|
||||
{
|
||||
"name": "step_into"
|
||||
},
|
||||
{
|
||||
"name": "cheer"
|
||||
},
|
||||
{
|
||||
"name": "emoticon"
|
||||
},
|
||||
{
|
||||
"name": "explosion"
|
||||
},
|
||||
{
|
||||
"name": "water_bottle"
|
||||
},
|
||||
{
|
||||
"name": "weather_hail"
|
||||
},
|
||||
{
|
||||
"name": "syringe"
|
||||
},
|
||||
{
|
||||
"name": "pill"
|
||||
},
|
||||
{
|
||||
"name": "genetics"
|
||||
},
|
||||
{
|
||||
"name": "allergy"
|
||||
},
|
||||
{
|
||||
"name": "medical_mask"
|
||||
},
|
||||
{
|
||||
"name": "body_fat"
|
||||
},
|
||||
{
|
||||
"name": "barefoot"
|
||||
},
|
||||
{
|
||||
"name": "infrared"
|
||||
},
|
||||
{
|
||||
"name": "wrist"
|
||||
},
|
||||
{
|
||||
"name": "metabolism"
|
||||
},
|
||||
{
|
||||
"name": "conditions"
|
||||
},
|
||||
{
|
||||
"name": "taunt"
|
||||
},
|
||||
{
|
||||
"name": "altitude"
|
||||
},
|
||||
{
|
||||
"name": "tibia"
|
||||
},
|
||||
{
|
||||
"name": "footprint"
|
||||
},
|
||||
{
|
||||
"name": "eyeglasses"
|
||||
},
|
||||
{
|
||||
"name": "man_3"
|
||||
},
|
||||
{
|
||||
"name": "woman_2"
|
||||
},
|
||||
{
|
||||
"name": "rheumatology"
|
||||
},
|
||||
{
|
||||
"name": "tornado"
|
||||
},
|
||||
{
|
||||
"name": "landslide"
|
||||
},
|
||||
{
|
||||
"name": "foggy"
|
||||
},
|
||||
{
|
||||
"name": "severe_cold"
|
||||
},
|
||||
{
|
||||
"name": "tsunami"
|
||||
},
|
||||
{
|
||||
"name": "vape_free"
|
||||
},
|
||||
{
|
||||
"name": "sign_language"
|
||||
},
|
||||
{
|
||||
"name": "emoji_symbols"
|
||||
},
|
||||
{
|
||||
"name": "clear_night"
|
||||
},
|
||||
{
|
||||
"name": "emoji_food_beverage"
|
||||
},
|
||||
{
|
||||
"name": "hive"
|
||||
},
|
||||
{
|
||||
"name": "thunderstorm"
|
||||
},
|
||||
{
|
||||
"name": "communication"
|
||||
},
|
||||
{
|
||||
"name": "rocket"
|
||||
},
|
||||
{
|
||||
"name": "pets"
|
||||
},
|
||||
{
|
||||
"name": "public"
|
||||
},
|
||||
{
|
||||
"name": "quiz"
|
||||
},
|
||||
{
|
||||
"name": "mood"
|
||||
},
|
||||
{
|
||||
"name": "gavel"
|
||||
},
|
||||
{
|
||||
"name": "eco"
|
||||
},
|
||||
{
|
||||
"name": "diamond"
|
||||
},
|
||||
{
|
||||
"name": "forest"
|
||||
},
|
||||
{
|
||||
"name": "rainy"
|
||||
},
|
||||
{
|
||||
"name": "skull"
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -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>
|
||||
|
||||
@ -2,4 +2,6 @@ export type Props = {
|
||||
label: string | React.ReactNode;
|
||||
value: any;
|
||||
onChange: (data: any) => void;
|
||||
onIconsClick?: (data: any) => void;
|
||||
onIconColorChange?: (data: any) => void;
|
||||
};
|
||||
|
||||
@ -128,4 +128,9 @@
|
||||
.react-datepicker-popper {
|
||||
z-index: 30 !important;
|
||||
}
|
||||
|
||||
.conical-gradient{
|
||||
background: conic-gradient(from 180deg at 50% 50%, #FF6B00 0deg, #F7AE59 70.5deg, #3F76FF 151.12deg, #05C3FF 213deg, #18914F 289.87deg, #F6F172 329.25deg, #FF6B00 360deg);
|
||||
}
|
||||
|
||||
/* end react datepicker styling */
|
||||
|
||||
Loading…
Reference in New Issue
Block a user