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

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

@@ -4,7 +4,7 @@ import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { MemoryRouter } from 'react-router-dom';
 
-import { __test__ as Contents } from './Contents';
+import { ContentsComponent as Contents } from './Contents';
 
 const mockStore = configureStore();
 

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

@@ -1,11 +1,6 @@
-/**
- * Contents index header component.
- * @module components/manage/Contents/ContentsIndexHeader
- */
-
 import React from 'react';
 import PropTypes from 'prop-types';
-import { injectIntl } from 'react-intl';
+import { useIntl } from 'react-intl';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 
 const widthValues = [
@@ -27,32 +22,52 @@ const widthValues = [
   'sixteen',
 ];
 
-/**
- * Contents index header component class.
- * @function ContentsIndexHeaderComponent
- * @returns {string} Markup of the component.
- */
 export const ContentsIndexHeaderComponent = ({
-  intl,
+  id,
   width,
   label,
-  connectDragSource,
-  connectDropTarget,
-  isDragging,
-}) =>
-  connectDropTarget(
-    connectDragSource(
-      <th
-        className={`${widthValues[width - 2]} wide`}
-        style={{ opacity: isDragging ? 0.5 : 1, cursor: 'move' }}
-      >
-        {intl.formatMessage({
-          id: label,
-          defaultMessage: label,
-        })}
-      </th>,
-    ),
+  dndKitSortable,
+  dndKitUtilities,
+}) => {
+  const intl = useIntl();
+
+  const { useSortable } = dndKitSortable;
+  const { CSS } = dndKitUtilities;
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({
+    id: `index:${id}`,
+    data: {
+      type: 'index',
+      indexId: id,
+    },
+  });
+
+  return (
+    <th
+      ref={setNodeRef}
+      className={`${widthValues[width - 2]} wide`}
+      style={{
+        transform: CSS.Transform.toString(transform),
+        transition,
+        opacity: isDragging ? 0.5 : 1,
+        cursor: 'move',
+      }}
+      {...attributes}
+      {...listeners}
+    >
+      {intl.formatMessage({
+        id: label,
+        defaultMessage: label,
+      })}
+    </th>
   );
+};
 
 /**
  * Property types.
@@ -60,60 +75,11 @@ export const ContentsIndexHeaderComponent = ({
  * @static
  */
 ContentsIndexHeaderComponent.propTypes = {
+  id: PropTypes.string.isRequired,
   width: PropTypes.number.isRequired,
   label: PropTypes.string.isRequired,
-  connectDragSource: PropTypes.func.isRequired,
-  connectDropTarget: PropTypes.func.isRequired,
-  isDragging: PropTypes.bool.isRequired,
-  order: PropTypes.number.isRequired,
-  onOrderIndex: PropTypes.func.isRequired,
-};
-
-const DragDropConnector = (props) => {
-  const { DropTarget, DragSource } = props.reactDnd;
-
-  const DndConnectedContentsIndexHeader = React.useMemo(
-    () =>
-      DropTarget(
-        'index',
-        {
-          hover(props, monitor) {
-            const dragOrder = monitor.getItem().order;
-            const hoverOrder = props.order;
-
-            if (dragOrder === hoverOrder) {
-              return;
-            }
-
-            props.onOrderIndex(dragOrder, hoverOrder - dragOrder);
-
-            monitor.getItem().order = hoverOrder;
-          },
-        },
-        (connect) => ({
-          connectDropTarget: connect.dropTarget(),
-        }),
-      )(
-        DragSource(
-          'index',
-          {
-            beginDrag(props) {
-              return {
-                id: props.label,
-                order: props.order,
-              };
-            },
-          },
-          (connect, monitor) => ({
-            connectDragSource: connect.dragSource(),
-            isDragging: monitor.isDragging(),
-          }),
-        )(injectIntl(ContentsIndexHeaderComponent)),
-      ),
-    [DragSource, DropTarget],
-  );
-
-  return <DndConnectedContentsIndexHeader {...props} />;
 };
 
-export default injectLazyLibs('reactDnd')(DragDropConnector);
+export default injectLazyLibs(['dndKitSortable', 'dndKitUtilities'])(
+  ContentsIndexHeaderComponent,
+);

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

@@ -8,6 +8,15 @@ import ContentsIndexHeader from './ContentsIndexHeader';
 
 const mockStore = configureStore([thunk]);
 
+vi.mock('@plone/volto/helpers/Loadable/Loadable');
+
+beforeAll(async () => {
+  const { __setLoadables } = await import(
+    '@plone/volto/helpers/Loadable/Loadable'
+  );
+  await __setLoadables();
+});
+
 describe('ContentsIndexHeader', () => {
   it('renders a contents titles component', () => {
     const store = mockStore({
@@ -19,11 +28,9 @@ describe('ContentsIndexHeader', () => {
     const component = renderer.create(
       <Provider store={store}>
         <ContentsIndexHeader
+          id="review_state"
           width={1}
           label="Review state"
-          onOrderIndex={() => {}}
-          connectDragSource={(x) => x}
-          connectDropTarget={(x) => x}
           order={1}
           isDragging={false}
         />