Simplify dnd context

packages/strapi-plugin-content-manager/admin/src/components/DragLayer/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { useDragLayer } from 'react-dnd';
+import { LayoutDndProvider } from '../../contexts/LayoutDnd';
 
 import ItemTypes from '../../utils/ItemTypes';
 
@@ -87,14 +88,16 @@ const CustomDragLayer = () => {
   }
 
   return (
-    <div style={layerStyles}>
+    <LayoutDndProvider>
-      <div
+      <div style={layerStyles}>
-        style={getItemStyles(initialOffset, currentOffset, mouseOffset)}
+        <div
-        className="col-md-2"
+          style={getItemStyles(initialOffset, currentOffset, mouseOffset)}
-      >
+          className="col-md-2"
-        {renderItem()}
+        >
+          {renderItem()}
+        </div>
       </div>
-    </div>
+    </LayoutDndProvider>
   );
 };
 

packages/strapi-plugin-content-manager/admin/src/components/DraggedField/index.js

@@ -5,6 +5,7 @@ import { isEmpty } from 'lodash';
 import { FormattedMessage } from 'react-intl';
 import { Grab, GrabLarge, Pencil, Remove } from '@buffetjs/icons';
 import pluginId from '../../pluginId';
+import { useLayoutDnd } from '../../contexts/LayoutDnd';
 import GrabWrapper from './GrabWrapper';
 import Link from './Link';
 import NameWrapper from './NameWrapper';
@@ -20,7 +21,6 @@ const DraggedField = forwardRef(
       goTo,
       componentUid,
       isDragging,
-      isDraggingSibling,
       isHidden,
       isOverDynamicZone,
       isSub,
@@ -35,6 +35,7 @@ const DraggedField = forwardRef(
     },
     ref
   ) => {
+    const { isDraggingSibling } = useLayoutDnd();
     const [isOverRemove, setIsOverRemove] = useState(false);
     const [isOverEditBlock, setIsOverEditBlock] = useState(false);
     const opacity = isDragging ? 0.2 : 1;
@@ -160,7 +161,6 @@ DraggedField.defaultProps = {
   goTo: () => {},
   componentUid: null,
   isDragging: false,
-  isDraggingSibling: false,
   isHidden: false,
   isOverDynamicZone: false,
   isSub: false,
@@ -179,7 +179,6 @@ DraggedField.propTypes = {
   goTo: PropTypes.func,
   componentUid: PropTypes.string,
   isDragging: PropTypes.bool,
-  isDraggingSibling: PropTypes.bool,
   isHidden: PropTypes.bool,
   isOverDynamicZone: PropTypes.bool,
   isSub: PropTypes.bool,

packages/strapi-plugin-content-manager/admin/src/components/DraggedFieldWithPreview/index.js

@@ -17,7 +17,6 @@ const DraggedFieldWithPreview = forwardRef(
       componentLayouts,
       dynamicZoneComponents,
       isDragging,
-      isDraggingSibling,
       label,
       name,
       onClickEdit,
@@ -83,7 +82,6 @@ const DraggedFieldWithPreview = forwardRef(
                 goTo={goTo}
                 componentUid={componentUid}
                 isHidden={isHidden}
-                isDraggingSibling={isDraggingSibling}
                 isOverDynamicZone={isOverDynamicZone}
                 label={label}
                 name={name}
@@ -173,7 +171,6 @@ DraggedFieldWithPreview.defaultProps = {
   componentUid: null,
   dynamicZoneComponents: [],
   isDragging: false,
-  isDraggingSibling: false,
   label: '',
   onClickEdit: () => {},
   onClickRemove: () => {},
@@ -191,7 +188,6 @@ DraggedFieldWithPreview.propTypes = {
   componentUid: PropTypes.string,
   dynamicZoneComponents: PropTypes.array,
   isDragging: PropTypes.bool,
-  isDraggingSibling: PropTypes.bool,
   label: PropTypes.string,
   name: PropTypes.string.isRequired,
   onClickEdit: PropTypes.func,

packages/strapi-plugin-content-manager/admin/src/components/FieldsReorder/Item.js

@@ -12,14 +12,12 @@ import ItemTypes from '../../utils/ItemTypes';
 const Item = ({
   componentUid,
   dynamicZoneComponents,
-  isDraggingSibling,
   itemIndex,
   moveItem,
   moveRow,
   name,
   removeField,
   rowIndex,
-  setIsDraggingSibling,
   size,
   type,
 }) => {
@@ -29,6 +27,7 @@ const Item = ({
     metadatas,
     setEditFieldToSelect,
     selectedItemName,
+    setIsDraggingSibling,
   } = useLayoutDnd();
   const dragRef = useRef(null);
   const dropRef = useRef(null);
@@ -214,7 +213,6 @@ const Item = ({
       componentLayouts={componentLayouts}
       dynamicZoneComponents={dynamicZoneComponents}
       isDragging={isDragging}
-      isDraggingSibling={isDraggingSibling}
       label={get(metadatas, [name, 'edit', 'label'], '')}
       name={name}
       onClickEdit={setEditFieldToSelect}
@@ -235,22 +233,18 @@ const Item = ({
 Item.defaultProps = {
   componentUid: '',
   dynamicZoneComponents: [],
-  isDraggingSibling: false,
-  setIsDraggingSibling: () => {},
   type: 'string',
 };
 
 Item.propTypes = {
   componentUid: PropTypes.string,
   dynamicZoneComponents: PropTypes.array,
-  isDraggingSibling: PropTypes.bool,
   itemIndex: PropTypes.number.isRequired,
   moveItem: PropTypes.func.isRequired,
   moveRow: PropTypes.func.isRequired,
   name: PropTypes.string.isRequired,
   removeField: PropTypes.func.isRequired,
   rowIndex: PropTypes.number.isRequired,
-  setIsDraggingSibling: PropTypes.func,
   size: PropTypes.number.isRequired,
   type: PropTypes.string,
 };

packages/strapi-plugin-content-manager/admin/src/components/FieldsReorder/index.js

@@ -1,4 +1,4 @@
-import React, { memo, useCallback, useState } from 'react';
+import React, { memo, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { get } from 'lodash';
 
@@ -19,7 +19,7 @@ const FieldsReorder = ({ className }) => {
     onAddData,
     removeField,
   } = useLayoutDnd();
-  const [isDraggingSibling, setIsDraggingSibling] = useState(false);
+
   const getComponent = useCallback(
     attributeName => {
       return get(attributes, [attributeName, 'component'], '');
@@ -64,7 +64,6 @@ const FieldsReorder = ({ className }) => {
                   <Item
                     componentUid={getComponent(name)}
                     dynamicZoneComponents={getDynamicZoneComponents(name)}
-                    isDraggingSibling={isDraggingSibling}
                     itemIndex={index}
                     key={name}
                     moveRow={moveRow}
@@ -72,7 +71,6 @@ const FieldsReorder = ({ className }) => {
                     name={name}
                     removeField={removeField}
                     rowIndex={rowIndex}
-                    setIsDraggingSibling={setIsDraggingSibling}
                     size={size}
                     type={getType(name)}
                   />

packages/strapi-plugin-content-manager/admin/src/components/SortableList/Item.js

@@ -9,19 +9,13 @@ import DraggedFieldWithPreview from '../DraggedFieldWithPreview';
 
 import ItemTypes from '../../utils/ItemTypes';
 
-const Item = ({
+const Item = ({ index, move, name, removeItem }) => {
-  index,
-  isDraggingSibling,
-  move,
-  name,
-  removeItem,
-  setIsDraggingSibling,
-}) => {
   const {
     goTo,
     metadatas,
     selectedItemName,
     setEditFieldToSelect,
+    setIsDraggingSibling,
   } = useLayoutDnd();
   const dragRef = useRef(null);
   const dropRef = useRef(null);
@@ -98,7 +92,6 @@ const Item = ({
   return (
     <DraggedFieldWithPreview
       isDragging={isDragging}
-      isDraggingSibling={isDraggingSibling}
       label={get(metadatas, [name, 'edit', 'label'], '')}
       name={name}
       onClickEdit={() => setEditFieldToSelect(name)}
@@ -118,18 +111,14 @@ const Item = ({
 };
 
 Item.defaultProps = {
-  isDraggingSibling: false,
   move: () => {},
-  setIsDraggingSibling: () => {},
 };
 
 Item.propTypes = {
   index: PropTypes.number.isRequired,
-  isDraggingSibling: PropTypes.bool,
   move: PropTypes.func,
   name: PropTypes.string.isRequired,
   removeItem: PropTypes.func.isRequired,
-  setIsDraggingSibling: PropTypes.func,
 };
 
 export default Item;

packages/strapi-plugin-content-manager/admin/src/components/SortableList/index.js

@@ -1,4 +1,4 @@
-import React, { memo, useState } from 'react';
+import React, { memo } from 'react';
 import PropTypes from 'prop-types';
 import { useLayoutDnd } from '../../contexts/LayoutDnd';
 
@@ -8,7 +8,6 @@ import Item from './Item';
 
 const SortableList = ({ addItem, buttonData, moveItem, removeItem }) => {
   const { relationsLayout } = useLayoutDnd();
-  const [isDraggingSibling, setIsDraggingSibling] = useState(false);
 
   return (
     <div className="col-4">
@@ -25,12 +24,10 @@ const SortableList = ({ addItem, buttonData, moveItem, removeItem }) => {
           return (
             <Item
               index={index}
-              isDraggingSibling={isDraggingSibling}
               key={relationName}
               move={moveItem}
               name={relationName}
               removeItem={removeItem}
-              setIsDraggingSibling={setIsDraggingSibling}
             />
           );
         })}

packages/strapi-plugin-content-manager/admin/src/containers/EditSettingsView/index.js

@@ -43,6 +43,7 @@ const EditSettingsView = ({
   const { emitEvent } = useGlobalContext();
   const [reducerState, dispatch] = useReducer(reducer, initialState);
   const [isModalFormOpen, setIsModalFormOpen] = useState(false);
+  const [isDraggingSibling, setIsDraggingSibling] = useState(false);
 
   const fieldsReorderClassName = type === 'content-types' ? 'col-8' : 'col-12';
   const source = getQueryParameters(search, 'source');
@@ -132,8 +133,6 @@ const EditSettingsView = ({
           }
         );
 
-        console.log({ data });
-
         dispatch({
           type: 'GET_DATA_SUCCEEDED',
           data: data.contentType || data.component,
@@ -309,8 +308,9 @@ const EditSettingsView = ({
     <LayoutDndProvider
       attributes={getAttributes}
       buttonData={getEditRemainingFields()}
-      goTo={push}
       componentLayouts={componentLayouts}
+      goTo={push}
+      isDraggingSibling={isDraggingSibling}
       layout={getEditLayout()}
       metadatas={get(modifiedData, ['metadatas'], {})}
       moveItem={moveItem}
@@ -336,6 +336,7 @@ const EditSettingsView = ({
         });
         toggleModalForm();
       }}
+      setIsDraggingSibling={setIsDraggingSibling}
       selectedItemName={metaToEdit}
     >
       <SettingsViewWrapper

packages/strapi-plugin-content-manager/admin/src/containers/ListSettingsView/Label.js

@@ -4,20 +4,21 @@ import { useDrag, useDrop } from 'react-dnd';
 import { getEmptyImage } from 'react-dnd-html5-backend';
 import ItemTypes from '../../utils/ItemTypes';
 import DraggedField from '../../components/DraggedField';
+import { useLayoutDnd } from '../../contexts/LayoutDnd';
 
 const Label = ({
   count,
   index,
-  isDraggingSibling,
   label,
   move,
   name,
   onClick,
   onRemove,
   selectedItem,
-  setIsDraggingSibling,
 }) => {
   const ref = useRef(null);
+  const { setIsDraggingSibling } = useLayoutDnd();
+
   const [, drop] = useDrop({
     accept: ItemTypes.FIELD,
     hover(item) {
@@ -60,7 +61,6 @@ const Label = ({
       count={count}
       ref={ref}
       isDragging={isDragging}
-      isDraggingSibling={isDraggingSibling}
       label={label}
       name={name}
       onClick={onClick}
@@ -72,24 +72,20 @@ const Label = ({
 
 Label.defaultProps = {
   index: 0,
-  isDraggingSibling: false,
   label: '',
   move: () => {},
   selectedItem: '',
-  setIsDraggingSibling: () => {},
 };
 
 Label.propTypes = {
   count: PropTypes.number.isRequired,
   index: PropTypes.number,
-  isDraggingSibling: PropTypes.bool,
   label: PropTypes.string,
   move: PropTypes.func.isRequired,
   name: PropTypes.string.isRequired,
   onClick: PropTypes.func.isRequired,
   onRemove: PropTypes.func.isRequired,
   selectedItem: PropTypes.string,
-  setIsDraggingSibling: PropTypes.func,
 };
 
 export default Label;

packages/strapi-plugin-content-manager/admin/src/containers/ListSettingsView/index.js

@@ -13,7 +13,7 @@ import { useDrop } from 'react-dnd';
 import { DropdownItem } from 'reactstrap';
 import { Inputs as Input } from '@buffetjs/custom';
 import pluginId from '../../pluginId';
-
+import { LayoutDndProvider } from '../../contexts/LayoutDnd';
 import ItemTypes from '../../utils/ItemTypes';
 import getRequestUrl from '../../utils/getRequestUrl';
 import PopupForm from '../../components/PopupForm';
@@ -207,7 +207,10 @@ const ListSettingsView = ({ deleteLayout, location: { search }, slug }) => {
   );
 
   return (
-    <>
+    <LayoutDndProvider
+      isDraggingSibling={isDraggingSibling}
+      setIsDraggingSibling={setIsDraggingSibling}
+    >
       <SettingsViewWrapper
         getListDisplayedFields={getListDisplayedFields}
         inputs={forms}
@@ -321,7 +324,7 @@ const ListSettingsView = ({ deleteLayout, location: { search }, slug }) => {
         subHeaderContent={labelToEdit}
         type={get(getAttributes, [labelToEdit, 'type'], 'text')}
       />
-    </>
+    </LayoutDndProvider>
   );
 };
 

packages/strapi-plugin-content-manager/admin/src/contexts/LayoutDnd/index.js

@@ -51,10 +51,16 @@ LayoutDndProvider.defaultProps = {
   buttonData: [],
   goTo: () => {},
   layout: [],
+  isDraggingSibling: true,
   metadatas: {},
+  moveItem: () => {},
+  moveRow: () => {},
   onAddData: () => {},
   relationsLayout: [],
+  removeField: () => {},
+  selectedItemName: null,
   setEditFieldToSelect: () => {},
+  setIsDraggingSibling: () => {},
 };
 
 LayoutDndProvider.propTypes = {
@@ -64,11 +70,11 @@ LayoutDndProvider.propTypes = {
   goTo: PropTypes.func,
   layout: PropTypes.array,
   metadatas: PropTypes.object,
-  moveItem: PropTypes.func.isRequired,
+  moveItem: PropTypes.func,
-  moveRow: PropTypes.func.isRequired,
+  moveRow: PropTypes.func,
   onAddData: PropTypes.func,
   relationsLayout: PropTypes.array,
-  removeField: PropTypes.func.isRequired,
+  removeField: PropTypes.func,
-  selectedItemName: PropTypes.string.isRequired,
+  selectedItemName: PropTypes.string,
   setEditFieldToSelect: PropTypes.func,
 };