Make context menu
This commit is contained in:
parent
3818068b4d
commit
b316ce9ca6
@ -9,6 +9,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@microsoft/signalr": "^6.0.0",
|
||||
"@tippyjs/react": "^4.2.6",
|
||||
"next": "12.0.3",
|
||||
"next-pwa": "^5.4.0",
|
||||
"react": "17.0.2",
|
||||
|
@ -1,6 +1,7 @@
|
||||
import { Todo } from "@src/core/entities/todo";
|
||||
import { FC, useState } from "react";
|
||||
import { TodoCheckmark } from "@src/components/todos/todoCheckmark";
|
||||
import Tippy from "@tippyjs/react";
|
||||
|
||||
interface TodoItemProps {
|
||||
todo: Todo;
|
||||
@ -10,6 +11,7 @@ interface TodoItemProps {
|
||||
|
||||
export const TodoItem: FC<TodoItemProps> = (props) => {
|
||||
const [isHovering, setIsHovering] = useState(false);
|
||||
const [menuIsOpen, setMenuIsOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<div
|
||||
@ -31,9 +33,28 @@ export const TodoItem: FC<TodoItemProps> = (props) => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Tippy
|
||||
placement="left"
|
||||
visible={menuIsOpen}
|
||||
onClickOutside={() => {
|
||||
setMenuIsOpen(false);
|
||||
}}
|
||||
interactive={true}
|
||||
interactiveBorder={20}
|
||||
content={
|
||||
<div
|
||||
className="p-4 bg-gray-700 border border-accent-500 rounded-xl flex flex-col gap-4"
|
||||
tabIndex={0}
|
||||
>
|
||||
<button className="hover:bg-accent-500">Delete</button>
|
||||
<button>Edit</button>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div
|
||||
className={`absolute left-full top-1/2 w-4 h-4 box-content ml-2 p-2 rounded-md hover:bg-gray-300 active:bg-gray-400 transition group`}
|
||||
style={{ transform: "translate(0px, -50%)" }}
|
||||
onClick={() => setMenuIsOpen(true)}
|
||||
>
|
||||
{isHovering && (
|
||||
<div className="flex flex-col justify-between h-full">
|
||||
@ -43,6 +64,7 @@ export const TodoItem: FC<TodoItemProps> = (props) => {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Tippy>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
@ -1102,6 +1102,11 @@
|
||||
"@nodelib/fs.scandir" "2.1.5"
|
||||
fastq "^1.6.0"
|
||||
|
||||
"@popperjs/core@^2.9.0":
|
||||
version "2.10.2"
|
||||
resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.10.2.tgz#0798c03351f0dea1a5a4cabddf26a55a7cbee590"
|
||||
integrity sha512-IXf3XA7+XyN7CP9gGh/XB0UxVMlvARGEgGXLubFICsUMGz6Q+DU+i4gGlpOxTjKvXjkJDJC8YdqdKkDj9qZHEQ==
|
||||
|
||||
"@rollup/plugin-babel@^5.2.0":
|
||||
version "5.3.0"
|
||||
resolved "https://registry.yarnpkg.com/@rollup/plugin-babel/-/plugin-babel-5.3.0.tgz#9cb1c5146ddd6a4968ad96f209c50c62f92f9879"
|
||||
@ -1152,6 +1157,13 @@
|
||||
ejs "^2.6.1"
|
||||
magic-string "^0.25.0"
|
||||
|
||||
"@tippyjs/react@^4.2.6":
|
||||
version "4.2.6"
|
||||
resolved "https://registry.yarnpkg.com/@tippyjs/react/-/react-4.2.6.tgz#971677a599bf663f20bb1c60a62b9555b749cc71"
|
||||
integrity sha512-91RicDR+H7oDSyPycI13q3b7o4O60wa2oRbjlz2fyRLmHImc4vyDwuUP8NtZaN0VARJY5hybvDYrFzhY9+Lbyw==
|
||||
dependencies:
|
||||
tippy.js "^6.3.1"
|
||||
|
||||
"@trysound/sax@0.2.0":
|
||||
version "0.2.0"
|
||||
resolved "https://registry.yarnpkg.com/@trysound/sax/-/sax-0.2.0.tgz#cccaab758af56761eb7bf37af6f03f326dd798ad"
|
||||
@ -5257,6 +5269,13 @@ timsort@^0.3.0:
|
||||
resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
|
||||
integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
|
||||
|
||||
tippy.js@^6.3.1:
|
||||
version "6.3.7"
|
||||
resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-6.3.7.tgz#8ccfb651d642010ed9a32ff29b0e9e19c5b8c61c"
|
||||
integrity sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==
|
||||
dependencies:
|
||||
"@popperjs/core" "^2.9.0"
|
||||
|
||||
tmp@^0.2.1:
|
||||
version "0.2.1"
|
||||
resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.2.1.tgz#8457fc3037dcf4719c251367a1af6500ee1ccf14"
|
||||
|
Loading…
Reference in New Issue
Block a user