Change layout shape

Signed-off-by: soupette <cyril.lpz@gmail.com>
This commit is contained in:
soupette 2021-02-12 15:24:55 +01:00
parent f27548e042
commit ada7ce8b4e
5 changed files with 39 additions and 18 deletions

View File

@ -11,7 +11,7 @@ import Wrapper from './Wrapper';
import RowLabel from '../../RowLabel';
import { getCheckboxState, removeConditionKeyFromData } from '../../utils';
const Collapse = ({ availableActions, isActive, isGrey, name, onClickToggle, pathToData }) => {
const Collapse = ({ availableActions, isActive, isGrey, label, onClickToggle, pathToData }) => {
const {
modifiedData,
onChangeParentCheckbox,
@ -36,7 +36,7 @@ const Collapse = ({ availableActions, isActive, isGrey, name, onClickToggle, pat
<Padded left size="sm" />
<RowLabel
isCollapsable
label={name}
label={label}
checkboxName={pathToData}
onChange={onChangeParentCheckbox}
onClick={onClickToggle}
@ -96,7 +96,7 @@ Collapse.propTypes = {
availableActions: PropTypes.array.isRequired,
isActive: PropTypes.bool.isRequired,
isGrey: PropTypes.bool.isRequired,
name: PropTypes.string.isRequired,
label: PropTypes.string.isRequired,
onClickToggle: PropTypes.func.isRequired,
pathToData: PropTypes.string.isRequired,
};

View File

@ -8,6 +8,7 @@ import Wrapper from './Wrapper';
const ContentTypeCollapse = ({
allActions,
contentTypeName,
label,
index,
isActive,
onClickToggleCollapse,
@ -30,7 +31,7 @@ const ContentTypeCollapse = ({
availableActions={availableActions}
isActive={isActive}
isGrey={index % 2 === 0}
name={contentTypeName}
label={label}
onClickToggle={handleClickToggleCollapse}
pathToData={pathToData}
/>
@ -58,6 +59,7 @@ ContentTypeCollapse.propTypes = {
contentTypeName: PropTypes.string.isRequired,
index: PropTypes.number.isRequired,
isActive: PropTypes.bool.isRequired,
label: PropTypes.string.isRequired,
onClickToggleCollapse: PropTypes.func.isRequired,
pathToData: PropTypes.string.isRequired,
properties: PropTypes.array.isRequired,

View File

@ -14,17 +14,18 @@ const ContentTypeCollapses = ({ actions, pathToData, subjects }) => {
[collapseToOpen]
);
return Object.keys(subjects).map((subject, index) => {
return subjects.map(({ uid, label, properties }, index) => {
return (
<ContentTypeCollapse
allActions={actions}
key={subject}
contentTypeName={subject}
isActive={collapseToOpen === subject}
key={uid}
contentTypeName={uid}
label={label}
isActive={collapseToOpen === uid}
index={index}
onClickToggleCollapse={handleClickToggleCollapse}
pathToData={`${pathToData}..${subject}`}
properties={subjects[subject].properties}
pathToData={`${pathToData}..${uid}`}
properties={properties}
/>
);
});
@ -32,13 +33,19 @@ const ContentTypeCollapses = ({ actions, pathToData, subjects }) => {
ContentTypeCollapses.defaultProps = {
actions: [],
subjects: {},
subjects: [],
};
ContentTypeCollapses.propTypes = {
actions: PropTypes.array.isRequired,
pathToData: PropTypes.string.isRequired,
subjects: PropTypes.object,
subjects: PropTypes.arrayOf(
PropTypes.shape({
uid: PropTypes.string.isRequired,
label: PropTypes.string.isRequired,
properties: PropTypes.array.isRequired,
})
),
};
export default memo(ContentTypeCollapses);

View File

@ -20,7 +20,13 @@ ContentTypes.propTypes = {
kind: PropTypes.string.isRequired,
layout: PropTypes.shape({
actions: PropTypes.array,
subjects: PropTypes.object,
subjects: PropTypes.arrayOf(
PropTypes.shape({
uid: PropTypes.string.isRequired,
label: PropTypes.string.isRequired,
properties: PropTypes.array.isRequired,
})
),
}).isRequired,
};

View File

@ -283,8 +283,10 @@ const data = {
singleTypes: {}, // same format as under,
collectionTypes: {
subjects: {
address: {
subjects: [
{
uid: 'address',
label: 'Address',
properties: [
{
label: 'Fields',
@ -315,7 +317,9 @@ const data = {
},
],
},
restaurant: {
{
uid: 'restaurant',
label: 'Restaurant',
properties: [
{
label: 'Fields',
@ -384,10 +388,12 @@ const data = {
},
],
},
test: {
{
uid: 'test',
label: 'test',
properties: [],
},
},
],
actions: [
{
label: 'Create',