Directions: Change order (#825)

zbycz · Dec 12, 2024 · 28633c6 · 28633c6
1 parent 9c8b36d
commit 28633c6
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 15 deletions.
diff --git a/src/components/Directions/DirectionsForm.tsx b/src/components/Directions/DirectionsForm.tsx
@@ -17,6 +17,9 @@ import {
   useReactToUrl,
   useUpdatePoint,
 } from './useGetOnSubmit';
+import { moveElementToIndex } from '../FeaturePanel/Climbing/utils/array';
+import { useDragItems } from '../utils/useDragItems';
+import { DragHandler } from '../utils/DragHandler';
 
 type Props = {
   setResult: (result: RoutingResult) => void;
@@ -89,6 +92,20 @@ export const DirectionsForm = ({ setResult, hideForm }: Props) => {
     defaultTo,
   ]);
 
+  const {
+    handleDragStart,
+    handleDragOver,
+    handleDragEnd,
+    HighlightedDropzone,
+    ItemContainer,
+    draggedItem,
+    draggedOverIndex,
+  } = useDragItems<InputItem>({
+    initialItems: inputs,
+    moveItems: () => {},
+    direction: 'horizontal',
+  });
+
   useEffect(() => {
     const newPoints =
       points?.map((point, index) => ({
@@ -141,12 +158,35 @@ export const DirectionsForm = ({ setResult, hideForm }: Props) => {
           return (
             <Box sx={{ position: 'relative' }} key={`input-${pointIndex}`}>
               <Stack direction="row" alignItems="center">
+                <DragHandler
+                  onDragStart={(e) => {
+                    handleDragStart(e, {
+                      id: index,
+                      content: item,
+                    });
+                  }}
+                  onDragOver={(e) => {
+                    handleDragOver(e, index);
+                  }}
+                  onDragEnd={(e) => {
+                    handleDragEnd(e);
+
+                    const newArray = moveElementToIndex(
+                      inputs,
+                      draggedItem.id,
+                      draggedOverIndex,
+                    );
+
+                    setInputs(newArray);
+                  }}
+                />
                 <DirectionsAutocomplete
                   value={value}
                   label={label}
                   pointIndex={index}
                 />
               </Stack>
+              <HighlightedDropzone index={index} />
             </Box>
           );
         })}

diff --git a/src/components/FeaturePanel/Climbing/ClimbingCragDialogHeader.tsx b/src/components/FeaturePanel/Climbing/ClimbingCragDialogHeader.tsx
@@ -91,7 +91,7 @@ export const ClimbingCragDialogHeader = ({ onClose }) => {
   } = useDragItems<string>({
     initialItems: photoPaths,
     moveItems: movePhotos,
-    direction: 'horizontal',
+    direction: 'vertical',
   });
 
   return (

diff --git a/src/components/FeaturePanel/Climbing/RouteList/RouteListDndContent.tsx b/src/components/FeaturePanel/Climbing/RouteList/RouteListDndContent.tsx
@@ -4,6 +4,7 @@ import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
 import { useClimbingContext } from '../contexts/ClimbingContext';
 import { RenderListRow } from './RouteListRow';
 import { useDragItems } from '../../../utils/useDragItems';
+import { DragHandler } from '../../../utils/DragHandler';
 
 type Item = {
   id: number;
@@ -45,14 +46,7 @@ const RowWithDragHandler = styled.div<{
   border-top: dotted 1px ${({ theme }) => theme.palette.divider};
   z-index: ${({ isSelected }) => (isSelected ? '2' : 'auto')};
 `;
-const DragHandler = styled.div`
-  width: 30px;
-  padding-top: 16px;
-  cursor: move;
-  align-items: center;
-  display: flex;
-  color: #888;
-`;
+
 const RowContent = styled.div`
   width: 100%;
   height: 100%;
@@ -174,12 +168,9 @@ export const RouteListDndContent = ({ isEditable }) => {
               <MaxWidthContainer>
                 {showDebugMenu && isEditMode && isEditable && (
                   <DragHandler
-                    draggable
                     onDragStart={(e) => handleControlDragStart(e, item)}
                     onDragEnd={handleControlDragEnd}
-                  >
-                    <DragIndicatorIcon />
-                  </DragHandler>
+                  />
                 )}
                 <RowContent>
                   <RenderListRow

diff --git a/src/components/utils/DragHandler.tsx b/src/components/utils/DragHandler.tsx
@@ -0,0 +1,34 @@
+import styled from '@emotion/styled';
+import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
+import React from 'react';
+
+const Container = styled.div`
+  width: 30px;
+  cursor: move;
+  align-items: center;
+  display: flex;
+  color: #888;
+`;
+
+type DragHandlerProps = {
+  onDragStart: (event: React.DragEvent<HTMLDivElement>) => void;
+  onDragEnd: (event: React.DragEvent<HTMLDivElement>) => void;
+  onDragOver?: (event: React.DragEvent<HTMLDivElement>) => void;
+};
+
+export const DragHandler = ({
+  onDragStart,
+  onDragEnd,
+  onDragOver,
+}: DragHandlerProps) => {
+  return (
+    <Container
+      draggable
+      onDragStart={onDragStart}
+      onDragEnd={onDragEnd}
+      onDragOver={onDragOver}
+    >
+      <DragIndicatorIcon />
+    </Container>
+  );
+};
diff --git a/src/components/utils/useDragItems.tsx b/src/components/utils/useDragItems.tsx
@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 import React, { useEffect, useState } from 'react';
 
-export const HighlightedDropzoneHorizontal = styled.div<{ $isActive: boolean }>`
+export const HighlightedDropzoneVertical = styled.div<{ $isActive: boolean }>`
   position: absolute;
   height: 100%;
   margin-left: -2px;
@@ -12,7 +12,7 @@ export const HighlightedDropzoneHorizontal = styled.div<{ $isActive: boolean }>`
   z-index: 1000000;
 `;
 
-export const HighlightedDropzoneVertical = styled.div<{ $isActive: boolean }>`
+export const HighlightedDropzoneHorizontal = styled.div<{ $isActive: boolean }>`
   position: absolute;
   width: 100%;
   margin-top: -2px;