@plone/volto 19.0.0-alpha.32 → 19.0.0-alpha.34

package/src/components/manage/Contents/ContentsItem.jsx

@@ -90,228 +90,242 @@ export const ContentsItemComponent = ({
   onDelete,
   onMoveToTop,
   onMoveToBottom,
-  connectDragPreview,
-  connectDragSource,
-  connectDropTarget,
-  isDragging,
   order,
+  dndKitSortable,
+  dndKitUtilities,
 }) => {
   const intl = useIntl();
+  const { useSortable } = dndKitSortable;
+  const { CSS } = dndKitUtilities;
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({
+    id: item['@id'],
+    data: {
+      type: 'item',
+      id: item['@id'],
+    },
+  });
 
-  return connectDropTarget(
-    connectDragPreview(
-      <tr
-        key={item['@id']}
-        className={cx('', { 'dragging-row': isDragging })}
-        aria-label={item['@id']}
-      >
-        <Table.Cell className={cx('', { 'dragging-cell': isDragging })}>
-          {connectDragSource(
-            <div style={{ display: 'inline-block' }}>
-              <Button icon basic>
-                <Icon
-                  name={dragSVG}
-                  size="20px"
-                  color="#878f93"
-                  className="content drag handle"
-                />
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  };
+
+  return (
+    <tr
+      key={item['@id']}
+      ref={setNodeRef}
+      style={style}
+      className={cx('', { 'dragging-row': isDragging })}
+      aria-label={item['@id']}
+    >
+      <Table.Cell className={cx('', { 'dragging-cell': isDragging })}>
+        <div style={{ display: 'inline-block' }}>
+          <Button icon basic {...attributes} {...listeners}>
+            <Icon
+              name={dragSVG}
+              size="20px"
+              color="#878f93"
+              className="content drag handle"
+            />
+          </Button>
+        </div>
+      </Table.Cell>
+      <Table.Cell className={cx('', { 'dragging-cell': isDragging })}>
+        {selected ? (
+          <Button
+            icon
+            basic
+            aria-label="Unchecked"
+            onClick={(e) => onClick(e, item['@id'])}
+          >
+            <Icon
+              name={checkboxCheckedSVG}
+              color="#007eb1"
+              size="24px"
+              className="checked"
+            />
+          </Button>
+        ) : (
+          <Button
+            icon
+            basic
+            aria-label="Checked"
+            onClick={(e) => onClick(e, item['@id'])}
+          >
+            <Icon
+              name={checkboxUncheckedSVG}
+              color="#826a6a"
+              size="24px"
+              className="unchecked"
+            />
+          </Button>
+        )}
+      </Table.Cell>
+      <Table.Cell className={cx('', { 'dragging-cell': isDragging })}>
+        <Link
+          className="icon-align-name"
+          to={`${item['@id']}${item.is_folderish ? '/contents' : ''}`}
+        >
+          <div className="expire-align">
+            <Icon
+              name={getContentIcon(item['@type'], item.is_folderish)}
+              size="20px"
+              className="icon-margin"
+              color="#878f93"
+              title={item['Type'] || item['@type']}
+            />{' '}
+            <span title={item.title}> {item.title}</span>
+          </div>
+          {item.ExpirationDate !== 'None' &&
+            new Date(item.ExpirationDate).getTime() < new Date().getTime() && (
+              <Button className="button-margin expired-past" size="mini">
+                <FormattedMessage id="Expired" defaultMessage="Expired" />
               </Button>
-            </div>,
-          )}
-        </Table.Cell>
-        <Table.Cell className={cx('', { 'dragging-cell': isDragging })}>
-          {selected ? (
-            <Button
-              icon
-              basic
-              aria-label="Unchecked"
-              onClick={(e) => onClick(e, item['@id'])}
-            >
-              <Icon
-                name={checkboxCheckedSVG}
-                color="#007eb1"
-                size="24px"
-                className="checked"
-              />
-            </Button>
-          ) : (
-            <Button
-              icon
-              basic
-              aria-label="Checked"
-              onClick={(e) => onClick(e, item['@id'])}
-            >
-              <Icon
-                name={checkboxUncheckedSVG}
-                color="#826a6a"
-                size="24px"
-                className="unchecked"
+            )}
+          {item.EffectiveDate !== 'None' &&
+            new Date(item.EffectiveDate).getTime() > new Date().getTime() && (
+              <Button className="button-margin effective-future" size="mini">
+                <FormattedMessage id="Scheduled" defaultMessage="Scheduled" />
+              </Button>
+            )}
+          {item.is_working_copy && (
+            <Button className="button-margin working-copy" size="mini">
+              <FormattedMessage
+                id="Working copy"
+                defaultMessage="Working copy"
               />
             </Button>
           )}
-        </Table.Cell>
-        <Table.Cell className={cx('', { 'dragging-cell': isDragging })}>
-          <Link
-            className="icon-align-name"
-            to={`${item['@id']}${item.is_folderish ? '/contents' : ''}`}
-          >
-            <div className="expire-align">
-              <Icon
-                name={getContentIcon(item['@type'], item.is_folderish)}
-                size="20px"
-                className="icon-margin"
-                color="#878f93"
-                title={item['Type'] || item['@type']}
-              />{' '}
-              <span title={item.title}> {item.title}</span>
+        </Link>
+      </Table.Cell>
+      {map(indexes, (index) => (
+        <Table.Cell
+          className={cx('', { 'dragging-cell': isDragging })}
+          key={index.id}
+        >
+          {index.type === 'boolean' &&
+            (item[index.id] ? (
+              <FormattedMessage id="Yes" defaultMessage="Yes" />
+            ) : (
+              <FormattedMessage id="No" defaultMessage="No" />
+            ))}
+          {index.type === 'string' &&
+            index.id !== 'review_state' &&
+            item[index.id]}
+          {index.id === 'review_state' && (
+            <div>
+              <span>
+                <Circle color={getColor(item[index.id])} size="15px" />
+              </span>
+              {messages[item[index.id]]
+                ? intl.formatMessage(messages[item[index.id]])
+                : item['review_title'] ||
+                  item['review_state'] ||
+                  intl.formatMessage(messages.no_workflow_state)}
             </div>
-            {item.ExpirationDate !== 'None' &&
-              new Date(item.ExpirationDate).getTime() <
-                new Date().getTime() && (
-                <Button className="button-margin expired-past" size="mini">
-                  <FormattedMessage id="Expired" defaultMessage="Expired" />
-                </Button>
-              )}
-            {item.EffectiveDate !== 'None' &&
-              new Date(item.EffectiveDate).getTime() > new Date().getTime() && (
-                <Button className="button-margin effective-future" size="mini">
-                  <FormattedMessage id="Scheduled" defaultMessage="Scheduled" />
-                </Button>
+          )}
+          {index.type === 'date' && (
+            <>
+              {item[index?.id] && item[index.id] !== 'None' ? (
+                <FormattedDate date={item[index.id]} />
+              ) : (
+                intl.formatMessage(messages.none)
               )}
-            {item.is_working_copy && (
-              <Button className="button-margin working-copy" size="mini">
-                <FormattedMessage
-                  id="Working copy"
-                  defaultMessage="Working copy"
-                />
-              </Button>
-            )}
-          </Link>
+            </>
+          )}
+          {index.type === 'array' && <span>{item[index.id]?.join(', ')}</span>}
         </Table.Cell>
-        {map(indexes, (index) => (
-          <Table.Cell
-            className={cx('', { 'dragging-cell': isDragging })}
-            key={index.id}
-          >
-            {index.type === 'boolean' &&
-              (item[index.id] ? (
-                <FormattedMessage id="Yes" defaultMessage="Yes" />
-              ) : (
-                <FormattedMessage id="No" defaultMessage="No" />
-              ))}
-            {index.type === 'string' &&
-              index.id !== 'review_state' &&
-              item[index.id]}
-            {index.id === 'review_state' && (
-              <div>
-                <span>
-                  <Circle color={getColor(item[index.id])} size="15px" />
-                </span>
-                {messages[item[index.id]]
-                  ? intl.formatMessage(messages[item[index.id]])
-                  : item['review_title'] ||
-                    item['review_state'] ||
-                    intl.formatMessage(messages.no_workflow_state)}
-              </div>
-            )}
-            {index.type === 'date' && (
-              <>
-                {item[index?.id] && item[index.id] !== 'None' ? (
-                  <FormattedDate date={item[index.id]} />
-                ) : (
-                  intl.formatMessage(messages.none)
-                )}
-              </>
-            )}
-            {index.type === 'array' && (
-              <span>{item[index.id]?.join(', ')}</span>
-            )}
-          </Table.Cell>
-        ))}
-        <Table.Cell
-          className={cx('', { 'dragging-cell': isDragging })}
-          textAlign="right"
+      ))}
+      <Table.Cell
+        className={cx('', { 'dragging-cell': isDragging })}
+        textAlign="right"
+      >
+        <Popup
+          menu={true}
+          position="bottom right"
+          flowing={true}
+          basic={true}
+          on="click"
+          popper={{
+            className: 'dropdown-popup',
+          }}
+          trigger={
+            <Icon
+              name={moreSVG}
+              className="dropdown-popup-trigger"
+              size="24px"
+              color="#007eb1"
+            />
+          }
         >
-          <Popup
-            menu={true}
-            position="bottom right"
-            flowing={true}
-            basic={true}
-            on="click"
-            popper={{
-              className: 'dropdown-popup',
-            }}
-            trigger={
-              <Icon
-                name={moreSVG}
-                className="dropdown-popup-trigger"
-                size="24px"
-                color="#007eb1"
+          <Menu vertical borderless fluid>
+            <Link className="item icon-align" to={`${item['@id']}/edit`}>
+              <Icon name={editingSVG} color="#007eb1" size="24px" />{' '}
+              <FormattedMessage id="Edit" defaultMessage="Edit" />
+            </Link>
+            <Link className="item right-dropdown icon-align" to={item['@id']}>
+              <Icon name={showSVG} color="#007eb1" size="24px" />{' '}
+              <FormattedMessage id="View" defaultMessage="View" />
+            </Link>
+            <Divider />
+            <Menu.Item
+              onClick={onCut}
+              value={item['@id']}
+              className="right-dropdown icon-align"
+            >
+              <Icon name={cutSVG} color="#007eb1" size="24px" />{' '}
+              <FormattedMessage id="Cut" defaultMessage="Cut" />
+            </Menu.Item>
+            <Menu.Item
+              onClick={onCopy}
+              value={item['@id']}
+              className="right-dropdown icon-align"
+            >
+              <Icon name={copySVG} color="#007eb1" size="24px" />{' '}
+              <FormattedMessage id="Copy" defaultMessage="Copy" />
+            </Menu.Item>
+            <Menu.Item
+              onClick={onDelete}
+              value={item['@id']}
+              className="right-dropdown icon-align"
+            >
+              <Icon name={deleteSVG} color="#e40166" size="24px" />{' '}
+              <FormattedMessage id="Delete" defaultMessage="Delete" />
+            </Menu.Item>
+            <Divider />
+            <Menu.Item
+              onClick={onMoveToTop}
+              value={order}
+              className="right-dropdown icon-align"
+            >
+              <Icon name={moveUpSVG} color="#007eb1" size="24px" />{' '}
+              <FormattedMessage
+                id="Move to top of folder"
+                defaultMessage="Move to top of folder"
               />
-            }
-          >
-            <Menu vertical borderless fluid>
-              <Link className="item icon-align" to={`${item['@id']}/edit`}>
-                <Icon name={editingSVG} color="#007eb1" size="24px" />{' '}
-                <FormattedMessage id="Edit" defaultMessage="Edit" />
-              </Link>
-              <Link className="item right-dropdown icon-align" to={item['@id']}>
-                <Icon name={showSVG} color="#007eb1" size="24px" />{' '}
-                <FormattedMessage id="View" defaultMessage="View" />
-              </Link>
-              <Divider />
-              <Menu.Item
-                onClick={onCut}
-                value={item['@id']}
-                className="right-dropdown icon-align"
-              >
-                <Icon name={cutSVG} color="#007eb1" size="24px" />{' '}
-                <FormattedMessage id="Cut" defaultMessage="Cut" />
-              </Menu.Item>
-              <Menu.Item
-                onClick={onCopy}
-                value={item['@id']}
-                className="right-dropdown icon-align"
-              >
-                <Icon name={copySVG} color="#007eb1" size="24px" />{' '}
-                <FormattedMessage id="Copy" defaultMessage="Copy" />
-              </Menu.Item>
-              <Menu.Item
-                onClick={onDelete}
-                value={item['@id']}
-                className="right-dropdown icon-align"
-              >
-                <Icon name={deleteSVG} color="#e40166" size="24px" />{' '}
-                <FormattedMessage id="Delete" defaultMessage="Delete" />
-              </Menu.Item>
-              <Divider />
-              <Menu.Item
-                onClick={onMoveToTop}
-                value={order}
-                className="right-dropdown icon-align"
-              >
-                <Icon name={moveUpSVG} color="#007eb1" size="24px" />{' '}
-                <FormattedMessage
-                  id="Move to top of folder"
-                  defaultMessage="Move to top of folder"
-                />
-              </Menu.Item>
-              <Menu.Item
-                onClick={onMoveToBottom}
-                value={order}
-                className="right-dropdown icon-align"
-              >
-                <Icon name={moveDownSVG} color="#007eb1" size="24px" />{' '}
-                <FormattedMessage
-                  id="Move to bottom of folder"
-                  defaultMessage="Move to bottom of folder"
-                />
-              </Menu.Item>
-            </Menu>
-          </Popup>
-        </Table.Cell>
-      </tr>,
-    ),
+            </Menu.Item>
+            <Menu.Item
+              onClick={onMoveToBottom}
+              value={order}
+              className="right-dropdown icon-align"
+            >
+              <Icon name={moveDownSVG} color="#007eb1" size="24px" />{' '}
+              <FormattedMessage
+                id="Move to bottom of folder"
+                defaultMessage="Move to bottom of folder"
+              />
+            </Menu.Item>
+          </Menu>
+        </Popup>
+      </Table.Cell>
+    </tr>
   );
 };
 
@@ -340,75 +354,9 @@ ContentsItemComponent.propTypes = {
   onDelete: PropTypes.func.isRequired,
   onMoveToTop: PropTypes.func.isRequired,
   onMoveToBottom: PropTypes.func.isRequired,
-  connectDragPreview: PropTypes.func.isRequired,
-  connectDragSource: PropTypes.func.isRequired,
-  connectDropTarget: PropTypes.func.isRequired,
-  isDragging: PropTypes.bool.isRequired,
   order: PropTypes.number.isRequired,
-  onOrderItem: PropTypes.func.isRequired,
-};
-
-const DragDropConnector = (props) => {
-  const { DropTarget, DragSource } = props.reactDnd;
-
-  const DndConnectedContentsItem = React.useMemo(
-    () =>
-      DropTarget(
-        'item',
-        {
-          hover(props, monitor) {
-            const id = monitor.getItem().id;
-            const dragOrder = monitor.getItem().order;
-            const hoverOrder = props.order;
-
-            if (dragOrder === hoverOrder) {
-              return;
-            }
-
-            props.onOrderItem(id, dragOrder, hoverOrder - dragOrder, false);
-
-            monitor.getItem().order = hoverOrder;
-          },
-          drop(props, monitor) {
-            const id = monitor.getItem().id;
-            const dragOrder = monitor.getItem().startOrder;
-            const dropOrder = props.order;
-
-            if (dragOrder === dropOrder) {
-              return;
-            }
-
-            props.onOrderItem(id, dragOrder, dropOrder - dragOrder, true);
-
-            monitor.getItem().order = dropOrder;
-          },
-        },
-        (connect) => ({
-          connectDropTarget: connect.dropTarget(),
-        }),
-      )(
-        DragSource(
-          'item',
-          {
-            beginDrag(props) {
-              return {
-                id: props.item['@id'],
-                order: props.order,
-                startOrder: props.order,
-              };
-            },
-          },
-          (connect, monitor) => ({
-            connectDragSource: connect.dragSource(),
-            connectDragPreview: connect.dragPreview(),
-            isDragging: monitor.isDragging(),
-          }),
-        )(ContentsItemComponent),
-      ),
-    [DragSource, DropTarget],
-  );
-
-  return <DndConnectedContentsItem {...props} />;
 };
 
-export default injectLazyLibs('reactDnd')(DragDropConnector);
+export default injectLazyLibs(['dndKitSortable', 'dndKitUtilities'])(
+  ContentsItemComponent,
+);

package/src/components/manage/Contents/ContentsItem.test.jsx

@@ -4,10 +4,19 @@ import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { MemoryRouter } from 'react-router-dom';
 
-import { ContentsItemComponent as ContentsItem } from './ContentsItem';
+import ContentsItem from './ContentsItem';
 
 const mockStore = configureStore();
 
+vi.mock('@plone/volto/helpers/Loadable/Loadable');
+
+beforeAll(async () => {
+  const { __setLoadables } = await import(
+    '@plone/volto/helpers/Loadable/Loadable'
+  );
+  await __setLoadables();
+});
+
 describe('ContentsItem', () => {
   it('renders a contents item component', () => {
     const store = mockStore({
@@ -40,12 +49,7 @@ describe('ContentsItem', () => {
             onDelete={() => {}}
             onMoveToTop={() => {}}
             onMoveToBottom={() => {}}
-            onOrderItem={() => {}}
-            connectDragSource={(x) => x}
-            connectDragPreview={(x) => x}
-            connectDropTarget={(x) => x}
             order={1}
-            isDragging={false}
           />
         </MemoryRouter>
       </Provider>,