@webbio/strapi-plugin-page-builder 0.8.4-platform → 0.9.0-platform

package/admin/src/components/StrapiCore/admin/admin/src/content-manager/hooks/useDragAndDrop.ts

@@ -0,0 +1,253 @@
+// @ts-nocheck
+import * as React from 'react';
+
+import {
+	useDrag,
+	useDrop,
+	type HandlerManager,
+	type ConnectDragSource,
+	type ConnectDropTarget,
+	type ConnectDragPreview,
+	type DragSourceMonitor
+} from 'react-dnd';
+
+import { useKeyboardDragAndDrop, type UseKeyboardDragAndDropCallbacks } from './useKeyboardDragAndDrop';
+
+import type { Entity } from '@strapi/types';
+
+const DIRECTIONS = {
+	UPWARD: 'upward',
+	DOWNWARD: 'downward'
+} as const;
+
+const DROP_SENSITIVITY = {
+	REGULAR: 'regular',
+	IMMEDIATE: 'immediate'
+} as const;
+
+interface UseDragAndDropOptions<
+	TIndex extends number | Array<number> = number,
+	TItem extends { index: TIndex } = { index: TIndex }
+> extends UseKeyboardDragAndDropCallbacks<TIndex> {
+	type?: string;
+	index: TIndex;
+	item?: TItem;
+	onStart?: () => void;
+	onEnd?: () => void;
+	dropSensitivity?: (typeof DROP_SENSITIVITY)[keyof typeof DROP_SENSITIVITY];
+}
+
+type Identifier = ReturnType<HandlerManager['getHandlerId']>;
+
+type UseDragAndDropReturn = [
+	props: {
+		handlerId: Identifier;
+		isDragging: boolean;
+		handleKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
+		isOverDropTarget: boolean;
+		direction: (typeof DIRECTIONS)[keyof typeof DIRECTIONS] | null;
+	},
+	objectRef: React.RefObject<HTMLElement>,
+	dropRef: ConnectDropTarget,
+	dragRef: ConnectDragSource,
+	dragPreviewRef: ConnectDragPreview
+];
+
+type DropCollectedProps = {
+	handlerId: Identifier;
+	isOver: boolean;
+};
+
+/**
+ * A utility hook abstracting the general drag and drop hooks from react-dnd.
+ * Centralising the same behaviours and by default offering keyboard support.
+ */
+const useDragAndDrop = <
+	TIndex extends number | Array<number>,
+	TItem extends { index: TIndex; id?: Entity.ID; [key: string]: unknown }
+>(
+	active: boolean,
+	{
+		type = 'STRAPI_DND',
+		index,
+		item,
+		onStart,
+		onEnd,
+		onGrabItem,
+		onDropItem,
+		onCancel,
+		onMoveItem,
+		dropSensitivity = DROP_SENSITIVITY.REGULAR
+	}: UseDragAndDropOptions<TIndex, TItem>
+): UseDragAndDropReturn => {
+	const objectRef = React.useRef<HTMLElement>(null);
+
+	const [{ handlerId, isOver }, dropRef] = useDrop<TItem, void, DropCollectedProps>({
+		accept: type,
+		collect(monitor) {
+			return {
+				handlerId: monitor.getHandlerId(),
+				isOver: monitor.isOver({ shallow: true })
+			};
+		},
+		drop(item) {
+			const draggedIndex = item.index;
+			const newIndex = index;
+
+			if (isOver && onDropItem) {
+				onDropItem(draggedIndex, newIndex);
+			}
+		},
+		hover(item, monitor) {
+			if (!objectRef.current || !onMoveItem) {
+				return;
+			}
+
+			const dragIndex = item.index;
+			const newIndex = index;
+
+			const hoverBoundingRect = objectRef.current?.getBoundingClientRect();
+			const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
+			const clientOffset = monitor.getClientOffset();
+			if (!clientOffset) return;
+
+			const hoverClientY = clientOffset && clientOffset.y - hoverBoundingRect.top;
+			if (typeof dragIndex === 'number' && typeof newIndex === 'number') {
+				if (dragIndex === newIndex) {
+					// Don't replace items with themselves
+					return;
+				}
+
+				if (dropSensitivity === DROP_SENSITIVITY.REGULAR) {
+					// Dragging downwards
+					if (dragIndex < newIndex && hoverClientY < hoverMiddleY) {
+						return;
+					}
+
+					// Dragging upwards
+					if (dragIndex > newIndex && hoverClientY > hoverMiddleY) {
+						return;
+					}
+				}
+
+				// Time to actually perform the action
+				onMoveItem(newIndex, dragIndex);
+				item.index = newIndex;
+			} else {
+				// Using numbers as indices doesn't work for nested list items with path like [1, 1, 0]
+				if (Array.isArray(dragIndex) && Array.isArray(newIndex))
+					if (dropSensitivity === DROP_SENSITIVITY.REGULAR) {
+						// Indices comparison to find item position in nested list
+						const minLength = Math.min(dragIndex.length, newIndex.length);
+						let areEqual = true;
+						let isLessThan = false;
+						let isGreaterThan = false;
+
+						for (let i = 0; i < minLength; i++) {
+							if (dragIndex[i] < newIndex[i]) {
+								isLessThan = true;
+								areEqual = false;
+								break;
+							} else if (dragIndex[i] > newIndex[i]) {
+								isGreaterThan = true;
+								areEqual = false;
+								break;
+							}
+						}
+
+						// Don't replace items with themselves
+						if (areEqual && dragIndex.length === newIndex.length) {
+							return;
+						}
+						// Dragging downwards
+						if (isLessThan && !isGreaterThan && hoverClientY < hoverMiddleY) {
+							return;
+						}
+
+						// Dragging upwards
+						if (isGreaterThan && !isLessThan && hoverClientY > hoverMiddleY) {
+							return;
+						}
+					}
+				onMoveItem(newIndex, dragIndex);
+				item.index = newIndex;
+			}
+		}
+	});
+
+	const getDragDirection = (monitor: DragSourceMonitor<TItem, void>) => {
+		if (
+			monitor &&
+			monitor.isDragging() &&
+			!monitor.didDrop() &&
+			monitor.getInitialClientOffset() &&
+			monitor.getClientOffset()
+		) {
+			const deltaY = monitor.getInitialClientOffset()!.y - monitor.getClientOffset()!.y;
+
+			if (deltaY > 0) return DIRECTIONS.UPWARD;
+
+			if (deltaY < 0) return DIRECTIONS.DOWNWARD;
+
+			return null;
+		}
+
+		return null;
+	};
+
+	const [{ isDragging, direction }, dragRef, dragPreviewRef] = useDrag({
+		type,
+		item() {
+			if (onStart) {
+				onStart();
+			}
+
+			/**
+			 * This will be attached and it helps define the preview sizes
+			 * when a component is flexy e.g. Relations
+			 */
+			const { width } = objectRef.current?.getBoundingClientRect() ?? {};
+
+			return { index, width, ...item };
+		},
+		end() {
+			if (onEnd) {
+				onEnd();
+			}
+		},
+		canDrag: active,
+		/**
+		 * This is useful when the item is in a virtualized list.
+		 * However, if we don't have an ID then we want the libraries
+		 * defaults to take care of this.
+		 */
+		isDragging: item?.id
+			? (monitor) => {
+					return item.id === monitor.getItem().id;
+				}
+			: undefined,
+		collect: (monitor) => ({
+			isDragging: monitor.isDragging(),
+			initialOffset: monitor.getInitialClientOffset(),
+			currentOffset: monitor.getClientOffset(),
+			direction: getDragDirection(monitor)
+		})
+	});
+
+	const handleKeyDown = useKeyboardDragAndDrop(active, index, {
+		onGrabItem,
+		onDropItem,
+		onCancel,
+		onMoveItem
+	});
+
+	return [
+		{ handlerId, isDragging, handleKeyDown, isOverDropTarget: isOver, direction },
+		objectRef,
+		dropRef,
+		dragRef,
+		dragPreviewRef
+	];
+};
+
+export { useDragAndDrop, UseDragAndDropReturn, UseDragAndDropOptions, DIRECTIONS, DROP_SENSITIVITY };

package/admin/src/components/StrapiCore/admin/admin/src/content-manager/hooks/useKeyboardDragAndDrop.ts

@@ -0,0 +1,96 @@
+import * as React from 'react';
+
+export type UseKeyboardDragAndDropCallbacks<TIndex extends number | Array<number> = number> = {
+  onCancel?: (index: TIndex) => void;
+  onDropItem?: (currentIndex: TIndex, newIndex?: TIndex) => void;
+  onGrabItem?: (index: TIndex) => void;
+  onMoveItem?: (newIndex: TIndex, currentIndex: TIndex) => void;
+};
+
+/**
+ * Utility hook designed to implement keyboard accessibile drag and drop by
+ * returning an onKeyDown handler to be passed to the drag icon button.
+ *
+ * @internal - You should use `useDragAndDrop` instead.
+ */
+export const useKeyboardDragAndDrop = <TIndex extends number | Array<number> = number>(
+  active: boolean,
+  index: TIndex,
+  { onCancel, onDropItem, onGrabItem, onMoveItem }: UseKeyboardDragAndDropCallbacks<TIndex>
+) => {
+  const [isSelected, setIsSelected] = React.useState(false);
+
+  const handleMove = (movement: 'UP' | 'DOWN') => {
+    if (!isSelected) {
+      return;
+    }
+    if (typeof index === 'number' && onMoveItem) {
+      if (movement === 'UP') {
+        onMoveItem((index - 1) as TIndex, index);
+      } else if (movement === 'DOWN') {
+        onMoveItem((index + 1) as TIndex, index);
+      }
+    }
+  };
+
+  const handleDragClick = () => {
+    if (isSelected) {
+      if (onDropItem) {
+        onDropItem(index);
+      }
+      setIsSelected(false);
+    } else {
+      if (onGrabItem) {
+        onGrabItem(index);
+      }
+      setIsSelected(true);
+    }
+  };
+
+  const handleCancel = () => {
+    if (isSelected) {
+      setIsSelected(false);
+
+      if (onCancel) {
+        onCancel(index);
+      }
+    }
+  };
+
+  const handleKeyDown: React.KeyboardEventHandler<HTMLButtonElement> = (e) => {
+    if (!active) {
+      return;
+    }
+
+    if (e.key === 'Tab' && !isSelected) {
+      return;
+    }
+
+    e.preventDefault();
+
+    switch (e.key) {
+      case ' ':
+      case 'Enter':
+        handleDragClick();
+        break;
+
+      case 'Escape':
+        handleCancel();
+        break;
+
+      case 'ArrowDown':
+      case 'ArrowRight':
+        handleMove('DOWN');
+        break;
+
+      case 'ArrowUp':
+      case 'ArrowLeft':
+        handleMove('UP');
+        break;
+
+      default:
+    }
+  };
+
+  return handleKeyDown;
+};

package/admin/src/components/StrapiCore/admin/admin/src/content-manager/hooks/usePrev.ts

@@ -0,0 +1,11 @@
+import { useEffect, useRef } from 'react';
+
+export const usePrev = <T>(value: T): T | undefined => {
+  const ref = useRef<T>();
+
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+
+  return ref.current;
+};

package/admin/src/components/StrapiCore/admin/admin/src/content-manager/utils/dragAndDrop.ts

@@ -0,0 +1,8 @@
+export const ItemTypes = {
+  COMPONENT: 'component',
+  EDIT_FIELD: 'editField',
+  FIELD: 'field',
+  DYNAMIC_ZONE: 'dynamicZone',
+  RELATION: 'relation',
+  BLOCKS: 'blocks',
+} as const;

package/admin/src/components/StrapiCore/admin/admin/src/content-manager/utils/normalizeRelations.ts

@@ -0,0 +1,7 @@
+import type { Contracts } from '../../../../../content-manager/shared';
+
+export type NormalizedRelation = Contracts.Relations.RelationResult & {
+	href?: string;
+	mainField: string;
+	publicationState?: false | 'published' | 'draft';
+};

package/admin/src/components/StrapiCore/admin/admin/src/content-manager/utils/paths.ts

@@ -0,0 +1,36 @@
+import get from 'lodash/get';
+
+/**
+ * This is typically used in circumstances where there are re-orderable pieces e.g. Dynamic Zones
+ * or Repeatable fields. It finds the _original_ location of the initial data using `__temp_key__` values
+ * which are added to the fields in the `INIT_FORM` reducer to give array data a stable (when you add
+ * a new item they wont have a server ID).
+ */
+export const getInitialDataPathUsingTempKeys =
+  (initialData: Record<string, any>, modifiedData: Record<string, any>) =>
+  (currentPath: string) => {
+    const splitPath = currentPath.split('.');
+
+    return splitPath.reduce<string[]>((acc, currentValue, index) => {
+      const initialDataParent = get(initialData, acc);
+      const modifiedDataTempKey = get(modifiedData, [
+        ...splitPath.slice(0, index),
+        currentValue,
+        '__temp_key__',
+      ]);
+
+      if (Array.isArray(initialDataParent) && typeof modifiedDataTempKey === 'number') {
+        const initialDataIndex = initialDataParent.findIndex(
+          (entry) => entry.__temp_key__ === modifiedDataTempKey
+        );
+
+        acc.push(initialDataIndex.toString());
+
+        return acc;
+      }
+
+      acc.push(currentValue);
+
+      return acc;
+    }, []);
+  };

package/admin/src/components/StrapiCore/admin/admin/src/content-manager/utils/refs.ts

@@ -0,0 +1,19 @@
+import { MutableRefObject, Ref } from 'react';
+
+type PossibleRef<T> = Ref<T> | undefined;
+
+const setRef = <T>(ref: PossibleRef<T>, value: T) => {
+  if (typeof ref === 'function') {
+    ref(value);
+  } else if (ref !== null && ref !== undefined) {
+    (ref as MutableRefObject<T>).current = value;
+  }
+};
+
+/**
+ * A utility to compose multiple refs together
+ * Accepts callback refs and RefObject(s)
+ */
+export const composeRefs = <T>(...refs: PossibleRef<T>[]) => {
+  return (node: T) => refs.forEach((ref) => setRef(ref, node));
+};

package/admin/src/components/StrapiCore/admin/admin/src/content-manager/utils/translations.ts

@@ -0,0 +1,3 @@
+const getTranslation = (id: string) => `content-manager.${id}`;
+
+export { getTranslation };