From 0a4c8fab81d1e8bcc247c4be63c05ff0d23163d1 Mon Sep 17 00:00:00 2001 From: Rishi Ghan Date: Sat, 2 Oct 2021 09:34:54 -0700 Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20Refactored=20the=20DnD=20grid=20?= =?UTF-8?q?scaffold=20a=20bit?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/client/components/ComicDetail.tsx | 73 ++++++++++++++----------- src/client/components/Cover.tsx | 23 ++++++++ src/client/components/Grid.tsx | 16 ++++++ src/client/components/Item.tsx | 6 -- src/client/components/SortableCover.tsx | 32 +++++++++++ src/client/components/SortableItem.tsx | 27 --------- src/client/components/photos.json | 11 ++++ tsconfig.json | 1 + 8 files changed, 123 insertions(+), 66 deletions(-) create mode 100644 src/client/components/Cover.tsx create mode 100644 src/client/components/Grid.tsx delete mode 100644 src/client/components/Item.tsx create mode 100644 src/client/components/SortableCover.tsx delete mode 100644 src/client/components/SortableItem.tsx create mode 100644 src/client/components/photos.json diff --git a/src/client/components/ComicDetail.tsx b/src/client/components/ComicDetail.tsx index 1290e7d..d521dac 100644 --- a/src/client/components/ComicDetail.tsx +++ b/src/client/components/ComicDetail.tsx @@ -21,24 +21,24 @@ import dayjs from "dayjs"; const prettyBytes = require("pretty-bytes"); // https://codesandbox.io/s/dndkit-sortable-image-grid-py6ve?file=/src/Grid.jsx import { - closestCenter, DndContext, - DragOverlay, - KeyboardSensor, - PointerSensor, + closestCenter, + MouseSensor, TouchSensor, + DragOverlay, useSensor, useSensors, } from "@dnd-kit/core"; import { arrayMove, SortableContext, - sortableKeyboardCoordinates, - verticalListSortingStrategy, + rectSortingStrategy, } from "@dnd-kit/sortable"; -import { SortableItem } from "./SortableItem"; -import { Item } from "./Item"; +import { Grid } from "./Grid"; +import { SortableCover } from "./SortableCover"; +import { Cover } from "./Cover"; +import photos from "./photos.json"; import { useDispatch, useSelector } from "react-redux"; import { @@ -62,15 +62,9 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => { const [visible, setVisible] = useState(false); const [slidingPanelContentId, setSlidingPanelContentId] = useState(""); + const [items, setItems] = useState(photos); const [activeId, setActiveId] = useState(null); - const [items, setItems] = useState(["1", "2", "3"]); - const sensors = useSensors( - useSensor(PointerSensor), - useSensor(KeyboardSensor, { - coordinateGetter: sortableKeyboardCoordinates, - }), - useSensor(TouchSensor), - ); + const sensors = useSensors(useSensor(MouseSensor), useSensor(TouchSensor)); const comicVineSearchResults = useSelector( (state: RootState) => state.comicInfo.searchResults, @@ -165,9 +159,7 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => { }; function handleDragStart(event) { - const { active } = event; - - setActiveId(active.id); + setActiveId(event.active.id); } function handleDragEnd(event) { @@ -181,7 +173,11 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => { return arrayMove(items, oldIndex, newIndex); }); } + console.log(items); + setActiveId(null); + } + function handleDragCancel() { setActiveId(null); } @@ -266,7 +262,31 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => { id: 2, icon: , name: "Archive Operations", - content:
, + content: ( +
+ + + + {items.map((url, index) => ( + + ))} + + + + + {activeId ? ( + + ) : null} + + +
+ ), }, { id: 3, @@ -505,19 +525,6 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => { return (
- - - {items.map((id) => ( - - ))} - - {activeId ? : null} - {!isNil(comicBookDetailData) && !isEmpty(comicBookDetailData) && ( <>

{comicBookTitle}

diff --git a/src/client/components/Cover.tsx b/src/client/components/Cover.tsx new file mode 100644 index 0000000..044d260 --- /dev/null +++ b/src/client/components/Cover.tsx @@ -0,0 +1,23 @@ +import React, { forwardRef } from "react"; + +export const Cover = forwardRef( + ({ url, index, faded, style, ...props }, ref) => { + const inlineStyles = { + opacity: faded ? "0.2" : "1", + transformOrigin: "0 0", + height: index === 0 ? 410 : 200, + gridRowStart: index === 0 ? "span 2" : null, + gridColumnStart: index === 0 ? "span 2" : null, + backgroundImage: `url("${url}")`, + backgroundSize: "cover", + backgroundPosition: "center", + backgroundColor: "grey", + borderRadius: "10px", + ...style, + }; + + return
; + }, +); + +Cover.displayName = "Cover"; diff --git a/src/client/components/Grid.tsx b/src/client/components/Grid.tsx new file mode 100644 index 0000000..3629a71 --- /dev/null +++ b/src/client/components/Grid.tsx @@ -0,0 +1,16 @@ +import React from "react"; + +export function Grid({ children, columns }) { + return ( +
+ {children} +
+ ); +} diff --git a/src/client/components/Item.tsx b/src/client/components/Item.tsx deleted file mode 100644 index 493560e..0000000 --- a/src/client/components/Item.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import React, { forwardRef } from "react"; - -// eslint-disable-next-line react/display-name -export const Item = forwardRef(({ id, ...props }, ref) => { - return
; -}); diff --git a/src/client/components/SortableCover.tsx b/src/client/components/SortableCover.tsx new file mode 100644 index 0000000..7942c45 --- /dev/null +++ b/src/client/components/SortableCover.tsx @@ -0,0 +1,32 @@ +import React from "react"; +import { useSortable } from "@dnd-kit/sortable"; +import { CSS } from "@dnd-kit/utilities"; + +import { Cover } from "./Cover"; + +export const SortableCover = (props) => { + const sortable = useSortable({ id: props.url }); + const { + attributes, + listeners, + isDragging, + setNodeRef, + transform, + transition, + } = sortable; + + const style = { + transform: CSS.Transform.toString(transform), + transition, + }; + + return ( + + ); +}; diff --git a/src/client/components/SortableItem.tsx b/src/client/components/SortableItem.tsx deleted file mode 100644 index d460f74..0000000 --- a/src/client/components/SortableItem.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import React from "react"; -import { useSortable } from "@dnd-kit/sortable"; -import { CSS } from "@dnd-kit/utilities"; - -import { Item } from "./Item"; - -export function SortableItem(props) { - const { attributes, listeners, setNodeRef, transform, transition } = - useSortable({ id: props.id }); - - const backgroundColor = - props.id == 1 ? "Orange" : props.id == 2 ? "pink" : "gray"; - - const style = { - transform: CSS.Transform.toString(transform), - transition, - height: 100, - width: 100, - border: "2px solid black", - backgroundColor, - borderRadius: 10, - touchAction: "none", - margin: 20, - }; - - return ; -} diff --git a/src/client/components/photos.json b/src/client/components/photos.json new file mode 100644 index 0000000..cee9d99 --- /dev/null +++ b/src/client/components/photos.json @@ -0,0 +1,11 @@ +[ + "https://source.unsplash.com/WLUHO9A_xik/900x900", + "https://source.unsplash.com/R4K8S77qtwI/900x900", + "https://source.unsplash.com/jJGc21mEh8Q/900x900", + "https://source.unsplash.com/omNxg6JP6Fo/900x900", + "https://source.unsplash.com/-M1gkucIqkQ/900x900", + "https://source.unsplash.com/czOuPVsfHDw/900x900", + "https://source.unsplash.com/-vr0gMUM6Fk/900x900", + "https://source.unsplash.com/TsMuMM_qVec/900x900" + ] + \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json index 871d9c4..7632293 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -10,6 +10,7 @@ "sourceMap": true, "outDir": "./dist/", "skipLibCheck": true, + "resolveJsonModule": true, "lib": [ "dom", "dom.iterable",