accordion in edit group block

eea · Nov 4, 2020 · df5678f · df5678f
1 parent 467b944
commit df5678f
Show file tree

Hide file tree

Showing 5 changed files with 92 additions and 32 deletions.
diff --git a/src/components/manage/Blocks/Accordion/AccordionEdit.jsx b/src/components/manage/Blocks/Accordion/AccordionEdit.jsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import { Segment, Accordion } from 'semantic-ui-react';
+import { Icon } from '@plone/volto/components';
+import upSVG from '@plone/volto/icons/up-key.svg';
+import downSVG from '@plone/volto/icons/down-key.svg';
+import AnimateHeight from 'react-animate-height';
+export default ({ data, onChange, children, variants }) => {
+  const [activeIndex, setActiveIndex] = React.useState(0);
+
+  function handleClick(e, titleProps) {
+    const { index } = titleProps;
+    const newIndex = activeIndex === index ? -1 : index;
+
+    setActiveIndex(newIndex);
+  }
+
+  return (
+    <div>
+      <Accordion fluid styled className="form">
+        <React.Fragment>
+          <Accordion.Title
+            active={activeIndex === 0}
+            index={0}
+            onClick={handleClick}
+          >
+            <div className="accordion-tools">
+              {activeIndex === 0 ? (
+                <Icon name={upSVG} size="20px" />
+              ) : (
+                <Icon name={downSVG} size="20px" />
+              )}
+            </div>
+          </Accordion.Title>
+          <Accordion.Content active={activeIndex === 0}>
+            <AnimateHeight
+              animateOpacity
+              duration={500}
+              height={activeIndex === 0 ? 'auto' : 0}
+            >
+              dsvsdvs
+            </AnimateHeight>
+          </Accordion.Content>
+        </React.Fragment>
+      </Accordion>
+    </div>
+  );
+};
diff --git a/src/components/manage/Blocks/Accordion/Edit.jsx b/src/components/manage/Blocks/Accordion/Edit.jsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { isEmpty } from 'lodash';
 import { BlocksForm } from '@eeacms/volto-blocks-form/components';
 import { emptyBlocksForm } from '@eeacms/volto-blocks-form/helpers';
+import AccordionEdit from './AccordionEdit';
 import './editor.less';
 
 const Edit = (props) => {
@@ -40,35 +41,47 @@ const Edit = (props) => {
 
   return (
     <section className="section-block">
-      <BlocksForm
-        metadata={metadata}
-        properties={properties}
-        manage={manage}
-        selectedBlock={selected ? selectedBlock : null}
-        allowedBlocks={data.allowedBlocks}
-        title={data.placeholder}
-        description={data?.instructions?.data}
-        onSelectBlock={(id) => setSelectedBlock(id)}
-        onChangeFormData={(newFormData) => {
-          onChangeBlock(block, {
-            ...data,
-            data: newFormData,
-          });
-        }}
-        onChangeField={(id, value) => {
-          if (['blocks', 'blocks_layout'].indexOf(id) > -1) {
-            blockState[id] = value;
+      {Object.keys(data).length === 1 ? (
+        <AccordionEdit
+          data={data}
+          onChange={(initialData) => {
             onChangeBlock(block, {
               ...data,
-              data: {
-                ...data.data,
-                ...blockState,
-              },
+              ...this.createFrom(initialData),
             });
-          }
-        }}
-        pathname={pathname}
-      />
+          }}
+        />
+      ) : (
+        <BlocksForm
+          metadata={metadata}
+          properties={properties}
+          manage={manage}
+          selectedBlock={selected ? selectedBlock : null}
+          allowedBlocks={data.allowedBlocks}
+          title={data.placeholder}
+          description={data?.instructions?.data}
+          onSelectBlock={(id) => setSelectedBlock(id)}
+          onChangeFormData={(newFormData) => {
+            onChangeBlock(block, {
+              ...data,
+              data: newFormData,
+            });
+          }}
+          onChangeField={(id, value) => {
+            if (['blocks', 'blocks_layout'].indexOf(id) > -1) {
+              blockState[id] = value;
+              onChangeBlock(block, {
+                ...data,
+                data: {
+                  ...data.data,
+                  ...blockState,
+                },
+              });
+            }
+          }}
+          pathname={pathname}
+        />
+      )}
     </section>
   );
 };

diff --git a/src/components/manage/Blocks/Accordion/Schema.js b/src/components/manage/Blocks/Accordion/Schema.js
@@ -1,5 +1,5 @@
 const Schema = {
-  title: 'Group block settings',
+  title: 'Accordion block settings',
   fieldsets: [
     {
       id: 'default',

diff --git a/src/components/manage/Blocks/Accordion/editor.less b/src/components/manage/Blocks/Accordion/editor.less
@@ -1,10 +1,10 @@
-.block-editor-group {
+.block-editor-accordion {
   margin: 0 -2.2rem;
-  .block-editor-group {
+  .block-editor-accordion {
     margin: 0 0.1rem;
   }
-  .block.group.selected::before,
-  .block.group:hover::before {
+  .block.accordion.selected::before,
+  .block.accordion:hover::before {
     border-style: dashed;
     border-radius: 1rem;
   }

diff --git a/src/index.js b/src/index.js
@@ -31,7 +31,7 @@ const applyConfig = (config) => {
       },
     },
   };
-  config.blocks.blocksConfig.group = {
+  config.blocks.blocksConfig.accordion = {
     id: 'accordion',
     title: 'Accordion',
     icon: circleBottomSVG,