diff --git a/src/components/ItaliaTheme/AppExtras/GenericAppExtras.jsx b/src/components/ItaliaTheme/AppExtras/GenericAppExtras.jsx index bebd85b86..123045441 100644 --- a/src/components/ItaliaTheme/AppExtras/GenericAppExtras.jsx +++ b/src/components/ItaliaTheme/AppExtras/GenericAppExtras.jsx @@ -2,7 +2,6 @@ import React from 'react'; import { useSelector } from 'react-redux'; import { useLocation } from 'react-router-dom'; import { BodyClass } from '@plone/volto/helpers'; -import { RemoveBodyClass } from 'design-comuni-plone-theme/components/ItaliaTheme'; import ScrollToTop from 'design-comuni-plone-theme/components/ItaliaTheme/ScrollToTop/ScrollToTop'; import { SubsiteLoader } from 'volto-subsites'; import config from '@plone/volto/registry'; @@ -28,7 +27,7 @@ const GenericAppExtras = (props) => { {isPublicUI && ( <> - + )} diff --git a/src/components/ItaliaTheme/LoginAgid/LoginAgid.jsx b/src/components/ItaliaTheme/LoginAgid/LoginAgid.jsx index b337fb270..123e114e8 100644 --- a/src/components/ItaliaTheme/LoginAgid/LoginAgid.jsx +++ b/src/components/ItaliaTheme/LoginAgid/LoginAgid.jsx @@ -11,10 +11,7 @@ import { defineMessages, useIntl } from 'react-intl'; import { withRouter } from 'react-router-dom'; import { Login } from '@plone/volto/components'; import { Row, Col, Container } from 'design-react-kit'; -import { - RemoveBodyClass, - LoginAgidButtons, -} from 'design-comuni-plone-theme/components/ItaliaTheme'; +import { LoginAgidButtons } from 'design-comuni-plone-theme/components/ItaliaTheme'; import { Button } from 'design-react-kit'; import { useLocation } from 'react-router-dom'; import { getBaseUrl } from '@plone/volto/helpers'; @@ -72,7 +69,7 @@ const LoginAgid = (props) => {
- + diff --git a/src/components/ItaliaTheme/Search/Search.jsx b/src/components/ItaliaTheme/Search/Search.jsx index b5296eb59..d015597b7 100644 --- a/src/components/ItaliaTheme/Search/Search.jsx +++ b/src/components/ItaliaTheme/Search/Search.jsx @@ -24,7 +24,7 @@ import { import { Skiplink, SkiplinkItem } from 'design-react-kit'; import { useLocation, useHistory } from 'react-router-dom'; -import { Helmet, flattenToAppURL } from '@plone/volto/helpers'; +import { Helmet, flattenToAppURL, BodyClass } from '@plone/volto/helpers'; import { resetSubsite } from 'volto-subsites'; import { @@ -33,7 +33,6 @@ import { SearchTopics, SearchCTs, Icon, - RemoveBodyClass, SearchResultItem, } from 'design-comuni-plone-theme/components/ItaliaTheme'; import { @@ -727,7 +726,7 @@ const Search = () => {
{/*force remove body class for subsite search pages*/} - + ); }; diff --git a/src/components/ItaliaTheme/Unauthorized/Unauthorized.jsx b/src/components/ItaliaTheme/Unauthorized/Unauthorized.jsx index e40f774a0..231534f1a 100644 --- a/src/components/ItaliaTheme/Unauthorized/Unauthorized.jsx +++ b/src/components/ItaliaTheme/Unauthorized/Unauthorized.jsx @@ -13,10 +13,7 @@ import { BodyClass } from '@plone/volto/helpers'; import { useLocation } from 'react-router-dom'; import { getBaseUrl } from '@plone/volto/helpers'; import config from '@plone/volto/registry'; -import { - LoginAgidButtons, - RemoveBodyClass, -} from 'design-comuni-plone-theme/components/ItaliaTheme'; +import { LoginAgidButtons } from 'design-comuni-plone-theme/components/ItaliaTheme'; /** * unauthorized function. @@ -58,7 +55,7 @@ const Unauthorized = (props) => { return (
- + {spidLoginUrl || spidLogin ? ( diff --git a/src/components/ItaliaTheme/index.js b/src/components/ItaliaTheme/index.js index 758c6fa41..723c15cf5 100644 --- a/src/components/ItaliaTheme/index.js +++ b/src/components/ItaliaTheme/index.js @@ -26,7 +26,6 @@ export SectionIcon from 'design-comuni-plone-theme/components/ItaliaTheme/Icons/ /********* COMMONS ********* */ export CardCategory from 'design-comuni-plone-theme/components/ItaliaTheme/Cards/CardCategory'; -export RemoveBodyClass from 'design-comuni-plone-theme/components/ItaliaTheme/RemoveBodyClass/RemoveBodyClass'; export CardPersona from 'design-comuni-plone-theme/components/ItaliaTheme/Cards/CardPersona'; export GalleryPreview from 'design-comuni-plone-theme/components/ItaliaTheme/GalleryPreview/GalleryPreview'; diff --git a/src/components/ItaliaTheme/RemoveBodyClass/RemoveBodyClass.jsx b/src/customizations/volto/helpers/BodyClass/BodyClass.jsx similarity index 53% rename from src/components/ItaliaTheme/RemoveBodyClass/RemoveBodyClass.jsx rename to src/customizations/volto/helpers/BodyClass/BodyClass.jsx index 8b6d3c227..bc015061a 100644 --- a/src/components/ItaliaTheme/RemoveBodyClass/RemoveBodyClass.jsx +++ b/src/customizations/volto/helpers/BodyClass/BodyClass.jsx @@ -1,13 +1,17 @@ +/** + * CUSTOMIZATIONS: + * - handle bodyclass removal + */ import { Component, Children } from 'react'; import PropTypes from 'prop-types'; import withSideEffect from 'react-side-effect'; /** * @export - * @class RemoveBodyClass + * @class BodyClass * @extends {Component} */ -class RemoveBodyClass extends Component { +class BodyClass extends Component { /** * Render method. * @method render @@ -21,14 +25,16 @@ class RemoveBodyClass extends Component { } } -RemoveBodyClass.propTypes = { +BodyClass.propTypes = { children: PropTypes.element, className: PropTypes.string, + remove: PropTypes.bool, }; -RemoveBodyClass.defaultProps = { +BodyClass.defaultProps = { children: null, className: null, + remove: false, }; /** @@ -41,7 +47,11 @@ function reducePropsToState(propsList) { let classList = []; propsList.forEach((props) => { if (props.className) { - classList = classList.concat(props.className); + if (props.remove) { + classList = classList.filter((c) => c !== props.className); + } else { + classList = classList.concat(props.className.split(' ')); + } } }); return classList; @@ -54,26 +64,10 @@ function reducePropsToState(propsList) { * @returns {null} null */ function handleStateChangeOnClient(classList) { - // document.body.className = ''; - let domClassNames = []; - Object.keys(document.body.classList).forEach((k) => { - domClassNames.push(document.body.classList[k]); - }); - + document.body.className = ''; classList.forEach((className) => { - // This allows the component to accept more than one class at the same time - if (className.includes(' ')) { - className.split(' ').forEach((className) => { - if (document.body.classList.contains(className)) { - domClassNames.splice(domClassNames.indexOf(className), 1); - } - }); - document.body.classList = domClassNames.join(' '); - } else { - if (document.body.classList.contains(className)) { - domClassNames.splice(domClassNames.indexOf(className), 1); - document.body.classList = domClassNames.join(' '); - } + if (!document.body.classList.contains(className)) { + document.body.classList.add(className); } }); } @@ -81,4 +75,4 @@ function handleStateChangeOnClient(classList) { export default withSideEffect( reducePropsToState, handleStateChangeOnClient, -)(RemoveBodyClass); +)(BodyClass);