refactor: improve reorder filters (#3606)

* refactor: improve reorder in sections component

* refactor: filters sections

* chore: fix eslint

Author: hamed-musallam

package-lock.json

@@ -56,6 +56,7 @@
   },
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.7.4",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
     "@blueprintjs/core": "^6.0.0",
     "@blueprintjs/icons": "^6.0.0",
     "@blueprintjs/select": "^6.0.0",

package.json

@@ -1,4 +1,7 @@
-import { Icon, Tag } from '@blueprintjs/core';
+import type { ElementDropTargetEventBasePayload } from '@atlaskit/pragmatic-drag-and-drop/dist/types/adapter/element-adapter.js';
+import type { ElementDragPayload } from '@atlaskit/pragmatic-drag-and-drop/dist/types/internal-types.js';
+import type { Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
+import { Colors, Icon, Tag } from '@blueprintjs/core';
 import styled from '@emotion/styled';
 import type {
   CSSProperties,
@@ -15,8 +18,55 @@ import {
   useRef,
   useState,
 } from 'react';
+import { createPortal } from 'react-dom';
 
-import { draggable, dropTargetForElements } from './pdnd.cjs';
+import { assert } from '../utility/assert.js';
+
+import {
+  attachClosestEdge,
+  combine,
+  draggable,
+  dropTargetForElements,
+  extractClosestEdge,
+  getReorderDestinationIndex,
+  pointerOutsideOfPreview,
+  setCustomNativeDragPreview,
+} from './pdnd.cjs';
+
+interface DropIndicatorProps {
+  edge: Edge;
+}
+
+const DropIndicator = styled.div<DropIndicatorProps>`
+  position: absolute;
+  z-index: 3;
+  background-color: ${Colors.BLUE3};
+  height: 2px;
+  left: 0;
+  right: 0;
+  pointer-events: none;
+  ${(props) => props.edge === 'top' && 'top: -1px;'}
+  ${(props) => props.edge === 'bottom' && 'bottom: -1px;'}
+`;
+
+const Preview = styled.div`
+  padding-block: 4px;
+  padding-inline: 8px;
+  border-radius: 4px;
+  background-color: #f4f5f7;
+  max-width: 360px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
+type DraggableState =
+  | { type: 'idle' }
+  | { type: 'preview'; container: HTMLElement }
+  | { type: 'dragging' };
+
+const idleState: DraggableState = { type: 'idle' };
+const draggingState: DraggableState = { type: 'dragging' };
 
 interface SelectionsContextState {
   isOverflow: boolean;
@@ -167,14 +217,13 @@ interface BaseSectionProps {
 
 interface SectionItemProps extends BaseSectionProps {
   id?: string;
+  index?: number;
   onClick?: (id, event?: MouseEvent<HTMLDivElement>) => void;
   children?: ReactNode | ((options: { isOpen?: boolean }) => ReactNode);
   isOpen: boolean;
   sticky?: boolean;
-  onReorder?: (
-    sourceId: string | undefined,
-    targetId: string | undefined,
-  ) => void;
+  onReorder?: (sourceId: number, targetId: number) => void;
+  dragLabel?: string;
 }
 
 interface SectionProps {
@@ -220,6 +269,7 @@ function SectionBody(props: HTMLAttributes<HTMLDivElement>) {
 
 function SectionItem(props: SectionItemProps) {
   const {
+    dragLabel = props.title,
     id = props.title,
     title,
     onClick,
@@ -232,30 +282,116 @@ function SectionItem(props: SectionItemProps) {
     sticky = false,
     arrowProps = { hide: false, style: {} },
     onReorder,
+    index,
   } = props;
 
   const { isOverflow, matchContentHeight } = useSections();
 
   const wrapperRef = useRef<HTMLDivElement>(null);
   const handleRef = useRef<HTMLDivElement>(null);
+  const [state, setState] = useState<DraggableState>(idleState);
+  const [closestEdge, setClosestEdge] = useState<Edge | null>(null);
+  const isReorderActive = typeof onReorder === 'function';
 
   useEffect(() => {
-    if (!wrapperRef.current || !handleRef.current) return;
-
-    const cleanDrag = draggable({
-      element: wrapperRef.current,
-      dragHandle: handleRef.current,
-      getInitialData: () => ({ id }),
-    });
+    const dragHandle = handleRef.current;
+    const element = wrapperRef.current;
+    if (!element || !dragHandle || !isReorderActive) return;
+
+    const data = { id, index };
+
+    function canDrop({ source }: { source: ElementDragPayload }): boolean {
+      return source.data.id !== id;
+    }
+
+    function dragHandler({ source, self }: ElementDropTargetEventBasePayload) {
+      const isSource = source.element === dragHandle;
+      if (isSource) {
+        // eslint-disable-next-line react-you-might-not-need-an-effect/no-chain-state-updates
+        setClosestEdge(null);
+        return;
+      }
+
+      const closestEdge = extractClosestEdge(self.data);
+
+      const sourceIndex = source.data.index as number;
+      assert(typeof sourceIndex === 'number', 'index is not defined');
+      const isItemBeforeSource = index === sourceIndex - 1;
+      const isItemAfterSource = index === sourceIndex + 1;
+
+      const isDropIndicatorHidden =
+        (isItemBeforeSource && closestEdge === 'bottom') ||
+        (isItemAfterSource && closestEdge === 'top');
+
+      setClosestEdge(isDropIndicatorHidden ? null : closestEdge);
+    }
+
+    const cleanDrag = combine(
+      draggable({
+        element,
+        dragHandle,
+        getInitialData: () => data,
+        onGenerateDragPreview({ nativeSetDragImage }) {
+          setCustomNativeDragPreview({
+            nativeSetDragImage,
+            getOffset: pointerOutsideOfPreview({
+              x: '8px',
+              y: '8px',
+            }),
+            render({ container }) {
+              setState({ type: 'preview', container });
+
+              return () => setState(draggingState);
+            },
+          });
+        },
+        onDragStart() {
+          setState(draggingState);
+        },
+        onDrop() {
+          setState(idleState);
+        },
+      }),
+      dropTargetForElements({
+        element,
+        canDrop,
+        getIsSticky: () => false,
+        getData({ input }) {
+          return attachClosestEdge(data, {
+            element,
+            input,
+            allowedEdges: ['top', 'bottom'],
+          });
+        },
+        onDrag: dragHandler,
+
+        onDragLeave() {
+          setClosestEdge(null);
+        },
+        onDrop() {
+          setClosestEdge(null);
+        },
+      }),
+    );
 
     return () => {
       cleanDrag();
     };
-  }, [id]);
-
+  }, [id, index, isReorderActive]);
   return (
-    <DroppableSectionWrapper key={id} id={id} onReorder={onReorder}>
-      <div ref={wrapperRef}>
+    <DroppableSectionWrapper
+      key={id}
+      id={id}
+      onReorder={onReorder}
+      index={index}
+    >
+      <div
+        style={{
+          position: 'relative',
+          opacity: state && state.type === 'dragging' ? 0.3 : 1,
+        }}
+        ref={wrapperRef}
+      >
         <SectionWrapper
           isOpen={isOpen}
           isOverflow={isOverflow}
@@ -284,7 +420,10 @@ function SectionItem(props: SectionItemProps) {
             arrowProps={arrowProps}
           />
           <Wrapper isOpen={isOpen}>{children}</Wrapper>
+          {closestEdge && <DropIndicator edge={closestEdge} />}
         </SectionWrapper>
+        {state.type === 'preview' &&
+          createPortal(<Preview>{dragLabel}</Preview>, state.container)}
       </div>
     </DroppableSectionWrapper>
   );
@@ -376,36 +515,60 @@ function MainSectionHeader(props: MainSectionHeaderProps) {
   );
 }
 
-interface DroppableProps extends Pick<SectionItemProps, 'id' | 'onReorder'> {
+interface DroppableProps
+  extends Pick<SectionItemProps, 'id' | 'onReorder' | 'index'> {
   children: ReactNode;
 }
 
-function DroppableSectionWrapper({ id, onReorder, children }: DroppableProps) {
+function DroppableSectionWrapper(props: DroppableProps) {
+  const { id, onReorder, index: indexOfTarget, children } = props;
   const ref = useRef<HTMLDivElement>(null);
-  const [isOver, setIsOver] = useState(false);
 
   useEffect(() => {
-    if (!ref.current) return;
+    if (typeof onReorder !== 'function') return;
+
+    const element = ref.current;
+
+    if (!element) return;
 
     return dropTargetForElements({
-      element: ref.current,
-      canDrop: ({ source }) => source.data?.id !== id,
-      onDrop: ({ source }) => {
-        const sourceId = source.data?.id as string;
-        setIsOver(false);
-        onReorder?.(sourceId, id);
+      element,
+      onDrop: ({ location, source }) => {
+        const { index: startIndex } = source.data;
+        const target = location.current.dropTargets[0];
+        if (!target) {
+          return;
+        }
+
+        if (
+          typeof startIndex !== 'number' ||
+          typeof indexOfTarget !== 'number'
+        ) {
+          return;
+        }
+
+        const targetData = target.data;
+        const closestEdgeOfTarget = extractClosestEdge(targetData);
+
+        const finishIndex = getReorderDestinationIndex({
+          startIndex,
+          closestEdgeOfTarget,
+          indexOfTarget,
+          axis: 'vertical',
+        });
+
+        if (finishIndex === startIndex) {
+          // If there would be no change, we skip the update
+          return;
+        }
+
+        onReorder?.(startIndex, finishIndex);
       },
-      onDragEnter: () => setIsOver(true),
-      onDragLeave: () => setIsOver(false),
     });
-  }, [id, onReorder]);
+  }, [id, indexOfTarget, onReorder]);
 
   return (
-    <div
-      ref={ref}
-      data-drop-id={id}
-      style={{ ...(isOver && { opacity: 0.1 }) }}
-    >
+    <div ref={ref} data-drop-id={id}>
       {children}
     </div>
   );

src/component/elements/Sections.tsx

@@ -7,3 +7,11 @@ export {
   draggable,
   dropTargetForElements,
 } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+export {
+  attachClosestEdge,
+  extractClosestEdge,
+} from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
+export { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
+export { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';
+export { pointerOutsideOfPreview } from '@atlaskit/pragmatic-drag-and-drop/element/pointer-outside-of-preview';
+export { getReorderDestinationIndex } from '@atlaskit/pragmatic-drag-and-drop-hitbox/util/get-reorder-destination-index';

src/component/elements/pdnd.cts

@@ -262,12 +262,11 @@ function FiltersInner(props: FiltersInnerProps) {
     openSection(null);
   }
 
-  function handleReorderFilters(sourceId, targetId) {
-    if (!sourceId || !targetId) {
-      return;
-    }
-
-    dispatch({ type: 'REORDER_FILTERS', payload: { sourceId, targetId } });
+  function handleReorderFilters(sourceIndex, targetIndex) {
+    dispatch({
+      type: 'REORDER_FILTERS',
+      payload: { sourceIndex, targetIndex },
+    });
   }
 
   return (
@@ -278,8 +277,10 @@ function FiltersInner(props: FiltersInnerProps) {
         const enableEdit = activeFilterID === id || filter.value === null;
         return (
           <Sections.Item
+            index={index}
             key={id}
             id={name}
+            dragLabel={getFilterLabel(name)}
             onReorder={handleReorderFilters}
             title={error || getFilterLabel(name)}
             serial={index + 1}

src/component/panels/filtersPanel/Filters/FiltersSectionsPanel.tsx

@@ -218,7 +218,7 @@ type DeletePhaseCorrectionTrace = ActionType<
 >;
 type ReorderFiltersAction = ActionType<
   'REORDER_FILTERS',
-  { sourceId: string; targetId: string }
+  { sourceIndex: number; targetIndex: number }
 >;
 
 type SetOneDimensionPhaseCorrectionPivotPoint = ActionType<
@@ -2022,7 +2022,7 @@ function handleReorderFilters(
   draft: Draft<State>,
   action: ReorderFiltersAction,
 ) {
-  const { sourceId, targetId } = action.payload;
+  const { sourceIndex, targetIndex } = action.payload;
   const spectrum = getSpectrum(draft);
 
   if (!spectrum) {
@@ -2031,9 +2031,6 @@ function handleReorderFilters(
 
   const filters = spectrum.filters;
 
-  const sourceIndex = filters.findIndex((filter) => filter.name === sourceId);
-  const targetIndex = filters.findIndex((filter) => filter.name === targetId);
-
   if (sourceIndex === -1 || targetIndex === -1) return;
 
   const sourceFilter = filters[sourceIndex];