add stories for using with useDraggableCollectionState and useDragAndDrop

Author: reidbarber

packages/@react-aria/dnd/stories/dnd.stories.tsx

@@ -385,7 +385,7 @@ function DraggableCollectionExample(props) {
   };
 
   return (
-    <DraggableCollection items={list.items} selectedKeys={list.selectedKeys} onSelectionChange={list.setSelectedKeys} onDragEnd={onDragEnd} onCut={onCut} isDisabled={props.isDisabled}>
+    <DraggableCollection items={list.items} selectedKeys={list.selectedKeys} onSelectionChange={list.setSelectedKeys} onDragEnd={onDragEnd} onCut={onCut} isDisabled={props.isDisabled} getPreviewOffset={props.getPreviewOffset}>
       {item => (
         <Item textValue={item.text}>
           {item.type === 'folder' && <Folder size="S" />}
@@ -397,7 +397,7 @@ function DraggableCollectionExample(props) {
 }
 
 function DraggableCollection(props) {
-  let {isDisabled} = props;
+  let {isDisabled, getPreviewOffset} = props;
   let ref = React.useRef<HTMLDivElement>(null);
   let state = useListState<ItemValue>(props);
   let gridState = useGridState({
@@ -440,6 +440,7 @@ function DraggableCollection(props) {
       }).filter(item => item != null);
     },
     preview,
+    getPreviewOffset,
     onDragStart: action('onDragStart'),
     onDragEnd: chain(action('onDragEnd'), props.onDragEnd)
   });
@@ -647,6 +648,24 @@ function DraggableWithPreview({mode, offsetX, offsetY}: PreviewOffsetArgs): JSX.
   );
 }
 
+function DraggableCollectionWithPreview({mode, offsetX, offsetY}: PreviewOffsetArgs): JSX.Element {
+  const getPreviewOffset = React.useCallback(({previewRect, defaultOffset}: any) => {
+    switch (mode) {
+      case 'center':
+        return {x: previewRect.width / 2, y: previewRect.height / 2};
+      case 'custom':
+        return {x: offsetX, y: offsetY};
+      case 'default':
+      default:
+        return defaultOffset;
+    }
+  }, [mode, offsetX, offsetY]);
+
+  return (
+    <DraggableCollectionExample getPreviewOffset={getPreviewOffset} />
+  );
+}
+
 export const PreviewOffset: DnDStoryObj = {
   render: (args) => (
     <Flex direction="column" gap="size-200" alignItems="center">
@@ -676,3 +695,33 @@ export const PreviewOffset: DnDStoryObj = {
     offsetY: 20
   }
 };
+
+export const CollectionPreviewOffset: DnDStoryObj = {
+  render: (args) => (
+    <Flex direction="column" gap="size-200" alignItems="center">
+      <DraggableCollectionWithPreview {...args} />
+      <Droppable />
+    </Flex>
+  ),
+  name: 'Collection preview offset',
+  argTypes: {
+    mode: {
+      control: 'select',
+      options: ['default', 'center', 'custom'],
+      defaultValue: 'default'
+    },
+    offsetX: {
+      control: 'number',
+      defaultValue: 20
+    },
+    offsetY: {
+      control: 'number',
+      defaultValue: 20
+    }
+  },
+  args: {
+    mode: 'default',
+    offsetX: 20,
+    offsetY: 20
+  }
+};

packages/react-aria-components/stories/ListBox.stories.tsx

@@ -181,6 +181,103 @@ ListBoxDnd.story = {
   }
 };
 
+interface PreviewOffsetArgs {
+  /** Strategy for positioning the preview. */
+  mode: 'default' | 'center' | 'custom',
+  /** X offset in pixels (only used when mode = custom). */
+  offsetX: number,
+  /** Y offset in pixels (only used when mode = custom). */
+  offsetY: number
+}
+
+function ListBoxDndWithPreview({mode, offsetX, offsetY, ...props}: PreviewOffsetArgs & ListBoxProps<typeof albums[0]>) {
+  let list = useListData({
+    initialItems: albums
+  });
+
+  let getPreviewOffset = React.useCallback(({previewRect, defaultOffset}: any) => {
+    switch (mode) {
+      case 'center':
+        return {x: previewRect.width / 2, y: previewRect.height / 2};
+      case 'custom':
+        return {x: offsetX, y: offsetY};
+      case 'default':
+      default:
+        return defaultOffset;
+    }
+  }, [mode, offsetX, offsetY]);
+
+  let {dragAndDropHooks} = useDragAndDrop({
+    getItems: (keys) => [...keys].map(key => ({'text/plain': list.getItem(key)?.title ?? ''})),
+    onReorder(e) {
+      if (e.target.dropPosition === 'before') {
+        list.moveBefore(e.target.key, e.keys);
+      } else if (e.target.dropPosition === 'after') {
+        list.moveAfter(e.target.key, e.keys);
+      }
+    },
+    getPreviewOffset,
+    renderDragPreview(items) {
+      return (
+        <div style={{display: 'flex', alignItems: 'center', padding: 4, background: 'white', border: '1px solid gray'}}>
+          <Text>{items[0]['text/plain']}</Text>
+          {items.length > 1 && <span style={{marginLeft: 4, fontSize: 12}}>+{items.length - 1}</span>}
+        </div>
+      );
+    }
+  });
+
+  return (
+    <ListBox
+      {...props}
+      aria-label="Albums with preview offset"
+      items={list.items}
+      selectionMode="multiple"
+      dragAndDropHooks={dragAndDropHooks}>
+      {item => (
+        <ListBoxItem>
+          <img src={item.image} alt="" />
+          <Text slot="label">{item.title}</Text>
+          <Text slot="description">{item.artist}</Text>
+        </ListBoxItem>
+      )}
+    </ListBox>
+  );
+}
+
+export const ListBoxPreviewOffset = {
+  render(args) {
+    return <ListBoxDndWithPreview {...args} />;
+  },
+  args: {
+    layout: 'stack',
+    orientation: 'horizontal',
+    mode: 'default',
+    offsetX: 20,
+    offsetY: 20
+  },
+  argTypes: {
+    layout: {
+      control: 'radio',
+      options: ['stack', 'grid']
+    },
+    orientation: {
+      control: 'radio',
+      options: ['horizontal', 'vertical']
+    },
+    mode: {
+      control: 'select',
+      options: ['default', 'center', 'custom']
+    },
+    offsetX: {
+      control: 'number'
+    },
+    offsetY: {
+      control: 'number'
+    }
+  }
+};
+
 export const ListBoxHover = () => (
   <ListBox className={styles.menu} aria-label="test listbox" onAction={action('onAction')} >
     <MyListBoxItem onHoverStart={action('onHoverStart')} onHoverChange={action('onHoverChange')} onHoverEnd={action('onHoverEnd')}>Hover</MyListBoxItem>