@sanity/hierarchical-document-list 2.1.2 → 3.0.0

package/src/components/TreeEditor.tsx

@@ -1,184 +0,0 @@
-import SortableTree, {FullTree, NodeData} from '@nosferatu500/react-sortable-tree'
-import {AddCircleIcon} from '@sanity/icons'
-import {Box, Button, Card, Flex, Spinner, Stack, Text, Tooltip} from '@sanity/ui'
-import * as React from 'react'
-import {useCallback, useMemo} from 'react'
-import {DndProvider} from 'react-dnd'
-import {HTML5Backend} from 'react-dnd-html5-backend'
-import {PatchEvent} from 'sanity'
-import useAllItems from '../hooks/useAllItems'
-import useLocalTree from '../hooks/useLocalTree'
-import {TreeOperationsContext} from '../hooks/useTreeOperations'
-import useTreeOperationsProvider from '../hooks/useTreeOperationsProvider'
-import {Optional, StoredTreeItem, TreeDeskStructureProps} from '../types'
-import getCommonTreeProps from '../utils/getCommonTreeProps'
-import getTreeHeight from '../utils/getTreeHeight'
-import {getUnaddedItems} from '../utils/treeData'
-import {HandleMovedNodeData} from '../utils/treePatches'
-import DocumentInNode from './DocumentInNode'
-import {TreeEditorErrorBoundary} from './TreeEditorErrorBoundary'
-
-/**
- * The loaded tree users interact with
- */
-const TreeEditor: React.FC<{
-  tree: StoredTreeItem[]
-  onChange: (patch: PatchEvent) => void
-  options: Optional<TreeDeskStructureProps, 'documentId'>
-  patchPrefix?: string
-}> = (props) => {
-  const {status: allItemsStatus, allItems} = useAllItems(props.options)
-  const unAddedItems = getUnaddedItems({tree: props.tree, allItems})
-
-  const {localTree, handleVisibilityToggle} = useLocalTree({
-    tree: props.tree,
-    allItems
-  })
-
-  const operations = useTreeOperationsProvider({
-    patchPrefix: props.patchPrefix,
-    onChange: props.onChange,
-    localTree
-  })
-
-  const [context, setContext] = React.useState<HTMLElement | null>(null)
-  const [treeViewHeight, setTreeViewHeight] = React.useState<string>('')
-
-  const updateTreeViewHeight = () => {
-    const el = document.querySelector(`#${props.options.documentId} [data-known-size]`) as HTMLElement | null
-    const rowHeight = Number(el?.dataset.knownSize || 51)
-    setTreeViewHeight(getTreeHeight(localTree, rowHeight))
-  }
-
-  React.useEffect(() => {
-    if (props.options.documentId) {
-      setContext(document.getElementById(props.options.documentId))
-    }
-  }, [props.options.documentId])
-
-  React.useEffect(() => {
-    // Wait for dom to load before initial execution.
-    setTimeout(updateTreeViewHeight)
-  }, [])
-
-  React.useEffect(() => {
-    // Immediately update when changes are detected.
-    updateTreeViewHeight()
-  }, [props.options.documentId, localTree])
-
-  const onMoveNode = useCallback(
-    (data: NodeData & FullTree & any) =>
-      operations.handleMovedNode(data as unknown as HandleMovedNodeData),
-    [operations]
-  )
-
-  const treeProps = useMemo(
-    () =>
-      getCommonTreeProps({
-        placeholder: {
-          title: 'Add items from the list below'
-        }
-      }),
-    []
-  )
-
-  const operationContext = useMemo(
-    () => ({...operations, allItemsStatus}),
-    [operations, allItemsStatus]
-  )
-
-  return (
-    <TreeEditorErrorBoundary>
-      {/*Use this Box-wrapper to get a context Element to prevent DndProvider to have to HTML% backend at the same time https://github.com/react-dnd/react-dnd/issues/186#issuecomment-978206387 */}
-      <Box id={props.options.documentId}>
-        {context ? (
-          <DndProvider backend={HTML5Backend} options={{rootElement: context}}>
-            <TreeOperationsContext.Provider value={operationContext}>
-              <Stack space={4} paddingTop={4}>
-                <Card
-                  style={{minHeight: treeViewHeight}}
-                  // Only include borderBottom if there's something to show in unadded items
-                  borderBottom={allItemsStatus !== 'success' || unAddedItems?.length > 0}
-                >
-                  <SortableTree
-                    maxDepth={props.options.maxDepth}
-                    onChange={doNothingOnChange}
-                    onVisibilityToggle={handleVisibilityToggle}
-                    canDrop={canDrop}
-                    onMoveNode={onMoveNode}
-                    treeData={localTree}
-                    {...treeProps}
-                  />
-                </Card>
-
-                {allItemsStatus === 'success' && unAddedItems?.length > 0 && (
-                  <Stack space={1} paddingX={2} paddingTop={3}>
-                    <Stack space={2} paddingX={2} paddingBottom={3}>
-                      <Text size={2} as="h2" weight="semibold">
-                        Add more items
-                      </Text>
-                      <Text size={1} muted>
-                        Only published documents are shown.
-                      </Text>
-                    </Stack>
-                    {unAddedItems.map((item) => (
-                      <DocumentInNode
-                        key={item.publishedId || item.draftId}
-                        item={item}
-                        action={
-                          <Tooltip
-                            portal
-                            placement="left"
-                            content={
-                              <Box padding={2}>
-                                <Text size={1}>Add to list</Text>
-                              </Box>
-                            }
-                          >
-                            <Button
-                              onClick={() => {
-                                operations.addItem(item)
-                              }}
-                              mode="bleed"
-                              icon={AddCircleIcon}
-                              style={{cursor: 'pointer'}}
-                            />
-                          </Tooltip>
-                        }
-                      />
-                    ))}
-                  </Stack>
-                )}
-                {allItemsStatus === 'loading' && (
-                  <Flex padding={4} align={'center'} justify={'center'}>
-                    <Spinner size={3} muted />
-                  </Flex>
-                )}
-                {allItemsStatus === 'error' && (
-                  <Flex padding={4} align={'center'} justify={'center'}>
-                    <Text size={2} weight="semibold">
-                      Something went wrong when loading documents
-                    </Text>
-                  </Flex>
-                )}
-              </Stack>
-            </TreeOperationsContext.Provider>
-          </DndProvider>
-        ) : null}
-      </Box>
-    </TreeEditorErrorBoundary>
-  )
-}
-
-function canDrop({nextPath, prevPath}: any & NodeData) {
-  const insideItself =
-    nextPath.length >= prevPath.length &&
-    prevPath.every((pathIndex: any, index: string | number) => nextPath[index] === pathIndex)
-  return !insideItself
-}
-
-const doNothingOnChange = () => {
-  // Do nothing. onMoveNode will do all the work
-}
-
-export default TreeEditor

package/src/components/TreeEditorErrorBoundary.tsx

@@ -1,14 +0,0 @@
-/**
- * react-sortable-tree emits a lot of random errors when dragging to invalid states,
- * even when drag-targets are disabled.
- *
- * This boundary is a workaround so users are not pestered with error-toasts for things
- * that have no functional impact.
- *
- * This boundry does NOT handle errors that happen in the React dnd
- * event handlers, so there is addtional workarounds in the
- * DnDManager.
- *  */
-export const TreeEditorErrorBoundary = (props: any) => {
-  return props.children
-}

package/src/components/TreeNodeRenderer.tsx

@@ -1,37 +0,0 @@
-import * as React from 'react'
-import TreeNodeRendererScaffold from './TreeNodeRendererScaffold'
-
-/**
- * To prevent expand buttons from overflowing on the left, we add a minimum left padding to all entries
- */
-const BASE_LEFT_PADDING = 10
-const NESTING_PADDING = 14
-
-const TreeNodeRenderer: any = (props: any) => {
-  const {children, lowerSiblingCounts, connectDropTarget, isOver, draggedNode, canDrop} = props
-
-  // Construct the scaffold representing the structure of the tree
-  const scaffoldBlockCount = lowerSiblingCounts.length
-
-  return connectDropTarget(
-    <div style={props.style}>
-      <div
-        style={{
-          // prettier-ignore
-          paddingLeft: `${BASE_LEFT_PADDING + (NESTING_PADDING * scaffoldBlockCount)}px`
-        }}
-      >
-        {React.Children.map(children, (child) =>
-          React.cloneElement(child as React.ReactElement<any>, {
-            isOver,
-            canDrop,
-            draggedNode
-          })
-        )}
-      </div>
-      <TreeNodeRendererScaffold {...props} />
-    </div>
-  )
-}
-
-export default TreeNodeRenderer

package/src/components/TreeNodeRendererScaffold.tsx

@@ -1,193 +0,0 @@
-import {blue} from '@sanity/color'
-import * as React from 'react'
-import {createGlobalStyle} from 'styled-components'
-
-// Adapted from react-sortable-tree/src/tree-node.js
-const ScaffoldStyles = createGlobalStyle`
-  .rst__lineBlock,
-  .rst__absoluteLineBlock {
-    height: 100%;
-    position: relative;
-    display: inline-block;
-    --stroke-width: 3px;
-  }
-
-  .rst__absoluteLineBlock {
-    position: absolute;
-    top: 0;
-  }
-
-  /* Highlight line for pointing to dragged row destination
-   ========================================================================== */
-  /**
- * +--+--+
- * |  |  |
- * |  |  |
- * |  |  |
- * +--+--+
- */
-  .rst__highlightLineVertical {
-    z-index: 3;
-  }
-  .rst__highlightLineVertical::before {
-    position: absolute;
-    content: '';
-    background-color: ${blue[400].hex};
-    width: calc(var(--stroke-width) * 2);
-    margin-left: calc(var(--stroke-width) * -1);
-    left: 50%;
-    top: 0;
-    height: 100%;
-  }
-
-  @keyframes arrow-pulse {
-    0% {
-      transform: translate(0, 0);
-      opacity: 0;
-    }
-    30% {
-      transform: translate(0, 300%);
-      opacity: 1;
-    }
-    70% {
-      transform: translate(0, 700%);
-      opacity: 1;
-    }
-    100% {
-      transform: translate(0, 1000%);
-      opacity: 0;
-    }
-  }
-  .rst__highlightLineVertical::after {
-    content: '';
-    position: absolute;
-    height: 0;
-    margin-left: calc(var(--stroke-width) * -1);
-    left: 50%;
-    top: 0;
-    border-left: var(--stroke-width) solid transparent;
-    border-right: var(--stroke-width) solid transparent;
-    border-top: var(--stroke-width) solid white;
-    animation: arrow-pulse 1s infinite linear both;
-  }
-
-  /**
- * +-----+
- * |     |
- * |  +--+
- * |  |  |
- * +--+--+
- */
-  .rst__highlightTopLeftCorner::before {
-    z-index: 3;
-    content: '';
-    position: absolute;
-    border-top: solid calc(var(--stroke-width) * 2) ${blue[400].hex};
-    border-left: solid calc(var(--stroke-width) * 2) ${blue[400].hex};
-    box-sizing: border-box;
-    height: calc(50% + var(--stroke-width));
-    top: 50%;
-    margin-top: calc(var(--stroke-width) * -1);
-    right: 0;
-    width: calc(50% + var(--stroke-width));
-  }
-
-  /**
- * +--+--+
- * |  |  |
- * |  |  |
- * |  +->|
- * +-----+
- */
-  .rst__highlightBottomLeftCorner {
-    z-index: 3;
-  }
-  .rst__highlightBottomLeftCorner::before {
-    content: '';
-    position: absolute;
-    border-bottom: solid calc(var(--stroke-width) * 2) ${blue[400].hex};
-    border-left: solid calc(var(--stroke-width) * 2) ${blue[400].hex};
-    box-sizing: border-box;
-    height: calc(100% + var(--stroke-width));
-    top: 0;
-    right: calc(var(--stroke-width) * 3);
-    width: calc(50% - calc(var(--stroke-width) * 2));
-  }
-
-  .rst__highlightBottomLeftCorner::after {
-    content: '';
-    position: absolute;
-    height: 0;
-    right: 0;
-    top: 100%;
-    margin-top: calc(var(--stroke-width) * -3);
-    border-top: calc(var(--stroke-width) * 3) solid transparent;
-    border-bottom: calc(var(--stroke-width) * 3) solid transparent;
-    border-left: calc(var(--stroke-width) * 3) solid ${blue[400].hex};
-  }
-
-  .rst__unclickable {
-    pointer-events: none;
-    margin-top: -calc(var(--stroke-width) * 3);
-  }
-`
-
-const TreeNodeRendererScaffold: React.FC<any> = (props) => {
-  const {
-    lowerSiblingCounts,
-    scaffoldBlockPxWidth,
-    listIndex,
-    swapDepth,
-    swapFrom,
-    swapLength,
-    treeIndex,
-  } = props
-
-  // Construct the scaffold representing the structure of the tree
-  const scaffold: React.ReactNode[] = lowerSiblingCounts.map(
-    (lowerSiblingCount: number, i: any) => {
-      if (lowerSiblingCount < 0 || treeIndex === listIndex || i !== swapDepth) {
-        return null
-      }
-
-      // This row has been shifted, and is at the depth of
-      // the line pointing to the new destination
-      let highlightLineClass = ''
-
-      if (listIndex === (swapFrom || 0) + (swapLength || 0) - 1) {
-        // This block is on the bottom (target) line
-        // This block points at the target block (where the row will go when released)
-        highlightLineClass = 'rst__highlightBottomLeftCorner'
-      } else if (treeIndex === swapFrom) {
-        // This block is on the top (source) line
-        highlightLineClass = 'rst__highlightTopLeftCorner'
-      } else {
-        // This block is between the bottom and top
-        highlightLineClass = 'rst__highlightLineVertical'
-      }
-
-      const style = {
-        width: scaffoldBlockPxWidth,
-        left: scaffoldBlockPxWidth * i,
-      }
-
-      return (
-        <div
-          key={i}
-          style={style}
-          className={`rst__unclickable rst__absoluteLineBlock ${highlightLineClass || ''}`}
-          tabIndex={-1}
-        />
-      )
-    }
-  )
-
-  return (
-    <>
-      {scaffold}
-      <ScaffoldStyles />
-    </>
-  )
-}
-
-export default TreeNodeRendererScaffold

package/src/createDeskHierarchy.tsx

@@ -1,110 +0,0 @@
-import {AddIcon} from '@sanity/icons'
-import * as React from 'react'
-import type {ConfigContext} from 'sanity'
-import {StructureBuilder} from 'sanity/desk'
-
-import TreeDeskStructure from './TreeDeskStructure'
-import {TreeDeskStructureProps} from './types'
-import throwError from './utils/throwError'
-
-export interface TreeProps extends TreeDeskStructureProps {
-  /**
-   * Visible title above the tree.
-   * Also used as the label in the desk list item.
-   */
-  title: string
-
-  /**
-   * Optional icon for rendering the item in the desk structure.
-   */
-  icon?: any
-
-  context?: ConfigContext | any
-  S?: StructureBuilder | any
-  /**
-   * Restrict document types that can be created.
-   */
-  creatableTypes?: string[]
-}
-
-const deskTreeValidator = (props: TreeProps): React.FC => {
-  const {documentId, referenceTo} = props
-  if (typeof documentId !== 'string' && !documentId) {
-    throwError('invalidDocumentId')
-  }
-  if (!Array.isArray(referenceTo)) {
-    throwError('invalidReferenceTo', `(documentId "${documentId}")`)
-  }
-
-  return (deskProps) => <TreeDeskStructure {...deskProps} options={props} />
-}
-
-export default function createDeskHierarchy(props: TreeProps) {
-  const {documentId, referenceTo, referenceOptions, context, S, creatableTypes} = props
-  if (!S || !context) {
-    throw new Error('Invalid configuration. S or context props are undefined. ' +
-      'These props are available as function parameters when configuring structure, and must be passed along to createDeskHierarchy. ' +
-      'Confer the plugin README for example usage.')
-  }
-
-  const {schema} = context
-
-  const safelyCreatableTypes =
-    creatableTypes && !creatableTypes.some((type) => referenceTo.indexOf(type))
-      ? creatableTypes
-      : referenceTo
-
-  let mainList = (
-    referenceTo?.length === 1
-      ? S.documentTypeList(referenceTo[0]).schemaType(referenceTo[0])
-      : S.documentList().filter('_type in $types').params({types: referenceTo})
-  )
-    .id(documentId)
-    .menuItems(
-      (safelyCreatableTypes || []).map((schemaType) =>
-        S.menuItem()
-          .intent({
-            type: 'create',
-            params: {type: schemaType}
-          })
-          .title(`Create ${schema.get(schemaType)?.title}`)
-          .icon(schema.get(schemaType)?.icon || AddIcon)
-      )
-    )
-    .canHandleIntent((intent: string, c: Record<string, unknown>) => {
-      // Can edit itself
-      if (intent === 'edit' && c.id === props.documentId) {
-        return true
-      }
-      // Can create & edit referenced document types
-      if (safelyCreatableTypes.includes(c.type as string)) {
-        return true
-      }
-      return false
-    })
-
-  if (referenceOptions?.filter) {
-    mainList = mainList.filter(referenceOptions.filter)
-  }
-
-  if (referenceOptions?.filterParams) {
-    mainList = mainList.params(referenceOptions.filterParams)
-  }
-
-  return S.listItem()
-    .id(documentId)
-    .title(props.title || documentId)
-    .icon(props.icon)
-    .child(
-      Object.assign(
-        mainList.serialize(),
-        {
-          type: 'component',
-          component: deskTreeValidator(props),
-          options: props,
-          __preserveInstance: true
-        },
-        props.title ? {title: props.title} : {}
-      )
-    )
-}

package/src/createHierarchicalSchemas.tsx

@@ -1,151 +0,0 @@
-import * as React from 'react'
-import {ArraySchemaType} from 'sanity'
-import {DEFAULT_FIELD_KEY} from './TreeDeskStructure'
-import TreeInputComponent from './TreeInputComponent'
-import {TreeDeskStructureProps, TreeFieldSchema} from './types'
-import {
-  INTERNAL_NODE_ARRAY_TYPE,
-  INTERNAL_NODE_TYPE,
-  INTERNAL_NODE_VALUE_TYPE,
-  getSchemaTypeName
-} from './utils/injectNodeTypeInPatches'
-import throwError from './utils/throwError'
-
-type SchemaOptions = Omit<TreeDeskStructureProps, 'documentId' | 'maxDepth'>
-
-function createHierarchicalNodeValueType({
-  referenceTo,
-  referenceOptions,
-  documentType
-}: SchemaOptions) {
-  return {
-    // when used inside the field, name & type are overwritten by createHierarchicalNodeType
-    name: documentType ? getSchemaTypeName(documentType, 'nodeValue') : INTERNAL_NODE_VALUE_TYPE,
-    type: 'object',
-    title: `Hierarchical node value (${documentType})`,
-
-    fields: [
-      {name: 'docType', type: 'string'},
-      {
-        name: 'reference',
-        type: 'reference',
-        weak: true,
-        to: referenceTo.map((type) => ({type})),
-        options: referenceOptions
-      }
-    ]
-  }
-}
-
-function createHierarchicalNodeType(options: SchemaOptions) {
-  return {
-    // name & type are overwritten by createHierarchicalField
-    name: options.documentType
-      ? getSchemaTypeName(options.documentType, 'node')
-      : INTERNAL_NODE_TYPE,
-    title: `Hierarchical node (${options.documentType})`,
-    type: 'object',
-    fields: [
-      {name: 'parent', type: 'string'},
-
-      options.documentType
-        ? {name: 'value', type: getSchemaTypeName(options.documentType, 'nodeValue')}
-        : // If no documentType is defined, use an anonymized inline object to avoid
-          // having to define another custom schema type through the plugin
-          {
-            ...createHierarchicalNodeValueType(options),
-            name: 'value',
-            type: 'object'
-          }
-    ]
-  }
-}
-
-function createHierarchicalArrayType(options: SchemaOptions) {
-  return {
-    // name & type are overwritten by createHierarchicalField
-    name: options.documentType
-      ? getSchemaTypeName(options.documentType, 'array')
-      : INTERNAL_NODE_ARRAY_TYPE,
-    title: `Hierarchical array of nodes (${options.documentType})`,
-    type: 'array',
-    of: [
-      options.documentType
-        ? {type: getSchemaTypeName(options.documentType, 'node')}
-        : createHierarchicalNodeType(options)
-    ]
-  }
-}
-
-export function createHierarchicalField({name, title, options, ...rest}: TreeFieldSchema): Omit<
-  ArraySchemaType,
-  'type' | 'jsonType' | 'of'
-> & {
-  type: string
-  inputComponent: React.FC<any>
-  of?: any[]
-} {
-  if (!Array.isArray(options?.referenceTo)) {
-    throwError('invalidReferenceTo', `(field of name "${name}")`)
-  }
-
-  return {
-    ...rest,
-    name,
-    title,
-    inputComponent: TreeInputComponent,
-    options,
-    ...(options.documentType
-      ? {type: getSchemaTypeName(options.documentType, 'array')}
-      : {
-          ...createHierarchicalArrayType(options),
-          name
-        })
-  }
-}
-
-function createHierarchicalDocType(options: SchemaOptions) {
-  return {
-    name: options.documentType,
-    title: 'Hierarchical tree',
-    type: 'document',
-    // The plugin needs to define a `schemaType` with liveEdit enabled so that
-    // `useDocumentOperation` in TreeDeskStructure.tsx doesn't create drafts at every patch.
-    liveEdit: true,
-    fields: [
-      createHierarchicalField({
-        name: options.fieldKeyInDocument || DEFAULT_FIELD_KEY,
-        title: 'Hierarchical Tree',
-        options
-      })
-    ],
-    preview: {
-      select: {
-        id: '_id',
-        tree: 'tree'
-      },
-      prepare({id, tree}: {id: string; tree: unknown[]}): Record<string, string> {
-        return {
-          title: `Hierarchical documents (ID: ${id})`,
-          subtitle: `${tree?.length || 0} document(s) in its list.`
-        }
-      }
-    }
-  }
-}
-
-export default function createHierarchicalSchemas(options: SchemaOptions) {
-  if (!Array.isArray(options.referenceTo) || options.referenceTo.length <= 0) {
-    throwError('invalidReferenceTo')
-  }
-  if (!options.documentType) {
-    throwError('invalidDocumentType')
-  }
-
-  return [
-    createHierarchicalDocType(options),
-    createHierarchicalArrayType(options),
-    createHierarchicalNodeType(options),
-    createHierarchicalNodeValueType(options)
-  ]
-}