yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-09-21 14:31:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

Remove useless drag event is component relation select

Browse Source 
Signed-off-by: soupette <cyril.lpz@gmail.com>
This commit is contained in:
soupette 2020-10-22 18:21:10 +02:00
parent 27eb21e406
commit 2c466f02b4
9 changed files with 35 additions and 252 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/strapi-plugin-content-manager/admin/src/components/RepeatableComponent/DraggedItem/index.js
View File

@ -5,7 +5,6 @@ import { get } from 'lodash';
import { Collapse } from 'reactstrap'; import { Collapse } from 'reactstrap';
import { useDrag, useDrop } from 'react-dnd'; import { useDrag, useDrop } from 'react-dnd';
import { getEmptyImage } from 'react-dnd-html5-backend'; import { getEmptyImage } from 'react-dnd-html5-backend';
import useEditView from '../../../hooks/useEditView';
import ItemTypes from '../../../utils/ItemTypes'; import ItemTypes from '../../../utils/ItemTypes';
import Inputs from '../../Inputs'; import Inputs from '../../Inputs';
import FieldComponent from '../../FieldComponent'; import FieldComponent from '../../FieldComponent';
@ -42,7 +41,6 @@ const DraggedItem = ({
checkFormErrors, checkFormErrors,
displayedValue, displayedValue,
}) => { }) => {
const { setIsDraggingComponent, unsetIsDraggingComponent } = useEditView();
const dragRef = useRef(null); const dragRef = useRef(null);
const dropRef = useRef(null); const dropRef = useRef(null);
const [showForm, setShowForm] = useState(false); const [showForm, setShowForm] = useState(false);
@ -126,12 +124,8 @@ const DraggedItem = ({
begin: () => { begin: () => {
// Close all collapses // Close all collapses
toggleCollapses(-1); toggleCollapses(-1);
// Prevent the relations select from firing requests
setIsDraggingComponent();
}, },
end: () => { end: () => {
// Enable the relations select to fire requests
unsetIsDraggingComponent();
// Update the errors // Update the errors
triggerFormValidation(); triggerFormValidation();
}, },

67
packages/strapi-plugin-content-manager/admin/src/components/SelectWrapper/index.js
View File

@ -7,7 +7,6 @@ import { request } from 'strapi-helper-plugin';
import { Flex, Text, Padded } from '@buffetjs/core'; import { Flex, Text, Padded } from '@buffetjs/core';
import pluginId from '../../pluginId'; import pluginId from '../../pluginId';
import useDataManager from '../../hooks/useDataManager'; import useDataManager from '../../hooks/useDataManager';
import useEditView from '../../hooks/useEditView';
import { getFieldName } from '../../utils'; import { getFieldName } from '../../utils';
import NotAllowedInput from '../NotAllowedInput'; import NotAllowedInput from '../NotAllowedInput';
import SelectOne from '../SelectOne'; import SelectOne from '../SelectOne';
@ -39,8 +38,6 @@ function SelectWrapper({
const isMorph = relationType.toLowerCase().includes('morph'); const isMorph = relationType.toLowerCase().includes('morph');
const { addRelation, modifiedData, moveRelation, onChange, onRemoveRelation } = useDataManager(); const { addRelation, modifiedData, moveRelation, onChange, onRemoveRelation } = useDataManager();
const { isDraggingComponent } = useEditView();
// This is needed for making requests when used in a component // This is needed for making requests when used in a component
const fieldName = useMemo(() => { const fieldName = useMemo(() => {
const fieldNameArray = getFieldName(name); const fieldNameArray = getFieldName(name);
@ -88,46 +85,44 @@ function SelectWrapper({
return; return;
} }
if (!isDraggingComponent) { try {
try { const requestUrl = `/${pluginId}/explorer/${slug}/relation-list/${fieldName}`;
const requestUrl = `/${pluginId}/explorer/${slug}/relation-list/${fieldName}`;
const containsKey = `${mainField}_contains`; const containsKey = `${mainField}_contains`;
const { _contains, ...restState } = cloneDeep(state); const { _contains, ...restState } = cloneDeep(state);
const params = isEmpty(state._contains) const params = isEmpty(state._contains)
? restState ? restState
: { [containsKey]: _contains, ...restState }; : { [containsKey]: _contains, ...restState };
if (componentUid) { if (componentUid) {
set(params, '_component', componentUid); set(params, '_component', componentUid);
} }
const data = await request(requestUrl, { const data = await request(requestUrl, {
method: 'GET', method: 'GET',
params, params,
signal, signal,
}); });
const formattedData = data.map(obj => { const formattedData = data.map(obj => {
return { value: obj, label: obj[mainField] }; return { value: obj, label: obj[mainField] };
}); });
setOptions(prevState => setOptions(prevState =>
prevState.concat(formattedData).filter((obj, index) => { prevState.concat(formattedData).filter((obj, index) => {
const objIndex = prevState.findIndex(el => el.value.id === obj.value.id); const objIndex = prevState.findIndex(el => el.value.id === obj.value.id);
if (objIndex === -1) { if (objIndex === -1) {
return true; return true;
} }
return prevState.findIndex(el => el.value.id === obj.value.id) === index; return prevState.findIndex(el => el.value.id === obj.value.id) === index;
}) })
); );
setIsLoading(false); setIsLoading(false);
} catch (err) { } catch (err) {
if (err.code !== 20) { if (err.code !== 20) {
strapi.notification.error('notification.error'); strapi.notification.error('notification.error');
}
} }
} }
}; };

21
packages/strapi-plugin-content-manager/admin/src/containers/EditView/index.js
View File

@ -1,4 +1,4 @@
import React, { memo, useCallback, useMemo, useEffect, useReducer } from 'react'; import React, { memo, useCallback, useMemo, useEffect } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { get } from 'lodash'; import { get } from 'lodash';
import { useHistory } from 'react-router-dom'; import { useHistory } from 'react-router-dom';
@ -20,8 +20,6 @@ import EditViewProvider from '../EditViewProvider';
import Header from './Header'; import Header from './Header';
import { createAttributesLayout, formatLayoutWithMetas } from './utils'; import { createAttributesLayout, formatLayoutWithMetas } from './utils';
import { LinkWrapper, SubWrapper } from './components'; import { LinkWrapper, SubWrapper } from './components';
import reducer, { initialState } from './reducer';
import DeleteLink from './DeleteLink'; import DeleteLink from './DeleteLink';
import InformationCard from './InformationCard'; import InformationCard from './InformationCard';
@ -41,8 +39,6 @@ const EditView = ({
const viewPermissions = useMemo(() => generatePermissionsObject(slug), [slug]); const viewPermissions = useMemo(() => generatePermissionsObject(slug), [slug]);
const { allowedActions } = useUserPermissions(viewPermissions); const { allowedActions } = useUserPermissions(viewPermissions);
const [{ isDraggingComponent }, dispatch] = useReducer(reducer, initialState);
const allLayoutData = useMemo(() => get(layouts, [slug], {}), [layouts, slug]); const allLayoutData = useMemo(() => get(layouts, [slug], {}), [layouts, slug]);
const currentContentTypeLayoutData = useMemo(() => get(allLayoutData, ['contentType'], {}), [ const currentContentTypeLayoutData = useMemo(() => get(allLayoutData, ['contentType'], {}), [
@ -65,18 +61,6 @@ const EditView = ({
}); });
}, []); }, []);
const handleDragComponent = useCallback(() => {
dispatch({
type: 'SET_IS_DRAGGING_COMPONENT',
});
}, []);
const handleDropComponent = useCallback(() => {
dispatch({
type: 'UNSET_IS_DRAGGING_COMPONENT',
});
}, []);
useEffect(() => { useEffect(() => {
return () => deleteLayout(slug); return () => deleteLayout(slug);
}, [deleteLayout, slug]); }, [deleteLayout, slug]);
@ -92,12 +76,9 @@ const EditView = ({
allowedActions={allowedActions} allowedActions={allowedActions}
allLayoutData={allLayoutData} allLayoutData={allLayoutData}
components={components} components={components}
isDraggingComponent={isDraggingComponent}
isSingleType={false} isSingleType={false}
layout={currentContentTypeLayoutData} layout={currentContentTypeLayoutData}
models={models} models={models}
setIsDraggingComponent={handleDragComponent}
unsetIsDraggingComponent={handleDropComponent}
> >
<EditViewDataManagerProvider <EditViewDataManagerProvider
allLayoutData={allLayoutData} allLayoutData={allLayoutData}

5
packages/strapi-plugin-content-manager/admin/src/containers/EditView/init.js
View File

@ -1,5 +0,0 @@
function init(initialState) {
return initialState;
}
export default init;

26
packages/strapi-plugin-content-manager/admin/src/containers/EditView/reducer.js
View File

@ -1,26 +0,0 @@
import produce from 'immer';
const initialState = {
isDraggingComponent: false,
};
const reducer = (state, action) =>
// eslint-disable-next-line consistent-return
produce(state, drafState => {
switch (action.type) {
case 'SET_IS_DRAGGING_COMPONENT': {
drafState.isDraggingComponent = true;
break;
}
case 'UNSET_IS_DRAGGING_COMPONENT': {
drafState.isDraggingComponent = false;
break;
}
default: {
return drafState;
}
}
});
export default reducer;
export { initialState };

50
packages/strapi-plugin-content-manager/admin/src/containers/EditView/tests/reducer.test.js
View File

@ -1,50 +0,0 @@
import produce from 'immer';
import reducer from '../reducer';
describe('CONTENT MANAGER | CONTAINERS | EditView | reducer', () => {
let state;
beforeEach(() => {
state = {
isDraggingComponent: false,
};
});
describe('DEFAULT_ACTION', () => {
it('should return the state', () => {
const expected = state;
expect(reducer(state, {})).toEqual(expected);
});
});
describe('SET_IS_DRAGGING_COMPONENT', () => {
it('should set the isDraggingComponent to true', () => {
const action = {
type: 'SET_IS_DRAGGING_COMPONENT',
};
const expected = produce(state, draft => {
draft.isDraggingComponent = true;
});
expect(reducer(state, action)).toEqual(expected);
});
});
describe('UNSET_IS_DRAGGING_COMPONENT', () => {
it('should set the isDraggingComponent to false', () => {
state.isDraggingComponent = true;
const action = {
type: 'UNSET_IS_DRAGGING_COMPONENT',
};
const expected = produce(state, draft => {
draft.isDraggingComponent = false;
});
expect(reducer(state, action)).toEqual(expected);
});
});
});

17
packages/strapi-plugin-content-manager/admin/src/containers/SingleTypeEditView/index.js
View File

@ -49,10 +49,8 @@ const EditView = ({
const { allowedActions } = useUserPermissions(viewPermissions); const { allowedActions } = useUserPermissions(viewPermissions);
const isSingleType = useMemo(() => contentType === 'singleType', [contentType]); const isSingleType = useMemo(() => contentType === 'singleType', [contentType]);
const [{ formattedContentTypeLayout, isDraggingComponent }, dispatch] = useReducer( const [{ formattedContentTypeLayout }, dispatch] = useReducer(reducer, initialState, () =>
reducer, init(initialState)
initialState,
() => init(initialState)
); );
const allLayoutData = useMemo(() => get(layouts, [slug], {}), [layouts, slug]); const allLayoutData = useMemo(() => get(layouts, [slug], {}), [layouts, slug]);
const currentContentTypeLayoutData = useMemo(() => get(allLayoutData, ['contentType'], {}), [ const currentContentTypeLayoutData = useMemo(() => get(allLayoutData, ['contentType'], {}), [
@ -126,20 +124,9 @@ const EditView = ({
allowedActions={allowedActions} allowedActions={allowedActions}
allLayoutData={allLayoutData} allLayoutData={allLayoutData}
components={components} components={components}
isDraggingComponent={isDraggingComponent}
isSingleType={isSingleType} isSingleType={isSingleType}
layout={currentContentTypeLayoutData} layout={currentContentTypeLayoutData}
models={models} models={models}
setIsDraggingComponent={() => {
dispatch({
type: 'SET_IS_DRAGGING_COMPONENT',
});
}}
unsetIsDraggingComponent={() => {
dispatch({
type: 'UNSET_IS_DRAGGING_COMPONENT',
});
}}
> >
<EditViewDataManagerProvider <EditViewDataManagerProvider
allLayoutData={allLayoutData} allLayoutData={allLayoutData}

11
packages/strapi-plugin-content-manager/admin/src/containers/SingleTypeEditView/reducer.js
View File

@ -2,28 +2,19 @@ import produce from 'immer';
const initialState = { const initialState = {
formattedContentTypeLayout: [], formattedContentTypeLayout: [],
isDraggingComponent: false,
}; };
const reducer = (state, action) => const reducer = (state, action) =>
// eslint-disable-next-line consistent-return // eslint-disable-next-line consistent-return
produce(state, drafState => { produce(state, drafState => {
switch (action.type) { switch (action.type) {
case 'SET_IS_DRAGGING_COMPONENT': {
drafState.isDraggingComponent = true;
break;
}
case 'SET_LAYOUT_DATA': { case 'SET_LAYOUT_DATA': {
drafState.formattedContentTypeLayout = action.formattedContentTypeLayout; drafState.formattedContentTypeLayout = action.formattedContentTypeLayout;
break; break;
} }
case 'RESET_PROPS': case 'RESET_PROPS':
return initialState; return initialState;
case 'UNSET_IS_DRAGGING_COMPONENT': {
drafState.isDraggingComponent = false;
break;
}
default: { default: {
return drafState; return drafState;
} }

84
packages/strapi-plugin-content-manager/admin/src/containers/SingleTypeEditView/tests/reducer.test.js
View File

@ -1,84 +0,0 @@
import produce from 'immer';
import reducer from '../reducer';
describe('CONTENT MANAGER | CONTAINERS | EditView | reducer', () => {
let state;
beforeEach(() => {
state = {
formattedContentTypeLayout: [],
isDraggingComponent: false,
};
});
describe('DEFAULT_ACTION', () => {
it('should return the state', () => {
const expected = state;
expect(reducer(state, {})).toEqual(expected);
});
});
describe('SET_IS_DRAGGING_COMPONENT', () => {
it('should set the isDraggingComponent to true', () => {
const action = {
type: 'SET_IS_DRAGGING_COMPONENT',
};
const expected = produce(state, draft => {
draft.isDraggingComponent = true;
});
expect(reducer(state, action)).toEqual(expected);
});
});
describe('SET_LAYOUT_DATA', () => {
it('should set the isDraggingComponent to true', () => {
const action = {
type: 'SET_LAYOUT_DATA',
formattedContentTypeLayout: ['test', 'test1'],
};
const expected = produce(state, draft => {
draft.formattedContentTypeLayout = ['test', 'test1'];
});
expect(reducer(state, action)).toEqual(expected);
});
});
describe('RESET_PROPS', () => {
it('should set the isDraggingComponent to true', () => {
const action = {
type: 'RESET_PROPS',
};
state.isDraggingComponent = true;
state.formattedContentTypeLayout = ['test', 'test1'];
const expected = produce(state, draft => {
draft.isDraggingComponent = false;
draft.formattedContentTypeLayout = [];
});
expect(reducer(state, action)).toEqual(expected);
});
});
describe('UNSET_IS_DRAGGING_COMPONENT', () => {
it('should set the isDraggingComponent to false', () => {
state.isDraggingComponent = true;
const action = {
type: 'UNSET_IS_DRAGGING_COMPONENT',
};
const expected = produce(state, draft => {
draft.isDraggingComponent = false;
});
expect(reducer(state, action)).toEqual(expected);
});
});
});