mirror of
https://github.com/strapi/strapi.git
synced 2025-09-23 07:22:51 +00:00
Fix lint
Signed-off-by: soupette <cyril@strapi.io>
This commit is contained in:
soupette
parent
b78c84bf69
commit
ebf33ef9ba
@ -1,253 +0,0 @@
|
|||||||
import React, { useEffect, useRef } from 'react';
|
|
||||||
import { useDrag, useDrop } from 'react-dnd';
|
|
||||||
import { getEmptyImage } from 'react-dnd-html5-backend';
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import { get } from 'lodash';
|
|
||||||
|
|
||||||
import useLayoutDnd from '../../hooks/useLayoutDnd';
|
|
||||||
import DraggedFieldWithPreview from '../DraggedFieldWithPreview';
|
|
||||||
|
|
||||||
import ItemTypes from '../../utils/ItemTypes';
|
|
||||||
|
|
||||||
const Item = ({
|
|
||||||
componentUid,
|
|
||||||
dynamicZoneComponents,
|
|
||||||
itemIndex,
|
|
||||||
moveItem,
|
|
||||||
moveRow,
|
|
||||||
name,
|
|
||||||
removeField,
|
|
||||||
rowIndex,
|
|
||||||
size,
|
|
||||||
type,
|
|
||||||
}) => {
|
|
||||||
const {
|
|
||||||
goTo,
|
|
||||||
componentLayouts,
|
|
||||||
metadatas,
|
|
||||||
setEditFieldToSelect,
|
|
||||||
selectedItemName,
|
|
||||||
setIsDraggingSibling,
|
|
||||||
} = useLayoutDnd();
|
|
||||||
const dragRef = useRef(null);
|
|
||||||
const dropRef = useRef(null);
|
|
||||||
const [{ clientOffset, isOver }, drop] = useDrop({
|
|
||||||
// Source code from http://react-dnd.github.io/react-dnd/examples/sortable/simple
|
|
||||||
// And also from https://codesandbox.io/s/6v7l7z68jk
|
|
||||||
accept: ItemTypes.EDIT_FIELD,
|
|
||||||
hover(item, monitor) {
|
|
||||||
if (!dropRef.current) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// We use the hover only to reorder full size items
|
|
||||||
if (item.size !== 12) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const dragIndex = monitor.getItem().itemIndex;
|
|
||||||
const hoverIndex = itemIndex;
|
|
||||||
const dragRow = monitor.getItem().rowIndex;
|
|
||||||
const targetRow = rowIndex;
|
|
||||||
|
|
||||||
// Don't replace item with themselves
|
|
||||||
if (dragIndex === hoverIndex && dragRow === targetRow) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Determine rectangle on screen
|
|
||||||
const hoverBoundingRect = dropRef.current.getBoundingClientRect();
|
|
||||||
|
|
||||||
// Get vertical middle
|
|
||||||
const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
|
|
||||||
// Determine mouse position
|
|
||||||
const clientOffset = monitor.getClientOffset();
|
|
||||||
|
|
||||||
// Get pixels to the top
|
|
||||||
const hoverClientY = clientOffset.y - hoverBoundingRect.top;
|
|
||||||
|
|
||||||
// Only perform the move when the mouse has crossed half of the items height
|
|
||||||
// When dragging downwards, only move when the cursor is below 50%
|
|
||||||
// When dragging upwards, only move when the cursor is above 50%
|
|
||||||
|
|
||||||
// Dragging downwards
|
|
||||||
if (dragRow < targetRow && hoverClientY < hoverMiddleY) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Dragging upwards
|
|
||||||
if (dragRow > targetRow && hoverClientY > hoverMiddleY) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
moveRow(dragRow, targetRow);
|
|
||||||
|
|
||||||
item.rowIndex = targetRow;
|
|
||||||
item.itemIndex = hoverIndex;
|
|
||||||
},
|
|
||||||
drop(item, monitor) {
|
|
||||||
if (!dropRef.current) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const dragIndex = monitor.getItem().itemIndex;
|
|
||||||
const hoverIndex = itemIndex;
|
|
||||||
const dragRow = monitor.getItem().rowIndex;
|
|
||||||
const targetRow = rowIndex;
|
|
||||||
|
|
||||||
// Don't reorder on drop for full size elements since it is already done in the hover
|
|
||||||
if (item.size === 12) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Don't replace item with themselves
|
|
||||||
if (dragIndex === hoverIndex && dragRow === targetRow) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Determine rectangle on screen
|
|
||||||
const hoverBoundingRect = dropRef.current.getBoundingClientRect();
|
|
||||||
|
|
||||||
// Scroll window if mouse near vertical edge(100px)
|
|
||||||
|
|
||||||
// Horizontal Check --
|
|
||||||
if (
|
|
||||||
Math.abs(monitor.getClientOffset().x - hoverBoundingRect.left) >
|
|
||||||
hoverBoundingRect.width / 1.8
|
|
||||||
) {
|
|
||||||
moveItem(dragIndex, hoverIndex + 1, dragRow, targetRow);
|
|
||||||
|
|
||||||
item.itemIndex = hoverIndex + 1;
|
|
||||||
item.rowIndex = targetRow;
|
|
||||||
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Vertical Check |
|
|
||||||
|
|
||||||
// Time to actually perform the action
|
|
||||||
moveItem(dragIndex, hoverIndex, dragRow, targetRow);
|
|
||||||
// Note: we're mutating the monitor item here!
|
|
||||||
// Generally it's better to avoid mutations,
|
|
||||||
// but it's good here for the sake of performance
|
|
||||||
// to avoid expensive index searches.
|
|
||||||
|
|
||||||
item.itemIndex = hoverIndex;
|
|
||||||
item.rowIndex = targetRow;
|
|
||||||
},
|
|
||||||
collect: monitor => ({
|
|
||||||
canDrop: monitor.canDrop(),
|
|
||||||
clientOffset: monitor.getClientOffset(),
|
|
||||||
isOver: monitor.isOver(),
|
|
||||||
isOverCurrent: monitor.isOver({ shallow: true }),
|
|
||||||
itemType: monitor.getItemType(),
|
|
||||||
}),
|
|
||||||
});
|
|
||||||
const [{ isDragging, getItem }, drag, preview] = useDrag({
|
|
||||||
type: ItemTypes.EDIT_FIELD,
|
|
||||||
item: () => {
|
|
||||||
setIsDraggingSibling(true);
|
|
||||||
|
|
||||||
return {
|
|
||||||
itemIndex,
|
|
||||||
rowIndex,
|
|
||||||
name,
|
|
||||||
size,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
canDrag() {
|
|
||||||
// Each row of the layout has a max size of 12 (based on bootstrap grid system)
|
|
||||||
// So in order to offer a better drop zone we add the _TEMP_ div to complete the remaining substract (12 - existing)
|
|
||||||
// Those divs cannot be dragged
|
|
||||||
// If we wanted to offer the ability to create new lines in the layout (which will come later)
|
|
||||||
// We will need to add a 12 size _TEMP_ div to offer a drop target between each existing row.
|
|
||||||
return name !== '_TEMP_';
|
|
||||||
},
|
|
||||||
collect: monitor => ({
|
|
||||||
isDragging: monitor.isDragging(),
|
|
||||||
getItem: monitor.getItem(),
|
|
||||||
}),
|
|
||||||
end: () => {
|
|
||||||
setIsDraggingSibling(false);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
// Remove the default preview when the item is being dragged
|
|
||||||
// The preview is handled by the DragLayer
|
|
||||||
useEffect(() => {
|
|
||||||
preview(getEmptyImage(), { captureDraggingState: true });
|
|
||||||
}, [preview]);
|
|
||||||
|
|
||||||
// Create the refs
|
|
||||||
// We need 1 for the drop target
|
|
||||||
// 1 for the drag target
|
|
||||||
const refs = {
|
|
||||||
dragRef: drag(dragRef),
|
|
||||||
dropRef: drop(dropRef),
|
|
||||||
};
|
|
||||||
|
|
||||||
let showLeftCarret = false;
|
|
||||||
let showRightCarret = false;
|
|
||||||
|
|
||||||
if (dropRef.current && clientOffset) {
|
|
||||||
const hoverBoundingRect = dropRef.current.getBoundingClientRect();
|
|
||||||
|
|
||||||
showLeftCarret =
|
|
||||||
isOver &&
|
|
||||||
getItem.size !== 12 &&
|
|
||||||
Math.abs(clientOffset.x - hoverBoundingRect.left) < hoverBoundingRect.width / 2;
|
|
||||||
showRightCarret =
|
|
||||||
isOver &&
|
|
||||||
getItem.size !== 12 &&
|
|
||||||
Math.abs(clientOffset.x - hoverBoundingRect.left) > hoverBoundingRect.width / 2;
|
|
||||||
|
|
||||||
if (name === '_TEMP_') {
|
|
||||||
showLeftCarret = isOver && getItem.size !== 12;
|
|
||||||
showRightCarret = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<DraggedFieldWithPreview
|
|
||||||
goTo={goTo}
|
|
||||||
componentUid={componentUid}
|
|
||||||
componentLayouts={componentLayouts}
|
|
||||||
dynamicZoneComponents={dynamicZoneComponents}
|
|
||||||
isDragging={isDragging}
|
|
||||||
label={get(metadatas, [name, 'edit', 'label'], '')}
|
|
||||||
name={name}
|
|
||||||
onClickEdit={setEditFieldToSelect}
|
|
||||||
onClickRemove={e => {
|
|
||||||
e.stopPropagation();
|
|
||||||
removeField(rowIndex, itemIndex);
|
|
||||||
}}
|
|
||||||
selectedItem={selectedItemName}
|
|
||||||
showLeftCarret={showLeftCarret}
|
|
||||||
showRightCarret={showRightCarret}
|
|
||||||
size={size}
|
|
||||||
type={type}
|
|
||||||
ref={refs}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
Item.defaultProps = {
|
|
||||||
componentUid: '',
|
|
||||||
dynamicZoneComponents: [],
|
|
||||||
type: 'string',
|
|
||||||
};
|
|
||||||
|
|
||||||
Item.propTypes = {
|
|
||||||
componentUid: PropTypes.string,
|
|
||||||
dynamicZoneComponents: PropTypes.array,
|
|
||||||
itemIndex: PropTypes.number.isRequired,
|
|
||||||
moveItem: PropTypes.func.isRequired,
|
|
||||||
moveRow: PropTypes.func.isRequired,
|
|
||||||
name: PropTypes.string.isRequired,
|
|
||||||
removeField: PropTypes.func.isRequired,
|
|
||||||
rowIndex: PropTypes.number.isRequired,
|
|
||||||
size: PropTypes.number.isRequired,
|
|
||||||
type: PropTypes.string,
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Item;
|
|
||||||
@ -1,8 +0,0 @@
|
|||||||
import styled from 'styled-components';
|
|
||||||
|
|
||||||
const Wrapper = styled.div`
|
|
||||||
display: flex;
|
|
||||||
margin-bottom: 6px;
|
|
||||||
`;
|
|
||||||
|
|
||||||
export default Wrapper;
|
|
||||||
@ -1,98 +0,0 @@
|
|||||||
import React, { memo, useCallback } from 'react';
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import { get } from 'lodash';
|
|
||||||
|
|
||||||
import useLayoutDnd from '../../hooks/useLayoutDnd';
|
|
||||||
|
|
||||||
import Add from '../AddDropdown';
|
|
||||||
import SortWrapper from '../SortWrapper';
|
|
||||||
import Wrapper from './components';
|
|
||||||
import Item from './Item';
|
|
||||||
|
|
||||||
const FieldsReorder = ({ className }) => {
|
|
||||||
const {
|
|
||||||
attributes,
|
|
||||||
buttonData,
|
|
||||||
layout,
|
|
||||||
moveItem,
|
|
||||||
moveRow,
|
|
||||||
onAddData,
|
|
||||||
removeField,
|
|
||||||
} = useLayoutDnd();
|
|
||||||
|
|
||||||
const getComponent = useCallback(
|
|
||||||
attributeName => {
|
|
||||||
return get(attributes, [attributeName, 'component'], '');
|
|
||||||
},
|
|
||||||
[attributes]
|
|
||||||
);
|
|
||||||
const getType = useCallback(
|
|
||||||
attributeName => {
|
|
||||||
const attribute = get(attributes, [attributeName], {});
|
|
||||||
|
|
||||||
return attribute.type;
|
|
||||||
},
|
|
||||||
[attributes]
|
|
||||||
);
|
|
||||||
const getDynamicZoneComponents = useCallback(
|
|
||||||
attributeName => {
|
|
||||||
const attribute = get(attributes, [attributeName], {});
|
|
||||||
|
|
||||||
return attribute.components || [];
|
|
||||||
},
|
|
||||||
[attributes]
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={className}>
|
|
||||||
<SortWrapper
|
|
||||||
style={{
|
|
||||||
marginTop: 7,
|
|
||||||
paddingTop: 11,
|
|
||||||
paddingLeft: 5,
|
|
||||||
paddingRight: 5,
|
|
||||||
border: '1px dashed #e3e9f3',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{layout.map((row, rowIndex) => {
|
|
||||||
return (
|
|
||||||
<Wrapper key={row.rowId} style={{}}>
|
|
||||||
{row.rowContent.map((rowContent, index) => {
|
|
||||||
const { name, size } = rowContent;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Item
|
|
||||||
componentUid={getComponent(name)}
|
|
||||||
dynamicZoneComponents={getDynamicZoneComponents(name)}
|
|
||||||
itemIndex={index}
|
|
||||||
key={name}
|
|
||||||
moveRow={moveRow}
|
|
||||||
moveItem={moveItem}
|
|
||||||
name={name}
|
|
||||||
removeField={removeField}
|
|
||||||
rowIndex={rowIndex}
|
|
||||||
size={size}
|
|
||||||
type={getType(name)}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</Wrapper>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
<Wrapper style={{ marginBottom: 10 }}>
|
|
||||||
<Add data={buttonData} onClick={onAddData} style={{ width: '100%', margin: '0 5px' }} />
|
|
||||||
</Wrapper>
|
|
||||||
</SortWrapper>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
FieldsReorder.defaultProps = {
|
|
||||||
className: 'col-8',
|
|
||||||
};
|
|
||||||
|
|
||||||
FieldsReorder.propTypes = {
|
|
||||||
className: PropTypes.string,
|
|
||||||
};
|
|
||||||
|
|
||||||
export default memo(FieldsReorder);
|
|
||||||
@ -1,127 +0,0 @@
|
|||||||
import React, { useEffect, useRef } from 'react';
|
|
||||||
import { useDrag, useDrop } from 'react-dnd';
|
|
||||||
import { getEmptyImage } from 'react-dnd-html5-backend';
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import { get } from 'lodash';
|
|
||||||
import useLayoutDnd from '../../hooks/useLayoutDnd';
|
|
||||||
|
|
||||||
import DraggedFieldWithPreview from '../DraggedFieldWithPreview';
|
|
||||||
|
|
||||||
import ItemTypes from '../../utils/ItemTypes';
|
|
||||||
|
|
||||||
const Item = ({ index, move, name, removeItem }) => {
|
|
||||||
const {
|
|
||||||
goTo,
|
|
||||||
metadatas,
|
|
||||||
selectedItemName,
|
|
||||||
setEditFieldToSelect,
|
|
||||||
setIsDraggingSibling,
|
|
||||||
} = useLayoutDnd();
|
|
||||||
const dragRef = useRef(null);
|
|
||||||
const dropRef = useRef(null);
|
|
||||||
|
|
||||||
// from: https://codesandbox.io/s/github/react-dnd/react-dnd/tree/gh-pages/examples_hooks_js/04-sortable/simple?from-embed
|
|
||||||
const [, drop] = useDrop({
|
|
||||||
accept: ItemTypes.EDIT_RELATION,
|
|
||||||
hover(item, monitor) {
|
|
||||||
if (!dropRef.current) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const dragIndex = item.index;
|
|
||||||
const hoverIndex = index;
|
|
||||||
|
|
||||||
// Don't replace items with themselves
|
|
||||||
if (dragIndex === hoverIndex) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
// Determine rectangle on screen
|
|
||||||
const hoverBoundingRect = dropRef.current.getBoundingClientRect();
|
|
||||||
// Get vertical middle
|
|
||||||
const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
|
|
||||||
// Determine mouse position
|
|
||||||
const clientOffset = monitor.getClientOffset();
|
|
||||||
// Get pixels to the top
|
|
||||||
const hoverClientY = clientOffset.y - hoverBoundingRect.top;
|
|
||||||
|
|
||||||
// Only perform the move when the mouse has crossed half of the items height
|
|
||||||
// When dragging downwards, only move when the cursor is below 50%
|
|
||||||
// When dragging upwards, only move when the cursor is above 50%
|
|
||||||
// Dragging downwards
|
|
||||||
if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
// Dragging upwards
|
|
||||||
if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
// Time to actually perform the action
|
|
||||||
move(dragIndex, hoverIndex);
|
|
||||||
// Note: we're mutating the monitor item here!
|
|
||||||
// Generally it's better to avoid mutations,
|
|
||||||
// but it's good here for the sake of performance
|
|
||||||
// to avoid expensive index searches.
|
|
||||||
item.index = hoverIndex;
|
|
||||||
},
|
|
||||||
});
|
|
||||||
const [{ isDragging }, drag, preview] = useDrag({
|
|
||||||
type: ItemTypes.EDIT_RELATION,
|
|
||||||
item: () => {
|
|
||||||
// Remove the over state from other components
|
|
||||||
// Since it's a dynamic list where items are replaced on the fly we need to disable all the over state
|
|
||||||
setIsDraggingSibling(true);
|
|
||||||
|
|
||||||
return { id: name, name, index };
|
|
||||||
},
|
|
||||||
end: () => {
|
|
||||||
setIsDraggingSibling(false);
|
|
||||||
},
|
|
||||||
collect: monitor => ({
|
|
||||||
isDragging: monitor.isDragging(),
|
|
||||||
}),
|
|
||||||
});
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
preview(getEmptyImage(), { captureDraggingState: false });
|
|
||||||
}, [preview]);
|
|
||||||
|
|
||||||
// Create the refs
|
|
||||||
// We need 1 for the drop target
|
|
||||||
// 1 for the drag target
|
|
||||||
const refs = {
|
|
||||||
dragRef: drag(dragRef),
|
|
||||||
dropRef: drop(dropRef),
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<DraggedFieldWithPreview
|
|
||||||
isDragging={isDragging}
|
|
||||||
label={get(metadatas, [name, 'edit', 'label'], '')}
|
|
||||||
name={name}
|
|
||||||
onClickEdit={() => setEditFieldToSelect(name)}
|
|
||||||
onClickRemove={e => {
|
|
||||||
e.stopPropagation();
|
|
||||||
removeItem(index);
|
|
||||||
}}
|
|
||||||
push={goTo}
|
|
||||||
ref={refs}
|
|
||||||
selectedItem={selectedItemName}
|
|
||||||
size={12}
|
|
||||||
style={{ marginBottom: 6, paddingLeft: 5, paddingRight: 5 }}
|
|
||||||
type="relation"
|
|
||||||
i={index === 0}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
Item.defaultProps = {
|
|
||||||
move: () => {},
|
|
||||||
};
|
|
||||||
|
|
||||||
Item.propTypes = {
|
|
||||||
index: PropTypes.number.isRequired,
|
|
||||||
move: PropTypes.func,
|
|
||||||
name: PropTypes.string.isRequired,
|
|
||||||
removeItem: PropTypes.func.isRequired,
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Item;
|
|
||||||
@ -1,60 +0,0 @@
|
|||||||
import React, { memo } from 'react';
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import useLayoutDnd from '../../hooks/useLayoutDnd';
|
|
||||||
|
|
||||||
import Add from '../AddDropdown';
|
|
||||||
import SortWrapper from '../SortWrapper';
|
|
||||||
import Item from './Item';
|
|
||||||
|
|
||||||
const SortableList = ({ addItem, buttonData, moveItem, removeItem }) => {
|
|
||||||
const { relationsLayout } = useLayoutDnd();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="col-4">
|
|
||||||
<SortWrapper
|
|
||||||
style={{
|
|
||||||
marginTop: 7,
|
|
||||||
paddingTop: 11,
|
|
||||||
paddingLeft: 5,
|
|
||||||
paddingRight: 5,
|
|
||||||
border: '1px dashed #e3e9f3',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{relationsLayout.map((relationName, index) => {
|
|
||||||
return (
|
|
||||||
<Item
|
|
||||||
index={index}
|
|
||||||
key={relationName}
|
|
||||||
move={moveItem}
|
|
||||||
name={relationName}
|
|
||||||
removeItem={removeItem}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
<Add
|
|
||||||
data={buttonData}
|
|
||||||
isRelation
|
|
||||||
onClick={addItem}
|
|
||||||
style={{
|
|
||||||
marginLeft: 10,
|
|
||||||
marginRight: 10,
|
|
||||||
marginBottom: 13,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</SortWrapper>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
SortableList.defaultProps = {
|
|
||||||
buttonData: [],
|
|
||||||
};
|
|
||||||
|
|
||||||
SortableList.propTypes = {
|
|
||||||
addItem: PropTypes.func.isRequired,
|
|
||||||
buttonData: PropTypes.array,
|
|
||||||
moveItem: PropTypes.func.isRequired,
|
|
||||||
removeItem: PropTypes.func.isRequired,
|
|
||||||
};
|
|
||||||
|
|
||||||
export default memo(SortableList);
|
|
||||||
@ -356,408 +356,3 @@ EditSettingsView.propTypes = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export default EditSettingsView;
|
export default EditSettingsView;
|
||||||
|
|
||||||
// import React, { useCallback, useMemo, useReducer, useState } from 'react';
|
|
||||||
// import PropTypes from 'prop-types';
|
|
||||||
// import { useHistory } from 'react-router-dom';
|
|
||||||
// import { useSelector, shallowEqual } from 'react-redux';
|
|
||||||
// import { cloneDeep, flatMap, get, set, pick } from 'lodash';
|
|
||||||
// import { useTracking, useNotification } from '@strapi/helper-plugin';
|
|
||||||
// import { Inputs as Input } from '@buffetjs/custom';
|
|
||||||
// import { FormattedMessage } from 'react-intl';
|
|
||||||
// import { axiosInstance } from '../../../core/utils';
|
|
||||||
// import { getRequestUrl, getTrad } from '../../utils';
|
|
||||||
// import FieldsReorder from '../../components/FieldsReorder';
|
|
||||||
// import FormTitle from '../../components/FormTitle';
|
|
||||||
// import LayoutTitle from '../../components/LayoutTitle';
|
|
||||||
// import PopupForm from '../../components/PopupForm';
|
|
||||||
// import SettingsViewWrapper from '../../components/SettingsViewWrapper';
|
|
||||||
// import SortableList from '../../components/SortableList';
|
|
||||||
// import { makeSelectModelAndComponentSchemas } from '../App/selectors';
|
|
||||||
// import LayoutDndProvider from '../../components/LayoutDndProvider';
|
|
||||||
// import init from './init';
|
|
||||||
// import reducer, { initialState } from './reducer';
|
|
||||||
// import { createPossibleMainFieldsForModelsAndComponents, getInputProps } from './utils';
|
|
||||||
// import { unformatLayout } from './utils/layout';
|
|
||||||
// import LinkToCTB from './LinkToCTB';
|
|
||||||
|
|
||||||
// const EditSettingsView = ({ components, mainLayout, isContentTypeView, slug, updateLayout }) => {
|
|
||||||
// const { push } = useHistory();
|
|
||||||
// const { trackUsage } = useTracking();
|
|
||||||
// const toggleNotification = useNotification();
|
|
||||||
|
|
||||||
// const [reducerState, dispatch] = useReducer(reducer, initialState, () =>
|
|
||||||
// init(initialState, mainLayout, components)
|
|
||||||
// );
|
|
||||||
// const [isModalFormOpen, setIsModalFormOpen] = useState(false);
|
|
||||||
// const [isDraggingSibling, setIsDraggingSibling] = useState(false);
|
|
||||||
|
|
||||||
// const schemasSelector = useMemo(makeSelectModelAndComponentSchemas, []);
|
|
||||||
// const { schemas } = useSelector(state => schemasSelector(state), shallowEqual);
|
|
||||||
|
|
||||||
// const { componentLayouts, initialData, metaToEdit, modifiedData, metaForm } = reducerState;
|
|
||||||
|
|
||||||
// const componentsAndModelsPossibleMainFields = useMemo(() => {
|
|
||||||
// return createPossibleMainFieldsForModelsAndComponents(schemas);
|
|
||||||
// }, [schemas]);
|
|
||||||
|
|
||||||
// const fieldsReorderClassName = isContentTypeView ? 'col-8' : 'col-12';
|
|
||||||
|
|
||||||
// const attributes = useMemo(() => get(modifiedData, 'attributes', {}), [modifiedData]);
|
|
||||||
// const editLayout = modifiedData.layouts.edit;
|
|
||||||
// const relationsLayout = modifiedData.layouts.editRelations;
|
|
||||||
// const editRelationsLayoutRemainingFields = useMemo(() => {
|
|
||||||
// return Object.keys(attributes)
|
|
||||||
// .filter(attr => attributes[attr].type === 'relation')
|
|
||||||
// .filter(attr => relationsLayout.indexOf(attr) === -1);
|
|
||||||
// }, [attributes, relationsLayout]);
|
|
||||||
|
|
||||||
// const formToDisplay = useMemo(() => {
|
|
||||||
// if (!metaToEdit) {
|
|
||||||
// return [];
|
|
||||||
// }
|
|
||||||
|
|
||||||
// const associatedMetas = get(modifiedData, ['metadatas', metaToEdit, 'edit'], {});
|
|
||||||
|
|
||||||
// return Object.keys(associatedMetas).filter(meta => meta !== 'visible');
|
|
||||||
// }, [metaToEdit, modifiedData]);
|
|
||||||
|
|
||||||
// const editLayoutRemainingFields = useMemo(() => {
|
|
||||||
// const displayedFields = flatMap(modifiedData.layouts.edit, 'rowContent');
|
|
||||||
|
|
||||||
// return Object.keys(modifiedData.attributes)
|
|
||||||
// .filter(attr => {
|
|
||||||
// if (!isContentTypeView) {
|
|
||||||
// return true;
|
|
||||||
// }
|
|
||||||
|
|
||||||
// return get(modifiedData, ['attributes', attr, 'type'], '') !== 'relation';
|
|
||||||
// })
|
|
||||||
// .filter(attr => get(modifiedData, ['metadatas', attr, 'edit', 'visible'], false) === true)
|
|
||||||
// .filter(attr => {
|
|
||||||
// return displayedFields.findIndex(el => el.name === attr) === -1;
|
|
||||||
// })
|
|
||||||
// .sort();
|
|
||||||
// }, [isContentTypeView, modifiedData]);
|
|
||||||
|
|
||||||
// const getSelectedItemSelectOptions = useCallback(
|
|
||||||
// formType => {
|
|
||||||
// if (formType !== 'relation' && formType !== 'component') {
|
|
||||||
// return [];
|
|
||||||
// }
|
|
||||||
|
|
||||||
// const targetKey = formType === 'component' ? 'component' : 'targetModel';
|
|
||||||
// const key = get(modifiedData, ['attributes', metaToEdit, targetKey], '');
|
|
||||||
|
|
||||||
// return get(componentsAndModelsPossibleMainFields, [key], []);
|
|
||||||
// },
|
|
||||||
|
|
||||||
// [metaToEdit, componentsAndModelsPossibleMainFields, modifiedData]
|
|
||||||
// );
|
|
||||||
|
|
||||||
// const handleChange = ({ target: { name, value } }) => {
|
|
||||||
// dispatch({
|
|
||||||
// type: 'ON_CHANGE',
|
|
||||||
// keys: name.split('.'),
|
|
||||||
// value,
|
|
||||||
// });
|
|
||||||
// };
|
|
||||||
|
|
||||||
// const handleChangeMeta = ({ target: { name, value } }) => {
|
|
||||||
// dispatch({
|
|
||||||
// type: 'ON_CHANGE_META',
|
|
||||||
// keys: name.split('.'),
|
|
||||||
// value,
|
|
||||||
// });
|
|
||||||
// };
|
|
||||||
|
|
||||||
// const handleConfirm = async () => {
|
|
||||||
// try {
|
|
||||||
// const body = pick(cloneDeep(modifiedData), ['layouts', 'metadatas', 'settings']);
|
|
||||||
|
|
||||||
// // We need to send the unformated edit layout
|
|
||||||
// set(body, 'layouts.edit', unformatLayout(body.layouts.edit));
|
|
||||||
|
|
||||||
// const requestURL = isContentTypeView
|
|
||||||
// ? getRequestUrl(`content-types/${slug}/configuration`)
|
|
||||||
// : getRequestUrl(`components/${slug}/configuration`);
|
|
||||||
|
|
||||||
// const {
|
|
||||||
// data: { data },
|
|
||||||
// } = await axiosInstance.put(requestURL, body);
|
|
||||||
|
|
||||||
// if (updateLayout) {
|
|
||||||
// updateLayout(data);
|
|
||||||
// }
|
|
||||||
|
|
||||||
// dispatch({
|
|
||||||
// type: 'SUBMIT_SUCCEEDED',
|
|
||||||
// });
|
|
||||||
|
|
||||||
// trackUsage('didEditEditSettings');
|
|
||||||
// } catch (err) {
|
|
||||||
// toggleNotification({ type: 'warning', message: { id: 'notification.error' } });
|
|
||||||
// }
|
|
||||||
// };
|
|
||||||
|
|
||||||
// const handleSubmitMetaForm = e => {
|
|
||||||
// e.preventDefault();
|
|
||||||
// dispatch({
|
|
||||||
// type: 'SUBMIT_META_FORM',
|
|
||||||
// });
|
|
||||||
// toggleModalForm();
|
|
||||||
// };
|
|
||||||
|
|
||||||
// const moveItem = (dragIndex, hoverIndex, dragRowIndex, hoverRowIndex) => {
|
|
||||||
// // Same row = just reorder
|
|
||||||
// if (dragRowIndex === hoverRowIndex) {
|
|
||||||
// dispatch({
|
|
||||||
// type: 'REORDER_ROW',
|
|
||||||
// dragRowIndex,
|
|
||||||
// dragIndex,
|
|
||||||
// hoverIndex,
|
|
||||||
// });
|
|
||||||
// } else {
|
|
||||||
// dispatch({
|
|
||||||
// type: 'REORDER_DIFF_ROW',
|
|
||||||
// dragIndex,
|
|
||||||
// hoverIndex,
|
|
||||||
// dragRowIndex,
|
|
||||||
// hoverRowIndex,
|
|
||||||
// });
|
|
||||||
// }
|
|
||||||
// };
|
|
||||||
|
|
||||||
// const moveRow = (fromIndex, toIndex) => {
|
|
||||||
// dispatch({
|
|
||||||
// type: 'MOVE_ROW',
|
|
||||||
// fromIndex,
|
|
||||||
// toIndex,
|
|
||||||
// });
|
|
||||||
// };
|
|
||||||
|
|
||||||
// const toggleModalForm = () => {
|
|
||||||
// setIsModalFormOpen(prevState => !prevState);
|
|
||||||
// };
|
|
||||||
|
|
||||||
// const renderForm = () =>
|
|
||||||
// formToDisplay.map((meta, index) => {
|
|
||||||
// const formType = get(attributes, [metaToEdit, 'type']);
|
|
||||||
|
|
||||||
// if (formType === 'dynamiczone' && !['label', 'description'].includes(meta)) {
|
|
||||||
// return null;
|
|
||||||
// }
|
|
||||||
|
|
||||||
// if ((formType === 'component' || formType === 'media') && meta !== 'label') {
|
|
||||||
// return null;
|
|
||||||
// }
|
|
||||||
|
|
||||||
// if ((formType === 'json' || formType === 'boolean') && meta === 'placeholder') {
|
|
||||||
// return null;
|
|
||||||
// }
|
|
||||||
|
|
||||||
// if (formType === 'richtext' && meta === 'editable') {
|
|
||||||
// return null;
|
|
||||||
// }
|
|
||||||
|
|
||||||
// return (
|
|
||||||
// <div className="col-6" key={meta}>
|
|
||||||
// <FormattedMessage
|
|
||||||
// id={getTrad('containers.SettingPage.editSettings.relation-field.description')}
|
|
||||||
// >
|
|
||||||
// {description => (
|
|
||||||
// <FormattedMessage
|
|
||||||
// id={get(getInputProps(meta), 'label.id', 'app.utils.defaultMessage')}
|
|
||||||
// >
|
|
||||||
// {label => (
|
|
||||||
// <Input
|
|
||||||
// autoFocus={index === 0}
|
|
||||||
// description={meta === 'mainField' ? description[0] : ''}
|
|
||||||
// label={label[0]}
|
|
||||||
// name={meta}
|
|
||||||
// type={getInputProps(meta).type}
|
|
||||||
// value={get(metaForm, meta, '')}
|
|
||||||
// onChange={handleChangeMeta}
|
|
||||||
// options={getSelectedItemSelectOptions(formType)}
|
|
||||||
// />
|
|
||||||
// )}
|
|
||||||
// </FormattedMessage>
|
|
||||||
// )}
|
|
||||||
// </FormattedMessage>
|
|
||||||
// </div>
|
|
||||||
// );
|
|
||||||
// });
|
|
||||||
|
|
||||||
// return (
|
|
||||||
// <LayoutDndProvider
|
|
||||||
// attributes={attributes}
|
|
||||||
// buttonData={editLayoutRemainingFields}
|
|
||||||
// componentLayouts={componentLayouts}
|
|
||||||
// goTo={push}
|
|
||||||
// isDraggingSibling={isDraggingSibling}
|
|
||||||
// layout={editLayout}
|
|
||||||
// metadatas={get(modifiedData, ['metadatas'], {})}
|
|
||||||
// moveItem={moveItem}
|
|
||||||
// moveRow={moveRow}
|
|
||||||
// onAddData={name => {
|
|
||||||
// dispatch({
|
|
||||||
// type: 'ON_ADD_FIELD',
|
|
||||||
// name,
|
|
||||||
// });
|
|
||||||
// }}
|
|
||||||
// relationsLayout={relationsLayout}
|
|
||||||
// removeField={(rowIndex, fieldIndex) => {
|
|
||||||
// dispatch({
|
|
||||||
// type: 'REMOVE_FIELD',
|
|
||||||
// rowIndex,
|
|
||||||
// fieldIndex,
|
|
||||||
// });
|
|
||||||
// }}
|
|
||||||
// setEditFieldToSelect={name => {
|
|
||||||
// dispatch({
|
|
||||||
// type: 'SET_FIELD_TO_EDIT',
|
|
||||||
// name,
|
|
||||||
// });
|
|
||||||
// toggleModalForm();
|
|
||||||
// }}
|
|
||||||
// setIsDraggingSibling={setIsDraggingSibling}
|
|
||||||
// selectedItemName={metaToEdit}
|
|
||||||
// >
|
|
||||||
// <SettingsViewWrapper
|
|
||||||
// inputs={[
|
|
||||||
// {
|
|
||||||
// label: {
|
|
||||||
// id: getTrad('containers.SettingPage.editSettings.entry.title'),
|
|
||||||
// },
|
|
||||||
// description: {
|
|
||||||
// id: getTrad('containers.SettingPage.editSettings.entry.title.description'),
|
|
||||||
// },
|
|
||||||
// type: 'select',
|
|
||||||
// name: 'settings.mainField',
|
|
||||||
// customBootstrapClass: 'col-md-4',
|
|
||||||
// selectOptions: ['id'],
|
|
||||||
// didCheckErrors: false,
|
|
||||||
// validations: {},
|
|
||||||
// },
|
|
||||||
// ]}
|
|
||||||
// initialData={initialData}
|
|
||||||
// isLoading={false}
|
|
||||||
// modifiedData={modifiedData}
|
|
||||||
// name={modifiedData.info.name}
|
|
||||||
// onChange={handleChange}
|
|
||||||
// onConfirmReset={() => {
|
|
||||||
// dispatch({
|
|
||||||
// type: 'ON_RESET',
|
|
||||||
// });
|
|
||||||
// }}
|
|
||||||
// onConfirmSubmit={handleConfirm}
|
|
||||||
// slug={slug}
|
|
||||||
// isEditSettings
|
|
||||||
// >
|
|
||||||
// <div className="row">
|
|
||||||
// <LayoutTitle className={fieldsReorderClassName}>
|
|
||||||
// <div
|
|
||||||
// style={{
|
|
||||||
// display: 'flex',
|
|
||||||
// justifyContent: 'space-between',
|
|
||||||
// }}
|
|
||||||
// >
|
|
||||||
// <div>
|
|
||||||
// <FormTitle
|
|
||||||
// title={getTrad('global.displayedFields')}
|
|
||||||
// description={getTrad('containers.SettingPage.editSettings.description')}
|
|
||||||
// />
|
|
||||||
// </div>
|
|
||||||
// <div
|
|
||||||
// style={{
|
|
||||||
// marginTop: -6,
|
|
||||||
// }}
|
|
||||||
// >
|
|
||||||
// <LinkToCTB
|
|
||||||
// modifiedData={modifiedData}
|
|
||||||
// slug={slug}
|
|
||||||
// type={isContentTypeView ? 'content-types' : 'components'}
|
|
||||||
// />
|
|
||||||
// </div>
|
|
||||||
// </div>
|
|
||||||
// </LayoutTitle>
|
|
||||||
// {isContentTypeView && (
|
|
||||||
// <LayoutTitle className="col-4">
|
|
||||||
// <FormTitle
|
|
||||||
// title={getTrad('containers.SettingPage.relations')}
|
|
||||||
// description={getTrad('containers.SettingPage.editSettings.description')}
|
|
||||||
// />
|
|
||||||
// </LayoutTitle>
|
|
||||||
// )}
|
|
||||||
|
|
||||||
// <FieldsReorder className={fieldsReorderClassName} />
|
|
||||||
// {isContentTypeView && (
|
|
||||||
// <SortableList
|
|
||||||
// addItem={name => {
|
|
||||||
// dispatch({
|
|
||||||
// type: 'ADD_RELATION',
|
|
||||||
// name,
|
|
||||||
// });
|
|
||||||
// }}
|
|
||||||
// buttonData={editRelationsLayoutRemainingFields}
|
|
||||||
// moveItem={(fromIndex, toIndex) => {
|
|
||||||
// dispatch({
|
|
||||||
// type: 'MOVE_RELATION',
|
|
||||||
// fromIndex,
|
|
||||||
// toIndex,
|
|
||||||
// });
|
|
||||||
// }}
|
|
||||||
// removeItem={index => {
|
|
||||||
// dispatch({
|
|
||||||
// type: 'REMOVE_RELATION',
|
|
||||||
// index,
|
|
||||||
// });
|
|
||||||
// }}
|
|
||||||
// />
|
|
||||||
// )}
|
|
||||||
// </div>
|
|
||||||
// </SettingsViewWrapper>
|
|
||||||
|
|
||||||
// <PopupForm
|
|
||||||
// headerId={getTrad('containers.EditSettingsView.modal-form.edit-field')}
|
|
||||||
// isOpen={isModalFormOpen}
|
|
||||||
// onClosed={() => {
|
|
||||||
// dispatch({
|
|
||||||
// type: 'UNSET_FIELD_TO_EDIT',
|
|
||||||
// });
|
|
||||||
// }}
|
|
||||||
// onSubmit={handleSubmitMetaForm}
|
|
||||||
// onToggle={toggleModalForm}
|
|
||||||
// renderForm={renderForm}
|
|
||||||
// subHeaderContent={metaToEdit}
|
|
||||||
// type={get(attributes, [metaToEdit, 'type'], '')}
|
|
||||||
// />
|
|
||||||
// </LayoutDndProvider>
|
|
||||||
// );
|
|
||||||
// };
|
|
||||||
|
|
||||||
// EditSettingsView.defaultProps = {
|
|
||||||
// isContentTypeView: false,
|
|
||||||
// updateLayout: null,
|
|
||||||
// };
|
|
||||||
|
|
||||||
// EditSettingsView.propTypes = {
|
|
||||||
// components: PropTypes.object.isRequired,
|
|
||||||
// mainLayout: PropTypes.shape({
|
|
||||||
// attributes: PropTypes.object.isRequired,
|
|
||||||
// info: PropTypes.object.isRequired,
|
|
||||||
// layouts: PropTypes.shape({
|
|
||||||
// list: PropTypes.array.isRequired,
|
|
||||||
// editRelations: PropTypes.array.isRequired,
|
|
||||||
// edit: PropTypes.array.isRequired,
|
|
||||||
// }).isRequired,
|
|
||||||
// metadatas: PropTypes.object.isRequired,
|
|
||||||
// options: PropTypes.object.isRequired,
|
|
||||||
// }).isRequired,
|
|
||||||
// isContentTypeView: PropTypes.bool,
|
|
||||||
|
|
||||||
// slug: PropTypes.string.isRequired,
|
|
||||||
// updateLayout: PropTypes.func,
|
|
||||||
// };
|
|
||||||
|
|
||||||
// export default EditSettingsView;
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user