fix: removed RemoveBodyClass component in favor of a customized BodyC…

…lass component
RedTurtle · Sep 10, 2024 · b560bf8 · b560bf8
1 parent 5f3de3e
commit b560bf8
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 41 deletions.
diff --git 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 && (
         <>
           <BodyClass className="public-ui" />
-          <RemoveBodyClass className="cms-ui" />
+          <BodyClass className="cms-ui" remove={true} />
         </>
       )}
       <ScrollToTop />

diff --git 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) => {
         <div id="page-login">
           <Helmet title={intl.formatMessage(messages.login)} />
           <BodyClass className="public-ui" />
-          <RemoveBodyClass className="cms-ui" />
+          <BodyClass className="cms-ui" remove={true} />
           <Container className="view-wrapper py-5">
             <Row className="view-container">
               <Col xs={12} lg={{ size: 10, offset: 1 }}>

diff --git 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 = () => {
         </Container>
       </div>
       {/*force remove body class for subsite search pages*/}
-      <RemoveBodyClass className="cms-ui" />
+      <BodyClass className="cms-ui" remove={true} />
     </>
   );
 };

diff --git 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 (
     <div id="unauthorized-agid" className="view-wrapper">
       <BodyClass className="public-ui" />
-      <RemoveBodyClass className="cms-ui" />
+      <BodyClass className="cms-ui" remove={true} />
 
       <Container className="view-wrapper py-5">
         {spidLoginUrl || spidLogin ? (

diff --git 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/...Theme/RemoveBodyClass/RemoveBodyClass.jsx → ...ons/volto/helpers/BodyClass/BodyClass.jsx b/...Theme/RemoveBodyClass/RemoveBodyClass.jsx → ...ons/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,31 +64,15 @@ 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);
     }
   });
 }
 
 export default withSideEffect(
   reducePropsToState,
   handleStateChangeOnClient,
-)(RemoveBodyClass);
+)(BodyClass);