@noya-app/noya-designsystem 0.1.55 → 0.1.57

package/src/components/Sortable.tsx

@@ -1,468 +0,0 @@
-import {
-  closestCenter,
-  DndContext,
-  DragEndEvent,
-  DragMoveEvent,
-  DragOverlay,
-  DragStartEvent,
-  PointerSensor,
-  UniqueIdentifier,
-  useDndContext,
-  useSensor,
-  useSensors,
-} from "@dnd-kit/core";
-import {
-  horizontalListSortingStrategy,
-  SortableContext,
-  useSortable,
-  verticalListSortingStrategy,
-} from "@dnd-kit/sortable";
-import { memoGeneric } from "@noya-app/react-utils";
-import * as React from "react";
-import { memo } from "react";
-import { createPortal } from "react-dom";
-
-export type RelativeDropPosition = "above" | "below" | "inside";
-
-export type DropValidator = (
-  sourceIndex: number,
-  targetIndex: number,
-  position: RelativeDropPosition
-) => boolean;
-
-export const normalizeListTargetIndex = (
-  index: number,
-  position: "above" | "below"
-): number => {
-  return position === "above" ? index : index + 1;
-};
-
-export const defaultAcceptsDrop: DropValidator = (
-  sourceIndex,
-  targetIndex,
-  position
-) => {
-  if (position === "inside") return false;
-
-  const normalized = normalizeListTargetIndex(targetIndex, position);
-
-  if (sourceIndex === normalized || sourceIndex + 1 === normalized) {
-    return false;
-  }
-
-  return true;
-};
-
-export type SortableItemContextProps = {
-  keys: UniqueIdentifier[];
-  acceptsDrop: DropValidator;
-  axis: "x" | "y";
-  position: { x: number; y: number };
-  setActivatorEvent: (event: PointerEvent) => void;
-  getDropTargetParentIndex?: (index: number) => number | undefined;
-};
-
-const SortableItemContext = React.createContext<SortableItemContextProps>({
-  keys: [],
-  acceptsDrop: defaultAcceptsDrop,
-  axis: "y",
-  position: { x: 0, y: 0 },
-  setActivatorEvent: () => {},
-  getDropTargetParentIndex: undefined,
-});
-
-type ValidateDropIndicatorParams = {
-  acceptsDrop: DropValidator; // Function that validates if a drop is allowed
-  keys: UniqueIdentifier[]; // Array of all sortable item IDs
-  activeId: UniqueIdentifier; // ID of item being dragged
-  overId: UniqueIdentifier; // ID of item being dragged over
-  offsetStart: number; // Current drag position (x or y coordinate)
-  elementStart: number; // Start position of target element (left or top)
-  elementSize: number; // Size of target element (width or height)
-};
-
-export function validateDropIndicator({
-  acceptsDrop,
-  keys,
-  activeId,
-  overId,
-  offsetStart,
-  elementStart,
-  elementSize,
-}: ValidateDropIndicatorParams): RelativeDropPosition | undefined {
-  const activeIndex = keys.findIndex((id) => id === activeId); // index of item being dragged
-  const overIndex = keys.findIndex((id) => id === overId); // index of item being dragged over
-
-  if (activeIndex === -1 || overIndex === -1) return undefined;
-
-  const acceptsDropInside = acceptsDrop(activeIndex, overIndex, "inside");
-
-  // Drop into the middle third if possible
-  if (
-    isContainedInMiddleThird(elementStart, elementSize, offsetStart) &&
-    acceptsDropInside
-  ) {
-    return "inside";
-  }
-
-  const containingHalf = getContainingHalf(
-    elementStart,
-    elementSize,
-    offsetStart
-  );
-
-  // Drop above or below if possible
-  const acceptedHalf = acceptsDrop(activeIndex, overIndex, containingHalf);
-
-  return acceptedHalf
-    ? containingHalf
-    : // Lastly, check if inside but not middle third
-      acceptsDropInside
-      ? "inside"
-      : undefined;
-}
-
-function isContainedInMiddleThird(
-  elementStart: number,
-  elementSize: number,
-  offsetStart: number
-): boolean {
-  return (
-    offsetStart >= elementStart + elementSize / 3 &&
-    offsetStart <= elementStart + (elementSize * 2) / 3
-  );
-}
-
-function getContainingHalf(
-  elementStart: number,
-  elementSize: number,
-  offsetStart: number
-): "above" | "below" {
-  if (offsetStart < elementStart + elementSize / 2) return "above";
-  return "below";
-}
-
-/* ----------------------------------------------------------------------------
- * Item
- * ------------------------------------------------------------------------- */
-
-type UseSortableReturnType = ReturnType<typeof useSortable>;
-
-type ItemChildrenProps<T> = {
-  ref: React.Ref<T>;
-  relativeDropPosition?: RelativeDropPosition;
-  style?: React.CSSProperties;
-} & UseSortableReturnType["attributes"];
-
-interface ItemProps<T> {
-  id: UniqueIdentifier;
-  disabled?: boolean;
-  children: (props: ItemChildrenProps<T>) => JSX.Element;
-}
-
-function SortableItem<T extends HTMLElement>({
-  id,
-  disabled,
-  children,
-}: ItemProps<T>) {
-  const {
-    keys,
-    position,
-    acceptsDrop,
-    setActivatorEvent,
-    axis,
-    getDropTargetParentIndex,
-  } = React.useContext(SortableItemContext);
-  const sortable = useSortable({ id, disabled });
-  const { activatorEvent } = useDndContext();
-
-  const {
-    active,
-    attributes,
-    listeners,
-    setNodeRef,
-    isDragging,
-    index,
-    activeIndex,
-    overIndex,
-    over,
-  } = sortable;
-
-  if (activatorEvent) {
-    setActivatorEvent(activatorEvent as PointerEvent);
-  }
-
-  const eventX = (activatorEvent as PointerEvent | null)?.clientX ?? 0;
-  const eventY = (activatorEvent as PointerEvent | null)?.clientY ?? 0;
-  const offsetLeft = eventX + position.x;
-  const offsetTop = eventY + position.y;
-
-  const ref = React.useCallback((node: T) => setNodeRef(node), [setNodeRef]);
-  const parentIndex =
-    overIndex === -1 ? undefined : getDropTargetParentIndex?.(overIndex);
-  const isValidParent =
-    parentIndex === undefined || parentIndex === -1
-      ? false
-      : acceptsDrop(activeIndex, parentIndex, "inside");
-  const overIdAcceptsDrop =
-    overIndex === -1
-      ? undefined
-      : acceptsDrop(activeIndex, overIndex, "inside");
-
-  const relativeDropPosition =
-    index >= 0 && index === overIndex && !isDragging && active && over
-      ? validateDropIndicator({
-          acceptsDrop,
-          keys,
-          activeId: active.id,
-          overId: over.id,
-          offsetStart: axis === "x" ? offsetLeft : offsetTop,
-          elementStart: axis === "x" ? over.rect.left : over.rect.top,
-          elementSize: axis === "x" ? over.rect.width : over.rect.height,
-        })
-      : undefined;
-
-  const showDragInsideIndicatorOnParent =
-    !overIdAcceptsDrop && isValidParent && parentIndex === index;
-
-  return children({
-    ref,
-    ...attributes,
-    ...listeners,
-    relativeDropPosition:
-      relativeDropPosition ??
-      (showDragInsideIndicatorOnParent ? "inside" : undefined),
-  });
-}
-
-/* ----------------------------------------------------------------------------
- * Root
- * ------------------------------------------------------------------------- */
-
-interface RootProps {
-  keys: UniqueIdentifier[];
-  children: React.ReactNode;
-  renderOverlay?: (index: number) => React.ReactNode;
-  onMoveItem?: (
-    sourceIndex: number,
-    targetIndex: number,
-    position: RelativeDropPosition
-  ) => void;
-  acceptsDrop?: SortableItemContextProps["acceptsDrop"];
-  axis?: SortableItemContextProps["axis"];
-  getDropTargetParentIndex?: SortableItemContextProps["getDropTargetParentIndex"];
-}
-
-function SortableRoot({
-  keys,
-  children,
-  onMoveItem,
-  renderOverlay,
-  acceptsDrop = defaultAcceptsDrop,
-  axis = "y",
-  getDropTargetParentIndex,
-}: RootProps) {
-  const sensors = useSensors(
-    useSensor(PointerSensor, {
-      activationConstraint: {
-        distance: 4,
-      },
-    })
-  );
-
-  const [activeIndex, setActiveIndex] = React.useState<number | undefined>();
-  const activatorEvent = React.useRef<PointerEvent | null>(null);
-  const [position, setPosition] = React.useState<{ x: number; y: number }>({
-    x: 0,
-    y: 0,
-  });
-
-  const setActivatorEvent = React.useCallback((event: PointerEvent) => {
-    activatorEvent.current = event;
-  }, []);
-
-  const handleDragStart = React.useCallback(
-    (event: DragStartEvent) => {
-      const index = keys.findIndex((id) => id === event.active.id);
-      setActiveIndex(index);
-    },
-    [keys]
-  );
-
-  const handleDragMove = React.useCallback((event: DragMoveEvent) => {
-    setPosition({ ...event.delta });
-  }, []);
-
-  const handleDragEnd = React.useCallback(
-    (event: DragEndEvent) => {
-      const { active, over } = event;
-
-      setActiveIndex(undefined);
-      if (over && active.id !== over.id) {
-        const oldIndex = keys.findIndex((id) => id === active.id);
-        const newIndex = keys.findIndex((id) => id === over.id);
-
-        if (oldIndex === -1 || newIndex === -1) return;
-
-        const eventX = activatorEvent.current?.clientX ?? 0;
-        const eventY = activatorEvent.current?.clientY ?? 0;
-        const offsetLeft = eventX + position.x;
-        const offsetTop = eventY + position.y;
-
-        const indicator = validateDropIndicator({
-          acceptsDrop,
-          keys,
-          activeId: active.id,
-          overId: over.id,
-          offsetStart: axis === "x" ? offsetLeft : offsetTop,
-          elementStart: axis === "x" ? over.rect.left : over.rect.top,
-          elementSize: axis === "x" ? over.rect.width : over.rect.height,
-        });
-
-        if (!indicator) return;
-
-        onMoveItem?.(oldIndex, newIndex, indicator);
-      }
-    },
-    [acceptsDrop, axis, keys, onMoveItem, position.x, position.y]
-  );
-
-  const [mounted, setMounted] = React.useState(false);
-
-  React.useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  return (
-    <SortableItemContext.Provider
-      value={React.useMemo(
-        (): SortableItemContextProps => ({
-          keys,
-          acceptsDrop,
-          position,
-          setActivatorEvent,
-          axis,
-          getDropTargetParentIndex,
-        }),
-        [
-          acceptsDrop,
-          axis,
-          getDropTargetParentIndex,
-          keys,
-          position,
-          setActivatorEvent,
-        ]
-      )}
-    >
-      <DndContext
-        sensors={sensors}
-        collisionDetection={closestCenter}
-        onDragStart={handleDragStart}
-        onDragMove={handleDragMove}
-        onDragEnd={handleDragEnd}
-      >
-        <SortableContext
-          items={keys}
-          strategy={
-            axis === "x"
-              ? horizontalListSortingStrategy
-              : verticalListSortingStrategy
-          }
-        >
-          {children}
-        </SortableContext>
-        {mounted &&
-          renderOverlay &&
-          createPortal(
-            <DragOverlay dropAnimation={null}>
-              {activeIndex !== undefined &&
-                activeIndex >= 0 &&
-                renderOverlay(activeIndex)}
-            </DragOverlay>,
-            document.body
-          )}
-      </DndContext>
-    </SortableItemContext.Provider>
-  );
-}
-
-// Create a map of all subcomponents
-const SortableSubcomponents = {
-  Root: memo(SortableRoot),
-  Item: memoGeneric(SortableItem),
-} as const;
-
-interface SortableProps<T, TElement extends HTMLElement>
-  extends Omit<RootProps, "children" | "keys" | "renderOverlay"> {
-  items: T[];
-  keyExtractor: (item: T) => UniqueIdentifier;
-  shouldRenderOverlay?: boolean;
-  renderItem: (
-    item: T,
-    props: ItemChildrenProps<TElement>,
-    { isOverlay }: { isOverlay: boolean }
-  ) => JSX.Element;
-}
-
-const SortableComponent = memoGeneric(function Sortable<
-  TItem,
-  TElement extends HTMLElement,
->(props: SortableProps<TItem, TElement>) {
-  const {
-    renderItem,
-    items,
-    keyExtractor,
-    shouldRenderOverlay = true,
-    ...rest
-  } = props;
-
-  const keys = React.useMemo(
-    () => items.map(keyExtractor),
-    [items, keyExtractor]
-  );
-
-  const renderOverlay = React.useCallback(
-    (index: number) => {
-      return renderItem(
-        items[index],
-        {
-          ref: () => {},
-          style: {},
-          tabIndex: -1,
-          "aria-disabled": true,
-          "aria-pressed": false,
-          "aria-roledescription": "Item being dragged",
-          "aria-describedby": "Item being dragged",
-          role: "button",
-        },
-        { isOverlay: true }
-      );
-    },
-    [renderItem, items]
-  );
-
-  return (
-    <SortableSubcomponents.Root
-      {...rest}
-      keys={keys}
-      renderOverlay={shouldRenderOverlay ? renderOverlay : undefined}
-    >
-      {keys.map((key, index) => (
-        <SortableSubcomponents.Item key={key} id={key}>
-          {(props) => {
-            return renderItem(
-              items[index],
-              props as ItemChildrenProps<TElement>,
-              { isOverlay: false }
-            );
-          }}
-        </SortableSubcomponents.Item>
-      ))}
-    </SortableSubcomponents.Root>
-  );
-});
-
-// Export both the namespace and the component
-const Sortable = Object.assign(SortableComponent, SortableSubcomponents);
-
-export { Sortable };