Skip to content

Commit

Permalink
Cleanup HTML and fix accordion heading
Browse files Browse the repository at this point in the history
  • Loading branch information
@avoinea
avoinea committed Nov 24, 2020
1 parent 8389892 commit 57bd046
Show file tree
Hide file tree
Showing 7 changed files with 170 additions and 277 deletions.
99 changes: 52 additions & 47 deletions src/components/manage/Blocks/Accordion/AccordionEdit.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,17 @@ import cx from 'classnames';
import { Icon } from '@plone/volto/components';
import rightSVG from '@plone/volto/icons/right-key.svg';
import downSVG from '@plone/volto/icons/down-key.svg';
import Heading from './Heading';

import AnimateHeight from 'react-animate-height';
export default (props) => {
const { children, handleTitleChange, colId, column, data } = props;
const {
children,
handleTitleChange,
handleTitleClick,
colId,
column,
data,
} = props;
const [activeIndex, setActiveIndex] = React.useState(0);
function handleClick(e, titleProps) {
const { index } = titleProps;
Expand All @@ -19,51 +25,50 @@ export default (props) => {
}

return (
<div className="block-accordion">
<Accordion fluid styled>
<React.Fragment>
<Accordion.Title
active={activeIndex === 0}
index={0}
onClick={handleClick}
className="accordion-title"
<Accordion fluid styled>
<React.Fragment>
<Accordion.Title
as={data.title_size}
active={activeIndex === 0}
index={0}
onClick={handleClick}
className={cx('accordion-title', {
'align-arrow-left': !props?.data?.right_arrows,
'align-arrow-right': props?.data?.right_arrows,
})}
>
{activeIndex === 0 ? (
<Icon name={downSVG} size="24px" />
) : (
<Icon
size="24px"
name={rightSVG}
className={cx({ 'rotate-arrow': data?.right_arrows })}
/>
)}
<Input
fluid
className="input-accordion-title"
transparent
placeholder="Enter Title"
value={column?.blocks_layout?.title}
onClick={(e) => {
handleTitleClick();
e.stopPropagation();
}}
onChange={(e) => handleTitleChange(e, [colId, column])}
/>
</Accordion.Title>
<Accordion.Content active={activeIndex === 0}>
<AnimateHeight
animateOpacity
duration={500}
height={activeIndex === 0 ? 'auto' : 0}
>
<Heading
as={data.as}
className={cx('align-arrow-left', {
'align-arrow-right': data?.arrow_select,
})}
>
{activeIndex === 0 ? (
<Icon name={downSVG} />
) : (
<Icon
name={rightSVG}
className={cx({ 'rotate-arrow': data?.arrow_select })}
/>
)}
<Input
fluid
className="input-accordion-title"
transparent
placeholder="Enter Title"
value={column?.blocks_layout?.title}
onClick={(e) => e.stopPropagation()}
onChange={(e) => handleTitleChange(e, [colId, column])}
/>
</Heading>
</Accordion.Title>
<Accordion.Content active={activeIndex === 0}>
<AnimateHeight
animateOpacity
duration={500}
height={activeIndex === 0 ? 'auto' : 0}
>
{children}
</AnimateHeight>
</Accordion.Content>
</React.Fragment>
</Accordion>
</div>
{children}
</AnimateHeight>
</Accordion.Content>
</React.Fragment>
</Accordion>
);
};
177 changes: 55 additions & 122 deletions src/components/manage/Blocks/Accordion/Edit.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,38 +1,22 @@
import React, { useState } from 'react';
import { isEmpty } from 'lodash';
import { BlocksForm } from '@eeacms/volto-blocks-form/components';
import { Button } from 'semantic-ui-react';
import { emptyBlocksForm } from '@eeacms/volto-blocks-form/helpers';
import { SidebarPortal, Icon } from '@plone/volto/components';
import { SidebarPortal } from '@plone/volto/components';
import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
import { accordionBlockSchema } from './Schema';
import AccordionEdit from './AccordionEdit';
import EditBlockWrapper from './EditBlockWrapper';
import Panels from './Panels.jsx';
import { empty, getColumns } from './util';
import { options } from './panels';

import './editor.less';

import tuneSVG from '@plone/volto/icons/tune.svg';

const Edit = (props) => {
const { block, data, onChangeBlock, pathname, selected } = props;

const metadata = props.metadata || props.properties;
const properties = isEmpty(data?.data?.blocks)
? emptyBlocksForm()
: data.data;

const properties = isEmpty(data?.data?.blocks) ? empty(3) : data.data;
const [selectedBlock, setSelectedBlock] = useState({});

const createPanes = (initialData) => {
const { count } = initialData;
return {
data: empty(count),
};
};

const blockState = {};
const coldata = properties;
const columnList = getColumns(coldata);
Expand All @@ -59,112 +43,61 @@ const Edit = (props) => {
};

return (
<section className="section-block">
{Object.keys(data).length === 1 ? (
<Panels
variants={options}
<div className="accordion-block">
{columnList.map(([colId, column], index) => (
<AccordionEdit
colId={colId}
column={column}
coldata={coldata}
handleTitleChange={handleTitleChange}
handleTitleClick={() => setSelectedBlock({})}
data={data}
onChange={(initialData) => {
onChangeBlock(block, {
...data,
...createPanes(initialData),
});
}}
/>
) : (
<div>
{columnList.map(([colId, column], index) => (
<AccordionEdit
colId={colId}
column={column}
coldata={coldata}
handleTitleChange={handleTitleChange}
data={data}
key={index}
>
<BlocksForm
key={colId}
metadata={metadata}
properties={isEmpty(column) ? emptyBlocksForm() : column}
selectedBlock={selected ? selectedBlock[colId] : null}
onSelectBlock={(id) =>
setSelectedBlock({
[colId]: id,
})
}
onChangeFormData={(newFormData) => {
onChangeBlock(block, {
...data,
data: {
...coldata,
blocks: {
...coldata.blocks,
[colId]: newFormData,
key={index}
>
<BlocksForm
key={colId}
metadata={metadata}
properties={isEmpty(column) ? emptyBlocksForm() : column}
selectedBlock={selected ? selectedBlock[colId] : null}
onSelectBlock={(id) =>
setSelectedBlock({
[colId]: id,
})
}
onChangeFormData={(newFormData) => {
onChangeBlock(block, {
...data,
data: {
...coldata,
blocks: {
...coldata.blocks,
[colId]: newFormData,
},
},
});
}}
onChangeField={(id, value) => {
if (['blocks', 'blocks_layout'].indexOf(id) > -1) {
blockState[id] = value;
onChangeBlock(block, {
...data,
data: {
...coldata,
blocks: {
...coldata.blocks,
[colId]: {
...coldata.blocks?.[colId],
...blockState,
},
},
});
}}
onChangeField={(id, value) => {
if (['blocks', 'blocks_layout'].indexOf(id) > -1) {
blockState[id] = value;
onChangeBlock(block, {
...data,
data: {
...coldata,
blocks: {
...coldata.blocks,
[colId]: {
...coldata.blocks?.[colId],
...blockState,
},
},
},
});
}
}}
pathname={pathname}
>
{({ draginfo }, editBlock, blockProps) => (
<EditBlockWrapper
accordionData={coldata}
colId={colId}
draginfo={draginfo}
blockProps={blockProps}
onChangeFormData={(newFormData) => {
onChangeBlock(block, {
...data,
data: {
...coldata,
blocks: {
...coldata.blocks,
[colId]: newFormData,
},
},
});
}}
extraControls={
<>
<Button
icon
basic
title="Edit Panel"
onClick={() => {
setSelectedBlock({});
}}
>
<Icon name={tuneSVG} className="" size="19px" />
</Button>
</>
}
>
{editBlock}
</EditBlockWrapper>
)}
</BlocksForm>
</AccordionEdit>
))}
</div>
)}
},
});
}
}}
pathname={pathname}
/>
</AccordionEdit>
))}
{Object.keys(selectedBlock).length === 0 ? (
<SidebarPortal selected={true}>
<>
Expand All @@ -184,7 +117,7 @@ const Edit = (props) => {
) : (
''
)}
</section>
</div>
);
};

Expand Down
21 changes: 0 additions & 21 deletions src/components/manage/Blocks/Accordion/Heading.jsx
View file

This file was deleted.

0 comments on commit 57bd046

Please sign in to comment.