@sanity/orderable-document-list 0.0.10 → 1.0.0-v3-studio.2

package/src/DraggableList.tsx

@@ -0,0 +1,304 @@
+import React, {useEffect, useState, useMemo, useCallback, CSSProperties} from 'react'
+import {DragDropContext, Draggable, Droppable, type DropResult} from 'react-beautiful-dnd'
+import {Box, Card, useToast} from '@sanity/ui'
+import {usePaneRouter} from 'sanity/desk'
+import type {SanityDocument, PatchOperations} from 'sanity'
+import Document from './Document'
+import {reorderDocuments} from './helpers/reorderDocuments'
+import {ORDER_FIELD_NAME} from './helpers/constants'
+import {useSanityClient} from './helpers/client'
+
+const getItemStyle = (
+  draggableStyle: CSSProperties | undefined,
+  itemIsUpdating: boolean
+): CSSProperties => ({
+  userSelect: 'none',
+  transition: `opacity 500ms ease-in-out`,
+  opacity: itemIsUpdating ? 0.2 : 1,
+  pointerEvents: itemIsUpdating ? `none` : undefined,
+  ...draggableStyle,
+})
+
+const cardTone = (settings: ListSetting) => {
+  const {isDuplicate, isGhosting, isDragging, isSelected} = settings
+
+  if (isGhosting) return `transparent`
+  if (isDragging || isSelected) return `primary`
+  if (isDuplicate) return `caution`
+
+  return undefined
+}
+
+interface ListSetting {
+  isDuplicate: boolean
+  isGhosting: boolean
+  isDragging: boolean
+  isSelected: boolean
+}
+
+export interface DraggableListProps {
+  data: SanityDocument[]
+  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
+
+  // Maintains local state order before transaction completes
+  const [orderedData, setOrderedData] = useState<SanityDocument[]>(data)
+
+  // Update local state when documents change from an outside source
+  useEffect(() => {
+    if (!listIsUpdating) setOrderedData(data)
+    /* eslint-disable-next-line react-hooks/exhaustive-deps */
+  }, [data])
+
+  const [draggingId, setDraggingId] = useState(``)
+  const [selectedIds, setSelectedIds] = useState<string[]>([])
+
+  const clearSelected = useCallback(() => setSelectedIds([]), [setSelectedIds])
+
+  const handleSelect = useCallback(
+    (clickedId: string, index: number, nativeEvent: MouseEvent) => {
+      const isSelected = selectedIds.includes(clickedId)
+      const selectMultiple = nativeEvent.shiftKey
+      const isUsingWindows = navigator.appVersion.indexOf('Win') !== -1
+      const selectAdditional = isUsingWindows ? nativeEvent.ctrlKey : nativeEvent.metaKey
+
+      let updatedIds = []
+
+      // No modifier keys pressed during click:
+      // - update selected to just this one
+      // - open document
+      if (!selectMultiple && !selectAdditional) {
+        navigateIntent('edit', {id: clickedId, type})
+        return setSelectedIds([clickedId])
+      }
+
+      // Shift key was held, add id's between last selected and this one
+      // ...before adding this one
+      if (selectMultiple && !isSelected) {
+        const lastSelectedId = selectedIds[selectedIds.length - 1]
+        const lastSelectedIndex = orderedData.findIndex((item) => item._id === lastSelectedId)
+
+        const firstSelected = index < lastSelectedIndex ? index : lastSelectedIndex
+        const lastSelected = index > lastSelectedIndex ? index : lastSelectedIndex
+
+        const betweenIds = orderedData
+          .filter((item, itemIndex) => itemIndex > firstSelected && itemIndex < lastSelected)
+          .map((item) => item._id)
+
+        updatedIds = [...selectedIds, ...betweenIds, clickedId]
+      } else if (isSelected) {
+        // Toggle off a single id
+        updatedIds = selectedIds.filter((id) => id !== clickedId)
+      } else {
+        // Toggle on a single id
+        updatedIds = [...selectedIds, clickedId]
+      }
+
+      return setSelectedIds(updatedIds)
+    },
+    [setSelectedIds, navigateIntent, orderedData, selectedIds, type]
+  )
+
+  const client = useSanityClient()
+
+  const transactPatches = useCallback(
+    async (patches: [string, PatchOperations][], message: string) => {
+      const transaction = client.transaction()
+
+      patches.forEach(([docId, ops]) => transaction.patch(docId, ops))
+
+      await transaction
+        .commit()
+        .then((updated) => {
+          clearSelected()
+          setDraggingId(``)
+          setListIsUpdating(false)
+          toast.push({
+            title: `${
+              updated.results.length === 1 ? `1 Document` : `${updated.results.length} Documents`
+            } Reordered`,
+            status: `success`,
+            description: message,
+          })
+        })
+        .catch(() => {
+          setDraggingId(``)
+          setListIsUpdating(false)
+          toast.push({
+            title: `Reordering failed`,
+            status: `error`,
+          })
+        })
+    },
+    [client, setDraggingId, clearSelected, setListIsUpdating, toast]
+  )
+
+  const handleDragEnd = useCallback(
+    (result: DropResult | undefined, entities: SanityDocument[]) => {
+      setDraggingId(``)
+
+      const {source, destination, draggableId} = result ?? {}
+
+      // Don't do anything if nothing changed
+      if (source?.index === destination?.index) return
+
+      // Don't do anything if we don't have the entitites
+      if (!entities?.length || !draggableId) return
+
+      // A document can be dragged without being one-of-many-selected
+      const effectedIds = selectedIds?.length ? selectedIds : [draggableId]
+
+      // Don't do anything if we don't have ids to effect
+      if (!effectedIds?.length) return
+
+      // Update state to update styles + prevent data refetching
+      setListIsUpdating(true)
+      setSelectedIds(effectedIds)
+
+      const {newOrder, patches, message} = reorderDocuments({
+        entities,
+        selectedIds: effectedIds,
+        source,
+        destination,
+      })
+
+      // Update local state
+      if (newOrder?.length) {
+        setOrderedData(newOrder as any)
+      }
+
+      // Transact new order patches
+      if (patches?.length) {
+        transactPatches(patches, message)
+      }
+    },
+    [selectedIds, setDraggingId, setSelectedIds, transactPatches, setListIsUpdating]
+  )
+
+  const handleDragStart = useCallback(
+    (start: {draggableId: string}) => {
+      const id = start.draggableId
+      const selected = selectedIds.includes(id)
+
+      // if dragging an item that is not selected - unselect all items
+      if (!selected) clearSelected()
+
+      setDraggingId(id)
+    },
+    [selectedIds, clearSelected, setDraggingId]
+  )
+
+  // Move one document up or down one place, by fake invoking the drag function
+  const incrementIndex = useCallback(
+    (shiftFrom: number, shiftTo: number, id: string, entities: SanityDocument[]) => {
+      const result = {
+        draggableId: id,
+        source: {index: shiftFrom},
+        destination: {index: shiftTo},
+      }
+
+      return handleDragEnd(result as DropResult, entities)
+    },
+    [handleDragEnd]
+  )
+
+  const onWindowKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        clearSelected()
+      }
+    },
+    [clearSelected]
+  )
+
+  useEffect(() => {
+    window.addEventListener('keydown', onWindowKeyDown)
+
+    return () => {
+      window.removeEventListener('keydown', onWindowKeyDown)
+    }
+  }, [onWindowKeyDown])
+
+  // Find all items with duplicate order field
+  const duplicateOrders = useMemo(() => {
+    if (!orderedData.length) return []
+
+    const orderField = orderedData.map((item) => item[ORDER_FIELD_NAME])
+
+    return orderField.filter((item, index) => orderField.indexOf(item) !== index)
+  }, [orderedData])
+
+  const onDragEnd = useCallback(
+    (result: DropResult) => handleDragEnd(result, orderedData),
+    [orderedData, handleDragEnd]
+  )
+
+  return (
+    <DragDropContext onDragStart={handleDragStart} onDragEnd={onDragEnd}>
+      <Droppable droppableId="documentSortZone">
+        {(provided) => (
+          <div {...provided.droppableProps} ref={provided.innerRef}>
+            {orderedData.map((item, index) => (
+              <Draggable
+                key={`${item._id}-${item[ORDER_FIELD_NAME]}`}
+                draggableId={item._id}
+                index={index}
+                // onClick={(event) => handleDraggableClick(event, provided, snapshot)}
+              >
+                {(innerProvided, innerSnapshot) => {
+                  const isSelected = selectedIds.includes(item._id)
+                  const isDragging = innerSnapshot.isDragging
+                  const isGhosting = Boolean(!isDragging && draggingId && isSelected)
+                  const isUpdating = listIsUpdating && isSelected
+                  const isDisabled = Boolean(!item[ORDER_FIELD_NAME])
+                  const isDuplicate = duplicateOrders.includes(item[ORDER_FIELD_NAME])
+                  const tone = cardTone({isDuplicate, isGhosting, isDragging, isSelected})
+
+                  return (
+                    <div
+                      ref={innerProvided.innerRef}
+                      {...innerProvided.draggableProps}
+                      {...innerProvided.dragHandleProps}
+                      style={
+                        isDisabled
+                          ? {opacity: 0.2, pointerEvents: `none`}
+                          : getItemStyle(innerProvided.draggableProps.style, isUpdating)
+                      }
+                    >
+                      <Box paddingBottom={1}>
+                        <Card tone={tone} shadow={isDragging ? 2 : undefined} radius={2}>
+                          <Document
+                            doc={item}
+                            entities={orderedData}
+                            handleSelect={handleSelect}
+                            increment={incrementIndex}
+                            index={index}
+                            isFirst={index === 0}
+                            isLast={index === orderedData.length - 1}
+                          />
+                        </Card>
+                      </Box>
+                    </div>
+                  )
+                }}
+              </Draggable>
+            ))}
+            {provided.placeholder}
+          </div>
+        )}
+      </Droppable>
+    </DragDropContext>
+  )
+}

package/src/{Feedback.js → Feedback.tsx}

@@ -1,8 +1,7 @@
-import PropTypes from 'prop-types'
-import React from 'react'
+import React, {PropsWithChildren} from 'react'
 import {Box, Card, Text} from '@sanity/ui'
 
-export default function Feedback({children}) {
+export default function Feedback({children}: PropsWithChildren<{}>) {
   return (
     <Box padding={3}>
       <Card padding={4} radius={2} shadow={1} tone="caution">
@@ -11,7 +10,3 @@ export default function Feedback({children}) {
     </Box>
   )
 }
-
-Feedback.propTypes = {
-  children: PropTypes.node.isRequired,
-}

package/src/OrderableContext.ts

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export interface OrderableContextValue {
+  showIncrements?: boolean
+}
+
+export const OrderableContext = React.createContext<OrderableContextValue>({})

package/src/{OrderableDocumentList.js → OrderableDocumentList.tsx}

@@ -1,20 +1,27 @@
-import PropTypes from 'prop-types'
 import React, {Component} from 'react'
 
+import {SanityClient} from '@sanity/client'
+import type {ToastParams} from '@sanity/ui'
 import DocumentListWrapper from './DocumentListWrapper'
 import {resetOrder} from './helpers/resetOrder'
 
-// Must use a Class Component here so the actionHandlers can be called
-export default class OrderableDocumentList extends Component {
-  static propTypes = {
-    options: PropTypes.shape({
-      type: PropTypes.string,
-      filter: PropTypes.string,
-      params: PropTypes.object,
-    }).isRequired,
+export interface OrderableDocumentListProps {
+  options: {
+    type: string
+    client: SanityClient,
+    filter?: string,
+    params?: Record<string, unknown>
   }
+}
+
+interface State {
+  showIncrements: boolean
+  resetOrderTransaction: ToastParams
+}
 
-  constructor(props) {
+// Must use a Class Component here so the actionHandlers can be called
+export default class OrderableDocumentList extends Component<OrderableDocumentListProps, State> {
+  constructor(props: OrderableDocumentListProps) {
     super(props)
     this.state = {
       showIncrements: false,
@@ -38,7 +45,7 @@ export default class OrderableDocumentList extends Component {
         },
       }))
 
-      const update = await resetOrder(this.props.options.type)
+      const update = await resetOrder(this.props.options.type, this.props.options.client)
 
       const reorderWasSuccessful = update?.results?.length
 
@@ -55,11 +62,15 @@ export default class OrderableDocumentList extends Component {
   }
 
   render() {
+    const type = this?.props?.options?.type
+    if (!type) {
+      return null
+    }
     return (
       <DocumentListWrapper
-        type={this?.props?.options?.type}
         filter={this?.props?.options?.filter}
         params={this?.props?.options?.params}
+        type={type}
         showIncrements={this.state.showIncrements}
         resetOrderTransaction={this.state.resetOrderTransaction}
       />

package/src/desk-structure/{orderableDocumentListDeskItem.js → orderableDocumentListDeskItem.ts}

@@ -1,26 +1,40 @@
-import S from '@sanity/desk-tool/structure-builder'
-import {SortIcon, GenerateIcon} from '@sanity/icons'
-import schema from 'part:@sanity/base/schema'
+import {GenerateIcon, SortIcon} from '@sanity/icons'
+import type {ConfigContext} from 'sanity'
 
+import {ComponentType} from 'react'
+import {StructureBuilder} from 'sanity/desk'
 import OrderableDocumentList from '../OrderableDocumentList'
 
-export function orderableDocumentListDeskItem(config = {}) {
-  if (!config?.type) {
+export interface OrderableListConfig {
+  type: string
+  id?: string
+  title?: string
+  icon?: ComponentType
+  params?: Record<string, unknown>
+  filter?: string
+  context: ConfigContext
+  S: StructureBuilder
+}
+
+export function orderableDocumentListDeskItem(config: OrderableListConfig) {
+  if (!config?.type || !config.context || !config.S) {
     throw new Error(`
-    "type" not defined in orderableDocumentListDeskItem parameters.
-    \n\n
+    type, context and S (StructureBuilder) must be provided.
+    context and S are available when configuring structure.
     Example: orderableDocumentListDeskItem({type: 'category'})
     `)
   }
 
-  const {type, filter, params, title, icon, id} = config
+  const {type, filter, params, title, icon, id, context, S} = config
+  const {schema, getClient} = context
+  const client = getClient({apiVersion: '2021-09-01'})
 
   const listTitle = title ?? `Orderable ${type}`
   const listId = id ?? `orderable-${type}`
   const listIcon = icon ?? SortIcon
   const typeTitle = schema.get(type)?.title ?? type
 
-  return S.listItem(type)
+  return S.listItem()
     .title(listTitle)
     .id(listId)
     .icon(listIcon)
@@ -33,7 +47,7 @@ export function orderableDocumentListDeskItem(config = {}) {
 
         type: 'component',
         component: OrderableDocumentList,
-        options: {type, filter, params},
+        options: {type, filter, params, client},
         menuItems: [
           S.menuItem()
             .title(`Create new ${typeTitle}`)

package/src/fields/{orderRankField.js → orderRankField.ts}

@@ -1,35 +1,37 @@
-import sanityClient from 'part:@sanity/base/client'
+import {type ConfigContext, defineField} from 'sanity'
 import {ORDER_FIELD_NAME} from '../helpers/constants'
 import initialRank from '../helpers/initialRank'
 
-const client = sanityClient.withConfig({apiVersion: `2021-05-19`})
+export type SchemaContext = Omit<ConfigContext, 'schema' | 'currentUser' | 'client'>
 
-export const orderRankField = (config = {}) => {
+export interface RankFieldConfig {
+  type: string
+}
+
+export const orderRankField = (config: RankFieldConfig) => {
   if (!config?.type) {
     throw new Error(
       `
-      "type" not defined in orderRankField parameter object. 
+      type must be provided.
       Example: orderRankField({type: 'category'})
       `
     )
   }
 
   const {type} = config
-
-  return {
+  return defineField({
     title: 'Order Rank',
     readOnly: true,
     hidden: true,
     ...config,
     name: ORDER_FIELD_NAME,
     type: 'string',
-    initialValue: async () => {
-      const lastDocOrderRank = await client.fetch(
+    initialValue: async ({getClient}) => {
+      const lastDocOrderRank = await getClient({apiVersion: '2021-09-01'}).fetch(
         `*[_type == $type]|order(@[$order] desc)[0][$order]`,
         {type, order: ORDER_FIELD_NAME}
       )
-
       return initialRank(lastDocOrderRank)
     },
-  }
+  })
 }

package/src/helpers/client.ts

@@ -0,0 +1,5 @@
+import {useClient} from 'sanity'
+
+export function useSanityClient() {
+  return useClient({apiVersion: '2021-09-01'})
+}

package/src/helpers/constants.ts

@@ -0,0 +1 @@
+export const ORDER_FIELD_NAME = `orderRank` as const

package/src/helpers/{initialRank.js → initialRank.ts}

@@ -2,9 +2,9 @@ import {LexoRank} from 'lexorank'
 
 // Use in initial value field by passing in the rank value of the last document
 // If not value passed, generate a sensibly low rank
-export default function initialRank(lastRankValue = ``) {
+export default function initialRank(lastRankValue = ``): string {
   const lastRank = lastRankValue ? LexoRank.parse(lastRankValue) : LexoRank.min()
   const nextRank = lastRank.genNext().genNext()
 
-  return nextRank.value
+  return (nextRank as any).value
 }

package/src/helpers/{reorderDocuments.js → reorderDocuments.ts}

@@ -1,7 +1,25 @@
 import {LexoRank} from 'lexorank'
+import type {PatchOperations, SanityDocument} from 'sanity'
 import {ORDER_FIELD_NAME} from './constants'
 
-function lexicographicalSort(a, b) {
+export interface MaifestArgs {
+  entities: SanityDocument[]
+  selectedItems: SanityDocument[]
+  isMovingUp: boolean
+  curIndex: number
+  nextIndex: number
+  prevIndex: number
+}
+
+export interface ReorderArgs {
+  entities: SanityDocument[]
+  selectedIds: string[]
+  source: any
+  destination: any
+  debug?: boolean
+}
+
+function lexicographicalSort(a: {[ORDER_FIELD_NAME]: string}, b: {[ORDER_FIELD_NAME]: string}) {
   if (a[ORDER_FIELD_NAME] < b[ORDER_FIELD_NAME]) {
     return -1
   }
@@ -11,42 +29,13 @@ function lexicographicalSort(a, b) {
   return 0
 }
 
-// In lieu of actual *tests*, this is a table
-// to visualise the new order which if correct, shows:
-// 1. The `before` field (or start of the list)
-// 2. The inserted fields, in order
-// 3. The `after` document (or end of the list)
-// eslint-disable-next-line no-unused-vars
-function createManifest({entities, selectedItems, isMovingUp, curIndex, nextIndex, prevIndex}) {
-  const table = [
-    {
-      name: `Before`,
-      title:
-        curIndex === 0 ? `<<Start of List>>` : entities[isMovingUp ? prevIndex : curIndex]?.title,
-      order: curIndex === 0 ? `000` : entities[isMovingUp ? prevIndex : curIndex][ORDER_FIELD_NAME],
-    },
-    ...selectedItems.map((item, itemIndex) => ({
-      name: itemIndex,
-      title: item?.title,
-      order: item[ORDER_FIELD_NAME],
-    })),
-    {
-      name: `After`,
-      title:
-        curIndex === entities.length - 1
-          ? `<<End of List>>`
-          : entities[isMovingUp ? curIndex : nextIndex]?.title,
-      order:
-        curIndex === entities.length - 1
-          ? `zzz`
-          : entities[isMovingUp ? curIndex : nextIndex][ORDER_FIELD_NAME],
-    },
-  ]
-
-  return table.sort(lexicographicalSort)
-}
-
-export const reorderDocuments = ({entities, selectedIds, source, destination, debug = false}) => {
+export const reorderDocuments = ({
+  entities,
+  selectedIds,
+  source,
+  destination,
+  debug = false,
+}: ReorderArgs) => {
   const startIndex = source.index
   const endIndex = destination.index
   const isMovingUp = startIndex > endIndex
@@ -70,21 +59,21 @@ export const reorderDocuments = ({entities, selectedIds, source, destination, de
       if (curIndex === endIndex) {
         const prevIndex = curIndex - 1
         const prevRank = entities[prevIndex]?.[ORDER_FIELD_NAME]
-          ? LexoRank.parse(entities[prevIndex]?.[ORDER_FIELD_NAME])
+          ? LexoRank.parse(entities[prevIndex]?.[ORDER_FIELD_NAME] as string)
           : LexoRank.min()
 
-        const curRank = LexoRank.parse(entities[curIndex][ORDER_FIELD_NAME])
+        const curRank = LexoRank.parse(entities[curIndex][ORDER_FIELD_NAME] as string)
 
         const nextIndex = curIndex + 1
         const nextRank = entities[nextIndex]?.[ORDER_FIELD_NAME]
-          ? LexoRank.parse(entities[nextIndex]?.[ORDER_FIELD_NAME])
+          ? LexoRank.parse(entities[nextIndex]?.[ORDER_FIELD_NAME] as string)
           : LexoRank.max()
 
         let betweenRank = isMovingUp ? prevRank.between(curRank) : curRank.between(nextRank)
 
         // For each selected item, assign a new orderRank between now and next
         for (let selectedIndex = 0; selectedIndex < selectedItems.length; selectedIndex += 1) {
-          selectedItems[selectedIndex][ORDER_FIELD_NAME] = betweenRank.value
+          selectedItems[selectedIndex][ORDER_FIELD_NAME] = (betweenRank as any).value as string
           betweenRank = isMovingUp ? betweenRank.between(curRank) : betweenRank.between(nextRank)
         }
 
@@ -100,10 +89,10 @@ export const reorderDocuments = ({entities, selectedIds, source, destination, de
 
       return {all: [...acc.all, cur], selected: acc.selected}
     },
-    {all: [], selected: []}
+    {all: [] as SanityDocument[], selected: [] as SanityDocument[]}
   )
 
-  const patches = selected.map((doc) => {
+  const patches: [string, PatchOperations][] = selected.map((doc) => {
     return [
       doc._id,
       {
@@ -115,7 +104,7 @@ export const reorderDocuments = ({entities, selectedIds, source, destination, de
   })
 
   // Safety-check to make sure everything is in order
-  const allSorted = all.sort(lexicographicalSort)
+  const allSorted = (all as unknown as {[ORDER_FIELD_NAME]: string}[]).sort(lexicographicalSort)
 
   return {newOrder: allSorted, patches, message}
 }

package/src/helpers/{resetOrder.js → resetOrder.ts}

@@ -1,14 +1,9 @@
 import {LexoRank} from 'lexorank'
-import sanityClient from 'part:@sanity/base/client'
 import {ORDER_FIELD_NAME} from './constants'
-
-const client = sanityClient.withConfig({
-  apiVersion: '2021-09-01',
-})
-
+import {SanityClient} from '@sanity/client'
 // Function to wipe and re-do ordering with LexoRank
 // Will at least attempt to start with the current order
-export async function resetOrder(type = ``) {
+export async function resetOrder(type = ``, client: SanityClient) {
   const query = `*[_type == $type]|order(@[$order] asc)._id`
   const queryParams = {type, order: ORDER_FIELD_NAME}
   const documents = await client.fetch(query, queryParams)
@@ -25,7 +20,7 @@ export async function resetOrder(type = ``) {
     aLexoRank = aLexoRank.genNext().genNext()
 
     transaction.patch(documents[index], {
-      set: {[ORDER_FIELD_NAME]: aLexoRank.value},
+      set: {[ORDER_FIELD_NAME]: (aLexoRank as any).value as string},
     })
   }