fix: added conditions and state management to update icons

RedTurtle · Nov 14, 2023 · 693d37c · 693d37c
1 parent 68c3ca5
commit 693d37c
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 26 deletions.
diff --git 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 ? (
                       <div className="icons">
-                        {this.props.data.icon1?.length > 0 && (
-                          <Icon icon={this.props.data.icon1} />
-                        )}
-                        {this.props.data.icon2?.length > 0 && (
-                          <Icon icon={this.props.data.icon2} />
-                        )}
-                        {this.props.data.icon3?.length > 0 && (
-                          <Icon icon={this.props.data.icon3} />
-                        )}
+                        {this.state.icon1?.length > 0 &&
+                          this.state.icon1 === this.props.data.icon1 && (
+                            <Icon icon={this.state.icon1} />
+                          )}
+                        {this.state.icon2?.length > 0 &&
+                          this.state.icon2 === this.props.data.icon2 && (
+                            <Icon icon={this.state.icon2} />
+                          )}
+                        {this.state.icon3?.length > 0 &&
+                          this.state.icon3 === this.props.data.icon3 && (
+                            <Icon icon={this.state.icon3} />
+                          )}
                       </div>
                     ) : (
                       <div className="icons placeholder">

diff --git 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 (
     <Form.Field inline className="help" id="icon-preview-widget-id">
       <Grid>
@@ -26,22 +32,23 @@ const IconPreviewWidget = ({ icon, onEdit, title, description, children }) => {
           <Grid.Column width={8}>
             <div className="ui input flex-center">
               <p className="help">
-                {icon ? (
-                  <>
-                    {parts.length > 1 ? (
-                      <FontAwesomeIcon
-                        icon={[parts[0], parts[1]]}
-                        className="show-icon"
-                      />
-                    ) : (
-                      <FontAwesomeIcon icon={icon} className="show-icon" />
-                    )}
-                  </>
-                ) : (
-                  <span>
-                    {intl.formatMessage(messages.previewIconSelected)}
-                  </span>
-                )}
+                {icon === iconValue &&
+                  (icon ? (
+                    <>
+                      {parts.length > 1 ? (
+                        <FontAwesomeIcon
+                          icon={[parts[0], parts[1]]}
+                          className="show-icon"
+                        />
+                      ) : (
+                        <FontAwesomeIcon icon={icon} className="show-icon" />
+                      )}
+                    </>
+                  ) : (
+                    <span>
+                      {intl.formatMessage(messages.previewIconSelected)}
+                    </span>
+                  ))}
               </p>
             </div>
           </Grid.Column>