Merge pull request #81 from eea/develop

Release

CHANGELOG.md

@@ -4,6 +4,28 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [9.3.0](https://github.com/eea/volto-accordion-block/compare/9.2.0...9.3.0) - 26 July 2023
+
+#### :rocket: New Features
+
+- feat: add contitions to use linking feature if the field 'Allow linking' is selected [Cretu Mihaela - [`76e624d`](https://github.com/eea/volto-accordion-block/commit/76e624db2231b81e33bd7c1107792d1b10aa6ab6)]
+- feat: add selected items ids in query params and implement function to scroll to item if present in URL [Cretu Mihaela - [`447c67e`](https://github.com/eea/volto-accordion-block/commit/447c67ebda7b749ce74492258efa28e0ea4a1c06)]
+
+#### :bug: Bug Fixes
+
+- fix: fix hover and focused border for block child section [Claudia Ifrim - [`4c18b4f`](https://github.com/eea/volto-accordion-block/commit/4c18b4f90d915c415b47e48d4aed017fe89fcfa7)]
+- fix: updating URL when clicking on anchors inside accordion [Cretu Mihaela - [`c2ecb89`](https://github.com/eea/volto-accordion-block/commit/c2ecb89930df699f6e004675aa208dcaf7ba48c6)]
+
+#### :hammer_and_wrench: Others
+
+- Release 9.3.0 [Alin Voinea - [`1728aa1`](https://github.com/eea/volto-accordion-block/commit/1728aa1ff25b36e6353710659db4f085e148bdfd)]
+- add comment [Claudia Ifrim - [`6ccecbf`](https://github.com/eea/volto-accordion-block/commit/6ccecbf14afe4e3b58e6fec337d1e49f3c6bb88b)]
+- update snapshots [Cretu Mihaela - [`1ab81b5`](https://github.com/eea/volto-accordion-block/commit/1ab81b5e9eeca504c8cd051f84a4b39caab38510)]
+- remove setTimeout and fix useEffect [Cretu Mihaela - [`4c765d7`](https://github.com/eea/volto-accordion-block/commit/4c765d7bfc8b2951a91224dadf90853cfe9b10ef)]
+- move function outside the component [Cretu Mihaela - [`aa5c542`](https://github.com/eea/volto-accordion-block/commit/aa5c5421f9d7233f0bc5da94caf1dcf59859482c)]
+- remove 'allow linking' checkbox [Cretu Mihaela - [`9456684`](https://github.com/eea/volto-accordion-block/commit/945668495b5f0d1e5283db1b00c0bbf9fdc302d6)]
+- fix cypress test [Cretu Mihaela - [`25d57b2`](https://github.com/eea/volto-accordion-block/commit/25d57b2fbf3684605faeb6dd124c4552aa4f43f7)]
+- fix useEffect warning [Cretu Mihaela - [`b7d28b4`](https://github.com/eea/volto-accordion-block/commit/b7d28b42838ccf024fa6c4cbfb846b4ce089c36d)]
 ### [9.2.0](https://github.com/eea/volto-accordion-block/compare/9.1.0...9.2.0) - 19 July 2023
 
 #### :rocket: New Features

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-accordion-block",
-  "version": "9.2.0",
+  "version": "9.3.0",
   "description": "volto-accordion-block: Volto accordion block",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

src/components/manage/Blocks/Accordion/View.jsx

@@ -2,47 +2,115 @@ import React from 'react';
 import { getPanels, accordionBlockHasValue } from './util';
 import { Accordion, Icon } from 'semantic-ui-react';
 import { withBlockExtensions } from '@plone/volto/helpers';
-import { useLocation } from 'react-router-dom';
+import { useLocation, useHistory } from 'react-router-dom';
 
 import cx from 'classnames';
 import { Icon as VoltoIcon, RenderBlocks } from '@plone/volto/components';
 import AnimateHeight from 'react-animate-height';
 import config from '@plone/volto/registry';
 import './editor.less';
 
+const useQuery = (location) => {
+  const { search } = location;
+  return React.useMemo(() => new URLSearchParams(search), [search]);
+};
+
 const View = (props) => {
   const { data, className } = props;
   const location = useLocation();
+  const history = useHistory();
   const panels = getPanels(data.data);
   const metadata = props.metadata || props.properties;
   const [activeIndex, setActiveIndex] = React.useState([]);
+  const [activePanel, setActivePanel] = React.useState([]);
+  const [itemToScroll, setItemToScroll] = React.useState('');
   const accordionConfig = config.blocks.blocksConfig.accordion;
   const { titleIcons } = accordionConfig;
+
+  const query = useQuery(location);
+  const activePanels = query.get('activeAccordion')?.split(',');
+  const [firstIdFromPanels] = panels[0];
+
+  const activePanelsRef = React.useRef(activePanels);
+  const firstIdFromPanelsRef = React.useRef(firstIdFromPanels);
+
+  const addQueryParam = (key, value) => {
+    const searchParams = new URLSearchParams(location.search);
+    searchParams.set(key, value);
+
+    history.push({
+      hash: location.hash,
+      pathname: location.pathname,
+      search: searchParams.toString(),
+    });
+  };
+
   const handleClick = (e, itemProps) => {
-    const { index } = itemProps;
+    const { index, id } = itemProps;
     if (data.non_exclusive) {
       const newIndex =
         activeIndex.indexOf(index) === -1
           ? [...activeIndex, index]
           : activeIndex.filter((item) => item !== index);
+      const newPanel =
+        activePanel.indexOf(id) === -1
+          ? [...activePanel, id]
+          : activePanel.filter((item) => item !== id);
 
-      setActiveIndex(newIndex);
+      handleActiveIndex(newIndex, newPanel);
     } else {
       const newIndex =
         activeIndex.indexOf(index) === -1
           ? [index]
           : activeIndex.filter((item) => item !== index);
+      const newPanel =
+        activePanel.indexOf(id) === -1
+          ? [id]
+          : activePanel.filter((item) => item !== id);
 
-      setActiveIndex(newIndex);
+      handleActiveIndex(newIndex, newPanel);
     }
   };
 
-  const isExclusive = (index) => {
-    return activeIndex.includes(index);
+  const handleActiveIndex = (index, id) => {
+    setActiveIndex(index);
+    setActivePanel(id);
+    addQueryParam('activeAccordion', id);
   };
 
+  const scrollToElement = () => {
+    if (!!activePanels && !!activePanels[0].length) {
+      let element = document.getElementById(
+        activePanels[activePanels.length - 1],
+      );
+      element.scrollIntoView({ behavior: 'smooth' });
+    }
+  };
+
+  const isExclusive = (id) => {
+    return activePanel.includes(id);
+  };
+
+  React.useEffect(() => {
+    !!activePanelsRef.current &&
+      setItemToScroll(
+        activePanelsRef.current[activePanelsRef.current?.length - 1],
+      );
+  }, []);
+
   React.useEffect(() => {
-    return data.collapsed ? setActiveIndex([]) : setActiveIndex([0]);
+    if (data.collapsed) {
+      setActivePanel(activePanelsRef.current || []);
+    } else {
+      if (!!activePanelsRef.current && !!activePanelsRef.current[0].length) {
+        setActivePanel(activePanelsRef.current || []);
+      } else {
+        setActivePanel([
+          firstIdFromPanelsRef.current,
+          ...(activePanelsRef.current || []),
+        ]);
+      }
+    }
   }, [data.collapsed]);
 
   return (
@@ -52,6 +120,7 @@ const View = (props) => {
         return accordionBlockHasValue(panel) ? (
           <Accordion
             key={id}
+            id={id}
             exclusive={!data.exclusive}
             className={
               data.styles ? data.styles.theme : accordionConfig?.defaults?.theme
@@ -61,10 +130,10 @@ const View = (props) => {
             <React.Fragment>
               <Accordion.Title
                 as={data.title_size}
-                active={isExclusive(index)}
+                active={isExclusive(id)}
                 index={index}
                 tabIndex={0}
-                onClick={handleClick}
+                onClick={(e) => handleClick(e, { index, id })}
                 onKeyDown={(e) => {
                   if (e.nativeEvent.keyCode === 13) {
                     handleClick(e, { index });
@@ -77,7 +146,7 @@ const View = (props) => {
               >
                 {accordionConfig.semanticIcon ? (
                   <Icon className={accordionConfig.semanticIcon} />
-                ) : isExclusive(index) ? (
+                ) : isExclusive(id) ? (
                   <VoltoIcon
                     name={
                       props?.data?.right_arrows
@@ -101,9 +170,15 @@ const View = (props) => {
               <AnimateHeight
                 animateOpacity
                 duration={500}
-                height={isExclusive(index) ? 'auto' : 0}
+                height={isExclusive(id) ? 'auto' : 0}
+                onTransitionEnd={() => {
+                  if (!!activePanels && id === itemToScroll) {
+                    scrollToElement();
+                    setItemToScroll('');
+                  }
+                }}
               >
-                <Accordion.Content active={isExclusive(index)}>
+                <Accordion.Content active={isExclusive(id)}>
                   <RenderBlocks
                     {...props}
                     location={location}

src/components/manage/Blocks/Accordion/__snapshots__/View.test.jsx.snap

@@ -12,6 +12,7 @@ exports[`View Component renders without crashing 1`] = `
 >
   <div
     className="accordion ui default"
+    id="id1"
   >
     <h3
       className="title accordion-title align-arrow-right"
@@ -29,6 +30,7 @@ exports[`View Component renders without crashing 1`] = `
     <div
       aria-hidden={true}
       className="rah-static rah-static--height-zero"
+      onTransitionEnd={[Function]}
       style={
         Object {
           "height": 0,

src/components/manage/Blocks/Accordion/editor.less

@@ -143,8 +143,9 @@
   }
 
   // with z-index: -1 you don't get the hover and focused border for block child section
+  // TODO: to be removed if https://github.com/plone/volto/pull/5029 merged
   .block .block:not(.inner)::before {
-    z-index: 0;
+    z-index: auto;
   }
 }