diff --git a/src/components/ItaliaTheme/Blocks/NumbersBlock/Edit.jsx b/src/components/ItaliaTheme/Blocks/NumbersBlock/Edit.jsx index ecefd8fc4..fe42a2da1 100644 --- a/src/components/ItaliaTheme/Blocks/NumbersBlock/Edit.jsx +++ b/src/components/ItaliaTheme/Blocks/NumbersBlock/Edit.jsx @@ -48,7 +48,33 @@ class Edit extends SubblocksEdit { constructor(props) { super(props); this.state.selectedField = 'title'; + + this.state = { + ...this.state, + icon1: '', + icon2: '', + icon3: '', + }; + } + + componentDidMount() { + this.setIconValues(this.props.data); + } + + componentDidUpdate(prevProps) { + if (prevProps.data !== this.props.data) { + this.setIconValues(this.props.data); + } + } + + setIconValues(data) { + this.setState({ + icon1: data.icon1, + icon2: data.icon2, + icon3: data.icon3, + }); } + /** * Render method. * @method render @@ -89,15 +115,18 @@ class Edit extends SubblocksEdit { this.props.data.icon2 || this.props.data.icon3 ? (
- {this.props.data.icon1?.length > 0 && ( - - )} - {this.props.data.icon2?.length > 0 && ( - - )} - {this.props.data.icon3?.length > 0 && ( - - )} + {this.state.icon1?.length > 0 && + this.state.icon1 === this.props.data.icon1 && ( + + )} + {this.state.icon2?.length > 0 && + this.state.icon2 === this.props.data.icon2 && ( + + )} + {this.state.icon3?.length > 0 && + this.state.icon3 === this.props.data.icon3 && ( + + )}
) : (
diff --git a/src/components/ItaliaTheme/manage/Widgets/IconPreviewWidget.jsx b/src/components/ItaliaTheme/manage/Widgets/IconPreviewWidget.jsx index 7c8f2606c..40a831d78 100644 --- a/src/components/ItaliaTheme/manage/Widgets/IconPreviewWidget.jsx +++ b/src/components/ItaliaTheme/manage/Widgets/IconPreviewWidget.jsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useState, useEffect } from 'react'; import PropTypes from 'prop-types'; import { FontAwesomeIcon } from 'design-comuni-plone-theme/components/ItaliaTheme'; import { defineMessages, useIntl } from 'react-intl'; @@ -14,6 +14,12 @@ const messages = defineMessages({ const IconPreviewWidget = ({ icon, onEdit, title, description, children }) => { const intl = useIntl(); const parts = icon?.split(' ') ?? []; + const [iconValue, setIconValue] = useState(''); + + useEffect(() => { + setIconValue(icon); + }, [icon]); + return ( @@ -26,22 +32,23 @@ const IconPreviewWidget = ({ icon, onEdit, title, description, children }) => {

- {icon ? ( - <> - {parts.length > 1 ? ( - - ) : ( - - )} - - ) : ( - - {intl.formatMessage(messages.previewIconSelected)} - - )} + {icon === iconValue && + (icon ? ( + <> + {parts.length > 1 ? ( + + ) : ( + + )} + + ) : ( + + {intl.formatMessage(messages.previewIconSelected)} + + ))}