diff --git a/CHANGELOG.md b/CHANGELOG.md index 068cf42..fed4ce3 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/package.json b/package.json index 49bc8ba..d86472f 100644 --- a/package.json +++ b/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", diff --git a/src/components/manage/Blocks/Accordion/View.jsx b/src/components/manage/Blocks/Accordion/View.jsx index 0ec0a6d..a1515b5 100644 --- a/src/components/manage/Blocks/Accordion/View.jsx +++ b/src/components/manage/Blocks/Accordion/View.jsx @@ -2,7 +2,7 @@ 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'; @@ -10,39 +10,107 @@ 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) ? ( { handleClick(e, { index, id })} onKeyDown={(e) => { if (e.nativeEvent.keyCode === 13) { handleClick(e, { index }); @@ -77,7 +146,7 @@ const View = (props) => { > {accordionConfig.semanticIcon ? ( - ) : isExclusive(index) ? ( + ) : isExclusive(id) ? ( { { + if (!!activePanels && id === itemToScroll) { + scrollToElement(); + setItemToScroll(''); + } + }} > - +