mirror of
https://github.com/strapi/strapi.git
synced 2025-11-01 18:33:55 +00:00
Clean code
This commit is contained in:
parent
aa7a41e039
commit
53d0014dc2
@ -9,9 +9,7 @@ import '@babel/polyfill';
|
||||
import 'sanitize.css/sanitize.css';
|
||||
|
||||
// Third party css library needed
|
||||
// Currently unable to bundle them
|
||||
|
||||
// import 'react-select/dist/react-select.css';
|
||||
import 'react-datetime/css/react-datetime.css';
|
||||
|
||||
import './styles/main.scss';
|
||||
|
||||
@ -7,15 +7,12 @@
|
||||
|
||||
.buttonContainer {
|
||||
width: 100%;
|
||||
// width: 358px;
|
||||
height: 34px;
|
||||
text-align: center;
|
||||
background-color: #fafafb;
|
||||
// border: 1px solid #E3E9F3;
|
||||
border-top: 0;
|
||||
border-bottom-left-radius: 2px;
|
||||
border-bottom-right-radius: 2px;
|
||||
|
||||
color: #333740;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
|
||||
@ -101,11 +101,4 @@
|
||||
margin-right: 7px;
|
||||
color: #b3b5b9;
|
||||
}
|
||||
// margin-right: 8px;
|
||||
// &:before {
|
||||
// content: '\F08E';
|
||||
// display: block;
|
||||
// font-family: 'FontAwesome';
|
||||
// font-size: 11px;
|
||||
// }
|
||||
}
|
||||
|
||||
@ -13,8 +13,6 @@ const ListWrapper = styled.div`
|
||||
overflow-x: scroll;
|
||||
}
|
||||
.list-button {
|
||||
// padding: 1rem 3rem 2.5rem 3rem;
|
||||
|
||||
padding: 1.4rem 3rem 2.5rem 3rem;
|
||||
|
||||
button {
|
||||
|
||||
@ -36,7 +36,6 @@ const Wrapper = styled.div`
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
// width: calc(100% - 18px);
|
||||
text-align: center;
|
||||
margin-bottom: 0;
|
||||
margin-top: -1px;
|
||||
|
||||
@ -47,11 +47,10 @@ const FieldForm = ({
|
||||
{Object.keys(metadatas)
|
||||
.filter(meta => meta !== 'visible')
|
||||
.map(meta => {
|
||||
if (formType === 'group' && meta !== 'label') {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (formType === 'media' && !['label'].includes(meta)) {
|
||||
if (
|
||||
(formType === 'group' || formType === 'media') &&
|
||||
meta !== 'label'
|
||||
) {
|
||||
return null;
|
||||
}
|
||||
|
||||
|
||||
@ -5,9 +5,9 @@ const InfoLabel = styled.div`
|
||||
top: 0;
|
||||
right: 40px;
|
||||
max-width: 80px;
|
||||
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
|
||||
font-weight: 400;
|
||||
color: #007eff;
|
||||
`;
|
||||
@ -40,8 +40,8 @@ const Carret = styled.div`
|
||||
`;
|
||||
}}
|
||||
height: 30px;
|
||||
margin-right: 3px;
|
||||
width: 2px;
|
||||
margin-right: 3px;
|
||||
border-radius: 2px;
|
||||
background: #007eff;
|
||||
`;
|
||||
@ -75,11 +75,11 @@ const NameWrapper = styled.div`
|
||||
}
|
||||
.name {
|
||||
display: inline-block;
|
||||
width: calc(100% - 18px);
|
||||
vertical-align: top;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
width: calc(100% - 18px);
|
||||
}
|
||||
|
||||
${({ isHidden }) => {
|
||||
|
||||
@ -77,10 +77,6 @@ const Item = ({
|
||||
|
||||
moveRow(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.rowIndex = targetRow;
|
||||
item.itemIndex = hoverIndex;
|
||||
|
||||
@ -116,7 +112,6 @@ const Item = ({
|
||||
Math.abs(monitor.getClientOffset().x - hoverBoundingRect.left) >
|
||||
hoverBoundingRect.width / 1.8
|
||||
) {
|
||||
// TODO ADD NEW LINE
|
||||
moveItem(dragIndex, hoverIndex + 1, dragRow, targetRow);
|
||||
|
||||
item.itemIndex = hoverIndex + 1;
|
||||
@ -160,6 +155,8 @@ const Item = ({
|
||||
item: { type: ItemTypes.EDIT_FIELD, itemIndex, rowIndex, name, size },
|
||||
});
|
||||
|
||||
// Remove the default preview when the item is being dragged
|
||||
// The preview is handled by the DragLayer
|
||||
useEffect(() => {
|
||||
preview(getEmptyImage(), { captureDraggingState: true });
|
||||
}, [preview]);
|
||||
|
||||
@ -15,8 +15,6 @@ function reducer(state, action) {
|
||||
list.map(obj => obj.update('isOpen', () => false))
|
||||
);
|
||||
case 'OPEN_COLLAPSES_THAT_HAVE_ERRORS':
|
||||
// TODO fix collapse open
|
||||
// return state;
|
||||
return state
|
||||
.update('collapsesToOpen', () => fromJS(action.collapsesToOpen))
|
||||
.update('collapses', list => {
|
||||
|
||||
@ -87,7 +87,7 @@ const Item = ({ index, move, name, removeItem }) => {
|
||||
push={goTo}
|
||||
ref={ref}
|
||||
size={12}
|
||||
style={{ marginBottom: 6 }}
|
||||
style={{ marginBottom: 6, paddingLeft: 5, paddingRight: 5 }}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@ -25,7 +25,7 @@ const getSize = type => {
|
||||
};
|
||||
|
||||
const reducer = (state, action) => {
|
||||
const layoutPath = ['modifiedData', 'layouts', 'edit'];
|
||||
const layoutPathEdit = ['modifiedData', 'layouts', 'edit'];
|
||||
const { dragIndex, hoverIndex, dragRowIndex, hoverRowIndex } = action;
|
||||
const getFieldType = name =>
|
||||
state.getIn(['modifiedData', 'schema', 'attributes', name, 'type']);
|
||||
@ -39,10 +39,13 @@ const reducer = (state, action) => {
|
||||
.update('itemFormType', () => action.itemFormType)
|
||||
.update('modifiedData', () => fromJS(action.data));
|
||||
case 'MOVE_ROW':
|
||||
return state.updateIn(layoutPath, list => {
|
||||
return state.updateIn(layoutPathEdit, list => {
|
||||
return list
|
||||
.delete(dragRowIndex)
|
||||
.insert(hoverRowIndex, state.getIn([...layoutPath, dragRowIndex]));
|
||||
.insert(
|
||||
hoverRowIndex,
|
||||
state.getIn([...layoutPathEdit, dragRowIndex])
|
||||
);
|
||||
});
|
||||
case 'ON_ADD_DATA': {
|
||||
const size = getSize(
|
||||
@ -54,9 +57,9 @@ const reducer = (state, action) => {
|
||||
'type',
|
||||
])
|
||||
);
|
||||
const listSize = state.getIn(layoutPath).size;
|
||||
const listSize = state.getIn(layoutPathEdit).size;
|
||||
const newList = state
|
||||
.getIn(layoutPath)
|
||||
.getIn(layoutPathEdit)
|
||||
.updateIn([listSize - 1, 'rowContent'], list => {
|
||||
if (list) {
|
||||
return list.push({
|
||||
@ -70,7 +73,7 @@ const reducer = (state, action) => {
|
||||
const formattedList = formatLayout(newList.toJS());
|
||||
|
||||
return state
|
||||
.updateIn(layoutPath, () => fromJS(formattedList))
|
||||
.updateIn(layoutPathEdit, () => fromJS(formattedList))
|
||||
.update('itemNameToSelect', () => action.name)
|
||||
.update('itemFormType', () => getFieldType(action.name) || '');
|
||||
}
|
||||
@ -81,7 +84,11 @@ const reducer = (state, action) => {
|
||||
);
|
||||
|
||||
case 'REMOVE_FIELD': {
|
||||
const row = state.getIn([...layoutPath, action.rowIndex, 'rowContent']);
|
||||
const row = state.getIn([
|
||||
...layoutPathEdit,
|
||||
action.rowIndex,
|
||||
'rowContent',
|
||||
]);
|
||||
let newState;
|
||||
let fieldNameToDelete;
|
||||
// Delete the entire row if length is one or if lenght is equal to 2 and the second element is the hidden div used to make the dnd exp smoother
|
||||
@ -90,18 +97,18 @@ const reducer = (state, action) => {
|
||||
(row.size == 2 && row.getIn([1, 'name']) === '_TEMP_')
|
||||
) {
|
||||
fieldNameToDelete = state.getIn([
|
||||
...layoutPath,
|
||||
...layoutPathEdit,
|
||||
action.rowIndex,
|
||||
'rowContent',
|
||||
0,
|
||||
'name',
|
||||
]);
|
||||
newState = state.updateIn(layoutPath, list =>
|
||||
newState = state.updateIn(layoutPathEdit, list =>
|
||||
list.delete(action.rowIndex)
|
||||
);
|
||||
} else {
|
||||
fieldNameToDelete = state.getIn([
|
||||
...layoutPath,
|
||||
...layoutPathEdit,
|
||||
action.rowIndex,
|
||||
'rowContent',
|
||||
action.fieldIndex,
|
||||
@ -109,13 +116,13 @@ const reducer = (state, action) => {
|
||||
]);
|
||||
|
||||
newState = state.updateIn(
|
||||
[...layoutPath, action.rowIndex, 'rowContent'],
|
||||
[...layoutPathEdit, action.rowIndex, 'rowContent'],
|
||||
list => list.delete(action.fieldIndex)
|
||||
);
|
||||
}
|
||||
|
||||
const updatedList = fromJS(
|
||||
formatLayout(newState.getIn(layoutPath).toJS())
|
||||
formatLayout(newState.getIn(layoutPathEdit).toJS())
|
||||
);
|
||||
|
||||
if (state.get('itemNameToSelect') === fieldNameToDelete) {
|
||||
@ -123,39 +130,44 @@ const reducer = (state, action) => {
|
||||
updatedList.getIn([0, 'rowContent', 0, 'name']) || '';
|
||||
|
||||
return state
|
||||
.updateIn(layoutPath, () => updatedList)
|
||||
.updateIn(layoutPathEdit, () => updatedList)
|
||||
.update('itemNameToSelect', () => firstField)
|
||||
.update('itemFormType', () => getFieldType(firstField) || '');
|
||||
}
|
||||
|
||||
return state.updateIn(layoutPath, () => updatedList);
|
||||
return state.updateIn(layoutPathEdit, () => updatedList);
|
||||
}
|
||||
case 'REORDER_DIFF_ROW': {
|
||||
const newState = state
|
||||
.updateIn([...layoutPath, dragRowIndex, 'rowContent'], list => {
|
||||
.updateIn([...layoutPathEdit, dragRowIndex, 'rowContent'], list => {
|
||||
return list.remove(dragIndex);
|
||||
})
|
||||
.updateIn([...layoutPath, hoverRowIndex, 'rowContent'], list => {
|
||||
.updateIn([...layoutPathEdit, hoverRowIndex, 'rowContent'], list => {
|
||||
return list.insert(
|
||||
hoverIndex,
|
||||
state.getIn([...layoutPath, dragRowIndex, 'rowContent', dragIndex])
|
||||
state.getIn([
|
||||
...layoutPathEdit,
|
||||
dragRowIndex,
|
||||
'rowContent',
|
||||
dragIndex,
|
||||
])
|
||||
);
|
||||
});
|
||||
const updatedList = formatLayout(newState.getIn(layoutPath).toJS());
|
||||
const updatedList = formatLayout(newState.getIn(layoutPathEdit).toJS());
|
||||
|
||||
return state.updateIn(layoutPath, () => fromJS(updatedList));
|
||||
return state.updateIn(layoutPathEdit, () => fromJS(updatedList));
|
||||
}
|
||||
case 'REORDER_ROW': {
|
||||
const newState = state.updateIn(
|
||||
[...layoutPath, dragRowIndex, 'rowContent'],
|
||||
[...layoutPathEdit, dragRowIndex, 'rowContent'],
|
||||
list => {
|
||||
return list.delete(dragIndex).insert(hoverIndex, list.get(dragIndex));
|
||||
}
|
||||
);
|
||||
|
||||
const updatedList = formatLayout(newState.getIn(layoutPath).toJS());
|
||||
const updatedList = formatLayout(newState.getIn(layoutPathEdit).toJS());
|
||||
|
||||
return state.updateIn(layoutPath, () => fromJS(updatedList));
|
||||
return state.updateIn(layoutPathEdit, () => fromJS(updatedList));
|
||||
}
|
||||
case 'RESET':
|
||||
return state.update('modifiedData', () => state.get('initialData'));
|
||||
|
||||
@ -57,8 +57,8 @@ const getSize = type => {
|
||||
};
|
||||
|
||||
function settingViewModelReducer(state = initialState, action) {
|
||||
const layoutPath = ['modifiedData', 'layouts', 'edit'];
|
||||
const relationPath = ['modifiedData', 'layouts', 'editRelations'];
|
||||
const layoutPathEdit = ['modifiedData', 'layouts', 'edit'];
|
||||
const layoutPathRelations = ['modifiedData', 'layouts', 'editRelations'];
|
||||
const { dragIndex, hoverIndex, dragRowIndex, hoverRowIndex } = action;
|
||||
const getFieldType = name =>
|
||||
state.getIn(['modifiedData', 'schema', 'attributes', name, 'type']);
|
||||
@ -70,9 +70,7 @@ function settingViewModelReducer(state = initialState, action) {
|
||||
);
|
||||
case ADD_RELATION:
|
||||
return state
|
||||
.updateIn(['modifiedData', 'layouts', 'editRelations'], list =>
|
||||
list.push(action.name)
|
||||
)
|
||||
.updateIn(layoutPathRelations, list => list.push(action.name))
|
||||
.update('itemNameToSelect', () => action.name)
|
||||
.update('itemFormType', () => getFieldType(action.name));
|
||||
case GET_DATA_SUCCEEDED:
|
||||
@ -93,17 +91,20 @@ function settingViewModelReducer(state = initialState, action) {
|
||||
return action.overIndex;
|
||||
});
|
||||
case MOVE_RELATION: {
|
||||
return state.updateIn(relationPath, list => {
|
||||
return state.updateIn(layoutPathRelations, list => {
|
||||
return list
|
||||
.delete(dragIndex)
|
||||
.insert(hoverIndex, state.getIn([...relationPath, dragIndex]));
|
||||
.insert(hoverIndex, state.getIn([...layoutPathRelations, dragIndex]));
|
||||
});
|
||||
}
|
||||
case MOVE_ROW:
|
||||
return state.updateIn(layoutPath, list => {
|
||||
return state.updateIn(layoutPathEdit, list => {
|
||||
return list
|
||||
.delete(dragRowIndex)
|
||||
.insert(hoverRowIndex, state.getIn([...layoutPath, dragRowIndex]));
|
||||
.insert(
|
||||
hoverRowIndex,
|
||||
state.getIn([...layoutPathEdit, dragRowIndex])
|
||||
);
|
||||
});
|
||||
case ON_ADD_DATA: {
|
||||
const size = getSize(
|
||||
@ -116,9 +117,9 @@ function settingViewModelReducer(state = initialState, action) {
|
||||
])
|
||||
);
|
||||
|
||||
const listSize = state.getIn(layoutPath).size;
|
||||
const listSize = state.getIn(layoutPathEdit).size;
|
||||
const newList = state
|
||||
.getIn(layoutPath)
|
||||
.getIn(layoutPathEdit)
|
||||
.updateIn([listSize - 1, 'rowContent'], list => {
|
||||
if (list) {
|
||||
return list.push({
|
||||
@ -132,7 +133,7 @@ function settingViewModelReducer(state = initialState, action) {
|
||||
const formattedList = formatLayout(newList.toJS());
|
||||
|
||||
return state
|
||||
.updateIn(layoutPath, () => fromJS(formattedList))
|
||||
.updateIn(layoutPathEdit, () => fromJS(formattedList))
|
||||
.update('itemNameToSelect', () => action.name)
|
||||
.update('itemFormType', () => getFieldType(action.name));
|
||||
}
|
||||
@ -169,7 +170,11 @@ function settingViewModelReducer(state = initialState, action) {
|
||||
.update('modifiedData', () => state.get('initialData'))
|
||||
.update('listFieldToEditIndex', () => 0);
|
||||
case REMOVE_FIELD: {
|
||||
const row = state.getIn([...layoutPath, action.rowIndex, 'rowContent']);
|
||||
const row = state.getIn([
|
||||
...layoutPathEdit,
|
||||
action.rowIndex,
|
||||
'rowContent',
|
||||
]);
|
||||
let newState;
|
||||
let fieldName;
|
||||
|
||||
@ -179,34 +184,30 @@ function settingViewModelReducer(state = initialState, action) {
|
||||
(row.size == 2 && row.getIn([1, 'name']) === '_TEMP_')
|
||||
) {
|
||||
fieldName = state.getIn([
|
||||
'modifiedData',
|
||||
'layouts',
|
||||
'edit',
|
||||
...layoutPathEdit,
|
||||
action.rowIndex,
|
||||
'rowContent',
|
||||
0,
|
||||
'name',
|
||||
]);
|
||||
newState = state.updateIn(layoutPath, list =>
|
||||
newState = state.updateIn(layoutPathEdit, list =>
|
||||
list.delete(action.rowIndex)
|
||||
);
|
||||
} else {
|
||||
fieldName = state.getIn([
|
||||
'modifiedData',
|
||||
'layouts',
|
||||
'edit',
|
||||
...layoutPathEdit,
|
||||
action.rowIndex,
|
||||
'rowContent',
|
||||
action.fieldIndex,
|
||||
'name',
|
||||
]);
|
||||
newState = state.updateIn(
|
||||
[...layoutPath, action.rowIndex, 'rowContent'],
|
||||
[...layoutPathEdit, action.rowIndex, 'rowContent'],
|
||||
list => list.delete(action.fieldIndex)
|
||||
);
|
||||
}
|
||||
const updatedList = fromJS(
|
||||
formatLayout(newState.getIn(layoutPath).toJS())
|
||||
formatLayout(newState.getIn(layoutPathEdit).toJS())
|
||||
);
|
||||
|
||||
if (state.get('itemNameToSelect') === fieldName) {
|
||||
@ -216,29 +217,35 @@ function settingViewModelReducer(state = initialState, action) {
|
||||
0,
|
||||
'name',
|
||||
]);
|
||||
const firstRelationFieldToSelect = state.getIn([...relationPath, 0]);
|
||||
const firstRelationFieldToSelect = state.getIn([
|
||||
...layoutPathRelations,
|
||||
0,
|
||||
]);
|
||||
const fieldToSelect =
|
||||
firstFieldEditToSelect || firstRelationFieldToSelect || '';
|
||||
const fieldToSelectType = getFieldType(fieldToSelect) || '';
|
||||
|
||||
return state
|
||||
.updateIn(layoutPath, () => updatedList)
|
||||
.updateIn(layoutPathEdit, () => updatedList)
|
||||
.update('itemNameToSelect', () => fieldToSelect)
|
||||
.update('itemFormType', () => fieldToSelectType);
|
||||
}
|
||||
|
||||
return state.updateIn(layoutPath, () => updatedList);
|
||||
return state.updateIn(layoutPathEdit, () => updatedList);
|
||||
}
|
||||
case REMOVE_RELATION: {
|
||||
let newState = state.updateIn(relationPath, list =>
|
||||
let newState = state.updateIn(layoutPathRelations, list =>
|
||||
list.delete(action.index)
|
||||
);
|
||||
const fieldToDeleteName = state.getIn([...relationPath, action.index]);
|
||||
const fieldToDeleteName = state.getIn([
|
||||
...layoutPathRelations,
|
||||
action.index,
|
||||
]);
|
||||
|
||||
if (state.get('itemNameToSelect') === fieldToDeleteName) {
|
||||
const firstRelation = newState.getIn([...relationPath, 0]);
|
||||
const firstRelation = newState.getIn([...layoutPathRelations, 0]);
|
||||
const firstEditField = newState.getIn([
|
||||
...layoutPath,
|
||||
...layoutPathEdit,
|
||||
'0',
|
||||
'rowContent',
|
||||
'0',
|
||||
@ -256,31 +263,36 @@ function settingViewModelReducer(state = initialState, action) {
|
||||
}
|
||||
case REORDER_DIFF_ROW: {
|
||||
const newState = state
|
||||
.updateIn([...layoutPath, dragRowIndex, 'rowContent'], list => {
|
||||
.updateIn([...layoutPathEdit, dragRowIndex, 'rowContent'], list => {
|
||||
return list.remove(dragIndex);
|
||||
})
|
||||
.updateIn([...layoutPath, hoverRowIndex, 'rowContent'], list => {
|
||||
.updateIn([...layoutPathEdit, hoverRowIndex, 'rowContent'], list => {
|
||||
return list.insert(
|
||||
hoverIndex,
|
||||
state.getIn([...layoutPath, dragRowIndex, 'rowContent', dragIndex])
|
||||
state.getIn([
|
||||
...layoutPathEdit,
|
||||
dragRowIndex,
|
||||
'rowContent',
|
||||
dragIndex,
|
||||
])
|
||||
);
|
||||
});
|
||||
|
||||
const updatedList = formatLayout(newState.getIn(layoutPath).toJS());
|
||||
const updatedList = formatLayout(newState.getIn(layoutPathEdit).toJS());
|
||||
|
||||
return state.updateIn(layoutPath, () => fromJS(updatedList));
|
||||
return state.updateIn(layoutPathEdit, () => fromJS(updatedList));
|
||||
}
|
||||
case REORDER_ROW: {
|
||||
const newState = state.updateIn(
|
||||
[...layoutPath, dragRowIndex, 'rowContent'],
|
||||
[...layoutPathEdit, dragRowIndex, 'rowContent'],
|
||||
list => {
|
||||
return list.delete(dragIndex).insert(hoverIndex, list.get(dragIndex));
|
||||
}
|
||||
);
|
||||
|
||||
const updatedList = formatLayout(newState.getIn(layoutPath).toJS());
|
||||
const updatedList = formatLayout(newState.getIn(layoutPathEdit).toJS());
|
||||
|
||||
return state.updateIn(layoutPath, () => fromJS(updatedList));
|
||||
return state.updateIn(layoutPathEdit, () => fromJS(updatedList));
|
||||
}
|
||||
case RESET_PROPS:
|
||||
return initialState;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user