From 447c67ebda7b749ce74492258efa28e0ea4a1c06 Mon Sep 17 00:00:00 2001 From: Cretu Mihaela Date: Thu, 29 Jun 2023 18:03:15 +0300 Subject: [PATCH 01/13] feat: add selected items ids in query params and implement function to scroll to item if present in URL --- .../manage/Blocks/Accordion/View.jsx | 80 ++++++++++++++++--- 1 file changed, 67 insertions(+), 13 deletions(-) diff --git a/src/components/manage/Blocks/Accordion/View.jsx b/src/components/manage/Blocks/Accordion/View.jsx index a638f29..e9a4dcf 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,92 @@ import AnimateHeight from 'react-animate-height'; import config from '@plone/volto/registry'; import './editor.less'; +const animationDuration = 500; + const View = (props) => { const { data } = 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 accordionConfig = config.blocks.blocksConfig.accordion; const { titleIcons } = accordionConfig; + + const useQuery = () => { + const { search } = location; + return React.useMemo(() => new URLSearchParams(search), [search]); + }; + + const query = useQuery(); + const activePanels = query.get('activeAccordion')?.split(','); + const [firstIdFromPanels] = panels[0]; + + const addQueryParam = (key, value) => { + const searchParams = new URLSearchParams(location.search); + searchParams.set(key, value); + + history.push({ + 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) { + let element = document.getElementById( + activePanels[activePanels.length - 1], + ); + element.scrollIntoView({ behavior: 'smooth' }); + } + }; + + const isExclusive = (id) => { + return activePanel.includes(id); + }; + + React.useEffect(() => { + setTimeout(() => scrollToElement(), animationDuration); + }, []); + React.useEffect(() => { - return data.collapsed ? setActiveIndex([]) : setActiveIndex([0]); + return data.collapsed + ? activePanels && setActivePanel(activePanels || []) + : setActivePanel([firstIdFromPanels, ...(activePanels || [])]); }, [data.collapsed]); return ( @@ -51,6 +104,7 @@ const View = (props) => { return accordionBlockHasValue(panel) ? ( { handleClick(e, { index, id })} onKeyDown={(e) => { if (e.nativeEvent.keyCode === 13) { handleClick(e, { index }); @@ -76,7 +130,7 @@ const View = (props) => { > {accordionConfig.semanticIcon ? ( - ) : isExclusive(index) ? ( + ) : isExclusive(id) ? ( { - + Date: Fri, 30 Jun 2023 11:33:24 +0300 Subject: [PATCH 02/13] fix useEffect warning --- src/components/manage/Blocks/Accordion/View.jsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/manage/Blocks/Accordion/View.jsx b/src/components/manage/Blocks/Accordion/View.jsx index e9a4dcf..dcc3512 100644 --- a/src/components/manage/Blocks/Accordion/View.jsx +++ b/src/components/manage/Blocks/Accordion/View.jsx @@ -90,12 +90,14 @@ const View = (props) => { React.useEffect(() => { setTimeout(() => scrollToElement(), animationDuration); + // eslint-disable-next-line react-hooks/exhaustive-deps }, []); React.useEffect(() => { return data.collapsed ? activePanels && setActivePanel(activePanels || []) : setActivePanel([firstIdFromPanels, ...(activePanels || [])]); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [data.collapsed]); return ( From 76e624db2231b81e33bd7c1107792d1b10aa6ab6 Mon Sep 17 00:00:00 2001 From: Cretu Mihaela Date: Fri, 30 Jun 2023 16:32:10 +0300 Subject: [PATCH 03/13] feat: add contitions to use linking feature if the field 'Allow linking' is selected --- .../manage/Blocks/Accordion/Schema.js | 15 ++++++++++++++ .../manage/Blocks/Accordion/View.jsx | 20 ++++++++++++++----- 2 files changed, 30 insertions(+), 5 deletions(-) diff --git a/src/components/manage/Blocks/Accordion/Schema.js b/src/components/manage/Blocks/Accordion/Schema.js index 5f7d257..b40aa54 100644 --- a/src/components/manage/Blocks/Accordion/Schema.js +++ b/src/components/manage/Blocks/Accordion/Schema.js @@ -43,6 +43,14 @@ const messages = defineMessages({ id: 'Allow multiple panels open at a time', defaultMessage: 'Allow multiple panels open at a time', }, + allow_linking: { + id: 'Allow linking', + defaultMessage: 'Allow linking', + }, + allow_linking_description: { + id: 'Allow linking to the last accordion item selected', + defaultMessage: 'Allow linking to the last accordion item selected', + }, Theme: { id: 'Theme', defaultMessage: 'Theme', @@ -99,6 +107,7 @@ export const AccordionBlockSchema = ({ intl }) => ({ 'right_arrows', 'collapsed', 'non_exclusive', + 'allow_linking', ], }, ], @@ -142,6 +151,12 @@ export const AccordionBlockSchema = ({ intl }) => ({ type: 'boolean', default: true, }, + allow_linking: { + title: intl.formatMessage(messages.allow_linking), + description: intl.formatMessage(messages.allow_linking_description), + type: 'boolean', + default: true, + }, }, required: ['title'], }); diff --git a/src/components/manage/Blocks/Accordion/View.jsx b/src/components/manage/Blocks/Accordion/View.jsx index dcc3512..a057c15 100644 --- a/src/components/manage/Blocks/Accordion/View.jsx +++ b/src/components/manage/Blocks/Accordion/View.jsx @@ -76,7 +76,7 @@ const View = (props) => { }; const scrollToElement = () => { - if (!!activePanels) { + if (!!activePanels && data.allow_linking && !!activePanels[0].length) { let element = document.getElementById( activePanels[activePanels.length - 1], ); @@ -94,11 +94,21 @@ const View = (props) => { }, []); React.useEffect(() => { - return data.collapsed - ? activePanels && setActivePanel(activePanels || []) - : setActivePanel([firstIdFromPanels, ...(activePanels || [])]); + if (data.allow_linking) { + if (data.collapsed) { + setActivePanel(activePanels || []); + } else { + if (!!activePanels && !!activePanels[0].length) { + setActivePanel(activePanels || []); + } else { + setActivePanel([firstIdFromPanels, ...(activePanels || [])]); + } + } + } else { + setActiveIndex(data.collapsed ? [] : [0]); + } // eslint-disable-next-line react-hooks/exhaustive-deps - }, [data.collapsed]); + }, [data.collapsed, data.allow_linking]); return (
From 25d57b2fbf3684605faeb6dd124c4552aa4f43f7 Mon Sep 17 00:00:00 2001 From: Cretu Mihaela Date: Fri, 30 Jun 2023 16:57:22 +0300 Subject: [PATCH 04/13] fix cypress test --- .../manage/Blocks/Accordion/__snapshots__/View.test.jsx.snap | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/manage/Blocks/Accordion/__snapshots__/View.test.jsx.snap b/src/components/manage/Blocks/Accordion/__snapshots__/View.test.jsx.snap index c2dff9b..e6c8107 100644 --- a/src/components/manage/Blocks/Accordion/__snapshots__/View.test.jsx.snap +++ b/src/components/manage/Blocks/Accordion/__snapshots__/View.test.jsx.snap @@ -12,6 +12,7 @@ exports[`View Component renders without crashing 1`] = ` >

Date: Mon, 3 Jul 2023 15:20:49 +0300 Subject: [PATCH 05/13] remove 'allow linking' checkbox --- .../manage/Blocks/Accordion/Schema.js | 15 --------------- .../manage/Blocks/Accordion/View.jsx | 18 +++++++----------- 2 files changed, 7 insertions(+), 26 deletions(-) diff --git a/src/components/manage/Blocks/Accordion/Schema.js b/src/components/manage/Blocks/Accordion/Schema.js index b40aa54..5f7d257 100644 --- a/src/components/manage/Blocks/Accordion/Schema.js +++ b/src/components/manage/Blocks/Accordion/Schema.js @@ -43,14 +43,6 @@ const messages = defineMessages({ id: 'Allow multiple panels open at a time', defaultMessage: 'Allow multiple panels open at a time', }, - allow_linking: { - id: 'Allow linking', - defaultMessage: 'Allow linking', - }, - allow_linking_description: { - id: 'Allow linking to the last accordion item selected', - defaultMessage: 'Allow linking to the last accordion item selected', - }, Theme: { id: 'Theme', defaultMessage: 'Theme', @@ -107,7 +99,6 @@ export const AccordionBlockSchema = ({ intl }) => ({ 'right_arrows', 'collapsed', 'non_exclusive', - 'allow_linking', ], }, ], @@ -151,12 +142,6 @@ export const AccordionBlockSchema = ({ intl }) => ({ type: 'boolean', default: true, }, - allow_linking: { - title: intl.formatMessage(messages.allow_linking), - description: intl.formatMessage(messages.allow_linking_description), - type: 'boolean', - default: true, - }, }, required: ['title'], }); diff --git a/src/components/manage/Blocks/Accordion/View.jsx b/src/components/manage/Blocks/Accordion/View.jsx index a057c15..c40bc5e 100644 --- a/src/components/manage/Blocks/Accordion/View.jsx +++ b/src/components/manage/Blocks/Accordion/View.jsx @@ -76,7 +76,7 @@ const View = (props) => { }; const scrollToElement = () => { - if (!!activePanels && data.allow_linking && !!activePanels[0].length) { + if (!!activePanels && !!activePanels[0].length) { let element = document.getElementById( activePanels[activePanels.length - 1], ); @@ -94,21 +94,17 @@ const View = (props) => { }, []); React.useEffect(() => { - if (data.allow_linking) { - if (data.collapsed) { + if (data.collapsed) { + setActivePanel(activePanels || []); + } else { + if (!!activePanels && !!activePanels[0].length) { setActivePanel(activePanels || []); } else { - if (!!activePanels && !!activePanels[0].length) { - setActivePanel(activePanels || []); - } else { - setActivePanel([firstIdFromPanels, ...(activePanels || [])]); - } + setActivePanel([firstIdFromPanels, ...(activePanels || [])]); } - } else { - setActiveIndex(data.collapsed ? [] : [0]); } // eslint-disable-next-line react-hooks/exhaustive-deps - }, [data.collapsed, data.allow_linking]); + }, [data.collapsed]); return (
From c2ecb89930df699f6e004675aa208dcaf7ba48c6 Mon Sep 17 00:00:00 2001 From: Cretu Mihaela Date: Mon, 10 Jul 2023 14:14:03 +0300 Subject: [PATCH 06/13] fix: updating URL when clicking on anchors inside accordion --- src/components/manage/Blocks/Accordion/View.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/manage/Blocks/Accordion/View.jsx b/src/components/manage/Blocks/Accordion/View.jsx index c40bc5e..2034a66 100644 --- a/src/components/manage/Blocks/Accordion/View.jsx +++ b/src/components/manage/Blocks/Accordion/View.jsx @@ -37,6 +37,7 @@ const View = (props) => { searchParams.set(key, value); history.push({ + hash: location.hash, pathname: location.pathname, search: searchParams.toString(), }); From aa5c5421f9d7233f0bc5da94caf1dcf59859482c Mon Sep 17 00:00:00 2001 From: Cretu Mihaela Date: Thu, 13 Jul 2023 12:56:30 +0300 Subject: [PATCH 07/13] move function outside the component --- src/components/manage/Blocks/Accordion/View.jsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/manage/Blocks/Accordion/View.jsx b/src/components/manage/Blocks/Accordion/View.jsx index 2034a66..aa20378 100644 --- a/src/components/manage/Blocks/Accordion/View.jsx +++ b/src/components/manage/Blocks/Accordion/View.jsx @@ -12,6 +12,11 @@ import './editor.less'; const animationDuration = 500; +const useQuery = (location) => { + const { search } = location; + return React.useMemo(() => new URLSearchParams(search), [search]); +}; + const View = (props) => { const { data } = props; const location = useLocation(); @@ -23,12 +28,7 @@ const View = (props) => { const accordionConfig = config.blocks.blocksConfig.accordion; const { titleIcons } = accordionConfig; - const useQuery = () => { - const { search } = location; - return React.useMemo(() => new URLSearchParams(search), [search]); - }; - - const query = useQuery(); + const query = useQuery(location); const activePanels = query.get('activeAccordion')?.split(','); const [firstIdFromPanels] = panels[0]; From 4c765d7bfc8b2951a91224dadf90853cfe9b10ef Mon Sep 17 00:00:00 2001 From: Cretu Mihaela Date: Tue, 18 Jul 2023 09:58:15 +0300 Subject: [PATCH 08/13] remove setTimeout and fix useEffect --- .../manage/Blocks/Accordion/View.jsx | 32 +++++++++++++------ 1 file changed, 22 insertions(+), 10 deletions(-) diff --git a/src/components/manage/Blocks/Accordion/View.jsx b/src/components/manage/Blocks/Accordion/View.jsx index aa20378..3a54fc5 100644 --- a/src/components/manage/Blocks/Accordion/View.jsx +++ b/src/components/manage/Blocks/Accordion/View.jsx @@ -10,8 +10,6 @@ import AnimateHeight from 'react-animate-height'; import config from '@plone/volto/registry'; import './editor.less'; -const animationDuration = 500; - const useQuery = (location) => { const { search } = location; return React.useMemo(() => new URLSearchParams(search), [search]); @@ -25,6 +23,7 @@ const View = (props) => { 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; @@ -32,6 +31,9 @@ const View = (props) => { 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); @@ -90,21 +92,25 @@ const View = (props) => { }; React.useEffect(() => { - setTimeout(() => scrollToElement(), animationDuration); - // eslint-disable-next-line react-hooks/exhaustive-deps + !!activePanelsRef.current && + setItemToScroll( + activePanelsRef.current[activePanelsRef.current?.length - 1], + ); }, []); React.useEffect(() => { if (data.collapsed) { - setActivePanel(activePanels || []); + setActivePanel(activePanelsRef.current || []); } else { - if (!!activePanels && !!activePanels[0].length) { - setActivePanel(activePanels || []); + if (!!activePanelsRef.current && !!activePanelsRef.current[0].length) { + setActivePanel(activePanelsRef.current || []); } else { - setActivePanel([firstIdFromPanels, ...(activePanels || [])]); + setActivePanel([ + firstIdFromPanelsRef.current, + ...(activePanelsRef.current || []), + ]); } } - // eslint-disable-next-line react-hooks/exhaustive-deps }, [data.collapsed]); return ( @@ -162,8 +168,14 @@ const View = (props) => { { + if (!!activePanels && id === itemToScroll) { + scrollToElement(); + setItemToScroll(''); + } + }} > Date: Tue, 18 Jul 2023 12:01:00 +0300 Subject: [PATCH 09/13] update snapshots --- .../manage/Blocks/Accordion/__snapshots__/View.test.jsx.snap | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/manage/Blocks/Accordion/__snapshots__/View.test.jsx.snap b/src/components/manage/Blocks/Accordion/__snapshots__/View.test.jsx.snap index e6c8107..37d9d1e 100644 --- a/src/components/manage/Blocks/Accordion/__snapshots__/View.test.jsx.snap +++ b/src/components/manage/Blocks/Accordion/__snapshots__/View.test.jsx.snap @@ -30,6 +30,7 @@ exports[`View Component renders without crashing 1`] = `
Date: Wed, 26 Jul 2023 15:03:23 +0300 Subject: [PATCH 10/13] fix: fix hover and focused border for block child section --- src/components/manage/Blocks/Accordion/editor.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/manage/Blocks/Accordion/editor.less b/src/components/manage/Blocks/Accordion/editor.less index 1e14c50..80183f6 100644 --- a/src/components/manage/Blocks/Accordion/editor.less +++ b/src/components/manage/Blocks/Accordion/editor.less @@ -144,7 +144,7 @@ // with z-index: -1 you don't get the hover and focused border for block child section .block .block:not(.inner)::before { - z-index: 0; + z-index: auto; } } From 6ccecbf14afe4e3b58e6fec337d1e49f3c6bb88b Mon Sep 17 00:00:00 2001 From: Claudia Ifrim Date: Wed, 26 Jul 2023 17:09:30 +0300 Subject: [PATCH 11/13] add comment --- src/components/manage/Blocks/Accordion/editor.less | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/manage/Blocks/Accordion/editor.less b/src/components/manage/Blocks/Accordion/editor.less index 80183f6..92d0cab 100644 --- a/src/components/manage/Blocks/Accordion/editor.less +++ b/src/components/manage/Blocks/Accordion/editor.less @@ -143,6 +143,7 @@ } // 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: auto; } From 1728aa1ff25b36e6353710659db4f085e148bdfd Mon Sep 17 00:00:00 2001 From: Alin Voinea Date: Wed, 26 Jul 2023 17:57:31 +0300 Subject: [PATCH 12/13] Release 9.3.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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", From df0b8f9f027576362f3f7d90da39752090c1a911 Mon Sep 17 00:00:00 2001 From: EEA Jenkins <@users.noreply.github.com> Date: Wed, 26 Jul 2023 15:14:06 +0000 Subject: [PATCH 13/13] Automated release 9.3.0 --- CHANGELOG.md | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) 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