@plone/volto 18.0.0-alpha.4 → 18.0.0-alpha.41

package/src/components/manage/Blocks/Block/Order/Item.jsx

@@ -0,0 +1,122 @@
+import React, { forwardRef } from 'react';
+import classNames from 'classnames';
+import { useDispatch, useSelector } from 'react-redux';
+import { includes } from 'lodash';
+
+import { Icon } from '@plone/volto/components';
+import { setUIState } from '@plone/volto/actions';
+import config from '@plone/volto/registry';
+
+import deleteSVG from '@plone/volto/icons/delete.svg';
+import dragSVG from '@plone/volto/icons/drag.svg';
+
+export const Item = forwardRef(
+  (
+    {
+      clone,
+      data,
+      depth,
+      disableSelection,
+      disableInteraction,
+      ghost,
+      id,
+      handleProps,
+      indentationWidth,
+      onRemove,
+      onSelectBlock,
+      parentId,
+      style,
+      value,
+      wrapperRef,
+      ...props
+    },
+    ref,
+  ) => {
+    const selected = useSelector((state) => state.form.ui.selected);
+    const hovered = useSelector((state) => state.form.ui.hovered);
+    const multiSelected = useSelector((state) => state.form.ui.multiSelected);
+    const gridSelected = useSelector((state) => state.form.ui.gridSelected);
+    const dispatch = useDispatch();
+    return (
+      <li
+        className={classNames(
+          'tree-item-wrapper',
+          clone && 'clone',
+          ghost && 'ghost',
+          disableSelection && 'disable-selection',
+          disableInteraction && 'disable-interaction',
+        )}
+        role="presentation"
+        onMouseOver={() => dispatch(setUIState({ hovered: id }))}
+        onFocus={() => dispatch(setUIState({ hovered: id }))}
+        onMouseLeave={() => dispatch(setUIState({ hovered: null }))}
+        onClick={(e) => {
+          if (depth === 0) {
+            const isMultipleSelection = e.shiftKey || e.ctrlKey || e.metaKey;
+            selected !== id &&
+              onSelectBlock(
+                id,
+                selected === id ? false : isMultipleSelection,
+                e,
+              );
+          } else {
+            dispatch(
+              setUIState({
+                selected: parentId,
+                multiSelected: [],
+                gridSelected: id,
+              }),
+            );
+          }
+        }}
+        ref={wrapperRef}
+        style={{
+          '--spacing': `${indentationWidth * depth}px`,
+        }}
+        {...props}
+      >
+        <div
+          className={classNames(
+            'tree-item',
+            (selected === id || gridSelected === id) && 'selected',
+            hovered === id && 'hovered',
+            includes(multiSelected, id) && 'multiSelected',
+            `depth-${depth}`,
+          )}
+          ref={ref}
+          style={style}
+        >
+          <button
+            ref={ref}
+            {...handleProps}
+            className={classNames('action', 'drag')}
+            tabIndex={0}
+            data-cypress="draggable-handle"
+          >
+            <Icon name={dragSVG} size="16px" />
+          </button>
+          <span className="text">
+            {config.blocks.blocksConfig[data?.['@type']]?.icon && (
+              <Icon
+                name={config.blocks.blocksConfig[data?.['@type']]?.icon}
+                size="20px"
+                style={{ verticalAlign: 'middle' }}
+              />
+            )}{' '}
+            {data?.plaintext ||
+              config.blocks.blocksConfig[data?.['@type']]?.title}
+          </span>
+          {!clone && onRemove && (
+            <button
+              onClick={onRemove}
+              className={classNames('action', 'delete')}
+              tabIndex={0}
+            >
+              <Icon name={deleteSVG} size="18" />
+            </button>
+          )}
+        </div>
+      </li>
+    );
+  },
+);

package/src/components/manage/Blocks/Block/Order/Order.jsx

@@ -0,0 +1,367 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { find, min } from 'lodash';
+
+import { flattenTree, getProjection, removeChildrenOf } from './utilities';
+import SortableItem from './SortableItem';
+
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
+
+export function Order({
+  items = [],
+  onMoveBlock,
+  onDeleteBlock,
+  onSelectBlock,
+  indentationWidth = 25,
+  removable,
+  dndKitCore,
+  dndKitSortable,
+  dndKitUtilities,
+}) {
+  const [activeId, setActiveId] = useState(null);
+  const [overId, setOverId] = useState(null);
+  const [offsetLeft, setOffsetLeft] = useState(0);
+  const [currentPosition, setCurrentPosition] = useState(null);
+
+  const {
+    DndContext,
+    closestCenter,
+    PointerSensor,
+    useSensor,
+    useSensors,
+    DragOverlay,
+    MeasuringStrategy,
+    defaultDropAnimation,
+  } = dndKitCore;
+  const { SortableContext, arrayMove, verticalListSortingStrategy } =
+    dndKitSortable;
+  const { CSS } = dndKitUtilities;
+
+  const measuring = {
+    droppable: {
+      strategy: MeasuringStrategy.Always,
+    },
+  };
+
+  const dropAnimationConfig = {
+    keyframes({ transform }) {
+      return [
+        { opacity: 1, transform: CSS.Transform.toString(transform.initial) },
+        {
+          opacity: 0,
+          transform: CSS.Transform.toString({
+            ...transform.final,
+            x: transform.final.x + 5,
+            y: transform.final.y + 5,
+          }),
+        },
+      ];
+    },
+    easing: 'ease-out',
+    sideEffects({ active }) {
+      active.node.animate([{ opacity: 0 }, { opacity: 1 }], {
+        duration: defaultDropAnimation.duration,
+        easing: defaultDropAnimation.easing,
+      });
+    },
+  };
+
+  const flattenedItems = useMemo(
+    () => removeChildrenOf(flattenTree(items), activeId ? [activeId] : []),
+    [activeId, items],
+  );
+  const projected =
+    activeId && overId
+      ? getProjection(
+          flattenedItems,
+          activeId,
+          overId,
+          offsetLeft,
+          indentationWidth,
+          arrayMove,
+        )
+      : null;
+  const sensorContext = useRef({
+    items: flattenedItems,
+    offset: offsetLeft,
+  });
+  const sensors = useSensors(useSensor(PointerSensor));
+
+  const sortedIds = useMemo(
+    () => flattenedItems.map(({ id }) => id),
+    [flattenedItems],
+  );
+  const activeItem = activeId
+    ? flattenedItems.find(({ id }) => id === activeId)
+    : null;
+
+  useEffect(() => {
+    sensorContext.current = {
+      items: flattenedItems,
+      offset: offsetLeft,
+    };
+  }, [flattenedItems, offsetLeft]);
+
+  const announcements = {
+    onDragStart({ active }) {
+      return `Picked up ${active.id}.`;
+    },
+    onDragMove({ active, over }) {
+      return getMovementAnnouncement('onDragMove', active.id, over?.id);
+    },
+    onDragOver({ active, over }) {
+      return getMovementAnnouncement('onDragOver', active.id, over?.id);
+    },
+    onDragEnd({ active, over }) {
+      return getMovementAnnouncement('onDragEnd', active.id, over?.id);
+    },
+    onDragCancel({ active }) {
+      return `Moving was cancelled. ${active.id} was dropped in its original position.`;
+    },
+  };
+
+  return (
+    <DndContext
+      accessibility={{ announcements }}
+      sensors={sensors}
+      collisionDetection={closestCenter}
+      measuring={measuring}
+      onDragStart={handleDragStart}
+      onDragMove={handleDragMove}
+      onDragOver={handleDragOver}
+      onDragEnd={handleDragEnd}
+      onDragCancel={handleDragCancel}
+    >
+      <SortableContext items={sortedIds} strategy={verticalListSortingStrategy}>
+        {flattenedItems.map(({ id, parentId, depth, data }) => (
+          <SortableItem
+            key={id}
+            id={id}
+            parentId={parentId}
+            data={data}
+            depth={min([
+              id === activeId && projected ? projected.depth : depth,
+              1,
+            ])}
+            indentationWidth={indentationWidth}
+            onRemove={removable ? () => handleRemove(id) : undefined}
+            onSelectBlock={onSelectBlock}
+          />
+        ))}
+        {createPortal(
+          <DragOverlay dropAnimation={dropAnimationConfig}>
+            {activeId && activeItem ? (
+              <SortableItem
+                id={activeId}
+                depth={activeItem.depth}
+                clone
+                data={find(flattenedItems, { id: activeId }).data}
+                indentationWidth={indentationWidth}
+              />
+            ) : null}
+          </DragOverlay>,
+          document.body,
+        )}
+      </SortableContext>
+    </DndContext>
+  );
+
+  function handleDragStart({ active: { id: activeId } }) {
+    setActiveId(activeId);
+    setOverId(activeId);
+
+    const activeItem = flattenedItems.find(({ id }) => id === activeId);
+
+    if (activeItem) {
+      setCurrentPosition({
+        parentId: activeItem.parentId,
+        overId: activeId,
+      });
+    }
+
+    document.body.style.setProperty('cursor', 'grabbing');
+  }
+
+  function handleDragMove({ delta }) {
+    setOffsetLeft(delta.x);
+  }
+
+  function handleDragOver({ over }) {
+    setOverId(over?.id ?? null);
+  }
+
+  function handleDragEnd({ active, over }) {
+    if (projected && over) {
+      const { depth, parentId } = projected;
+      const clonedItems = JSON.parse(JSON.stringify(flattenedItems));
+      const overIndex = clonedItems.findIndex(({ id }) => id === over.id);
+      const activeIndex = clonedItems.findIndex(({ id }) => id === active.id);
+      const activeTreeItem = clonedItems[activeIndex];
+      const oldParentId = activeTreeItem.parentId;
+
+      clonedItems[activeIndex] = { ...activeTreeItem, depth, parentId };
+
+      // Translate position depending on parent
+      if (parentId === oldParentId) {
+        // Move from and to toplevel or move within the same grid block
+
+        let destIndex = clonedItems[overIndex].index;
+        if (clonedItems[overIndex].depth > clonedItems[activeIndex].depth) {
+          destIndex = find(clonedItems, {
+            id: clonedItems[overIndex].parentId,
+          }).index;
+        }
+        onMoveBlock({
+          source: {
+            position: clonedItems[activeIndex].index,
+            parent: oldParentId,
+            id: active.id,
+          },
+          destination: {
+            position: destIndex,
+            parent: parentId,
+          },
+        });
+      } else if (parentId && oldParentId) {
+        // Move from one gridblock to another
+
+        onMoveBlock({
+          source: {
+            position: clonedItems[activeIndex].index,
+            parent: oldParentId,
+            id: active.id,
+          },
+          destination: {
+            position:
+              overIndex < activeIndex
+                ? clonedItems[overIndex - 1].parentId
+                  ? clonedItems[overIndex - 1].index + 1
+                  : clonedItems[overIndex].index
+                : overIndex + 1 < clonedItems.length
+                  ? clonedItems[overIndex + 1].index
+                  : clonedItems[overIndex].index + 1,
+            parent: parentId,
+          },
+        });
+      } else if (oldParentId) {
+        // Moving to the main container from a gridblock
+
+        onMoveBlock({
+          source: {
+            position: clonedItems[activeIndex].index,
+            parent: oldParentId,
+            id: active.id,
+          },
+          destination: {
+            position:
+              overIndex > activeIndex
+                ? overIndex + 1 < clonedItems.length
+                  ? clonedItems[overIndex + 1].index
+                  : clonedItems[overIndex].index + 1
+                : clonedItems[overIndex].index,
+            parent: parentId,
+          },
+        });
+      } else {
+        // Moving from the main container to a gridblock
+
+        onMoveBlock({
+          source: {
+            position: clonedItems[activeIndex].index,
+            parent: oldParentId,
+            id: active.id,
+          },
+          destination: {
+            position:
+              overIndex < activeIndex
+                ? clonedItems[overIndex - 1].parentId
+                  ? clonedItems[overIndex - 1].index + 1
+                  : clonedItems[overIndex].index
+                : overIndex + 1 < clonedItems.length
+                  ? clonedItems[overIndex + 1].index
+                  : clonedItems[overIndex].index + 1,
+            parent: parentId,
+          },
+        });
+      }
+    }
+
+    resetState();
+  }
+
+  function handleDragCancel() {
+    resetState();
+  }
+
+  function resetState() {
+    setOverId(null);
+    setActiveId(null);
+    setOffsetLeft(0);
+    setCurrentPosition(null);
+
+    document.body.style.setProperty('cursor', '');
+  }
+
+  function handleRemove(id) {
+    onDeleteBlock(id);
+  }
+
+  function getMovementAnnouncement(eventName, activeId, overId) {
+    if (overId && projected) {
+      if (eventName !== 'onDragEnd') {
+        if (
+          currentPosition &&
+          projected.parentId === currentPosition.parentId &&
+          overId === currentPosition.overId
+        ) {
+          return;
+        } else {
+          setCurrentPosition({
+            parentId: projected.parentId,
+            overId,
+          });
+        }
+      }
+
+      const clonedItems = JSON.parse(JSON.stringify(flattenTree(items)));
+      const overIndex = clonedItems.findIndex(({ id }) => id === overId);
+      const activeIndex = clonedItems.findIndex(({ id }) => id === activeId);
+      const sortedItems = arrayMove(clonedItems, activeIndex, overIndex);
+
+      const previousItem = sortedItems[overIndex - 1];
+
+      let announcement;
+      const movedVerb = eventName === 'onDragEnd' ? 'dropped' : 'moved';
+      const nestedVerb = eventName === 'onDragEnd' ? 'dropped' : 'nested';
+
+      if (!previousItem) {
+        const nextItem = sortedItems[overIndex + 1];
+        announcement = `${activeId} was ${movedVerb} before ${nextItem.id}.`;
+      } else {
+        if (projected.depth > previousItem.depth) {
+          announcement = `${activeId} was ${nestedVerb} under ${previousItem.id}.`;
+        } else {
+          let previousSibling = previousItem;
+          while (previousSibling && projected.depth < previousSibling.depth) {
+            const parentId = previousSibling.parentId;
+            previousSibling = sortedItems.find(({ id }) => id === parentId);
+          }
+
+          if (previousSibling) {
+            announcement = `${activeId} was ${movedVerb} after ${previousSibling.id}.`;
+          }
+        }
+      }
+
+      return announcement;
+    }
+
+    return;
+  }
+}
+
+export default injectLazyLibs([
+  'dndKitCore',
+  'dndKitSortable',
+  'dndKitUtilities',
+])(Order);

package/src/components/manage/Blocks/Block/Order/SortableItem.jsx

@@ -0,0 +1,58 @@
+import React from 'react';
+
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
+
+import { Item } from './Item';
+
+const animateLayoutChanges = ({ isSorting, wasDragging }) =>
+  isSorting || wasDragging ? false : true;
+
+export function SortableItem({
+  id,
+  depth,
+  dndKitSortable,
+  dndKitUtilities,
+  ...props
+}) {
+  const { useSortable } = dndKitSortable;
+  const { CSS } = dndKitUtilities;
+  const {
+    attributes,
+    isDragging,
+    isSorting,
+    listeners,
+    setDraggableNodeRef,
+    setDroppableNodeRef,
+    transform,
+    transition,
+  } = useSortable({
+    id,
+    animateLayoutChanges,
+  });
+  const style = {
+    transform: CSS.Translate.toString(transform),
+    transition,
+  };
+
+  return (
+    <Item
+      ref={setDraggableNodeRef}
+      wrapperRef={setDroppableNodeRef}
+      style={style}
+      depth={depth}
+      ghost={isDragging}
+      disableSelection={false}
+      disableInteraction={isSorting}
+      id={id}
+      handleProps={{
+        ...attributes,
+        ...listeners,
+      }}
+      {...props}
+    />
+  );
+}
+
+export default injectLazyLibs(['dndKitSortable', 'dndKitUtilities'])(
+  SortableItem,
+);

package/src/components/manage/Blocks/Block/Order/utilities.js

@@ -0,0 +1,113 @@
+import { isArray } from 'lodash';
+
+import { getBlocksLayoutFieldname } from '@plone/volto/helpers';
+
+function getDragDepth(offset, indentationWidth) {
+  return Math.round(offset / indentationWidth);
+}
+
+export function getProjection(
+  items,
+  activeId,
+  overId,
+  dragOffset,
+  indentationWidth,
+  arrayMove,
+) {
+  const overItemIndex = items.findIndex(({ id }) => id === overId);
+  const activeItemIndex = items.findIndex(({ id }) => id === activeId);
+  const activeItem = items[activeItemIndex];
+  const newItems = arrayMove(items, activeItemIndex, overItemIndex);
+  const previousItem = newItems[overItemIndex - 1];
+  const nextItem = newItems[overItemIndex + 1];
+  const dragDepth = getDragDepth(dragOffset, indentationWidth);
+  const projectedDepth = activeItem.depth + dragDepth;
+  const maxDepth = getMaxDepth({
+    previousItem,
+  });
+  const minDepth = getMinDepth({ nextItem });
+  let depth = projectedDepth;
+
+  if (projectedDepth >= maxDepth) {
+    depth = maxDepth;
+  } else if (projectedDepth < minDepth) {
+    depth = minDepth;
+  }
+
+  return { depth, maxDepth, minDepth, parentId: getParentId() };
+
+  function getParentId() {
+    if (depth === 0 || !previousItem) {
+      return null;
+    }
+
+    if (depth <= previousItem.depth) {
+      return previousItem.parentId;
+    }
+
+    if (depth > previousItem.depth) {
+      return previousItem.id;
+    }
+
+    const newParent = newItems
+      .slice(0, overItemIndex)
+      .reverse()
+      .find((item) => item.depth === depth)?.parentId;
+
+    return newParent ?? null;
+  }
+}
+
+function getMaxDepth({ previousItem }) {
+  const blocksLayoutFieldname = getBlocksLayoutFieldname(
+    previousItem?.data || {},
+  );
+  if (previousItem) {
+    return isArray(previousItem.data?.[blocksLayoutFieldname]?.items)
+      ? previousItem.depth + 1
+      : previousItem.depth;
+  }
+
+  return 0;
+}
+
+function getMinDepth({ nextItem }) {
+  if (nextItem) {
+    return nextItem.depth;
+  }
+
+  return 0;
+}
+
+function flatten(items = [], parentId = null, depth = 0) {
+  return items.reduce((acc, item, index) => {
+    return [
+      ...acc,
+      { ...item, parentId, depth, index },
+      ...flatten(item.children, item.id, depth + 1),
+    ];
+  }, []);
+}
+
+export function flattenTree(items) {
+  return flatten(items);
+}
+
+export function findItem(items, itemId) {
+  return items.find(({ id }) => id === itemId);
+}
+
+export function removeChildrenOf(items, ids) {
+  const excludeParentIds = [...ids];
+
+  return items.filter((item) => {
+    if (item.parentId && excludeParentIds.includes(item.parentId)) {
+      if (item.children.length) {
+        excludeParentIds.push(item.id);
+      }
+      return false;
+    }
+
+    return true;
+  });
+}

package/src/components/manage/Blocks/Block/Settings.jsx

@@ -1,9 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { injectIntl } from 'react-intl';
-import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
+import { BlockDataForm } from '@plone/volto/components/manage/Form';
 
-const Settings = ({ data, block, onChangeBlock, schema }) => {
+const Settings = ({
+  data,
+  block,
+  onChangeBlock,
+  schema,
+  navRoot,
+  contentType,
+}) => {
   return (
     <BlockDataForm
       schema={schema}
@@ -17,6 +24,8 @@ const Settings = ({ data, block, onChangeBlock, schema }) => {
       onChangeBlock={onChangeBlock}
       formData={data}
       applySchemaEnhancers={false}
+      navRoot={navRoot}
+      contentType={contentType}
     />
   );
 };

package/src/components/manage/Blocks/Block/Settings.test.jsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import Settings from './Settings';
 import { render } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
 import configureStore from 'redux-mock-store';
 import config from '@plone/volto/registry';
 import { Provider } from 'react-intl-redux';
 
+jest.mock('@plone/volto/components/manage/Form');
+
 const mockStore = configureStore();
 
 const withStateManagement =