@sanity/orderable-document-list 1.0.4 → 1.1.0

package/src/DocumentListWrapper.tsx

@@ -1,19 +1,21 @@
-import React, {useEffect, useMemo} from 'react'
+import {useEffect, useMemo} from 'react'
 import {useToast} from '@sanity/ui'
 
 import {useSchema} from 'sanity'
-import type {ToastParams} from '@sanity/ui'
+import {Box, type ToastParams} from '@sanity/ui'
+import {Feedback} from 'sanity-plugin-utils'
 import DocumentListQuery from './DocumentListQuery'
 import {OrderableContext} from './OrderableContext'
 
 import {ORDER_FIELD_NAME} from './helpers/constants'
-import Feedback from './Feedback'
 
 export interface DocumentListWrapperProps {
   showIncrements: boolean
   type: string
   resetOrderTransaction: ToastParams
+  // eslint-disable-next-line react/require-default-props
   filter?: string
+  // eslint-disable-next-line react/require-default-props
   params?: Record<string, unknown>
 }
 
@@ -88,7 +90,11 @@ export default function DocumentListWrapper({
   }, [type, schema])
 
   if (schemaIsInvalid) {
-    return <Feedback>{schemaIsInvalid}</Feedback>
+    return (
+      <Box padding={2}>
+        <Feedback description={schemaIsInvalid} tone="caution" />
+      </Box>
+    )
   }
 
   return (

package/src/DraggableList.tsx

@@ -1,14 +1,27 @@
-import React, {useEffect, useState, useMemo, useCallback, CSSProperties} from 'react'
+import {useEffect, useState, useMemo, useCallback, CSSProperties} from 'react'
 import {DragDropContext, Draggable, Droppable, type DropResult} from '@hello-pangea/dnd'
 import {Box, Card, useToast} from '@sanity/ui'
-import {usePaneRouter} from 'sanity/desk'
 import type {PatchOperations} from 'sanity'
+import {usePaneRouter} from 'sanity/desk'
 
 import Document from './Document'
 import {reorderDocuments} from './helpers/reorderDocuments'
 import {ORDER_FIELD_NAME} from './helpers/constants'
 import {useSanityClient} from './helpers/client'
-import { SanityDocumentWithOrder } from './types'
+import {SanityDocumentWithOrder} from './types'
+
+interface ListSetting {
+  isDuplicate: boolean
+  isGhosting: boolean
+  isDragging: boolean
+  isSelected: boolean
+}
+
+export interface DraggableListProps {
+  data: SanityDocumentWithOrder[]
+  listIsUpdating: boolean
+  setListIsUpdating: (val: boolean) => void
+}
 
 const getItemStyle = (
   draggableStyle: CSSProperties | undefined,
@@ -31,29 +44,16 @@ const cardTone = (settings: ListSetting) => {
   return undefined
 }
 
-interface ListSetting {
-  isDuplicate: boolean
-  isGhosting: boolean
-  isDragging: boolean
-  isSelected: boolean
-}
-
-export interface DraggableListProps {
-  data: SanityDocumentWithOrder[]
-  type: string
-  listIsUpdating: boolean
-  setListIsUpdating: (val: boolean) => void
-}
-
 export default function DraggableList({
   data,
-  type,
   listIsUpdating,
   setListIsUpdating,
 }: DraggableListProps) {
   const toast = useToast()
   const router = usePaneRouter()
-  const {navigateIntent} = router
+  const {groupIndex, routerPanesState} = router
+
+  const currentDoc = routerPanesState[groupIndex + 1]?.[0]?.id || false
 
   // Maintains local state order before transaction completes
   const [orderedData, setOrderedData] = useState<SanityDocumentWithOrder[]>(data)
@@ -65,7 +65,7 @@ export default function DraggableList({
   }, [data])
 
   const [draggingId, setDraggingId] = useState(``)
-  const [selectedIds, setSelectedIds] = useState<string[]>([])
+  const [selectedIds, setSelectedIds] = useState<string[]>(currentDoc ? [currentDoc] : [])
 
   const clearSelected = useCallback(() => setSelectedIds([]), [setSelectedIds])
 
@@ -82,10 +82,14 @@ export default function DraggableList({
       // - update selected to just this one
       // - open document
       if (!selectMultiple && !selectAdditional) {
-        navigateIntent('edit', {id: clickedId, type})
         return setSelectedIds([clickedId])
       }
 
+      // If shift key was held, prevent default to avoid new window opening
+      if (selectMultiple) {
+        nativeEvent.preventDefault()
+      }
+
       // Shift key was held, add id's between last selected and this one
       // ...before adding this one
       if (selectMultiple && !isSelected) {
@@ -110,7 +114,7 @@ export default function DraggableList({
 
       return setSelectedIds(updatedIds)
     },
-    [setSelectedIds, navigateIntent, orderedData, selectedIds, type]
+    [setSelectedIds, orderedData, selectedIds]
   )
 
   const client = useSanityClient()
@@ -267,6 +271,9 @@ export default function DraggableList({
                   const isDisabled = Boolean(!item[ORDER_FIELD_NAME])
                   const isDuplicate = duplicateOrders.includes(item[ORDER_FIELD_NAME])
                   const tone = cardTone({isDuplicate, isGhosting, isDragging, isSelected})
+                  const selectedCount = selectedIds.length
+
+                  const dragBadge = isDragging && selectedCount > 1 ? selectedCount : false
 
                   return (
                     <div
@@ -280,15 +287,21 @@ export default function DraggableList({
                       }
                     >
                       <Box paddingBottom={1}>
-                        <Card tone={tone} shadow={isDragging ? 2 : undefined} radius={2}>
+                        <Card
+                          tone={tone}
+                          shadow={isDragging ? 2 : undefined}
+                          radius={2}
+                          // eslint-disable-next-line react/jsx-no-bind
+                          onClick={(e) => handleSelect(item._id, index, e.nativeEvent)}
+                        >
                           <Document
                             doc={item}
                             entities={orderedData}
-                            handleSelect={handleSelect}
                             increment={incrementIndex}
                             index={index}
                             isFirst={index === 0}
                             isLast={index === orderedData.length - 1}
+                            dragBadge={dragBadge}
                           />
                         </Card>
                       </Box>

package/src/OrderableDocumentList.tsx

@@ -1,4 +1,4 @@
-import React, {Component} from 'react'
+import {Component} from 'react'
 
 import {SanityClient} from '@sanity/client'
 import type {ToastParams} from '@sanity/ui'
@@ -8,8 +8,8 @@ import {resetOrder} from './helpers/resetOrder'
 export interface OrderableDocumentListProps {
   options: {
     type: string
-    client: SanityClient,
-    filter?: string,
+    client: SanityClient
+    filter?: string
     params?: Record<string, unknown>
   }
 }

package/src/desk-structure/orderableDocumentListDeskItem.ts

@@ -2,7 +2,7 @@ import {GenerateIcon, SortIcon} from '@sanity/icons'
 import type {ConfigContext} from 'sanity'
 
 import {ComponentType} from 'react'
-import {StructureBuilder} from 'sanity/desk'
+import {StructureBuilder, type ListItem} from 'sanity/desk'
 import OrderableDocumentList from '../OrderableDocumentList'
 
 export interface OrderableListConfig {
@@ -16,7 +16,7 @@ export interface OrderableListConfig {
   S: StructureBuilder
 }
 
-export function orderableDocumentListDeskItem(config: OrderableListConfig) {
+export function orderableDocumentListDeskItem(config: OrderableListConfig): ListItem {
   if (!config?.type || !config.context || !config.S) {
     throw new Error(`
     type, context and S (StructureBuilder) must be provided.
@@ -54,7 +54,11 @@ export function orderableDocumentListDeskItem(config: OrderableListConfig) {
             .intent({type: 'create', params: {type}})
             .serialize(),
           S.menuItem().title(`Reset Order`).icon(GenerateIcon).action(`resetOrder`).serialize(),
-          S.menuItem().title(`Toggle Increments`).icon(SortIcon).action(`showIncrements`).serialize(),
+          S.menuItem()
+            .title(`Toggle Increments`)
+            .icon(SortIcon)
+            .action(`showIncrements`)
+            .serialize(),
         ],
       })
     )

package/src/fields/orderRankOrdering.ts

@@ -1,4 +1,4 @@
-import { SortOrdering } from 'sanity'
+import {SortOrdering} from 'sanity'
 import {ORDER_FIELD_NAME} from '../helpers/constants'
 
 export const orderRankOrdering: SortOrdering = {

package/src/helpers/reorderDocuments.ts

@@ -1,7 +1,7 @@
 import {LexoRank} from 'lexorank'
 import type {PatchOperations} from 'sanity'
 
-import { SanityDocumentWithOrder } from '../types'
+import {SanityDocumentWithOrder} from '../types'
 import {ORDER_FIELD_NAME} from './constants'
 
 export interface MaifestArgs {
@@ -20,6 +20,12 @@ export interface ReorderArgs {
   destination: any
 }
 
+export interface ReorderReturn {
+  newOrder: SanityDocumentWithOrder[]
+  patches: [string, PatchOperations][]
+  message: any
+}
+
 function lexicographicalSort(a: SanityDocumentWithOrder, b: SanityDocumentWithOrder) {
   if (!a[ORDER_FIELD_NAME] || !b[ORDER_FIELD_NAME]) {
     return 0
@@ -36,14 +42,14 @@ export const reorderDocuments = ({
   selectedIds,
   source,
   destination,
-}: ReorderArgs) => {
+}: ReorderArgs): ReorderReturn => {
   const startIndex = source.index
   const endIndex = destination.index
   const isMovingUp = startIndex > endIndex
   const selectedItems = entities.filter((item) => selectedIds.includes(item._id))
   const message = [
     `Moved`,
-    selectedItems.length === 1 ? `1 Document` : `${selectedItems.length} Documents`,
+    selectedItems.length === 1 ? `1 document` : `${selectedItems.length} documents`,
     isMovingUp ? `up` : `down`,
     `from position`,
     `${startIndex + 1} to ${endIndex + 1}`,
@@ -96,15 +102,31 @@ export const reorderDocuments = ({
     {all: [], selected: []}
   )
 
-  const patches: [string, PatchOperations][] = selected.map((doc) => {
-    return [
-      doc._id,
-      {
-        set: {
-          [ORDER_FIELD_NAME]: doc[ORDER_FIELD_NAME],
+  const patches = selected.flatMap((doc) => {
+    const docPatches: [string, PatchOperations][] = [
+      [
+        doc._id,
+        {
+          set: {
+            [ORDER_FIELD_NAME]: doc[ORDER_FIELD_NAME],
+          },
         },
-      },
+      ],
     ]
+
+    // If it's a draft, we need to patch the published document as well
+    if (doc._id.startsWith(`drafts.`) && doc.hasPublished) {
+      docPatches.push([
+        doc._id.replace(`drafts.`, ``),
+        {
+          set: {
+            [ORDER_FIELD_NAME]: doc[ORDER_FIELD_NAME],
+          },
+        },
+      ])
+    }
+
+    return docPatches
   })
 
   // Safety-check to make sure everything is in order

package/src/types.ts

@@ -1,8 +1,8 @@
 import type {SanityDocument} from 'sanity'
 
-import { ORDER_FIELD_NAME } from './helpers/constants'
+import {ORDER_FIELD_NAME} from './helpers/constants'
 
 export interface SanityDocumentWithOrder extends SanityDocument {
-    [ORDER_FIELD_NAME]?: string
+  [ORDER_FIELD_NAME]?: string
+  hasPublished?: boolean
 }
-  

package/v2-incompatible.js

@@ -5,7 +5,7 @@ export default showIncompatiblePluginDialog({
   name: name,
   versions: {
     v3: version,
-    v2: '^0.0.10',
+    v2: undefined,
   },
-  sanityExchangeUrl
+  sanityExchangeUrl,
 })

package/src/Feedback.tsx

@@ -1,12 +0,0 @@
-import React, {PropsWithChildren} from 'react'
-import {Box, Card, Text} from '@sanity/ui'
-
-export default function Feedback({children}: PropsWithChildren<{}>) {
-  return (
-    <Box padding={3}>
-      <Card padding={4} radius={2} shadow={1} tone="caution">
-        <Text>{children}</Text>
-      </Card>
-    </Box>
-  )
-}