@sanity/orderable-document-list 1.5.0 → 2.0.0

package/src/DraggableList.tsx

@@ -1,316 +0,0 @@
-import {useEffect, useState, useMemo, useCallback, type CSSProperties} from 'react'
-import {DragDropContext, Draggable, Droppable, type DropResult} from '@hello-pangea/dnd'
-import {Box, Card, useToast} from '@sanity/ui'
-import type {PatchOperations} from 'sanity'
-import {usePaneRouter} from 'sanity/structure'
-
-import {Document} from './Document'
-import {reorderDocuments} from './helpers/reorderDocuments'
-import {ORDER_FIELD_NAME} from './helpers/constants'
-import {useSanityClient} from './helpers/client'
-import type {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,
-  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
-}
-
-export function DraggableList({data, listIsUpdating, setListIsUpdating}: DraggableListProps) {
-  const toast = useToast()
-  const router = usePaneRouter()
-  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)
-
-  // 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[]>(currentDoc ? [currentDoc] : [])
-
-  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) {
-        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) {
-        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, orderedData, selectedIds],
-  )
-
-  const client = useSanityClient()
-
-  const transactPatches = useCallback(
-    async (patches: [string, PatchOperations][], message: string) => {
-      const transaction = client.transaction()
-
-      patches.forEach(([docId, ops]) => transaction.patch(docId, ops))
-
-      try {
-        const updated = await transaction.commit({
-          visibility: 'async',
-          tag: 'orderable-document-list.reorder',
-        })
-        clearSelected()
-        setDraggingId('')
-        setListIsUpdating(false)
-        toast.push({
-          title: `${
-            updated.results.length === 1 ? '1 document' : `${updated.results.length} documents`
-          } reordered`,
-          status: 'success',
-          description: message,
-        })
-      } catch (err) {
-        setDraggingId('')
-        setListIsUpdating(false)
-        toast.push({
-          title: 'Reordering failed',
-          status: 'error',
-        })
-      }
-    },
-    [client, setDraggingId, clearSelected, setListIsUpdating, toast],
-  )
-
-  const handleDragEnd = useCallback(
-    (result: DropResult | undefined, entities: SanityDocumentWithOrder[]) => {
-      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)
-      }
-
-      // 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: SanityDocumentWithOrder[]) => {
-      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})
-                  const selectedCount = selectedIds.length
-
-                  const dragBadge = isDragging && selectedCount > 1 ? selectedCount : false
-
-                  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}
-                          // eslint-disable-next-line react/jsx-no-bind
-                          onClick={(e) => handleSelect(item._id, index, e.nativeEvent)}
-                        >
-                          <Document
-                            doc={item}
-                            entities={orderedData}
-                            increment={incrementIndex}
-                            index={index}
-                            isFirst={index === 0}
-                            isLast={index === orderedData.length - 1}
-                            dragBadge={dragBadge}
-                          />
-                        </Card>
-                      </Box>
-                    </div>
-                  )
-                }}
-              </Draggable>
-            ))}
-            {provided.placeholder}
-          </div>
-        )}
-      </Droppable>
-    </DragDropContext>
-  )
-}

package/src/OrderableContext.ts

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

package/src/OrderableDocumentList.tsx

@@ -1,81 +0,0 @@
-import {Component} from 'react'
-
-import type {SanityClient} from '@sanity/client'
-import type {ToastParams} from '@sanity/ui'
-import {DocumentListWrapper} from './DocumentListWrapper'
-import {resetOrder} from './helpers/resetOrder'
-
-export interface OrderableDocumentListProps {
-  options: {
-    type: string
-    client: SanityClient
-    filter?: string
-    params?: Record<string, unknown>
-    currentVersion?: string
-  }
-}
-
-interface State {
-  showIncrements: boolean
-  resetOrderTransaction: ToastParams
-}
-
-// Must use a Class Component here so the actionHandlers can be called
-export class OrderableDocumentList extends Component<OrderableDocumentListProps, State> {
-  constructor(props: OrderableDocumentListProps) {
-    super(props)
-    this.state = {
-      showIncrements: false,
-      resetOrderTransaction: {},
-    }
-  }
-
-  actionHandlers = {
-    showIncrements: () => {
-      this.setState((state) => ({
-        showIncrements: !state.showIncrements,
-      }))
-    },
-
-    resetOrder: async () => {
-      this.setState(() => ({
-        resetOrderTransaction: {
-          status: `info`,
-          title: `Reordering started...`,
-          closable: true,
-        },
-      }))
-
-      const update = await resetOrder(this.props.options)
-
-      const reorderWasSuccessful = update?.results?.length
-
-      this.setState(() => ({
-        resetOrderTransaction: {
-          status: reorderWasSuccessful ? `success` : `info`,
-          title: reorderWasSuccessful
-            ? `Reordered ${update.results.length === 1 ? `Document` : `Documents`}`
-            : `Reordering failed`,
-          closable: true,
-        },
-      }))
-    },
-  }
-
-  render() {
-    const type = this?.props?.options?.type
-    if (!type) {
-      return null
-    }
-    return (
-      <DocumentListWrapper
-        filter={this?.props?.options?.filter}
-        params={this?.props?.options?.params}
-        type={type}
-        showIncrements={this.state.showIncrements}
-        resetOrderTransaction={this.state.resetOrderTransaction}
-        currentVersion={this?.props?.options?.currentVersion}
-      />
-    )
-  }
-}

package/src/desk-structure/orderableDocumentListDeskItem.ts

@@ -1,84 +0,0 @@
-import {GenerateIcon, SortIcon} from '@sanity/icons'
-import type {ConfigContext} from 'sanity'
-
-import type {ComponentType} from 'react'
-import {StructureBuilder, type ListItem, type MenuItem} from 'sanity/structure'
-import {OrderableDocumentList} from '../OrderableDocumentList'
-import {API_VERSION} from '../helpers/constants'
-
-export interface OrderableListConfig {
-  type: string
-  id?: string
-  title?: string
-  icon?: ComponentType
-  params?: Record<string, unknown>
-  filter?: string
-  menuItems?: MenuItem[]
-  createIntent?: boolean
-  context: ConfigContext
-  S: StructureBuilder
-}
-
-export function orderableDocumentListDeskItem(config: OrderableListConfig): ListItem {
-  if (!config?.type || !config.context || !config.S) {
-    throw new Error(`
-    type, context and S (StructureBuilder) must be provided.
-    context and S are available when configuring structure.
-    Example: orderableDocumentListDeskItem({type: 'category'})
-    `)
-  }
-
-  const {type, filter, menuItems = [], createIntent, params, title, icon, id, context, S} = config
-  const {schema, getClient} = context
-  // 'perspectiveStack' may not exist on ConfigContext in some versions
-  const perspectiveStack = (context as any).perspectiveStack || []
-  const client = getClient({apiVersion: API_VERSION})
-  // the first position in the perspective stack is the current version
-  const currentVersion = perspectiveStack[0]
-
-  const listTitle = title ?? `Orderable ${type}`
-  const listId = id ?? `orderable-${type}`
-  const listIcon = icon ?? SortIcon
-  const typeTitle = schema.get(type)?.title ?? type
-
-  if (createIntent !== false) {
-    menuItems.push(
-      S.menuItem()
-        .title(`Create new ${typeTitle}`)
-        .intent({type: 'create', params: {type}})
-        .serialize(),
-    )
-  }
-  return S.listItem()
-    .title(listTitle)
-    .id(listId)
-    .icon(listIcon)
-    .schemaType(type)
-    .child(
-      Object.assign(
-        S.documentTypeList(type)
-          .canHandleIntent(() => !!createIntent)
-          .serialize(),
-        {
-          // Prevents the component from re-rendering when switching documents
-          __preserveInstance: true,
-          // Prevents the component from NOT re-rendering when switching listItems
-          key: listId,
-
-          type: 'component',
-          component: OrderableDocumentList,
-          options: {type, filter, params, client, currentVersion},
-          menuItems: [
-            ...menuItems,
-            S.menuItem().title(`Reset Order`).icon(GenerateIcon).action(`resetOrder`).serialize(),
-            S.menuItem()
-              .title(`Toggle Increments`)
-              .icon(SortIcon)
-              .action(`showIncrements`)
-              .serialize(),
-          ],
-        },
-      ),
-    )
-    .serialize()
-}

package/src/fields/orderRankField.ts

@@ -1,43 +0,0 @@
-import {type ConfigContext, defineField, FieldDefinition, type StringDefinition} from 'sanity'
-import {API_VERSION, ORDER_FIELD_NAME} from '../helpers/constants'
-import {initialRank} from '../helpers/initialRank'
-import type {NewItemPosition} from '../types'
-
-export type SchemaContext = Omit<ConfigContext, 'schema' | 'currentUser' | 'client'>
-
-export interface RankFieldConfig
-  extends Partial<Omit<StringDefinition, 'name' | 'type' | 'initialValue'>> {
-  type: string
-  newItemPosition?: NewItemPosition
-}
-
-export const orderRankField = (config: RankFieldConfig): FieldDefinition<'string'> => {
-  if (!config?.type) {
-    throw new Error(
-      `
-      type must be provided.
-      Example: orderRankField({type: 'category'})
-      `,
-    )
-  }
-
-  const {type, newItemPosition = 'after', ...rest} = config
-  return defineField({
-    title: 'Order Rank',
-    readOnly: true,
-    hidden: true,
-    ...rest,
-    name: ORDER_FIELD_NAME,
-    type: 'string',
-    initialValue: async (p, {getClient}) => {
-      const direction = newItemPosition === 'before' ? 'asc' : 'desc'
-
-      const lastDocOrderRank = await getClient({apiVersion: API_VERSION}).fetch(
-        `*[_type == $type]|order(@[$order] ${direction})[0][$order]`,
-        {type, order: ORDER_FIELD_NAME},
-        {tag: 'orderable-document-list.last-doc-order-rank'},
-      )
-      return initialRank(lastDocOrderRank, newItemPosition)
-    },
-  })
-}

package/src/fields/orderRankOrdering.ts

@@ -1,8 +0,0 @@
-import type {SortOrdering} from 'sanity'
-import {ORDER_FIELD_NAME} from '../helpers/constants'
-
-export const orderRankOrdering: SortOrdering = {
-  title: 'Ordered',
-  name: 'ordered',
-  by: [{field: ORDER_FIELD_NAME, direction: 'asc'}],
-}