diff --git a/RELEASE.md b/RELEASE.md index 774b0cac5..441488d60 100644 --- a/RELEASE.md +++ b/RELEASE.md @@ -49,6 +49,7 @@ ### Fix +- Le icone del Blocco Numeri, del Blocco Icone e della Sidebar si aggiornano istantaneamente quando vengono cambiate - Sistemato un bug nell'header dei sottositi che mostrava le voci del menu del sito padre anche se queste erano indicate come non visibili nella configurazione del menu. ## Versione 10.3.0 (08/11/2023) diff --git a/src/components/ItaliaTheme/Blocks/NumbersBlock/Edit.jsx b/src/components/ItaliaTheme/Blocks/NumbersBlock/Edit.jsx index ecefd8fc4..c72cdd6e7 100644 --- a/src/components/ItaliaTheme/Blocks/NumbersBlock/Edit.jsx +++ b/src/components/ItaliaTheme/Blocks/NumbersBlock/Edit.jsx @@ -49,6 +49,7 @@ class Edit extends SubblocksEdit { super(props); this.state.selectedField = 'title'; } + /** * Render method. * @method render diff --git a/src/components/ItaliaTheme/Icons/FontAwesomeIcon.jsx b/src/components/ItaliaTheme/Icons/FontAwesomeIcon.jsx index 36bb975f2..1b998739b 100644 --- a/src/components/ItaliaTheme/Icons/FontAwesomeIcon.jsx +++ b/src/components/ItaliaTheme/Icons/FontAwesomeIcon.jsx @@ -7,7 +7,11 @@ import { fontAwesomeAliases } from 'design-comuni-plone-theme/helpers/index'; const FontAwesomeIcon = (props) => { const { className, icon, prefix, title } = props; - const [loadedIcon, setLoadedIcon] = React.useState(null); + const [loadedIcon, setLoadedIcon] = React.useState({ + module: null, + iconName: '', + family: 'solid', + }); const getIconAlias = (icon, aliasList) => { if (icon in aliasList) { @@ -17,40 +21,58 @@ const FontAwesomeIcon = (props) => { } }; - let prefixKey = prefix; - let iconName = ''; - - if (Array.isArray(icon)) { - prefixKey = icon[0]; - iconName = getIconAlias(icon[1], fontAwesomeAliases); - } else { - iconName = getIconAlias(icon, fontAwesomeAliases); - } + const getIconInfo = (icon, prefix) => { + let prefixKey = prefix; + let iconName = ''; + if (Array.isArray(icon)) { + prefixKey = icon[0]; + iconName = getIconAlias(icon[1], fontAwesomeAliases); + } else { + iconName = getIconAlias(icon, fontAwesomeAliases); + } - const prefixFolder = - prefixKey === 'fab' ? 'brands' : prefixKey === 'far' ? 'regular' : 'solid'; + return [ + prefixKey === 'fab' + ? 'brands' + : prefixKey === 'far' + ? 'regular' + : 'solid', + iconName, + ]; + }; React.useEffect(() => { - if (iconName && !loadedIcon) { + const [prefixFolder, iconName] = getIconInfo(icon, prefix); + if ( + iconName && + (iconName !== loadedIcon.iconName || prefixFolder !== loadedIcon.family) + ) { import( `design-comuni-plone-theme/icons/fontawesome-free-6.4.0-web/svgs/${prefixFolder}/${iconName}.svg` ) .then((_loadedIcon) => { - setLoadedIcon(_loadedIcon); + setLoadedIcon({ + module: _loadedIcon.default, + iconName, + family: prefixFolder, + }); }) .catch((error) => {}); } - }, [iconName, loadedIcon, prefixFolder]); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [icon, prefix, loadedIcon]); - return loadedIcon ? ( + return loadedIcon.module ? ( ${title}${loadedIcon.content}` - : loadedIcon.content, + ? `${title}${loadedIcon.module.content}` + : loadedIcon.module.content, }} /> ) : icon ? ( diff --git a/src/components/ItaliaTheme/manage/Widgets/IconPreviewWidget.jsx b/src/components/ItaliaTheme/manage/Widgets/IconPreviewWidget.jsx index 7c8f2606c..6b4c249b6 100644 --- a/src/components/ItaliaTheme/manage/Widgets/IconPreviewWidget.jsx +++ b/src/components/ItaliaTheme/manage/Widgets/IconPreviewWidget.jsx @@ -1,4 +1,3 @@ -import React from 'react'; import PropTypes from 'prop-types'; import { FontAwesomeIcon } from 'design-comuni-plone-theme/components/ItaliaTheme'; import { defineMessages, useIntl } from 'react-intl'; @@ -14,6 +13,7 @@ const messages = defineMessages({ const IconPreviewWidget = ({ icon, onEdit, title, description, children }) => { const intl = useIntl(); const parts = icon?.split(' ') ?? []; + return (