yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2026-01-08 21:35:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor nested grids into component for readability

Browse Source
This commit is contained in:
Mark Kaylor 2022-11-15 18:15:38 +01:00
parent 16dda55874
commit 1d9ec79211
2 changed files with 61 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
packages/core/admin/admin/src/content-manager/pages/EditView/GridRow/index.js Normal file
View File

@ -0,0 +1,56 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Grid, GridItem } from '@strapi/design-system/Grid';
import Inputs from '../../../components/Inputs';
import FieldComponent from '../../../components/FieldComponent';
const GridRow = ({ grid }) => {
return (
<Grid gap={4}>
{grid.map(({ fieldSchema, labelAction, metadatas, name, size, queryInfos }) => {
const isComponent = fieldSchema.type === 'component';
if (isComponent) {
const { component, max, min, repeatable = false, required = false } = fieldSchema;
return (
<GridItem col={size} s={12} xs={12} key={component}>
<FieldComponent
componentUid={component}
labelAction={labelAction}
isRepeatable={repeatable}
intlLabel={{
id: metadatas.label,
defaultMessage: metadatas.label,
}}
max={max}
min={min}
name={name}
required={required}
/>
</GridItem>
);
}
return (
<GridItem col={size} key={name} s={12} xs={12}>
<Inputs
size={size}
fieldSchema={fieldSchema}
keys={name}
labelAction={labelAction}
metadatas={metadatas}
queryInfos={queryInfos}
/>
</GridItem>
);
})}
</Grid>
);
};
GridRow.propTypes = {
grid: PropTypes.array.isRequired,
};
export default GridRow;

66
packages/core/admin/admin/src/content-manager/pages/EditView/index.js
View File

@ -18,8 +18,7 @@ import Pencil from '@strapi/icons/Pencil';
import { InjectionZone } from '../../../shared/components';
import permissions from '../../../permissions';
import DynamicZone from '../../components/DynamicZone';
import FieldComponent from '../../components/FieldComponent';
import Inputs from '../../components/Inputs';
import CollectionTypeFormWrapper from '../../components/CollectionTypeFormWrapper';
import EditViewDataManagerProvider from '../../components/EditViewDataManagerProvider';
import SingleTypeFormWrapper from '../../components/SingleTypeFormWrapper';
@ -29,6 +28,7 @@ import Informations from './Informations';
import Header from './Header';
import { createAttributesLayout, getFieldsActionMatchingPermissions } from './utils';
import DeleteLink from './DeleteLink';
import GridRow from './GridRow';
const cmPermissions = permissions.contentManager;
const ctbPermissions = [{ action: 'plugin::content-type-builder.read', subject: null }];
@ -171,65 +171,9 @@ const EditView = ({
borderColor="neutral150"
>
<Stack spacing={6}>
{row.map((grid, gridIndex) => {
return (
<Grid gap={4} key={gridIndex}>
{grid.map(
({
fieldSchema,
labelAction,
metadatas,
name,
size,
queryInfos,
}) => {
const isComponent = fieldSchema.type === 'component';
if (isComponent) {
const {
component,
max,
min,
repeatable = false,
required = false,
} = fieldSchema;
return (
<GridItem col={size} s={12} xs={12} key={component}>
<FieldComponent
componentUid={component}
labelAction={labelAction}
isRepeatable={repeatable}
intlLabel={{
id: metadatas.label,
defaultMessage: metadatas.label,
}}
max={max}
min={min}
name={name}
required={required}
/>
</GridItem>
);
}
return (
<GridItem col={size} key={name} s={12} xs={12}>
<Inputs
size={size}
fieldSchema={fieldSchema}
keys={name}
labelAction={labelAction}
metadatas={metadatas}
queryInfos={queryInfos}
/>
</GridItem>
);
}
)}
</Grid>
);
})}
{row.map((grid, gridRowIndex) => (
<GridRow grid={grid} key={gridRowIndex} />
))}
</Stack>
</Box>
);