yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-08-05 15:29:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

Simplified DZ component

Browse Source 
Signed-off-by: soupette <cyril.lpz@gmail.com>
This commit is contained in:
soupette 2020-10-23 15:38:32 +02:00
parent 430cb0dc11
commit 6e05185a54
4 changed files with 36 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
packages/strapi-plugin-content-manager/admin/src/components/DynamicZone/index.js
View File

@ -24,8 +24,6 @@ import Wrapper from './Wrapper';
/* eslint-disable react/no-array-index-key */
const DynamicZone = ({
max,
min,
name,
// Passed with the select function
@ -34,16 +32,20 @@ const DynamicZone = ({
isCreatingEntry,
isFieldAllowed,
isFieldReadable,
layout,
moveComponentUp,
moveComponentDown,
removeComponentFromDynamicZone,
dynamicDisplayedComponents,
fieldSchema,
metadatas,
}) => {
const [isOpen, setIsOpen] = useState(false);
const { components } = useEditView();
// We cannot use the default props here
const { max = Infinity, min = -Infinity } = fieldSchema;
const getDynamicComponentSchemaData = useCallback(
componentUid => {
const component = components.find(compo => compo.uid === componentUid);
@ -73,12 +75,8 @@ const DynamicZone = ({
.map(key => formErrors[key]);
}, [formErrors, name]);
const dynamicZoneAvailableComponents = useMemo(
() => get(layout, ['schema', 'attributes', name, 'components'], []),
[layout, name]
);
const dynamicZoneAvailableComponents = useMemo(() => fieldSchema.components || [], [fieldSchema]);
const metas = useMemo(() => get(layout, ['metadatas', name, 'edit'], {}), [layout, name]);
const dynamicDisplayedComponentsLength = dynamicDisplayedComponents.length;
const missingComponentNumber = min - dynamicDisplayedComponentsLength;
const hasError = dynamicZoneErrors.length > 0;
@ -89,18 +87,20 @@ const DynamicZone = ({
const hasMaxError =
hasError && get(dynamicZoneErrors, [0, 'id'], '') === 'components.Input.error.validation.max';
// TODO
if (!isFieldAllowed && isCreatingEntry) {
return (
<BaselineAlignement>
<NotAllowedInput label={metas.label} spacerHeight="3px" />
<NotAllowedInput label={metadatas.label} spacerHeight="3px" />
</BaselineAlignement>
);
}
// TODO
if (!isFieldAllowed && !isFieldReadable && !isCreatingEntry) {
return (
<BaselineAlignement>
<NotAllowedInput label={metas.label} spacerHeight="3px" />
<NotAllowedInput label={metadatas.label} spacerHeight="3px" />
</BaselineAlignement>
);
}
@ -109,8 +109,8 @@ const DynamicZone = ({
<DynamicZoneWrapper>
{dynamicDisplayedComponentsLength > 0 && (
<Label>
<p>{metas.label}</p>
<p>{metas.description}</p>
<p>{metadatas.label}</p>
<p>{metadatas.description}</p>
</Label>
)}
@ -198,7 +198,7 @@ const DynamicZone = ({
<div className="info">
<FormattedMessage
id={`${pluginId}.components.DynamicZone.add-compo`}
values={{ componentName: name }}
values={{ componentName: metadatas.label }}
/>
</div>
<ComponentsPicker isOpen={isOpen}>
@ -237,22 +237,33 @@ const DynamicZone = ({
DynamicZone.defaultProps = {
dynamicDisplayedComponents: [],
max: Infinity,
min: -Infinity,
fieldSchema: {
max: Infinity,
min: -Infinity,
},
};
DynamicZone.propTypes = {
addComponentToDynamicZone: PropTypes.func.isRequired,
dynamicDisplayedComponents: PropTypes.array,
fieldSchema: PropTypes.shape({
components: PropTypes.array.isRequired,
max: PropTypes.number,
min: PropTypes.number,
}),
formErrors: PropTypes.object.isRequired,
isCreatingEntry: PropTypes.bool.isRequired,
isFieldAllowed: PropTypes.bool.isRequired,
isFieldReadable: PropTypes.bool.isRequired,
layout: PropTypes.object.isRequired,
metadatas: PropTypes.shape({
description: PropTypes.string,
// editable: PropTypes.bool,
label: PropTypes.string,
// placeholder: PropTypes.string,
// visible: PropTypes.bool,
}).isRequired,
moveComponentUp: PropTypes.func.isRequired,
moveComponentDown: PropTypes.func.isRequired,
max: PropTypes.number,
min: PropTypes.number,
name: PropTypes.string.isRequired,
removeComponentFromDynamicZone: PropTypes.func.isRequired,
};

2
packages/strapi-plugin-content-manager/admin/src/components/DynamicZone/utils/select.js
View File

@ -8,7 +8,6 @@ function useSelect(name) {
createActionAllowedFields,
isCreatingEntry,
formErrors,
layout,
modifiedData,
moveComponentUp,
moveComponentDown,
@ -37,7 +36,6 @@ function useSelect(name) {
return {
addComponentToDynamicZone,
formErrors,
layout,
isCreatingEntry,
isFieldAllowed,
isFieldReadable,

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

@ -84,7 +84,7 @@ const EditView = ({ components, currentEnvironment, models, plugins, slug }) =>
if (isDynamicZone(block)) {
const {
0: {
0: { name, fieldSchema },
0: { name, fieldSchema, metadatas },
},
} = block;
@ -92,8 +92,8 @@ const EditView = ({ components, currentEnvironment, models, plugins, slug }) =>
<DynamicZone
key={blockIndex}
name={name}
max={fieldSchema.max}
min={fieldSchema.min}
fieldSchema={fieldSchema}
metadatas={metadatas}
/>
);
}

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

@ -86,7 +86,7 @@ const EditView = ({ components, currentEnvironment, models, plugins, slug }) =>
if (isDynamicZone(block)) {
const {
0: {
0: { name, fieldSchema },
0: { name, fieldSchema, metadatas },
},
} = block;
@ -94,8 +94,8 @@ const EditView = ({ components, currentEnvironment, models, plugins, slug }) =>
<DynamicZone
key={blockIndex}
name={name}
max={fieldSchema.max}
min={fieldSchema.min}
fieldSchema={fieldSchema}
metadatas={metadatas}
/>
);
}