diff --git a/packages/strapi-plugin-content-manager/admin/src/components/DragLayer/index.js b/packages/strapi-plugin-content-manager/admin/src/components/DragLayer/index.js
index ce177214f8..3cde878926 100644
--- a/packages/strapi-plugin-content-manager/admin/src/components/DragLayer/index.js
+++ b/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 (
-
-
+
);
};
diff --git a/packages/strapi-plugin-content-manager/admin/src/components/DraggedField/index.js b/packages/strapi-plugin-content-manager/admin/src/components/DraggedField/index.js
index 52ff18c62e..86f810a106 100644
--- a/packages/strapi-plugin-content-manager/admin/src/components/DraggedField/index.js
+++ b/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,
diff --git a/packages/strapi-plugin-content-manager/admin/src/components/DraggedFieldWithPreview/index.js b/packages/strapi-plugin-content-manager/admin/src/components/DraggedFieldWithPreview/index.js
index 8198c7fe2d..b17723732f 100644
--- a/packages/strapi-plugin-content-manager/admin/src/components/DraggedFieldWithPreview/index.js
+++ b/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,
diff --git a/packages/strapi-plugin-content-manager/admin/src/components/FieldsReorder/Item.js b/packages/strapi-plugin-content-manager/admin/src/components/FieldsReorder/Item.js
index d2b731518d..847f1890dd 100644
--- a/packages/strapi-plugin-content-manager/admin/src/components/FieldsReorder/Item.js
+++ b/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,
};
diff --git a/packages/strapi-plugin-content-manager/admin/src/components/FieldsReorder/index.js b/packages/strapi-plugin-content-manager/admin/src/components/FieldsReorder/index.js
index 4dd6e8fe3b..50c282f75f 100644
--- a/packages/strapi-plugin-content-manager/admin/src/components/FieldsReorder/index.js
+++ b/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 }) => {
- {
name={name}
removeField={removeField}
rowIndex={rowIndex}
- setIsDraggingSibling={setIsDraggingSibling}
size={size}
type={getType(name)}
/>
diff --git a/packages/strapi-plugin-content-manager/admin/src/components/SortableList/Item.js b/packages/strapi-plugin-content-manager/admin/src/components/SortableList/Item.js
index dae0f6b8c1..f8ad4612fd 100644
--- a/packages/strapi-plugin-content-manager/admin/src/components/SortableList/Item.js
+++ b/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 = ({
- index,
- isDraggingSibling,
- move,
- name,
- removeItem,
- setIsDraggingSibling,
-}) => {
+const Item = ({ index, move, name, removeItem }) => {
const {
goTo,
metadatas,
selectedItemName,
setEditFieldToSelect,
+ setIsDraggingSibling,
} = useLayoutDnd();
const dragRef = useRef(null);
const dropRef = useRef(null);
@@ -98,7 +92,6 @@ const Item = ({
return (
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;
diff --git a/packages/strapi-plugin-content-manager/admin/src/components/SortableList/index.js b/packages/strapi-plugin-content-manager/admin/src/components/SortableList/index.js
index 52281f8afc..0cb0bfb26e 100644
--- a/packages/strapi-plugin-content-manager/admin/src/components/SortableList/index.js
+++ b/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 (
@@ -25,12 +24,10 @@ const SortableList = ({ addItem, buttonData, moveItem, removeItem }) => {
return (
);
})}
diff --git a/packages/strapi-plugin-content-manager/admin/src/containers/EditSettingsView/index.js b/packages/strapi-plugin-content-manager/admin/src/containers/EditSettingsView/index.js
index dc8553d199..ddfb00d9e1 100644
--- a/packages/strapi-plugin-content-manager/admin/src/containers/EditSettingsView/index.js
+++ b/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 = ({
{
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;
diff --git a/packages/strapi-plugin-content-manager/admin/src/containers/ListSettingsView/index.js b/packages/strapi-plugin-content-manager/admin/src/containers/ListSettingsView/index.js
index 467e78937a..7fef69e88a 100644
--- a/packages/strapi-plugin-content-manager/admin/src/containers/ListSettingsView/index.js
+++ b/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 (
- <>
+
{
subHeaderContent={labelToEdit}
type={get(getAttributes, [labelToEdit, 'type'], 'text')}
/>
- >
+
);
};
diff --git a/packages/strapi-plugin-content-manager/admin/src/contexts/LayoutDnd/index.js b/packages/strapi-plugin-content-manager/admin/src/contexts/LayoutDnd/index.js
index 4dd6cacc3d..899b68271d 100644
--- a/packages/strapi-plugin-content-manager/admin/src/contexts/LayoutDnd/index.js
+++ b/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,
- moveRow: PropTypes.func.isRequired,
+ moveItem: PropTypes.func,
+ moveRow: PropTypes.func,
onAddData: PropTypes.func,
relationsLayout: PropTypes.array,
- removeField: PropTypes.func.isRequired,
- selectedItemName: PropTypes.string.isRequired,
+ removeField: PropTypes.func,
+ selectedItemName: PropTypes.string,
setEditFieldToSelect: PropTypes.func,
};