Refactor line to be in Dropzone, minor changes for code cleanliness

ingef · Aug 28, 2023 · 4a18929 · 4a18929
1 parent 0beaeb3
commit 4a18929
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 23 deletions.
diff --git a/frontend/src/js/external-forms/form-components/DropzoneBetweenElements.tsx b/frontend/src/js/external-forms/form-components/DropzoneBetweenElements.tsx
@@ -1,5 +1,4 @@
 import styled from "@emotion/styled";
-import { useState } from "react";
 import { DropTargetMonitor } from "react-dnd";
 
 import Dropzone, {
@@ -13,16 +12,17 @@ interface Props {
   height: number;
 }
 
-const LineHeight = 3;
+const Root = styled("div")`
+  display: flex;
+  height: 4px;
+`;
 
-const Line = styled("div")<{ show: boolean }>`
-  overflow: hidden;
-  display: block;
-  visibility: ${({ show }) => (show ? "visible" : "hidden")};
+const Line = styled("div")`
   background-color: ${({ theme }) => theme.col.blueGrayDark};
   margin: 1px 0;
-  height: ${LineHeight}px;
+  height: 4px;
   border-radius: 2px;
+  flex-grow: 1;
 `;
 
 const SxDropzone = styled(Dropzone)<{ height: number; top: number }>`
@@ -38,21 +38,19 @@ const DropzoneBetweenElements = ({
   height,
   top,
 }: Props) => {
-  let [isOver, setIsOver] = useState<boolean>(false);
-
   return (
-    <>
-      <Line show={isOver} />
+    <Root>
       <SxDropzone
         bare
         naked
         acceptedDropTypes={acceptedDropTypes}
         onDrop={onDrop}
-        setIsOver={setIsOver}
         height={height}
         top={top}
-      />
-    </>
+      >
+        {({ isOver }) => isOver && <Line />}
+      </SxDropzone>
+    </Root>
   );
 };
 

diff --git a/frontend/src/js/external-forms/form-components/DropzoneList.tsx b/frontend/src/js/external-forms/form-components/DropzoneList.tsx
@@ -23,6 +23,7 @@ const ListItem = styled("div")`
   box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.1);
   background-color: white;
   border-radius: ${({ theme }) => theme.borderRadius};
+  margin-bottom: 5px;
 `;
 
 const StyledIconButton = styled(IconButton)`
@@ -117,8 +118,8 @@ const DropzoneList = <DroppableObject extends PossibleDroppableObject>(
               <DropzoneBetweenElements
                 acceptedDropTypes={acceptedDropTypes}
                 onDrop={dropBetween(items.length)}
-                top={-20}
-                height={15}
+                top={-15}
+                height={20}
               />
             )}
           </ConceptContainer>

diff --git a/frontend/src/js/external-forms/form-concept-group/FormConceptGroup.tsx b/frontend/src/js/external-forms/form-concept-group/FormConceptGroup.tsx
@@ -225,7 +225,10 @@ const FormConceptGroup = (props: Props) => {
                 item.dragContext;
 
               if (movedFromFieldName === props.fieldName) {
-                if (i > movedFromAndIdx && movedFromOrIdx === 0) {
+                const willConceptMoveUp =
+                  i > movedFromAndIdx &&
+                  props.value[movedFromAndIdx].concepts.length == 1;
+                if (willConceptMoveUp) {
                   insertIndex = i - 1;
                 }
                 newPropsValue =

diff --git a/frontend/src/js/ui-components/Dropzone.tsx b/frontend/src/js/ui-components/Dropzone.tsx
@@ -67,7 +67,6 @@ export interface DropzoneProps<DroppableObject> {
   canDrop?: (props: DroppableObject, monitor: DropTargetMonitor) => boolean;
   onClick?: () => void;
   children?: (args: ChildArgs<DroppableObject>) => ReactNode;
-  setIsOver?: (state: boolean) => void;
 }
 
 export type PossibleDroppableObject =
@@ -108,7 +107,6 @@ const Dropzone = <DroppableObject extends PossibleDroppableObject>(
     onClick,
     invisible,
     children,
-    setIsOver,
   }: DropzoneProps<DroppableObject>,
   ref?: ForwardedRef<HTMLDivElement>,
 ) => {
@@ -128,10 +126,6 @@ const Dropzone = <DroppableObject extends PossibleDroppableObject>(
     }),
   });
 
-  useEffect(() => {
-    if (setIsOver) setIsOver(isOver);
-  }, [isOver, setIsOver]);
-
   return (
     <Root
       ref={(instance) => {