@octanejs/aria 0.0.40 → 0.0.42

package/src/stately/dnd/useDroppableCollectionState.tsx

@@ -0,0 +1,288 @@
+/** @jsxImportSource octane */
+// Ported from adobe/react-spectrum@1c84a49a1faf50b571c84e00bcf9c60b22ddd03e (packages/react-stately/src/dnd/useDroppableCollectionState.ts).
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {
+	Collection,
+	DragTypes,
+	DropOperation,
+	DroppableCollectionProps,
+	DropTarget,
+	ItemDropTarget,
+	Key,
+	Node,
+} from '@react-types/shared';
+import { MultipleSelectionManager } from '../selection/types';
+import { useCallback, useRef, useState } from '../../compat/react';
+
+interface DropOperationEvent {
+	target: DropTarget;
+	types: DragTypes;
+	allowedOperations: DropOperation[];
+	isInternal: boolean;
+	draggingKeys: Set<Key>;
+}
+
+export interface DroppableCollectionStateOptions extends Omit<
+	DroppableCollectionProps,
+	'onDropMove' | 'onDropActivate'
+> {
+	/** A collection of items. */
+	collection: Collection<Node<unknown>>;
+	/** An interface for reading and updating multiple selection state. */
+	selectionManager: MultipleSelectionManager;
+	/** Whether the drop events should be disabled. */
+	isDisabled?: boolean;
+}
+
+export interface DroppableCollectionState {
+	/** A collection of items. */
+	collection: Collection<Node<unknown>>;
+	/** An interface for reading and updating multiple selection state. */
+	selectionManager: MultipleSelectionManager;
+	/** The current drop target. */
+	target: DropTarget | null;
+	/** Whether drop events are disabled. */
+	isDisabled?: boolean;
+	/** Sets the current drop target. */
+	setTarget(target: DropTarget | null): void;
+	/** Returns whether the given target is equivalent to the current drop target. */
+	isDropTarget(target: DropTarget | null): boolean;
+	/** Returns the drop operation for the given parameters. */
+	getDropOperation(e: DropOperationEvent): DropOperation;
+}
+
+/**
+ * Manages state for a droppable collection.
+ */
+export function useDroppableCollectionState(
+	props: DroppableCollectionStateOptions,
+): DroppableCollectionState {
+	let {
+		acceptedDragTypes = 'all',
+		isDisabled,
+		onInsert,
+		onRootDrop,
+		onItemDrop,
+		onReorder,
+		onMove,
+		shouldAcceptItemDrop,
+		collection,
+		selectionManager,
+		onDropEnter,
+		getDropOperation,
+		onDrop,
+	} = props;
+	let [target, setTarget] = useState<DropTarget | null>(null);
+	let targetRef = useRef<DropTarget | null>(null);
+
+	let getOppositeTarget = (target: ItemDropTarget): ItemDropTarget | null => {
+		if (target.dropPosition === 'before') {
+			let node = collection.getItem(target.key);
+			return node && node.prevKey != null
+				? { type: 'item', key: node.prevKey, dropPosition: 'after' }
+				: null;
+		} else if (target.dropPosition === 'after') {
+			let node = collection.getItem(target.key);
+			return node && node.nextKey != null
+				? { type: 'item', key: node.nextKey, dropPosition: 'before' }
+				: null;
+		}
+		return null;
+	};
+
+	let defaultGetDropOperation = useCallback(
+		(e: DropOperationEvent) => {
+			let { target, types, allowedOperations, isInternal, draggingKeys } = e;
+
+			if (isDisabled || !target) {
+				return 'cancel';
+			}
+
+			if (acceptedDragTypes === 'all' || acceptedDragTypes.some((type) => types.has(type))) {
+				let isValidInsert =
+					onInsert &&
+					target.type === 'item' &&
+					!isInternal &&
+					(target.dropPosition === 'before' || target.dropPosition === 'after');
+				let isValidReorder =
+					onReorder &&
+					target.type === 'item' &&
+					isInternal &&
+					(target.dropPosition === 'before' || target.dropPosition === 'after') &&
+					isDraggingWithinParent(collection, target, draggingKeys);
+
+				let isItemDropAllowed =
+					target.type !== 'item' ||
+					target.dropPosition !== 'on' ||
+					!shouldAcceptItemDrop ||
+					shouldAcceptItemDrop(target, types);
+
+				let isValidMove = onMove && target.type === 'item' && isInternal && isItemDropAllowed;
+
+				// Feedback was that internal root drop was weird so preventing that from happening
+				let isValidRootDrop = onRootDrop && target.type === 'root' && !isInternal;
+
+				// Automatically prevent items (i.e. folders) from being dropped on themselves.
+				let isValidOnItemDrop =
+					onItemDrop &&
+					target.type === 'item' &&
+					target.dropPosition === 'on' &&
+					!(isInternal && target.key != null && draggingKeys.has(target.key)) &&
+					isItemDropAllowed;
+
+				if (
+					onDrop ||
+					isValidInsert ||
+					isValidReorder ||
+					isValidMove ||
+					isValidRootDrop ||
+					isValidOnItemDrop
+				) {
+					if (getDropOperation) {
+						return getDropOperation(target, types, allowedOperations);
+					} else {
+						return allowedOperations[0];
+					}
+				}
+			}
+
+			return 'cancel';
+		},
+		[
+			isDisabled,
+			collection,
+			acceptedDragTypes,
+			getDropOperation,
+			onInsert,
+			onRootDrop,
+			onItemDrop,
+			shouldAcceptItemDrop,
+			onReorder,
+			onMove,
+			onDrop,
+		],
+	);
+
+	return {
+		collection,
+		selectionManager,
+		isDisabled,
+		target,
+		setTarget(newTarget) {
+			if (this.isDropTarget(newTarget)) {
+				return;
+			}
+
+			let target = targetRef.current;
+			if (target && typeof props.onDropExit === 'function') {
+				props.onDropExit({
+					type: 'dropexit',
+					x: 0, // todo
+					y: 0,
+					target,
+				});
+			}
+
+			if (newTarget && typeof onDropEnter === 'function') {
+				onDropEnter({
+					type: 'dropenter',
+					x: 0, // todo
+					y: 0,
+					target: newTarget,
+				});
+			}
+
+			targetRef.current = newTarget ?? null;
+			setTarget(newTarget ?? null);
+		},
+		isDropTarget(dropTarget) {
+			let target = targetRef.current;
+			if (!target || !dropTarget) {
+				return false;
+			}
+			if (isEqualDropTarget(dropTarget, target)) {
+				return true;
+			}
+
+			// Check if the targets point at the same point between two items, one referring before, and the other after.
+			if (
+				dropTarget?.type === 'item' &&
+				target?.type === 'item' &&
+				dropTarget.key !== target.key &&
+				dropTarget.dropPosition !== target.dropPosition &&
+				dropTarget.dropPosition !== 'on' &&
+				target.dropPosition !== 'on'
+			) {
+				return (
+					isEqualDropTarget(getOppositeTarget(dropTarget), target) ||
+					isEqualDropTarget(dropTarget, getOppositeTarget(target))
+				);
+			}
+
+			return false;
+		},
+		getDropOperation(e) {
+			let { target, isInternal, draggingKeys } = e;
+
+			// Prevent dropping items onto themselves or their descendants
+			if (isInternal && target.type === 'item' && draggingKeys.size > 0) {
+				if (draggingKeys.has(target.key) && target.dropPosition === 'on') {
+					return 'cancel';
+				}
+
+				let currentKey: Key | null = target.key;
+				while (currentKey != null) {
+					let item = collection.getItem(currentKey);
+					let parentKey = item?.parentKey;
+					if (parentKey != null && draggingKeys.has(parentKey)) {
+						return 'cancel';
+					}
+					currentKey = parentKey ?? null;
+				}
+			}
+
+			return defaultGetDropOperation(e);
+		},
+	};
+}
+
+function isEqualDropTarget(a?: DropTarget | null, b?: DropTarget | null) {
+	if (!a) {
+		return !b;
+	}
+
+	switch (a.type) {
+		case 'root':
+			return b?.type === 'root';
+		case 'item':
+			return b?.type === 'item' && b?.key === a.key && b?.dropPosition === a.dropPosition;
+	}
+}
+
+function isDraggingWithinParent(
+	collection: Collection<Node<unknown>>,
+	target: ItemDropTarget,
+	draggingKeys: Set<Key>,
+) {
+	let targetNode = collection.getItem(target.key);
+
+	for (let key of draggingKeys) {
+		let node = collection.getItem(key);
+		if (node?.parentKey !== targetNode?.parentKey) {
+			return false;
+		}
+	}
+
+	return true;
+}