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

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/globalClientWorkaround.ts

@@ -0,0 +1,33 @@
+import {SanityClient} from '@sanity/client'
+import type {ConfigContext} from 'sanity'
+import {SchemaContext} from '../fields/orderRankField'
+
+type ClientSubscription = (client: SanityClient) => void
+type ClientKey = `${string}:${string}`
+const subscriptions: Record<ClientKey, ClientSubscription[]> = {}
+
+/**
+ * @internal
+ *
+ * v3 does not expose client in the schema API, which means no client for the initial value code.
+ * This is a workaround for that; we update the global client from a place we _do_ have access to the client,
+ * the use the global in schema-callbacks.
+ *
+ * Note: The code assumes sanityClientChanged is called AFTER all subscribeSanityClient calls are done.
+ */
+export function sanityClientChanged(context: ConfigContext) {
+  ;(subscriptions[clientKey(context)] ?? []).forEach((subscriber) => subscriber(context.client))
+}
+
+/**
+ * @internal
+ */
+export function subscribeSanityClient(context: SchemaContext, callback: ClientSubscription) {
+  const key = clientKey(context)
+  const existing = subscriptions[key] ?? []
+  subscriptions[key] = [...existing, callback]
+}
+
+function clientKey(context: SchemaContext): ClientKey {
+  return `${context.projectId}:${context.dataset}`
+}

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

@@ -1,26 +1,42 @@
-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'
+import {sanityClientChanged} from './globalClientWorkaround'
 
-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, client} = context
+  // workaround so schemas can get access to client in callbacks
+  sanityClientChanged(context)
 
   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 +49,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.ts

@@ -0,0 +1,45 @@
+import {ConfigContext} from 'sanity'
+import type {SanityClient} from '@sanity/client'
+import {ORDER_FIELD_NAME} from '../helpers/constants'
+import initialRank from '../helpers/initialRank'
+import {subscribeSanityClient} from '../desk-structure/globalClientWorkaround'
+
+export type SchemaContext = Omit<ConfigContext, 'schema' | 'currentUser' | 'client'>
+
+export interface RankFieldConfig {
+  type: string
+  context: SchemaContext
+}
+
+export const orderRankField = (config: RankFieldConfig) => {
+  if (!config?.type || !config.context) {
+    throw new Error(
+      `
+      type and context must be provided. context is available when configuring schema.
+      Example: orderRankField({type: 'category', context})
+      `
+    )
+  }
+
+  const {type} = config
+
+  let client: SanityClient | undefined
+  subscribeSanityClient(config.context, (updatedClient) => {
+    client = updatedClient
+  })
+  return {
+    title: 'Order Rank',
+    readOnly: true,
+    hidden: true,
+    ...config,
+    name: ORDER_FIELD_NAME,
+    type: 'string',
+    initialValue: async () => {
+      const lastDocOrderRank = await client?.fetch(
+        `*[_type == $type]|order(@[$order] desc)[0][$order]`,
+        {type, order: ORDER_FIELD_NAME}
+      )
+      return initialRank(lastDocOrderRank)
+    },
+  }
+}

package/src/helpers/client.ts

@@ -0,0 +1,13 @@
+import {useClient} from 'sanity'
+import {useMemo} from 'react'
+
+export function useSanityClient() {
+  const baseClient = useClient()
+  return useMemo(
+    () =>
+      baseClient.withConfig({
+        apiVersion: '2021-09-01',
+      }),
+    [baseClient]
+  )
+}

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
 }