@react-aria/dnd 3.0.0-alpha.1 → 3.0.0-alpha.12

package/src/useDroppableCollection.ts

@@ -10,23 +10,23 @@
  * governing permissions and limitations under the License.
  */
 
-import {Collection, DropEvent, DropOperation, DroppableCollectionProps, DropPosition, DropTarget, KeyboardDelegate, Node} from '@react-types/shared';
+import {Collection, DropEvent, DropOperation, DroppableCollectionProps, DropPosition, DropTarget, DropTargetDelegate, KeyboardDelegate, Node} from '@react-types/shared';
 import * as DragManager from './DragManager';
 import {DroppableCollectionState} from '@react-stately/dnd';
 import {getTypes} from './utils';
-import {HTMLAttributes, Key, RefObject, useCallback, useEffect, useLayoutEffect, useRef} from 'react';
-import {mergeProps} from '@react-aria/utils';
+import {HTMLAttributes, Key, RefObject, useCallback, useEffect, useRef} from 'react';
+import {mergeProps, useLayoutEffect} from '@react-aria/utils';
 import {setInteractionModality} from '@react-aria/interactions';
 import {useAutoScroll} from './useAutoScroll';
 import {useDrop} from './useDrop';
 import {useDroppableCollectionId} from './utils';
 
-interface DroppableCollectionOptions extends DroppableCollectionProps {
+export interface DroppableCollectionOptions extends DroppableCollectionProps {
   keyboardDelegate: KeyboardDelegate,
-  getDropTargetFromPoint: (x: number, y: number) => DropTarget | null
+  dropTargetDelegate: DropTargetDelegate
 }
 
-interface DroppableCollectionResult {
+export interface DroppableCollectionResult {
   collectionProps: HTMLAttributes<HTMLElement>
 }
 
@@ -34,7 +34,7 @@ interface DroppingState {
   collection: Collection<Node<unknown>>,
   focusedKey: Key,
   selectedKeys: Set<Key>,
-  timeout: NodeJS.Timeout
+  timeout: ReturnType<typeof setTimeout>
 }
 
 const DROP_POSITIONS: DropPosition[] = ['before', 'on', 'after'];
@@ -52,27 +52,22 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
   let autoScroll = useAutoScroll(ref);
   let {dropProps} = useDrop({
     ref,
-    onDropEnter(e) {
-      let target = props.getDropTargetFromPoint(e.x, e.y);
-      state.setTarget(target);
+    onDropEnter() {
+      state.setTarget(localState.nextTarget);
     },
     onDropMove(e) {
       state.setTarget(localState.nextTarget);
       autoScroll.move(e.x, e.y);
     },
     getDropOperationForPoint(types, allowedOperations, x, y) {
-      let target = props.getDropTargetFromPoint(x, y);
+      let isValidDropTarget = (target) => state.getDropOperation(target, types, allowedOperations) !== 'cancel';
+      let target = props.dropTargetDelegate.getDropTargetFromPoint(x, y, isValidDropTarget);
       if (!target) {
         localState.dropOperation = 'cancel';
         localState.nextTarget = null;
         return 'cancel';
       }
 
-      if (state.isDropTarget(target)) {
-        localState.nextTarget = target;
-        return localState.dropOperation;
-      }
-
       localState.dropOperation = state.getDropOperation(target, types, allowedOperations);
 
       // If the target doesn't accept the drop, see if the root accepts it instead.

package/src/useDroppableItem.ts

@@ -17,12 +17,13 @@ import {getTypes} from './utils';
 import {HTMLAttributes, RefObject, useEffect} from 'react';
 import {useVirtualDrop} from './useVirtualDrop';
 
-interface DroppableItemOptions {
+export interface DroppableItemOptions {
   target: DropTarget
 }
 
-interface DroppableItemResult {
-  dropProps: HTMLAttributes<HTMLElement>
+export interface DroppableItemResult {
+  dropProps: HTMLAttributes<HTMLElement>,
+  isDropTarget: boolean
 }
 
 export function useDroppableItem(options: DroppableItemOptions, state: DroppableCollectionState, ref: RefObject<HTMLElement>): DroppableItemResult {
@@ -62,6 +63,7 @@ export function useDroppableItem(options: DroppableItemOptions, state: Droppable
     dropProps: {
       ...dropProps,
       'aria-hidden': !dragSession || isValidDropTarget ? undefined : 'true'
-    }
+    },
+    isDropTarget
   };
 }

package/src/useVirtualDrop.ts

@@ -10,16 +10,16 @@
  * governing permissions and limitations under the License.
  */
 
+import {DOMAttributes} from '@react-types/shared';
 import * as DragManager from './DragManager';
-import {HTMLAttributes} from 'react';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {useDescription} from '@react-aria/utils';
 import {useDragModality} from './utils';
-import {useMessageFormatter} from '@react-aria/i18n';
+import {useLocalizedStringFormatter} from '@react-aria/i18n';
 
 interface VirtualDropResult {
-  dropProps: HTMLAttributes<HTMLElement>
+  dropProps: DOMAttributes
 }
 
 const MESSAGES = {
@@ -29,10 +29,10 @@ const MESSAGES = {
 };
 
 export function useVirtualDrop(): VirtualDropResult {
-  let formatMessage = useMessageFormatter(intlMessages);
+  let stringFormatter = useLocalizedStringFormatter(intlMessages);
   let modality = useDragModality();
   let dragSession = DragManager.useDragSession();
-  let descriptionProps = useDescription(dragSession ? formatMessage(MESSAGES[modality]) : '');
+  let descriptionProps = useDescription(dragSession ? stringFormatter.format(MESSAGES[modality]) : '');
 
   return {
     dropProps: {

package/src/utils.ts

@@ -277,25 +277,6 @@ function createDirectoryItem(entry: any): DirectoryItem {
   };
 }
 
-interface FileSystemFileEntry {
-  isFile: true,
-  isDirectory: false,
-  name: string,
-  file(successCallback: (file: File) => void, errorCallback?: (error: Error) => void): void
-}
-
-interface FileSystemDirectoryEntry {
-  isDirectory: true,
-  isFile: false,
-  name: string,
-  createReader(): FileSystemDirectoryReader
-}
-
-type FileSystemEntry = FileSystemFileEntry | FileSystemDirectoryEntry;
-interface FileSystemDirectoryReader {
-  readEntries(successCallback: (entries: FileSystemEntry[]) => void, errorCallback?: (error: Error) => void): void
-}
-
 async function *getEntries(item: FileSystemDirectoryEntry): AsyncIterable<FileItem | DirectoryItem> {
   let reader = item.createReader();
 
@@ -309,7 +290,7 @@ async function *getEntries(item: FileSystemDirectoryEntry): AsyncIterable<FileIt
 
     for (let entry of entries) {
       if (entry.isFile) {
-        let file = await getEntryFile(entry);
+        let file = await getEntryFile(entry as FileSystemFileEntry);
         yield createFileItem(file);
       } else if (entry.isDirectory) {
         yield createDirectoryItem(entry);