@eeacms/volto-clms-theme 1.0.65 → 1.0.69

package/src/components/Blocks/CustomTemplates/VoltoSearchBlock/RightModalFacets.jsx

@@ -1,18 +1,18 @@
-import React from 'react';
+import { Button, Grid, Segment } from 'semantic-ui-react';
 import {
-  SearchInput,
-  SearchDetails,
   Facets,
-  FilterList,
+  SearchDetails,
+  SearchInput,
   SortOn,
 } from '@plone/volto/components/manage/Blocks/Search/components';
-import { Grid, Segment } from 'semantic-ui-react';
-import { Button } from 'semantic-ui-react';
-import { flushSync } from 'react-dom';
 import { defineMessages, useIntl } from 'react-intl';
+
+import FilterList from './FilterList';
 import CclFiltersModal from '@eeacms/volto-clms-theme/components/CclFiltersModal/CclFiltersModal';
-import filterSVG from '@plone/volto/icons/filter.svg';
 import { Icon } from '@plone/volto/components';
+import React from 'react';
+import filterSVG from '@plone/volto/icons/filter.svg';
+import { flushSync } from 'react-dom';
 
 const messages = defineMessages({
   searchButtonText: {
@@ -27,6 +27,15 @@ const FacetWrapper = ({ children }) => (
   </Segment>
 );
 
+function setFacetsHandler(setFacets, onTriggerSearch, searchedText) {
+  return (f) => {
+    flushSync(() => {
+      setFacets(f);
+      onTriggerSearch(searchedText || '', f);
+    });
+  };
+}
+
 const RightModalFacets = (props) => {
   const {
     children,
@@ -50,7 +59,6 @@ const RightModalFacets = (props) => {
   const { showSearchButton } = data;
   const isLive = !showSearchButton;
   const intl = useIntl();
-
   return (
     <Grid className="searchBlock-facets right-column-facets" stackable>
       {data?.headline && (
@@ -87,12 +95,11 @@ const RightModalFacets = (props) => {
             <FilterList
               {...props}
               isEditMode={isEditMode}
-              setFacets={(f) => {
-                flushSync(() => {
-                  setFacets(f);
-                  onTriggerSearch(searchedText || '', f);
-                });
-              }}
+              setFacets={setFacetsHandler(
+                setFacets,
+                onTriggerSearch,
+                searchedText,
+              )}
             />
           </div>
 
@@ -106,20 +113,20 @@ const RightModalFacets = (props) => {
                   isEditMode={isEditMode}
                   sortOrder={sortOrder}
                   sortOn={sortOn}
-                  setSortOn={(sortOn) => {
+                  setSortOn={(sortOnParam) => {
                     flushSync(() => {
-                      setSortOn(sortOn);
-                      onTriggerSearch(searchedText || '', facets, sortOn);
+                      setSortOn(sortOnParam);
+                      onTriggerSearch(searchedText || '', facets, sortOnParam);
                     });
                   }}
-                  setSortOrder={(sortOrder) => {
+                  setSortOrder={(sortOrderParam) => {
                     flushSync(() => {
-                      setSortOrder(sortOrder);
+                      setSortOrder(sortOrderParam);
                       onTriggerSearch(
                         searchedText || '',
                         facets,
                         sortOn,
-                        sortOrder,
+                        sortOrderParam,
                       );
                     });
                   }}
@@ -138,12 +145,11 @@ const RightModalFacets = (props) => {
                     </div>
                   }
                   data={data}
-                  setFacets={(f) => {
-                    flushSync(() => {
-                      setFacets(f);
-                      onTriggerSearch(searchedText || '', f);
-                    });
-                  }}
+                  setFacets={setFacetsHandler(
+                    setFacets,
+                    onTriggerSearch,
+                    searchedText,
+                  )}
                 >
                   <div id="right-modal-facets" className="facets">
                     <Facets
@@ -151,12 +157,11 @@ const RightModalFacets = (props) => {
                       data={data}
                       facets={facets}
                       isEditMode={isEditMode}
-                      setFacets={(f) => {
-                        flushSync(() => {
-                          setFacets(f);
-                          onTriggerSearch(searchedText || '', f);
-                        });
-                      }}
+                      setFacets={setFacetsHandler(
+                        setFacets,
+                        onTriggerSearch,
+                        searchedText,
+                      )}
                       facetWrapper={FacetWrapper}
                     />
                   </div>

package/src/components/Blocks/CustomTemplates/VoltoSearchBlock/WithType.jsx

@@ -0,0 +1,8 @@
+import React from 'react';
+
+const WithType = (FacetView, typeName) =>
+  function Component(props) {
+    return <FacetView {...props} typeName={typeName} />;
+  };
+
+export default WithType;

package/src/components/Blocks/CustomTemplates/VoltoSearchBlock/index.js

@@ -1,5 +1,14 @@
+import DoubleRangeFacet from './DoubleRangeFacet';
+import AccordionFacet from './AccordionFacet';
 import RightModalFacets from './RightModalFacets';
-import AccordionCheckboxFacet from './AccordionCheckboxFacet';
-import AccordionLabelFacet from './AccordionLabelFacet';
+import WithType from './WithType';
+import rewriteOptions, { portal_types_labels } from './rewriteOptions';
 
-export { RightModalFacets, AccordionCheckboxFacet, AccordionLabelFacet };
+export {
+  RightModalFacets,
+  AccordionFacet,
+  WithType,
+  DoubleRangeFacet,
+  rewriteOptions,
+  portal_types_labels,
+};

package/src/components/Blocks/CustomTemplates/VoltoSearchBlock/range.css

@@ -0,0 +1,5 @@
+.input-range__track--active,
+.input-range__slider {
+  border: #a0b128;
+  background: #a0b128;
+}

package/src/components/Blocks/CustomTemplates/VoltoSearchBlock/rewriteOptions.js

@@ -0,0 +1,49 @@
+export const portal_types_labels = {
+  DataSet: 'Dataset',
+  Product: 'Product',
+  'News Item': 'News',
+  'eea.meeting': 'Event',
+  UseCase: 'Use case',
+  WorkOpportunity: 'Work opportunity',
+  Tender: 'Tender',
+  TechnicalLibrary: 'Product documentation',
+};
+
+const rewriteOptions = (name, choices) => {
+  var result = choices;
+  if (name === 'review_state') {
+    result = choices.map((opt) => ({
+      ...opt,
+      label: opt.label.replace(/\[.+\]/, '').trim(),
+    }));
+  }
+  const portal_types = [
+    'DataSet',
+    'Product',
+    'News Item',
+    'eea.meeting',
+    'UseCase',
+    'WorkOpportunity',
+    'Tender',
+    'TechnicalLibrary',
+  ];
+
+  if (name === 'portal_type') {
+    result = choices
+      .filter((opt) => portal_types.includes(opt.value))
+      .map((opt) => {
+        return { ...opt, label: portal_types_labels[opt.value] };
+      })
+      .sort((a, b) => {
+        if (a.label < b.label) {
+          return -1;
+        } else if (a.label > b.label) {
+          return 1;
+        }
+        return 0;
+      });
+  }
+  return result;
+};
+
+export default rewriteOptions;

package/src/components/Blocks/CustomTemplates/VoltoTabsBlock/CclCarouselView.jsx

@@ -11,21 +11,18 @@ import cx from 'classnames';
 import loadable from '@loadable/component';
 import { withRouter } from 'react-router';
 import { withScrollToTarget } from '@eeacms/volto-tabs-block/hocs';
+
 const Slider = loadable(() => import('react-slick'));
 
 const View = (props) => {
   const slider = React.useRef(null);
-  const [hashlinkOnMount, setHashlinkOnMount] = React.useState(false);
   const {
     activeTab = null,
-    data = {},
-    hashlink = {},
     metadata = {},
     tabsList = [],
     tabs = {},
-    setActiveTab = () => {},
+    setActiveTab,
   } = props;
-  const activeTabIndex = tabsList.indexOf(activeTab);
 
   const settings = {
     dots: false,
@@ -35,25 +32,26 @@ const View = (props) => {
     cssEase: 'linear',
     autoplay: true,
     autoplaySpeed: 5000,
+    arrows: false,
     beforeChange: (oldIndex, index) => {
       setActiveTab(tabsList[index]);
     },
   };
 
-  const Dots = (props) => {
-    const { activeTab = null, tabsList = [], slider = {} } = props;
-    return tabsList.length > 1 ? (
-      <ul className={cx('slick-dots', props.uiContainer)} role={'tablist'}>
-        {tabsList.map((tab, index) => (
+  const Dots = (dotProps) => {
+    const { dotActiveTab = null, dotTabsList = [], dotSlider = {} } = dotProps;
+    return dotTabsList.length > 1 ? (
+      <ul className={cx('slick-dots', dotProps.uiContainer)} role={'tablist'}>
+        {dotTabsList.map((tab, index) => (
           <li
             key={`dot-${tab}`}
-            className={cx({ 'slick-active': activeTab === tab })}
+            className={cx({ 'slick-active': dotActiveTab === tab })}
             role={'presentation'}
           >
             <button
               onClick={() => {
-                if (slider.current) {
-                  slider.current.slickGoTo(index);
+                if (dotSlider.current) {
+                  dotSlider.current.slickGoTo(index);
                 }
               }}
             />
@@ -65,11 +63,7 @@ const View = (props) => {
     );
   };
 
-  const ArrowsGroup = (props) => {
-    // const { activeTab = null, tabsList = [], slider = {} } = props;
-    // const currentSlide = tabsList.indexOf(activeTab);
-    // const slideCount = tabsList.length;
-
+  const ArrowsGroup = (arrowProps) => {
     return (
       <div className={'slick-arrows'}>
         <button
@@ -94,35 +88,6 @@ const View = (props) => {
       </div>
     );
   };
-  React.useEffect(() => {
-    const urlHash = props.location.hash.substring(1) || '';
-    if (
-      hashlink.counter > 0 ||
-      (hashlink.counter === 0 && urlHash && !hashlinkOnMount)
-    ) {
-      const id = hashlink.hash || urlHash || '';
-      const index = tabsList.indexOf(id);
-      const parentId = data.id || props.id;
-      const parent = document.getElementById(parentId);
-      // TODO: Find the best way to add offset relative to header
-      //       The header can be static on mobile and relative on > mobile
-      // const headerWrapper = document.querySelector('.header-wrapper');
-      // const offsetHeight = headerWrapper?.offsetHeight || 0;
-      const offsetHeight = 0;
-      if (id !== parentId && index > -1 && parent) {
-        if (activeTabIndex !== index) {
-          slider.current.slickGoTo(index);
-        }
-        props.scrollToTarget(parent, offsetHeight);
-      } else if (id === parentId && parent) {
-        props.scrollToTarget(parent, offsetHeight);
-      }
-    }
-    if (!hashlinkOnMount) {
-      setHashlinkOnMount(true);
-    }
-    /* eslint-disable-next-line */
-  }, [hashlink.counter]);
 
   const [showInfo, setShowInfo] = React.useState(false);
   const panes = tabsList.map((tab, index) => {
@@ -149,7 +114,11 @@ const View = (props) => {
         {panes.length ? panes.map((pane) => pane.renderItem) : ''}
       </Slider>
       <ArrowsGroup activeTab={activeTab} tabsList={tabsList} slider={slider} />
-      <Dots activeTab={activeTab} tabsList={tabsList} slider={slider} />
+      <Dots
+        dotActiveTab={activeTab}
+        dotTabsList={tabsList}
+        dotSlider={slider}
+      />
     </>
   );
 };

package/src/components/Blocks/CustomTemplates/VoltoTabsBlock/CclTabsView.jsx

@@ -9,50 +9,7 @@ import cx from 'classnames';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 const CclTabsView = (props) => {
-  const [hashlinkOnMount, setHashlinkOnMount] = React.useState(false);
-  const {
-    metadata = {},
-    data = {},
-    tabsList = [],
-    activeTabIndex = 0,
-    hashlink = {},
-    setActiveTab = () => {},
-  } = props;
-
-  React.useEffect(() => {
-    const urlHash = props.location.hash.substring(1) || '';
-    if (
-      hashlink.counter > 0 ||
-      (hashlink.counter === 0 && urlHash && !hashlinkOnMount)
-    ) {
-      const id = hashlink.hash || urlHash || '';
-      const index = tabsList.indexOf(id);
-      const parentId = data.id || props.id;
-      const parent = document.getElementById(parentId);
-      const headerWrapper = document.querySelector('.header-wrapper');
-      const offsetHeight = headerWrapper?.offsetHeight || 0;
-      if (id !== parentId && index > -1 && parent) {
-        if (activeTabIndex !== index) {
-          setActiveTab(id);
-        }
-        props.scrollToTarget(parent, offsetHeight);
-      } else if (id === parentId && parent) {
-        props.scrollToTarget(parent, offsetHeight);
-      }
-    }
-    if (!hashlinkOnMount) {
-      setHashlinkOnMount(true);
-    }
-  }, [
-    activeTabIndex,
-    data.id,
-    hashlink.counter,
-    hashlink.hash,
-    hashlinkOnMount,
-    props,
-    setActiveTab,
-    tabsList,
-  ]);
+  const { metadata = {}, tabsList = [], setActiveTab } = props;
 
   const PanelsComponent = () => {
     return (
@@ -78,15 +35,18 @@ const CclTabsView = (props) => {
       </div>
     );
   };
+
+  function handleAction(activeTab, tab) {
+    if (activeTab !== tab) {
+      setActiveTab(tab);
+    }
+  }
+
   const TabsComponent = () => {
     return (
       <div className="tabs" role="tablist">
         {tabsList.map((tab, index) => {
-          const {
-            activeTab = null,
-            tabs = {},
-            setActiveTab = () => {},
-          } = props;
+          const { activeTab = null, tabs = {} } = props;
           const title = tabs[tab].title;
           const tabIndex = index + 1;
           const fa_icon = tabs[tab]?.icon?.fontAwesome || null;
@@ -102,14 +62,10 @@ const CclTabsView = (props) => {
               /* classname hontan estiloa aldatu behar bada "===" "!==" gatik aldatuz nahikoa da */
               className={cx('tab', tab === activeTab && 'tab-selected')}
               onClick={() => {
-                if (activeTab !== tab) {
-                  setActiveTab(tab);
-                }
+                handleAction(activeTab, tab);
               }}
               onKeyDown={() => {
-                if (activeTab !== tab) {
-                  setActiveTab(tab);
-                }
+                handleAction(activeTab, tab);
               }}
               tabIndex="0"
             >

package/src/components/Blocks/CustomTemplates/VoltoTabsBlock/CclVerticalFaqTabsView.jsx

@@ -1,13 +1,15 @@
+import './fontawesome';
+import './custom.less';
+
+import { NavLink, Route } from 'react-router-dom';
+
 import React from 'react';
-import { connect } from 'react-redux';
+import { RenderBlocks } from '@plone/volto/components';
 import { compose } from 'redux';
+import { connect } from 'react-redux';
+import cx from 'classnames';
 import { withRouter } from 'react-router';
-import { RenderBlocks } from '@plone/volto/components';
 import { withScrollToTarget } from '@eeacms/volto-tabs-block/hocs';
-import './fontawesome';
-import cx from 'classnames';
-import './custom.less';
-import { Route, NavLink } from 'react-router-dom';
 
 const CclVerticalFaqTabsView = (props) => {
   const { metadata = {}, tabsList = [] } = props;
@@ -37,16 +39,18 @@ const CclVerticalFaqTabsView = (props) => {
       </div>
     );
   };
+
+  function handleActive(activeTab, tab, setActiveTab) {
+    if (activeTab !== tab) {
+      setActiveTab(tab);
+    }
+  }
   const TabsComponent = () => {
     return (
       <div className="left-content cont-w-25">
         <nav className="left-menu">
           {tabsList.map((tab, index) => {
-            const {
-              activeTab = null,
-              tabs = {},
-              setActiveTab = () => {},
-            } = props;
+            const { activeTab = null, tabs = {}, setActiveTab } = props;
             const title = tabs[tab].title;
             const tabIndex = index + 1;
             const defaultTitle = `Tab ${tabIndex}`;
@@ -60,14 +64,10 @@ const CclVerticalFaqTabsView = (props) => {
                   to={'#tab' + tabIndex}
                   className="collapsed"
                   onClick={(e) => {
-                    if (activeTab !== tab) {
-                      setActiveTab(tab);
-                    }
+                    handleActive(activeTab, tab, setActiveTab);
                   }}
                   onKeyDown={() => {
-                    if (activeTab !== tab) {
-                      setActiveTab(tab);
-                    }
+                    handleActive(activeTab, tab, setActiveTab);
                   }}
                 >
                   {title || defaultTitle}

package/src/components/Blocks/CustomTemplates/VoltoTabsBlock/CclVerticalTabsView.jsx

@@ -11,7 +11,24 @@ import { withRouter } from 'react-router';
 import { withScrollToTarget } from '@eeacms/volto-tabs-block/hocs';
 
 const CclVerticalTabsView = (props) => {
-  const { metadata = {}, tabsList = [], ExtraComponent = null } = props;
+  const {
+    metadata = {},
+    tabsList = [],
+    ExtraComponent = () => {
+      return '';
+    },
+  } = props;
+
+  const handleClick = (e, tab, activeTab, setActiveTab) => {
+    if (activeTab !== tab) {
+      setActiveTab(tab);
+    }
+  };
+
+  function isSpan(subTab, nextSubTab) {
+    return subTab === false && nextSubTab !== false;
+  }
+
   const PanelsComponent = () => {
     const { activeTab = null, tabs = {} } = props;
     return (
@@ -39,14 +56,10 @@ const CclVerticalTabsView = (props) => {
   const TabsComponent = () => {
     return (
       <div className="left-content cont-w-25">
-        {ExtraComponent ? <ExtraComponent /> : ''}
+        {<ExtraComponent />}
         <nav className="left-menu">
           {tabsList.map((tab, index) => {
-            const {
-              activeTab = null,
-              tabs = {},
-              setActiveTab = () => {},
-            } = props;
+            const { activeTab = null, tabs = {}, setActiveTab } = props;
             const title = tabs[tab].title;
             const subTab = tabs[tab]?.subTab?.subtab || false;
             const tabIndex = index + 1;
@@ -63,21 +76,17 @@ const CclVerticalTabsView = (props) => {
                   subTab && 'subcard',
                 )}
               >
-                {subTab === false && nextSubTab !== false ? (
+                {isSpan(subTab, nextSubTab) ? (
                   <span>{title || defaultTitle}</span>
                 ) : (
                   <NavLink
                     to={'#tab' + tabIndex}
                     className="collapsed"
                     onClick={(e) => {
-                      if (activeTab !== tab) {
-                        setActiveTab(tab);
-                      }
+                      handleClick(e, tab, activeTab, setActiveTab);
                     }}
-                    onKeyDown={() => {
-                      if (activeTab !== tab) {
-                        setActiveTab(tab);
-                      }
+                    onKeyDown={(e) => {
+                      handleClick(e, tab, activeTab, setActiveTab);
                     }}
                   >
                     {title || defaultTitle}

package/src/components/Blocks/CustomTemplates/VoltoTabsBlock/RoutingHOC.jsx

@@ -2,60 +2,30 @@ import React from 'react';
 
 const RoutingHOC = (TabView) =>
   function Component(props) {
-    const [hashlinkOnMount, setHashlinkOnMount] = React.useState(false);
-    const {
-      data = {},
-      tabsList = [],
-      tabs,
-      activeTabIndex = 0,
-      hashlink = {},
-      setActiveTab = () => {},
-    } = props;
-    const parentId = data.id || props.id;
-    const scrollToTarget = props.scrollToTarget;
-    React.useEffect(() => {
-      const urlHash = window.location.hash.substring(1) || '';
+    const { tabsList = [], tabs, activeTabIndex = 0, setActiveTab } = props;
+    function reloadTab(window, rTabs, rTabsList) {
       if (
-        hashlink.counter > 0 ||
-        (hashlink.counter === 0 && urlHash && !hashlinkOnMount)
+        window.location.hash.length === 0 &&
+        rTabs[rTabsList[1]]?.subTab?.subtab &&
+        !rTabs[rTabsList[0]]?.subTab?.subtab
       ) {
-        const id = hashlink.hash || urlHash || '';
-        const index = tabsList.indexOf(id);
-        const parent = document.getElementById(parentId);
-        const headerWrapper = document.querySelector('.header-wrapper');
-        const offsetHeight = headerWrapper?.offsetHeight || 0;
-        if (id !== parentId && index > -1 && parent) {
-          if (activeTabIndex !== index) {
-            setActiveTab(id);
-          }
-          scrollToTarget(parent, offsetHeight);
-        } else if (id === parentId && parent) {
-          scrollToTarget(parent, offsetHeight);
-        }
-      }
-      if (!hashlinkOnMount) {
-        setHashlinkOnMount(true);
+        return rTabsList[1];
+      } else if (
+        window.location.hash.length === 0 &&
+        !rTabs[rTabsList[1]]?.subTab?.subtab
+      ) {
+        return rTabsList[0];
       }
-      if (
+      return rTabsList[window.location.hash.substring(4) - 1];
+    }
+    React.useEffect(() => {
+      const isReload =
         String(window.performance.getEntriesByType('navigation')[0].type) ===
           'navigate' ||
         String(window.performance.getEntriesByType('navigation')[0].type) ===
-          'reload'
-      ) {
-        if (
-          window.location.hash.length === 0 &&
-          tabs[tabsList[1]]?.subTab?.subtab &&
-          !tabs[tabsList[0]]?.subTab?.subtab
-        ) {
-          setActiveTab(tabsList[1]);
-        } else if (
-          window.location.hash.length === 0 &&
-          !tabs[tabsList[1]]?.subTab?.subtab
-        ) {
-          setActiveTab(tabsList[0]);
-        } else {
-          setActiveTab(tabsList[window.location.hash.substring(4) - 1]);
-        }
+          'reload';
+      if (isReload) {
+        setActiveTab(reloadTab(window, tabs, tabsList));
       }
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [activeTabIndex]);