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;
|
||||
|
||||
// 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