sanity-plugin-workflow 1.0.0-beta.8 → 1.0.0-beta.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanity-plugin-workflow",
-  "version": "1.0.0-beta.8",
+  "version": "1.0.0-beta.9",
   "description": "A demonstration of a custom content publishing workflow using Sanity.",
   "keywords": [
     "sanity",
@@ -85,8 +85,8 @@
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
     "rimraf": "^4.1.2",
-    "sanity": "^3.3.1",
-    "semantic-release": "^20.1.0",
+    "sanity": "^3.9.1",
+    "semantic-release": "^20.1.3",
     "typescript": "^5.0.0"
   },
   "peerDependencies": {

package/src/components/DocumentCard/index.tsx

@@ -141,10 +141,8 @@ export function DocumentCard(props: DocumentCardProps) {
               <Flex align="center" justify="space-between" gap={1}>
                 <Box flex={1}>
                   <Preview
-                    // Like as in desk lists, except it has an intermittent loading state
-                    // layout="default"
-                    // Like in the PTE, with no loading state
-                    layout="block"
+                    layout="default"
+                    skipVisibilityCheck
                     value={item}
                     schemaType={schema.get(item._type) as SchemaType}
                   />

package/src/components/DocumentList.tsx

@@ -1,6 +1,6 @@
-import {Draggable} from '@hello-pangea/dnd'
-import {useVirtualizer} from '@tanstack/react-virtual'
-import {useMemo, useRef} from 'react'
+import {Draggable, DraggableStyle} from '@hello-pangea/dnd'
+import {useVirtualizer, VirtualItem} from '@tanstack/react-virtual'
+import {CSSProperties, useMemo, useRef} from 'react'
 import {CurrentUser} from 'sanity'
 import {UserExtended} from 'sanity-plugin-utils'
 
@@ -25,6 +25,35 @@ type DocumentListProps = {
   userRoleCanDrop: boolean
 }
 
+function getStyle(
+  draggableStyle: DraggableStyle | undefined,
+  virtualItem: VirtualItem
+): CSSProperties {
+  // Default transform required by tanstack virtual for positioning
+  let transform = `translateY(${virtualItem.start}px)`
+
+  // If a card is being dragged over, this card needs to move up or down
+  if (draggableStyle && draggableStyle.transform) {
+    // So get the transform value from beautiful-dnd
+    const draggableTransformY = parseInt(
+      draggableStyle.transform.split(',')[1].split('px')[0],
+      10
+    )
+
+    // And apply it to the card
+    transform = `translateY(${virtualItem.start + draggableTransformY}px)`
+  }
+
+  return {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: `${virtualItem.size}px`,
+    transform,
+  }
+}
+
 export default function DocumentList(props: DocumentListProps) {
   const {
     data = [],
@@ -48,15 +77,18 @@ export default function DocumentList(props: DocumentListProps) {
 
   const parentRef = useRef(null)
 
-  const rowVirtualizer = useVirtualizer({
-    count: data.length,
+  const virtualizer = useVirtualizer({
+    count: dataFiltered.length,
     getScrollElement: () => parentRef.current,
     getItemKey: (index) => dataFiltered[index]?._metadata?.documentId ?? index,
-    estimateSize: () => 113,
-    overscan: 10,
+    estimateSize: () => 115,
+    overscan: 7,
+    measureElement: (element) => {
+      return element.getBoundingClientRect().height || 115
+    },
   })
 
-  if (!data.length) {
+  if (!data.length || !dataFiltered.length) {
     return null
   }
 
@@ -66,61 +98,72 @@ export default function DocumentList(props: DocumentListProps) {
       style={{
         height: `100%`,
         overflow: 'auto',
-        paddingTop: 1,
         // Smooths scrollbar behaviour
         overflowAnchor: 'none',
         scrollBehavior: 'auto',
+        paddingTop: 1,
       }}
     >
-      {rowVirtualizer.getVirtualItems().map((virtualItem) => {
-        const item = dataFiltered[virtualItem.index]
-
-        const {documentId, assignees} = item?._metadata ?? {}
+      <div
+        style={{
+          height: `${virtualizer.getTotalSize()}px`,
+          width: '100%',
+          position: 'relative',
+        }}
+      >
+        {virtualizer.getVirtualItems().map((virtualItem) => {
+          const item = dataFiltered[virtualItem.index]
 
-        if (!documentId) {
-          return null
-        }
+          const {documentId, assignees} = item?._metadata ?? {}
 
-        const isInvalid = invalidDocumentIds.includes(documentId)
-        const meInAssignees = user?.id ? assignees?.includes(user.id) : false
-        const isDragDisabled =
-          patchingIds.includes(documentId) ||
-          !userRoleCanDrop ||
-          isInvalid ||
-          !(state.requireAssignment
-            ? state.requireAssignment && meInAssignees
-            : true)
+          const isInvalid = invalidDocumentIds.includes(documentId)
+          const meInAssignees = user?.id ? assignees?.includes(user.id) : false
+          const isDragDisabled =
+            patchingIds.includes(documentId) ||
+            !userRoleCanDrop ||
+            isInvalid ||
+            !(state.requireAssignment
+              ? state.requireAssignment && meInAssignees
+              : true)
 
-        return (
-          <Draggable
-            // The metadata's documentId is always the published one to avoid rerendering
-            // key={documentId}
-            key={virtualItem.key}
-            draggableId={documentId}
-            index={virtualItem.index}
-            isDragDisabled={isDragDisabled}
-          >
-            {(draggableProvided, draggableSnapshot) => (
-              <div
-                ref={draggableProvided.innerRef}
-                {...draggableProvided.draggableProps}
-                {...draggableProvided.dragHandleProps}
-              >
-                <DocumentCard
-                  userRoleCanDrop={userRoleCanDrop}
-                  isDragDisabled={isDragDisabled}
-                  isPatching={patchingIds.includes(documentId)}
-                  isDragging={draggableSnapshot.isDragging}
-                  item={item}
-                  toggleInvalidDocumentId={toggleInvalidDocumentId}
-                  userList={userList}
-                  states={states}
-                />
-              </div>
-            )}
-          </Draggable>
-        )
-      })}
+          return (
+            <Draggable
+              key={virtualItem.key}
+              draggableId={documentId}
+              index={virtualItem.index}
+              isDragDisabled={isDragDisabled}
+            >
+              {(draggableProvided, draggableSnapshot) => (
+                <div
+                  ref={draggableProvided.innerRef}
+                  {...draggableProvided.draggableProps}
+                  {...draggableProvided.dragHandleProps}
+                  style={getStyle(
+                    draggableProvided.draggableProps.style,
+                    virtualItem
+                  )}
+                >
+                  <div
+                    ref={virtualizer.measureElement}
+                    data-index={virtualItem.index}
+                  >
+                    <DocumentCard
+                      userRoleCanDrop={userRoleCanDrop}
+                      isDragDisabled={isDragDisabled}
+                      isPatching={patchingIds.includes(documentId)}
+                      isDragging={draggableSnapshot.isDragging}
+                      item={item}
+                      toggleInvalidDocumentId={toggleInvalidDocumentId}
+                      userList={userList}
+                      states={states}
+                    />
+                  </div>
+                </div>
+              )}
+            </Draggable>
+          )
+        })}
+      </div>
     </div>
   )
 }

package/src/components/WorkflowTool.tsx

@@ -401,7 +401,6 @@ export default function WorkflowTool(props: WorkflowToolProps) {
                               : defaultCardTone
                           }
                           height="fill"
-                          paddingTop={1}
                         >
                           {loading ? (
                             <Flex padding={5} align="center" justify="center">