mirror of
https://github.com/strapi/strapi.git
synced 2025-11-05 12:24:35 +00:00
Dynamic zones ui
This commit is contained in:
parent
7d1634cde6
commit
3e1779c896
@ -15,10 +15,19 @@ const RoundCTA = styled.div`
|
|||||||
line-height: 27px;
|
line-height: 27px;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
&:hover {
|
&:not(.arrow-btn):hover {
|
||||||
background-color: #faa684;
|
background-color: #faa684;
|
||||||
color: #f64d0a;
|
color: #f64d0a;
|
||||||
}
|
}
|
||||||
|
&.arrow-btn {
|
||||||
|
height: 22px;
|
||||||
|
width: 22px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
border: 2px solid #ffffff;
|
||||||
|
&:hover {
|
||||||
|
background-color: #f2f3f4;
|
||||||
|
}
|
||||||
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export default RoundCTA;
|
export default RoundCTA;
|
||||||
|
|||||||
@ -91,7 +91,8 @@ const DynamicZone = ({ max, min, name }) => {
|
|||||||
<div key={index}>
|
<div key={index}>
|
||||||
{showDownIcon && (
|
{showDownIcon && (
|
||||||
<RoundCTA
|
<RoundCTA
|
||||||
style={{ top: -15, right: 30 }}
|
style={{ top: -15, right: 54 }}
|
||||||
|
className="arrow-btn"
|
||||||
onClick={() => moveComponentDown(name, index)}
|
onClick={() => moveComponentDown(name, index)}
|
||||||
>
|
>
|
||||||
<i className="fa fa-arrow-down" />
|
<i className="fa fa-arrow-down" />
|
||||||
@ -99,7 +100,8 @@ const DynamicZone = ({ max, min, name }) => {
|
|||||||
)}
|
)}
|
||||||
{showUpIcon && (
|
{showUpIcon && (
|
||||||
<RoundCTA
|
<RoundCTA
|
||||||
style={{ top: -15, right: 45 }}
|
style={{ top: -15, right: 88 }}
|
||||||
|
className="arrow-btn"
|
||||||
onClick={() => moveComponentUp(name, index)}
|
onClick={() => moveComponentUp(name, index)}
|
||||||
>
|
>
|
||||||
<i className="fa fa-arrow-up" />
|
<i className="fa fa-arrow-up" />
|
||||||
|
|||||||
@ -16,10 +16,9 @@ function ListItem({
|
|||||||
moveRelation,
|
moveRelation,
|
||||||
nextSearch,
|
nextSearch,
|
||||||
onRemove,
|
onRemove,
|
||||||
source,
|
|
||||||
targetModel,
|
targetModel,
|
||||||
}) {
|
}) {
|
||||||
const to = `/plugins/${pluginId}/${targetModel}/${data.id}?source=${source}&redirectUrl=${nextSearch}`;
|
const to = `/plugins/${pluginId}/${targetModel}/${data.id}?redirectUrl=${nextSearch}`;
|
||||||
|
|
||||||
const originalIndex = findRelation(data.id).index;
|
const originalIndex = findRelation(data.id).index;
|
||||||
const [{ isDragging }, drag, preview] = useDrag({
|
const [{ isDragging }, drag, preview] = useDrag({
|
||||||
@ -73,7 +72,6 @@ ListItem.propTypes = {
|
|||||||
moveRelation: PropTypes.func,
|
moveRelation: PropTypes.func,
|
||||||
nextSearch: PropTypes.string,
|
nextSearch: PropTypes.string,
|
||||||
onRemove: PropTypes.func,
|
onRemove: PropTypes.func,
|
||||||
source: PropTypes.string.isRequired,
|
|
||||||
targetModel: PropTypes.string,
|
targetModel: PropTypes.string,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -3,7 +3,7 @@ import React, { useState, useEffect, useRef, memo } from 'react';
|
|||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import { FormattedMessage } from 'react-intl';
|
import { FormattedMessage } from 'react-intl';
|
||||||
import { Link, useLocation } from 'react-router-dom';
|
import { Link, useLocation } from 'react-router-dom';
|
||||||
import { get, isArray, isEmpty } from 'lodash';
|
import { cloneDeep, get, isArray, isEmpty } from 'lodash';
|
||||||
import { request } from 'strapi-helper-plugin';
|
import { request } from 'strapi-helper-plugin';
|
||||||
import pluginId from '../../pluginId';
|
import pluginId from '../../pluginId';
|
||||||
import useDataManager from '../../hooks/useDataManager';
|
import useDataManager from '../../hooks/useDataManager';
|
||||||
@ -22,7 +22,6 @@ function SelectWrapper({
|
|||||||
relationType,
|
relationType,
|
||||||
targetModel,
|
targetModel,
|
||||||
placeholder,
|
placeholder,
|
||||||
plugin,
|
|
||||||
}) {
|
}) {
|
||||||
const { pathname, search } = useLocation();
|
const { pathname, search } = useLocation();
|
||||||
const {
|
const {
|
||||||
@ -33,13 +32,12 @@ function SelectWrapper({
|
|||||||
onRemoveRelation,
|
onRemoveRelation,
|
||||||
} = useDataManager();
|
} = useDataManager();
|
||||||
const { isDraggingComponent } = useEditView();
|
const { isDraggingComponent } = useEditView();
|
||||||
|
|
||||||
const value = get(modifiedData, name, null);
|
const value = get(modifiedData, name, null);
|
||||||
const source = isEmpty(plugin) ? 'content-manager' : plugin;
|
|
||||||
const [state, setState] = useState({
|
const [state, setState] = useState({
|
||||||
_q: '',
|
_q: '',
|
||||||
_limit: 20,
|
_limit: 20,
|
||||||
_start: 0,
|
_start: 0,
|
||||||
source,
|
|
||||||
});
|
});
|
||||||
const [options, setOptions] = useState([]);
|
const [options, setOptions] = useState([]);
|
||||||
const [isLoading, setIsLoading] = useState(true);
|
const [isLoading, setIsLoading] = useState(true);
|
||||||
@ -153,7 +151,7 @@ function SelectWrapper({
|
|||||||
const nextSearch = `${pathname}${search}`;
|
const nextSearch = `${pathname}${search}`;
|
||||||
const to = `/plugins/${pluginId}/${targetModel}/${
|
const to = `/plugins/${pluginId}/${targetModel}/${
|
||||||
value ? value.id : null
|
value ? value.id : null
|
||||||
}?source=${source}&redirectUrl=${nextSearch}`;
|
}?redirectUrl=${nextSearch}`;
|
||||||
const link =
|
const link =
|
||||||
value === null ||
|
value === null ||
|
||||||
value === undefined ||
|
value === undefined ||
|
||||||
@ -210,7 +208,6 @@ function SelectWrapper({
|
|||||||
placeholder
|
placeholder
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
source={source}
|
|
||||||
targetModel={targetModel}
|
targetModel={targetModel}
|
||||||
value={value}
|
value={value}
|
||||||
/>
|
/>
|
||||||
|
|||||||
@ -9,7 +9,7 @@ import React, {
|
|||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import { get } from 'lodash';
|
import { get } from 'lodash';
|
||||||
import { useHistory, useLocation } from 'react-router-dom';
|
import { useHistory, useLocation } from 'react-router-dom';
|
||||||
import { BackHeader, getQueryParameters, LiLink } from 'strapi-helper-plugin';
|
import { BackHeader, LiLink } from 'strapi-helper-plugin';
|
||||||
import pluginId from '../../pluginId';
|
import pluginId from '../../pluginId';
|
||||||
import Container from '../../components/Container';
|
import Container from '../../components/Container';
|
||||||
import DynamicZone from '../../components/DynamicZone';
|
import DynamicZone from '../../components/DynamicZone';
|
||||||
@ -64,7 +64,6 @@ const EditView = ({
|
|||||||
() => get(currentContentTypeLayoutData, ['schema'], {}),
|
() => get(currentContentTypeLayoutData, ['schema'], {}),
|
||||||
[currentContentTypeLayoutData]
|
[currentContentTypeLayoutData]
|
||||||
);
|
);
|
||||||
const source = getQueryParameters(search, 'source');
|
|
||||||
|
|
||||||
const getFieldMetas = useCallback(
|
const getFieldMetas = useCallback(
|
||||||
fieldName => {
|
fieldName => {
|
||||||
@ -276,8 +275,7 @@ const EditView = ({
|
|||||||
}}
|
}}
|
||||||
icon="layout"
|
icon="layout"
|
||||||
key={`${pluginId}.link`}
|
key={`${pluginId}.link`}
|
||||||
// url={`/plugins/${pluginId}/ctm-configurations/edit-settings/content-types/${slug}${`?source=${source}`}`}
|
url={`ctm-configurations/edit-settings/content-types`}
|
||||||
url={`ctm-configurations/edit-settings/content-types${`?source=${source}`}`}
|
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
// emitEvent('willEditContentTypeLayoutFromEditView');
|
// emitEvent('willEditContentTypeLayoutFromEditView');
|
||||||
}}
|
}}
|
||||||
@ -287,7 +285,6 @@ const EditView = ({
|
|||||||
plugins,
|
plugins,
|
||||||
currentEnvironment,
|
currentEnvironment,
|
||||||
slug,
|
slug,
|
||||||
source,
|
|
||||||
emitEvent,
|
emitEvent,
|
||||||
true
|
true
|
||||||
)}
|
)}
|
||||||
|
|||||||
@ -1,12 +1,8 @@
|
|||||||
import React, { useEffect, useReducer } from 'react';
|
import React, { useEffect, useReducer } from 'react';
|
||||||
import { useLocation, useParams } from 'react-router-dom';
|
import { useParams } from 'react-router-dom';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import { cloneDeep, get, isEmpty, set } from 'lodash';
|
import { cloneDeep, get, isEmpty, set } from 'lodash';
|
||||||
import {
|
import { request, LoadingIndicatorPage } from 'strapi-helper-plugin';
|
||||||
getQueryParameters,
|
|
||||||
request,
|
|
||||||
LoadingIndicatorPage,
|
|
||||||
} from 'strapi-helper-plugin';
|
|
||||||
import pluginId from '../../pluginId';
|
import pluginId from '../../pluginId';
|
||||||
import EditViewDataManagerContext from '../../contexts/EditViewDataManager';
|
import EditViewDataManagerContext from '../../contexts/EditViewDataManager';
|
||||||
import createYupSchema from './utils/schema';
|
import createYupSchema from './utils/schema';
|
||||||
@ -27,7 +23,6 @@ const EditViewDataManagerProvider = ({
|
|||||||
}) => {
|
}) => {
|
||||||
const { id } = useParams();
|
const { id } = useParams();
|
||||||
// Retrieve the search
|
// Retrieve the search
|
||||||
const { search } = useLocation();
|
|
||||||
const [reducerState, dispatch] = useReducer(reducer, initialState, init);
|
const [reducerState, dispatch] = useReducer(reducer, initialState, init);
|
||||||
const {
|
const {
|
||||||
formErrors,
|
formErrors,
|
||||||
@ -42,7 +37,6 @@ const EditViewDataManagerProvider = ({
|
|||||||
const abortController = new AbortController();
|
const abortController = new AbortController();
|
||||||
const { signal } = abortController;
|
const { signal } = abortController;
|
||||||
const isCreatingEntry = id === 'create';
|
const isCreatingEntry = id === 'create';
|
||||||
const source = getQueryParameters(search, 'source');
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!isLoading) {
|
if (!isLoading) {
|
||||||
@ -56,7 +50,6 @@ const EditViewDataManagerProvider = ({
|
|||||||
try {
|
try {
|
||||||
const data = await request(getRequestUrl(`${slug}/${id}`), {
|
const data = await request(getRequestUrl(`${slug}/${id}`), {
|
||||||
method: 'GET',
|
method: 'GET',
|
||||||
params: { source },
|
|
||||||
signal,
|
signal,
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -107,7 +100,7 @@ const EditViewDataManagerProvider = ({
|
|||||||
abortController.abort();
|
abortController.abort();
|
||||||
};
|
};
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
}, [id, slug, source]);
|
}, [id, slug]);
|
||||||
|
|
||||||
const addComponentToDynamicZone = (
|
const addComponentToDynamicZone = (
|
||||||
keys,
|
keys,
|
||||||
@ -236,7 +229,6 @@ const EditViewDataManagerProvider = ({
|
|||||||
{
|
{
|
||||||
method,
|
method,
|
||||||
headers,
|
headers,
|
||||||
params: { source },
|
|
||||||
body: formData,
|
body: formData,
|
||||||
signal,
|
signal,
|
||||||
},
|
},
|
||||||
@ -369,7 +361,6 @@ const EditViewDataManagerProvider = ({
|
|||||||
setIsSubmitting,
|
setIsSubmitting,
|
||||||
shouldShowLoadingState,
|
shouldShowLoadingState,
|
||||||
slug,
|
slug,
|
||||||
source,
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{showLoader ? (
|
{showLoader ? (
|
||||||
|
|||||||
@ -400,11 +400,7 @@ function ListView({
|
|||||||
}}
|
}}
|
||||||
popUpWarningType="danger"
|
popUpWarningType="danger"
|
||||||
onConfirm={() => {
|
onConfirm={() => {
|
||||||
onDeleteSeveralData(
|
onDeleteSeveralData(entriesToDelete, slug);
|
||||||
entriesToDelete,
|
|
||||||
slug,
|
|
||||||
getSearchParams().source
|
|
||||||
);
|
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</ListViewProvider>
|
</ListViewProvider>
|
||||||
|
|||||||
@ -11,7 +11,6 @@ const getInjectedComponents = (
|
|||||||
plugins,
|
plugins,
|
||||||
currentEnvironment,
|
currentEnvironment,
|
||||||
slug,
|
slug,
|
||||||
source,
|
|
||||||
emitEvent,
|
emitEvent,
|
||||||
push
|
push
|
||||||
) => {
|
) => {
|
||||||
@ -32,7 +31,6 @@ const getInjectedComponents = (
|
|||||||
<Component
|
<Component
|
||||||
currentEnvironment={currentEnvironment}
|
currentEnvironment={currentEnvironment}
|
||||||
getModelName={() => slug}
|
getModelName={() => slug}
|
||||||
getSource={() => source}
|
|
||||||
getContentTypeBuilderBaseUrl={() =>
|
getContentTypeBuilderBaseUrl={() =>
|
||||||
'/plugins/content-type-builder/models/'
|
'/plugins/content-type-builder/models/'
|
||||||
}
|
}
|
||||||
|
|||||||
@ -13,20 +13,12 @@ import { Button } from '@buffetjs/core';
|
|||||||
function EditViewButton(props) {
|
function EditViewButton(props) {
|
||||||
const { formatMessage } = useGlobalContext();
|
const { formatMessage } = useGlobalContext();
|
||||||
// Retrieve URL from props
|
// Retrieve URL from props
|
||||||
const base = `${props.getContentTypeBuilderBaseUrl()}${props.getModelName()}`;
|
const url = `${props.getContentTypeBuilderBaseUrl()}${props.getModelName()}`;
|
||||||
const url =
|
|
||||||
props.getSource() === 'users-permissions'
|
|
||||||
? `${base}&source=${props.getSource()}`
|
|
||||||
: base;
|
|
||||||
|
|
||||||
const handleClick = () => {
|
const handleClick = () => {
|
||||||
props.push(url);
|
props.push(url);
|
||||||
};
|
};
|
||||||
|
|
||||||
if (props.getSource() === 'admin') {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (props.currentEnvironment === 'development') {
|
if (props.currentEnvironment === 'development') {
|
||||||
return (
|
return (
|
||||||
<Button
|
<Button
|
||||||
@ -52,7 +44,6 @@ EditViewButton.propTypes = {
|
|||||||
currentEnvironment: PropTypes.string.isRequired,
|
currentEnvironment: PropTypes.string.isRequired,
|
||||||
getContentTypeBuilderBaseUrl: PropTypes.func.isRequired,
|
getContentTypeBuilderBaseUrl: PropTypes.func.isRequired,
|
||||||
getModelName: PropTypes.func.isRequired,
|
getModelName: PropTypes.func.isRequired,
|
||||||
getSource: PropTypes.func.isRequired,
|
|
||||||
push: PropTypes.func.isRequired,
|
push: PropTypes.func.isRequired,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -11,15 +11,7 @@ import { LiLink } from 'strapi-helper-plugin';
|
|||||||
// Create link from content-type-builder to content-manager
|
// Create link from content-type-builder to content-manager
|
||||||
function EditViewLink(props) {
|
function EditViewLink(props) {
|
||||||
// Retrieve URL from props
|
// Retrieve URL from props
|
||||||
const base = `${props.getContentTypeBuilderBaseUrl()}${props.getModelName()}`;
|
const url = `${props.getContentTypeBuilderBaseUrl()}${props.getModelName()}`;
|
||||||
const url =
|
|
||||||
props.getSource() === 'users-permissions'
|
|
||||||
? `${base}&source=${props.getSource()}`
|
|
||||||
: base;
|
|
||||||
|
|
||||||
if (props.getSource() === 'admin') {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (props.currentEnvironment === 'development') {
|
if (props.currentEnvironment === 'development') {
|
||||||
return <LiLink {...props} url={url} />;
|
return <LiLink {...props} url={url} />;
|
||||||
@ -32,7 +24,6 @@ EditViewLink.propTypes = {
|
|||||||
currentEnvironment: PropTypes.string.isRequired,
|
currentEnvironment: PropTypes.string.isRequired,
|
||||||
getContentTypeBuilderBaseUrl: PropTypes.func.isRequired,
|
getContentTypeBuilderBaseUrl: PropTypes.func.isRequired,
|
||||||
getModelName: PropTypes.func.isRequired,
|
getModelName: PropTypes.func.isRequired,
|
||||||
getSource: PropTypes.func.isRequired,
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default EditViewLink;
|
export default EditViewLink;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user