@plone/volto 18.0.0-alpha.9 → 18.0.0

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

@@ -0,0 +1,369 @@
+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,
+  errors,
+}) {
+  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}
+            errors={errors?.[id] || {}}
+          />
+        ))}
+        {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,7 +1,7 @@
 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,

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 =

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

@@ -19,7 +19,7 @@ const StyleWrapper = (props) => {
     classNames,
   });
 
-  style = buildStyleObjectFromData(data.styles);
+  style = buildStyleObjectFromData(data);
 
   const rewrittenChildren = React.Children.map(children, (child) => {
     if (React.isValidElement(child)) {

package/src/components/manage/Blocks/Container/Data.jsx

@@ -1,9 +1,16 @@
 import { useIntl } from 'react-intl';
-import { BlockDataForm } from '@plone/volto/components';
+import { BlockDataForm } from '@plone/volto/components/manage/Form';
 
 const ContainerData = (props) => {
-  const { block, blocksConfig, data, onChangeBlock, navRoot, contentType } =
-    props;
+  const {
+    block,
+    blocksConfig,
+    blocksErrors,
+    data,
+    onChangeBlock,
+    navRoot,
+    contentType,
+  } = props;
   const intl = useIntl();
 
   const schema = blocksConfig[data['@type']].blockSchema({ intl });
@@ -28,6 +35,7 @@ const ContainerData = (props) => {
       blocksConfig={blocksConfig}
       navRoot={navRoot}
       contentType={contentType}
+      errors={blocksErrors}
     />
   );
 };

package/src/components/manage/Blocks/Container/Edit.jsx

@@ -1,7 +1,8 @@
 import { useState } from 'react';
 import { useIntl } from 'react-intl';
 import { pickBy } from 'lodash';
-import { BlocksForm, SidebarPortal } from '@plone/volto/components';
+import { SidebarPortal } from '@plone/volto/components';
+import { BlocksForm } from '@plone/volto/components/manage/Form';
 import PropTypes from 'prop-types';
 import ContainerData from './Data';
 import DefaultEditBlockWrapper from './EditBlockWrapper';
@@ -128,6 +129,7 @@ const ContainerBlockEdit = (props) => {
         blocksConfig={allowedBlocksConfig}
         title={data.placeholder}
         isContainer
+        isMainForm={false}
         stopPropagation={selectedBlock}
         disableAddBlockOnEnterKey
         onSelectBlock={(id) => {

package/src/components/manage/Blocks/Container/NewBlockAddButton.jsx

@@ -5,7 +5,7 @@ import { BlockChooser, Icon } from '@plone/volto/components';
 import { useDetectClickOutside } from '@plone/volto/helpers';
 import addSVG from '@plone/volto/icons/add.svg';
 import { usePopper } from 'react-popper';
-import { Portal } from 'react-portal';
+import { createPortal } from 'react-dom';
 
 const messages = defineMessages({
   addBlock: {
@@ -59,24 +59,25 @@ const NewBlockAddButton = (props) => {
           <Icon name={addSVG} className="circled" size="24px" />
         </Button>
       </Ref>
-      {isOpenMenu ? (
-        <Portal node={document.getElementById('body')}>
-          <div
-            ref={setPopperElement}
-            style={styles.popper}
-            {...attributes.popper}
-            className="container-chooser-wrapper"
-          >
-            <BlockChooser
-              onMutateBlock={onMutateBlock}
-              currentBlock={block}
-              showRestricted
-              blocksConfig={blocksConfig}
-              ref={blockChooserRef}
-            />
-          </div>
-        </Portal>
-      ) : null}
+      {isOpenMenu
+        ? createPortal(
+            <div
+              ref={setPopperElement}
+              style={styles.popper}
+              {...attributes.popper}
+              className="container-chooser-wrapper"
+            >
+              <BlockChooser
+                onMutateBlock={onMutateBlock}
+                currentBlock={block}
+                showRestricted
+                blocksConfig={blocksConfig}
+                ref={blockChooserRef}
+              />
+            </div>,
+            document.body,
+          )
+        : null}
     </>
   );
 };