From a53777f45ff4721cce63f91d5e348dc213f4f59d Mon Sep 17 00:00:00 2001 From: macielg1 Date: Wed, 20 Sep 2023 09:33:02 -0300 Subject: [PATCH] improved drag and drop functionality and added more accessibility support --- package-lock.json | 14 +++++ package.json | 1 + src/components/Button.jsx | 4 +- src/components/ClearInput.jsx | 2 +- src/components/SaveTimer.jsx | 4 +- src/components/Sidebar.jsx | 81 +++++++++++++++++++++++++--- src/components/SidebarItem.jsx | 12 +++-- src/components/inputs/InputColor.jsx | 2 +- 8 files changed, 102 insertions(+), 18 deletions(-) diff --git a/package-lock.json b/package-lock.json index efb51af..f6141e5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "1.0.0", "dependencies": { "@dnd-kit/core": "^6.0.8", + "@dnd-kit/modifiers": "^6.0.1", "@dnd-kit/sortable": "^7.0.2", "prop-types": "^15.8.1", "react": "^18.2.0", @@ -77,6 +78,19 @@ "react-dom": ">=16.8.0" } }, + "node_modules/@dnd-kit/modifiers": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/@dnd-kit/modifiers/-/modifiers-6.0.1.tgz", + "integrity": "sha512-rbxcsg3HhzlcMHVHWDuh9LCjpOVAgqbV78wLGI8tziXY3+qcMQ61qVXIvNKQFuhj75dSfD+o+PYZQ/NUk2A23A==", + "dependencies": { + "@dnd-kit/utilities": "^3.2.1", + "tslib": "^2.0.0" + }, + "peerDependencies": { + "@dnd-kit/core": "^6.0.6", + "react": ">=16.8.0" + } + }, "node_modules/@dnd-kit/sortable": { "version": "7.0.2", "resolved": "https://registry.npmjs.org/@dnd-kit/sortable/-/sortable-7.0.2.tgz", diff --git a/package.json b/package.json index e199906..71c8c6e 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ }, "dependencies": { "@dnd-kit/core": "^6.0.8", + "@dnd-kit/modifiers": "^6.0.1", "@dnd-kit/sortable": "^7.0.2", "prop-types": "^15.8.1", "react": "^18.2.0", diff --git a/src/components/Button.jsx b/src/components/Button.jsx index f0d8ee7..4cfecc1 100644 --- a/src/components/Button.jsx +++ b/src/components/Button.jsx @@ -13,8 +13,8 @@ export default function Button(props) { w-[5.5rem] xs:w-28 sm:w-36 lg:w-40 text-black py-2 xs:px-2 text-center rounded-3xl border border-1 border-black hover:border-neutral-950 - transition-colors duration-200 focus:outline-none focus:border-transparent - disabled:focus-border-transparent + transition-colors duration-200 focus-visible:outline-none focus-visible:border-transparent + disabled:focus-visible-border-transparent focus-visible:scale-110 `} > {text} diff --git a/src/components/ClearInput.jsx b/src/components/ClearInput.jsx index fdf0e6a..70e2ed2 100644 --- a/src/components/ClearInput.jsx +++ b/src/components/ClearInput.jsx @@ -18,7 +18,7 @@ export default function ClearInput() { }; return (
- diff --git a/src/components/SaveTimer.jsx b/src/components/SaveTimer.jsx index e3d5f20..0d1db35 100644 --- a/src/components/SaveTimer.jsx +++ b/src/components/SaveTimer.jsx @@ -64,7 +64,7 @@ export default function SaveTimer() {
diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx index aeac38a..be43c22 100644 --- a/src/components/Sidebar.jsx +++ b/src/components/Sidebar.jsx @@ -1,10 +1,69 @@ +// import useStore from "../store/useStore"; + +// import { DndContext, PointerSensor, TouchSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core"; +// import { SortableContext, arrayMove } from "@dnd-kit/sortable"; +// import { restrictToVerticalAxis } from "@dnd-kit/modifiers"; +// import SidebarItem from "./SidebarItem"; + +// export default function Sidebar() { +// const savedWorkouts = useStore((state) => state.savedWorkouts); +// const setSavedWorkouts = useStore((state) => state.setSavedWorkouts); + +// const pointerSensor = useSensor(PointerSensor, { +// activationConstraint: { +// distance: 8, +// }, +// }); +// const touchSensor = useSensor(TouchSensor, { +// activationConstraint: { +// delay: 250, +// tolerance: 5, +// }, +// }); + +// const sensors = useSensors(pointerSensor, touchSensor); + +// function handleDragEnd(e) { +// const { active, over } = e; +// if (active.id !== over.id) { +// const currentItems = [...savedWorkouts]; + +// const oldIndex = currentItems.findIndex((i) => i.id === active.id); +// const newIndex = currentItems.findIndex((i) => i.id === over.id); + +// const newArray = arrayMove(currentItems, oldIndex, newIndex); +// localStorage.setItem("savedTimer", JSON.stringify(newArray)); + +// setSavedWorkouts(newArray); +// } +// } + +// return ( +// +// +// +// ); +// } + import useStore from "../store/useStore"; import { DndContext, PointerSensor, TouchSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core"; import { SortableContext, arrayMove } from "@dnd-kit/sortable"; +import { restrictToVerticalAxis } from "@dnd-kit/modifiers"; import SidebarItem from "./SidebarItem"; +import { func } from "prop-types"; +import { useState } from "react"; export default function Sidebar() { + const [isDragging, setIsDragging] = useState(false); const savedWorkouts = useStore((state) => state.savedWorkouts); const setSavedWorkouts = useStore((state) => state.setSavedWorkouts); @@ -23,6 +82,7 @@ export default function Sidebar() { const sensors = useSensors(pointerSensor, touchSensor); function handleDragEnd(e) { + setIsDragging(false); const { active, over } = e; if (active.id !== over.id) { const currentItems = [...savedWorkouts]; @@ -36,16 +96,21 @@ export default function Sidebar() { setSavedWorkouts(newArray); } } + function handleDragStart(e) { + setIsDragging(true); + } return ( - -