handle collapse in accordion

eea · Dec 1, 2020 · 1eb564a · 1eb564a
1 parent d3b4143
commit 1eb564a
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 2 deletions.
diff --git a/src/components/manage/Blocks/Accordion/AccordionEdit.jsx b/src/components/manage/Blocks/Accordion/AccordionEdit.jsx
@@ -23,6 +23,10 @@ export default (props) => {
 
     setActiveIndex(newIndex);
   }
+  //handle accordion collapse behavior
+  React.useEffect(() => {
+    data.collapsed ? setActiveIndex(-1) : setActiveIndex(0);
+  }, [data.collapsed]);
 
   return (
     <Accordion fluid styled>

diff --git a/src/components/manage/Blocks/Accordion/Schema.js b/src/components/manage/Blocks/Accordion/Schema.js
@@ -26,7 +26,7 @@ export const accordionBlockSchema = () => ({
     {
       id: 'style',
       title: 'Style',
-      fields: ['title_size', 'right_arrows'],
+      fields: ['title_size', 'right_arrows', 'collapsed'],
     },
   ],
   properties: {
@@ -53,6 +53,11 @@ export const accordionBlockSchema = () => ({
       type: 'boolean',
       default: false,
     },
+    collapsed: {
+      title: 'Collapsed',
+      type: 'boolean',
+      default: true,
+    },
   },
   required: ['title'],
 });
diff --git a/src/components/manage/Blocks/Accordion/View.jsx b/src/components/manage/Blocks/Accordion/View.jsx
@@ -21,11 +21,16 @@ const View = (props) => {
     const newIndex = activeIndex === index ? -1 : index;
     setActiveIndex(newIndex);
   }
+
+  React.useEffect(() => {
+    data.collapsed ? setActiveIndex(-1) : setActiveIndex(0);
+  }, [data.collapsed]);
+
   return (
     <div className="accordion-block">
       {panels.map(([id, panel], index) => {
         return accordionBlockHasValue(panel) ? (
-          <Accordion fluid styled key={id}>
+          <Accordion fluid styled key={id} exclusive={false}>
             <React.Fragment>
               <Accordion.Title
                 as={data.title_size}