@contentful/field-editor-reference 5.3.3 → 5.4.0

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.4.0](https://github.com/contentful/field-editors/compare/@contentful/field-editor-reference@5.3.3...@contentful/field-editor-reference@5.4.0) (2022-11-02)
+
+### Features
+
+- isBeingDragged multiple reference field [TOL-361] ([#1271](https://github.com/contentful/field-editors/issues/1271)) ([0819192](https://github.com/contentful/field-editors/commit/08191922e44283697f6cf04f099e55f7269cfdeb))
+
 ## [5.3.3](https://github.com/contentful/field-editors/compare/@contentful/field-editor-reference@5.3.2...@contentful/field-editor-reference@5.3.3) (2022-10-11)
 
 ### Bug Fixes

package/dist/common/MultipleReferenceEditor.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
+import { SortEndHandler, SortStartHandler } from 'react-sortable-hoc';
 import { ReferenceValue, ContentEntityType, ContentType } from '../types';
 import { ReferenceEditorProps } from './ReferenceEditor';
-import { SortEndHandler, SortStartHandler } from 'react-sortable-hoc';
 declare type ChildProps = {
     entityType: ContentEntityType;
     items: ReferenceValue[];
@@ -15,6 +15,7 @@ declare type ChildProps = {
 export declare function MultipleReferenceEditor(props: ReferenceEditorProps & {
     entityType: ContentEntityType;
     children: (props: ReferenceEditorProps & ChildProps) => React.ReactElement;
+    setIndexToUpdate?: React.Dispatch<React.SetStateAction<number | undefined>>;
 }): JSX.Element;
 export declare namespace MultipleReferenceEditor {
     var defaultProps: {

package/dist/common/ReferenceEditor.d.ts

@@ -26,6 +26,9 @@ export interface ReferenceEditorProps {
             bulkEditing?: boolean;
         };
     };
+    updateBeforeSortStart?: ({ index }: {
+        index: number;
+    }) => void;
 }
 export declare type CustomActionProps = LinkActionsProps;
 export declare function ReferenceEditor<T>(props: ReferenceEditorProps & {

package/dist/common/customCardTypes.d.ts

@@ -1,5 +1,5 @@
-import { Asset, ContentType, Entry, RenderDragFn } from '../types';
 import * as React from 'react';
+import { Asset, ContentType, Entry, RenderDragFn } from '../types';
 import { CustomActionProps } from './ReferenceEditor';
 export declare type MissingEntityCardProps = {
     defaultCard: React.ReactElement;
@@ -25,4 +25,5 @@ export declare type CustomEntityCardProps = {
     onRemove?: () => void;
     onMoveTop?: () => void;
     onMoveBottom?: () => void;
+    isBeingDragged?: boolean;
 };

package/dist/entries/WrappedEntryCard/FetchingWrappedEntryCard.d.ts

@@ -13,5 +13,6 @@ export declare type EntryCardReferenceEditorProps = ReferenceEditorProps & {
     onMoveTop?: () => void;
     onMoveBottom?: () => void;
     renderCustomMissingEntityCard?: RenderCustomMissingEntityCard;
+    isBeingDragged?: boolean;
 };
 export declare function FetchingWrappedEntryCard(props: EntryCardReferenceEditorProps): JSX.Element;

package/dist/field-editor-reference.cjs.development.js

@@ -3185,7 +3185,8 @@ function FetchingWrappedEntryCard(props) {
       onEdit: onEdit,
       onRemove: onRemoveEntry,
       onMoveTop: props.onMoveTop,
-      onMoveBottom: props.onMoveBottom
+      onMoveBottom: props.onMoveBottom,
+      isBeingDragged: props.isBeingDragged
     };
     var hasCardEditActions = props.hasCardEditActions,
         hasCardMoveActions = props.hasCardMoveActions,
@@ -3274,7 +3275,8 @@ var nullableValue = {
 
 function Editor$1(props) {
   var setValue = props.setValue,
-      entityType = props.entityType;
+      entityType = props.entityType,
+      setIndexToUpdate = props.setIndexToUpdate;
   var editorPermissions = useEditorPermissions(props);
   var items = React.useMemo(function () {
     return (props.items || []). // If null values have found their way into the persisted
@@ -3286,14 +3288,20 @@ function Editor$1(props) {
     });
   }, [props.items]);
   var onSortStart = React.useCallback(function (_, event) {
-    return event.preventDefault();
+    if (event instanceof MouseEvent) {
+      document.body.classList.add('grabbing');
+    }
+
+    event.preventDefault();
   }, []);
   var onSortEnd = React.useCallback(function (_ref) {
     var oldIndex = _ref.oldIndex,
         newIndex = _ref.newIndex;
     var newItems = arrayMove(items, oldIndex, newIndex);
     setValue(newItems);
-  }, [items, setValue]);
+    setIndexToUpdate && setIndexToUpdate(undefined);
+    document.body.classList.remove('grabbing');
+  }, [items, setIndexToUpdate, setValue]);
   var onMove = React.useCallback(function (oldIndex, newIndex) {
     var newItems = arrayMove(items, oldIndex, newIndex);
     setValue(newItems);
@@ -3395,18 +3403,29 @@ function SortableLinkList(props) {
 }
 
 function MultipleEntryReferenceEditor(props) {
+  var _React$useState = React.useState(undefined),
+      indexToUpdate = _React$useState[0],
+      setIndexToUpdate = _React$useState[1];
+
+  var updateBeforeSortStart = function updateBeforeSortStart(_ref) {
+    var index = _ref.index;
+    setIndexToUpdate(index);
+  };
+
   return React.createElement(MultipleReferenceEditor, _extends({}, props, {
-    entityType: "Entry"
+    entityType: "Entry",
+    setIndexToUpdate: setIndexToUpdate
   }), function (childrenProps) {
     return React.createElement(SortableLinkList, _extends({}, childrenProps, {
       axis: "y",
-      useDragHandle: true
-    }), function (_ref) {
-      var items = _ref.items,
-          item = _ref.item,
-          index = _ref.index,
-          isDisabled = _ref.isDisabled,
-          DragHandle = _ref.DragHandle;
+      useDragHandle: true,
+      updateBeforeSortStart: updateBeforeSortStart
+    }), function (_ref2) {
+      var items = _ref2.items,
+          item = _ref2.item,
+          index = _ref2.index,
+          isDisabled = _ref2.isDisabled,
+          DragHandle = _ref2.DragHandle;
       var lastIndex = items.length - 1;
       return React.createElement(FetchingWrappedEntryCard, _extends({}, childrenProps, {
         key: item.sys.id + "-" + index,
@@ -3425,7 +3444,8 @@ function MultipleEntryReferenceEditor(props) {
         onMoveBottom: index !== lastIndex ? function () {
           return childrenProps.onMove(index, lastIndex);
         } : undefined,
-        renderDragHandle: DragHandle
+        renderDragHandle: DragHandle,
+        isBeingDragged: index === indexToUpdate
       }));
     });
   });