io-sanita-theme 2.5.2 → 2.5.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [2.5.3](https://github.com/RedTurtle/io-sanita-theme/compare/2.5.2...2.5.3) (2025-03-05)
+
+### Bug Fixes
+
+* scroll bhv in paginations ([00b84e9](https://github.com/RedTurtle/io-sanita-theme/commit/00b84e9e2d8386552632fa92b968e59485638d1d))
+
 ## [2.5.2](https://github.com/RedTurtle/io-sanita-theme/compare/2.5.1...2.5.2) (2025-03-05)
 
 ### Bug Fixes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "io-sanita-theme",
-  "version": "2.5.2",
+  "version": "2.5.3",
   "description": "io-sanita-theme: Volto add-on",
   "main": "src/index.js",
   "license": "MIT",

package/src/components/Blocks/SearchBandi/Body.jsx

@@ -10,6 +10,7 @@ import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
 import { BandiTemplate } from 'io-sanita-theme/components/Blocks';
 import { Pagination } from 'io-sanita-theme/components';
 import { resetQuerystringResults } from 'io-sanita-theme/actions';
+import { scrollIntoView } from 'io-sanita-theme/helpers';
 
 const messages = defineMessages({
   find: {
@@ -146,8 +147,9 @@ const Body = ({ data, id, inEditMode, path, onChangeBlock, blocksConfig }) => {
   );
 
   function handleQueryPaginationChange(e, { activePage }) {
-    resultsRef.current.scrollIntoView({ behavior: 'smooth' });
-    const current = activePage?.children ?? 1;
+    scrollIntoView({ ref: resultsRef.current });
+
+    const current = activePage?.children ?? activePage ?? 1;
     setCurrentPage(current);
     doRequest(current);
   }

package/src/components/Blocks/SearchFarmacia/Body.jsx

@@ -14,6 +14,7 @@ import SearchFilters from './SearchFilters';
 
 /* Style */
 import './search-farmacia.scss';
+import { scrollIntoView } from 'io-sanita-theme/helpers';
 
 const messages = defineMessages({
   results: {
@@ -205,7 +206,7 @@ const Body = ({ isEditMode, data, id }) => {
     activeScroll = true,
   ) => {
     if (resultsRef.current && activeScroll) {
-      resultsRef.current.scrollIntoView({ behavior: 'smooth' });
+      scrollIntoView({ ref: resultsRef.current });
     }
     setCurrentPage(activePage || 1);
   };

package/src/components/Blocks/SearchServiziProcedure/Body.jsx

@@ -15,6 +15,7 @@ import {
   SortByWidget,
   LinkedHeadline,
 } from 'io-sanita-theme/components';
+import { scrollIntoView } from 'io-sanita-theme/helpers';
 
 const messages = defineMessages({
   results: {
@@ -190,7 +191,7 @@ const Body = ({ data, id, path, properties, inEditMode }) => {
     activeScroll = true,
   ) => {
     if (resultsRef.current && activeScroll) {
-      resultsRef.current.scrollIntoView({ behavior: 'smooth' });
+      scrollIntoView({ ref: resultsRef.current });
     }
     const current = activePage ?? 1;
     setCurrentPage(current);
@@ -237,6 +238,7 @@ const Body = ({ data, id, path, properties, inEditMode }) => {
     (data.portal_type === 'Servizio'
       ? intl.formatMessage(messages.searchable_text_default_label_servizi)
       : intl.formatMessage(messages.searchable_text_default_label_procedura));
+
   return (
     <div className="block iosanita-block-search servizi-procedure">
       <div className="full-width bg-primary-lightest py-4">

package/src/components/Cards/CardSimple/CardSimple.jsx

@@ -30,6 +30,7 @@ export const CardSimple = ({
   titleTag = 'h5',
   titleDataElement,
   highlight, //se si vuole evidenziare un testo, ad esempio nei risultati delle ricerche
+  badgeText,
 }) => {
   const intl = useIntl();
   const date =
@@ -61,11 +62,13 @@ export const CardSimple = ({
   ) : (
     item.description
   );
+
+  const display_badge = isServizioOnline || badgeText?.length > 0;
   return (
     <Card className={`shadow rounded no-after card-simple ${className ?? ''}`}>
       <CardBody>
         <div className="card-body-main">
-          <CardTitle tag={titleTag} className={isServizioOnline ? 'mb-1' : ''}>
+          <CardTitle tag={titleTag} className={display_badge ? 'mb-1' : ''}>
             {item['@id'] ? (
               <UniversalLink
                 item={!isEditMode ? item : null}
@@ -80,11 +83,13 @@ export const CardSimple = ({
             )}
           </CardTitle>
 
-          {/* Chip servizio attivo */}
-          {isServizioOnline && (
+          {/* Chip badge: servizio attivo per servizi o badge con badgeText */}
+          {display_badge && (
             <div className={showDescription ? 'mb-3' : ''}>
               <Badge color="info">
-                {intl.formatMessage(messages.servizioOnline)}
+                {isServizioOnline
+                  ? intl.formatMessage(messages.servizioOnline)
+                  : badgeText}
               </Badge>
             </div>
           )}

package/src/components/View/commons/SideMenu/SideMenu.jsx

@@ -15,6 +15,7 @@ import {
   AccordionHeader,
 } from 'design-react-kit';
 import config from '@plone/volto/registry';
+import { scrollIntoView, getMainOffset } from 'io-sanita-theme/helpers';
 import './_sideMenu.scss';
 
 const messages = defineMessages({
@@ -91,14 +92,6 @@ const SideMenu = ({ data, content_uid }) => {
     headers?.[0]?.title ??
     intl.formatMessage(messages.progressBar);
 
-  const getMainOffset = () => {
-    return isClient
-      ? document.querySelector('.it-header-wrapper.it-header-sticky')
-          ?.clientHeight + 20
-      : 0;
-  };
-  const mainOffset = getMainOffset();
-
   const handleScroll = useCallback(() => {
     const windowHeight = window.innerHeight * 0.1;
     const mainOffset = getMainOffset();
@@ -161,16 +154,8 @@ const SideMenu = ({ data, content_uid }) => {
     // Scroll to section
     // setTimeout hack should wait for rerender after setIsNavOpen
     setTimeout(() => {
-      // document.getElementById(id)?.scrollIntoView?.({
-      //   behavior: 'smooth',
-      //   block: 'start',
-      // });
-
-      window.scrollTo({
-        behavior: 'smooth',
-        top: document.querySelector('#' + id).offsetTop - mainOffset,
-      });
-    }, 0);
+      scrollIntoView({ id });
+    });
   };
 
   const progressValue = useMemo(() => {
@@ -180,6 +165,8 @@ const SideMenu = ({ data, content_uid }) => {
       : 0;
   }, [scrollY, isClient]);
 
+  const mainOffset = getMainOffset();
+
   return headers?.length > 0 ? (
     <div
       className="navbar-wrapper page-side-menu affix-top"

package/src/customizations/volto/components/manage/Blocks/Listing/ListingBody.jsx

@@ -26,7 +26,10 @@ import {
   ListingContainer,
   //getPathFiltersButtons,
 } from 'io-sanita-theme/components/Blocks';
-import { checkRichTextHasContent } from 'io-sanita-theme/helpers';
+import {
+  checkRichTextHasContent,
+  scrollIntoView,
+} from 'io-sanita-theme/helpers';
 import config from '@plone/volto/registry';
 
 const Headline = ({ headlineTag, id, data = {}, listingItems, isEditMode }) => {
@@ -207,8 +210,8 @@ const ListingBody = withQuerystringResults((props) => {
                       }
 
                       if (!isEditMode && page != currentPage) {
-                        listingRef.current.scrollIntoView({
-                          behavior: 'smooth',
+                        scrollIntoView({
+                          ref: listingRef.current,
                         });
                       }
                       onPaginationChange(e, {

package/src/helpers/ClientPagination/clientPagination.js

@@ -1,4 +1,5 @@
 import React, { useEffect, useState, createRef } from 'react';
+import { scrollIntoView } from 'io-sanita-theme/helpers';
 
 export const useClientPagination = ({ items, b_size = 4 }) => {
   const [currentPage, setCurrentPage] = useState(1);
@@ -16,9 +17,7 @@ export const useClientPagination = ({ items, b_size = 4 }) => {
   const onPaginationChange = (activePage) => {
     let page = activePage;
     if (page != currentPage && ref?.current) {
-      ref.current.scrollIntoView({
-        behavior: 'smooth',
-      });
+      scrollIntoView({ ref: ref.current });
     }
     setCurrentPage(page);
   };

package/src/helpers/index.js

@@ -81,3 +81,6 @@ export { getComponentWithFallback } from 'io-sanita-theme/helpers/registry';
 export SchemaOrg, {
   SchemaOrgUtils,
 } from 'io-sanita-theme/helpers/SchemaOrg/SchemaOrg';
+
+//scroll
+export { scrollIntoView, getMainOffset } from 'io-sanita-theme/helpers/scroll';

package/src/helpers/scroll.js

@@ -0,0 +1,22 @@
+/* scrollIntoView:
+pass ref prop (reactRef) or html id if item
+*/
+export const getMainOffset = () => {
+  return __CLIENT__
+    ? document.querySelector('.it-header-wrapper.it-header-sticky')
+        ?.clientHeight + 20
+    : 0;
+};
+
+export const scrollIntoView = ({ ref, id, behavior = 'smooth' }) => {
+  const mainOffset = getMainOffset();
+
+  const top = id
+    ? document.querySelector('#' + id).offsetTop - mainOffset
+    : ref.getBoundingClientRect().top + window.scrollY - mainOffset;
+
+  window.scrollTo({
+    behavior,
+    top: top,
+  });
+};