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 ( -
-
- {renderItem()} + +
+
+ {renderItem()} +
-
+ ); }; 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, };