@sanity/hierarchical-document-list 1.1.0 → 2.0.0

package/src/components/NodeContentRenderer.tsx

@@ -0,0 +1,141 @@
+import {isDescendant} from '@nosferatu500/react-sortable-tree'
+import {cyan, gray, red} from '@sanity/color'
+import {ChevronDownIcon, ChevronRightIcon, DragHandleIcon} from '@sanity/icons'
+import {Box, Button, Flex, Spinner} from '@sanity/ui'
+import * as React from 'react'
+import styled from 'styled-components'
+
+const Root = styled.div`
+  // Adapted from react-sortable-tree/style.css
+  &[data-landing='true'] > *,
+  &[data-cancel='true'] > * {
+    opacity: 0 !important;
+  }
+  &[data-landing='true']::before,
+  &[data-cancel='true']::before {
+    background-color: ${cyan[50].hex};
+    border: 2px dashed ${gray[400].hex};
+    border-radius: 3px;
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: -1;
+  }
+
+  &[data-cancel='true']::before {
+    background-color: ${red[50].hex};
+  }
+`
+
+/**
+ * Customization of react-sortable-tree's default node.
+ * Created in order to use Sanity UI for styles.
+ * Reference: https://github.com/frontend-collective/react-sortable-tree/blob/master/src/node-renderer-default.js
+ */
+const NodeContentRenderer: any = (props: any) => {
+  const {node, path, treeIndex, canDrag = false} = props
+  const nodeTitle = node.title
+  const Handle = React.useMemo(() => {
+    if (!canDrag) {
+      return null
+    }
+    if (typeof node.children === 'function' && node.expanded) {
+      // Show a loading symbol on the handle when the children are expanded
+      //  and yet still defined by a function (a callback to fetch the children)
+      return <Spinner />
+    }
+
+    const BtnElement = (
+      <div>
+        <Button
+          mode="bleed"
+          paddingX={0}
+          paddingY={1}
+          style={{
+            cursor: node.publishedId ? 'grab' : 'default',
+            fontSize: '1.5625rem'
+          }}
+          data-ui="DragHandleButton"
+          data-drag-handle={canDrag}
+          disabled={!node.publishedId}
+        >
+          <DragHandleIcon style={{marginBottom: '-0.1em'}} />
+        </Button>
+      </div>
+    )
+
+    // Don't allow editors to drag invalid documents
+    if (!node.publishedId) {
+      return BtnElement
+    }
+
+    // Show the handle used to initiate a drag-and-drop
+    return props.connectDragSource(BtnElement, {
+      dropEffect: 'copy'
+    })
+  }, [canDrag, node, typeof node.children === 'function'])
+
+  const isDraggedDescendant = props.draggedNode && isDescendant(props.draggedNode, node)
+  const isLandingPadActive = !props.didDrop && props.isDragging
+
+  return (
+    <Box style={{position: 'relative'}}>
+      {props.toggleChildrenVisibility &&
+        node.children &&
+        (node.children.length > 0 || typeof node.children === 'function') && (
+          <div
+            style={{
+              position: 'absolute',
+              left: '-2px',
+              top: '40%',
+              transform: 'translate(-100%, -50%)'
+            }}
+          >
+            <Button
+              aria-label={node.expanded ? 'Collapse' : 'Expand'}
+              icon={
+                node.expanded ? (
+                  <ChevronDownIcon color={gray[200].hex} />
+                ) : (
+                  <ChevronRightIcon color={gray[200].hex} />
+                )
+              }
+              mode="bleed"
+              fontSize={2}
+              padding={1}
+              type="button"
+              onClick={() =>
+                props.toggleChildrenVisibility?.({
+                  node,
+                  path,
+                  treeIndex
+                })
+              }
+            />
+          </div>
+        )}
+
+      {props.connectDragPreview(
+        <div>
+          <Root
+            data-landing={isLandingPadActive}
+            data-cancel={isLandingPadActive && !props.canDrop}
+            style={{
+              opacity: isDraggedDescendant ? 0.5 : 1
+            }}
+          >
+            <Flex align="center">
+              {Handle}
+              {typeof nodeTitle === 'function' ? nodeTitle(props) : nodeTitle}
+            </Flex>
+          </Root>
+        </div>
+      )}
+    </Box>
+  )
+}
+
+export default NodeContentRenderer

package/src/components/PlaceholderDropzone.tsx

@@ -0,0 +1,45 @@
+import {Box, Card, CardTone, Stack, Text} from '@sanity/ui'
+import * as React from 'react'
+
+const PlaceholderDropzone: React.FC<
+  {
+    tone?: CardTone
+    title: string
+    subtitle?: string
+  } & any
+> = (props) => {
+  const isValid = props.isOver && props.canDrop
+  const isInvalid = props.isOver && !props.canDrop
+  let tone: CardTone = 'transparent'
+  if (isValid) {
+    tone = 'positive'
+  }
+  if (isInvalid) {
+    tone = 'caution'
+  }
+  return (
+    <Box padding={3}>
+      <Card
+        padding={5}
+        radius={2}
+        border
+        tone={tone}
+        style={{
+          borderStyle: props.isOver ? undefined : 'dashed',
+        }}
+      >
+        <Stack space={2} style={{textAlign: 'center'}}>
+          <Text size={2} as="h2" muted>
+            {!props.isOver && props.title}
+            {isValid && 'Drop here'}
+            {isInvalid && 'Invalid location or element'}
+          </Text>
+          {props.subtitle && <Text size={1}>{props.subtitle}</Text>}
+          {props.children}
+        </Stack>
+      </Card>
+    </Box>
+  )
+}
+
+export default PlaceholderDropzone

package/src/components/TreeEditor.tsx

@@ -0,0 +1,167 @@
+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)
+
+  React.useEffect(() => {
+    if (props.options.documentId) {
+      setContext(document.getElementById(props.options.documentId))
+    }
+  }, [props.options.documentId])
+
+  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: getTreeHeight(localTree)}}
+                  // 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/{lib/components/TreeEditorErrorBoundary.d.ts → src/components/TreeEditorErrorBoundary.tsx}

@@ -1,4 +1,3 @@
-import * as React from 'react';
 /**
  * react-sortable-tree emits a lot of random errors when dragging to invalid states,
  * even when drag-targets are disabled.
@@ -10,7 +9,6 @@ import * as React from 'react';
  * event handlers, so there is addtional workarounds in the
  * DnDManager.
  *  */
-export declare class TreeEditorErrorBoundary extends React.Component {
-    componentDidCatch(): void;
-    render(): React.ReactNode;
+export const TreeEditorErrorBoundary = (props: any) => {
+  return props.children
 }

package/src/components/TreeNodeRenderer.tsx

@@ -0,0 +1,37 @@
+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

@@ -0,0 +1,193 @@
+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