Add DnD SSR tests and NextJS example (#3640)

Author: reidbarber

examples/rsp-next-ts/components/ReorderableListView.tsx

@@ -0,0 +1,59 @@
+import { Item, ListView, Text, useListData } from "@adobe/react-spectrum";
+import { useDragAndDrop } from "@react-spectrum/dnd";
+import Folder from "@spectrum-icons/illustrations/Folder";
+
+export default function ReorderableListView() {
+  let list = useListData({
+    initialItems: [
+      { id: "1", type: "file", name: "Adobe Photoshop" },
+      { id: "2", type: "file", name: "Adobe XD" },
+      { id: "3", type: "folder", name: "Documents", childNodes: [] },
+      { id: "4", type: "file", name: "Adobe InDesign" },
+      { id: "5", type: "folder", name: "Utilities", childNodes: [] },
+      { id: "6", type: "file", name: "Adobe AfterEffects" },
+    ],
+  });
+
+  // Append a generated key to the item type so they can only be reordered within this list and not dragged elsewhere.
+  let { dragAndDropHooks } = useDragAndDrop({
+    getItems(keys) {
+      return [...keys].map((key) => {
+        let item = list.getItem(key);
+        // Setup the drag types and associated info for each dragged item.
+        return {
+          "custom-app-type-reorder": JSON.stringify(item),
+          "text/plain": item.name,
+        };
+      });
+    },
+    acceptedDragTypes: ["custom-app-type-reorder"],
+    onReorder: async (e) => {
+      let { keys, target, dropOperation } = e;
+
+      if (target.dropPosition === "before") {
+        list.moveBefore(target.key, [...keys]);
+      } else if (target.dropPosition === "after") {
+        list.moveAfter(target.key, [...keys]);
+      }
+    },
+    getAllowedDropOperations: () => ["move"],
+  });
+
+  return (
+    <ListView
+      aria-label="Reorderable ListView"
+      selectionMode="multiple"
+      width="size-3600"
+      height="size-3600"
+      items={list.items}
+      dragAndDropHooks={dragAndDropHooks}
+    >
+      {(item) => (
+        <Item textValue={item.name}>
+          {item.type === "folder" && <Folder />}
+          <Text>{item.name}</Text>
+        </Item>
+      )}
+    </ListView>
+  );
+}

examples/rsp-next-ts/next.config.js

@@ -13,6 +13,7 @@ const withTM = require("next-transpile-modules")([
   "@react-spectrum/datepicker",
   "@react-spectrum/dialog",
   "@react-spectrum/divider",
+  "@react-spectrum/dnd",
   "@react-spectrum/form",
   "@react-spectrum/icon",
   "@react-spectrum/illustratedmessage",

examples/rsp-next-ts/pages/index.tsx

@@ -79,6 +79,7 @@ import {
   ColorSlider,
   ColorWheel,
 } from "@react-spectrum/color";
+import ReorderableListView from "../components/ReorderableListView";
 
 export default function Home() {
   let [isDialogOpen, setIsDialogOpen] = useState(false);
@@ -134,6 +135,7 @@ export default function Home() {
               <Item>Adobe Illustrator</Item>
               <Item>Adobe Lightroom</Item>
             </ListView>
+            <ReorderableListView />
             <MenuTrigger>
               <ActionButton>Menu</ActionButton>
               <Menu onAction={(key) => alert(key)}>

examples/rsp-next-ts/tsconfig.json

@@ -13,7 +13,8 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
-    "incremental": true
+    "incremental": true,
+    "downlevelIteration": true
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules"]

packages/@react-aria/dnd/test/dnd.ssr.test.js

@@ -0,0 +1,27 @@
+/*
+ * 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 {testSSR} from '@react-spectrum/test-utils';
+
+describe('useDrag and useDrop SSR', function () {
+  it('should render without errors', async function () {
+    await testSSR(__filename, `
+      import {Draggable, Droppable} from './examples';
+      import React from 'react';
+
+      <>
+        <Draggable />
+        <Droppable />
+      </>
+    `);
+  });
+});