fix: icons in Callout block

RedTurtle · Oct 5, 2023 · 386eb22 · 386eb22
1 parent 13cf384
commit 386eb22
Show file tree

Hide file tree

Showing 5 changed files with 117 additions and 51 deletions.
diff --git a/src/components/ItaliaTheme/Blocks/Callout/Edit.jsx b/src/components/ItaliaTheme/Blocks/Callout/Edit.jsx
@@ -35,21 +35,26 @@ const Edit = ({
   block,
   onSelectBlock,
   onAddBlock,
-  index,
   selected,
-  onFocusPreviousBlock,
-  onFocusNextBlock,
+  ...otherProps
 }) => {
   const intl = useIntl();
   const [selectedField, setSelectedField] = useState('title');
 
   useEffect(() => {
-    if (selected) {
+    if (selected && !selectedField) {
       setSelectedField('title');
     } else {
       setSelectedField(null);
     }
   }, [selected]);
+
+  useEffect(() => {
+    if (!selected && selectedField) {
+      onSelectBlock(block);
+    }
+  }, [selectedField]);
+
   /**
    * Change handler
    * @method onChange
@@ -74,48 +79,58 @@ const Edit = ({
         color={data.color?.replace('callout_', '')}
       >
         <CalloutTitle tag="h4">
-          <Icon icon="it-check-circle" padding={false} aria-hidden />
-
+          {data.icon && <Icon icon={data.icon} padding={false} aria-hidden />}
           <TextEditorWidget
+            {...otherProps}
             data={data}
+            value={data.title}
             block={block}
-            setSelected={() => setSelectedField('title')}
-            onSelectBlock={(block) => setSelectedField('title')}
-            onChangeBlock={(block, data) => {
-              onChange({ ...data, title: data.plaintext }, 'title');
-            }}
             selected={selectedField === 'title'}
             placeholder={intl.formatMessage(messages.title)}
-            showToolbar={false}
-            index={index}
+            onChangeBlock={(block, data) => {
+              onChange({ ...data, title: data.value }, 'title');
+            }}
+            setSelected={() => setSelectedField('title')}
+            focusNextField={() => {
+              setSelectedField('text');
+            }}
             wrapClass={`title-edit-wrapper ${
               data.title?.blocks?.[0]?.text?.length > 0 ? 'has-text' : ''
             }`}
-            // onAddBlock={() => {
-            //   setSelectedField('text');
-            // }}
-            // onFocusNextBlock={() => {
-            //   setSelectedField('text');
-            // }}
-            // onFocusPreviousBlock={onFocusPreviousBlock}
           />
         </CalloutTitle>
         <CalloutText>
           <TextEditorWidget
+            showToolbar={false}
             data={data}
             block={block}
-            setSelected={() => setSelectedField('text')}
-            onSelectBlock={(block) => setSelectedField('text')}
+            value={data.text_simple}
             onChangeBlock={(block, data) => {
-              onChange({ ...data, title: data.value }, 'text');
+              onChange({ ...data, text_simple: data.value }, 'text_simple');
+            }}
+            selected={selectedField === 'text_simple'}
+            placeholder={intl.formatMessage(messages.text)}
+            setSelected={() => {
+              setSelectedField('text_simple');
             }}
+            focusPrevField={() => {
+              setSelectedField('title');
+            }}
+          />
+          <TextEditorWidget
+            {...otherProps}
+            data={data}
+            value={data.text}
+            block={block}
             selected={selectedField === 'text'}
             placeholder={intl.formatMessage(messages.text)}
-            index={index}
-            // onFocusNextBlock={onFocusNextBlock}
-            // onFocusPreviousBlock={() => {
-            //   setSelectedField('title');
-            // }}
+            onChangeBlock={(block, data) => {
+              onChange({ ...data, text: data.value }, 'text');
+            }}
+            setSelected={() => setSelectedField('text')}
+            focusPrevField={() => {
+              setSelectedField('title');
+            }}
           />
         </CalloutText>
       </Callout>

diff --git a/src/components/ItaliaTheme/Blocks/Callout/Sidebar.jsx b/src/components/ItaliaTheme/Blocks/Callout/Sidebar.jsx
@@ -3,11 +3,11 @@ import PropTypes from 'prop-types';
 import { Segment } from 'semantic-ui-react';
 import { FormattedMessage, injectIntl } from 'react-intl';
 import { /*TextWidget,*/ SelectWidget } from '@plone/volto/components';
-
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import { defineMessages, useIntl } from 'react-intl';
-import IconWidget from 'design-comuni-plone-theme/components/ItaliaTheme/manage/Widgets/IconWidget';
-import { defaultIconWidgetOptions } from 'design-comuni-plone-theme/helpers/index';
 import { ColorListWidget } from 'design-comuni-plone-theme/components/ItaliaTheme';
+import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
+import { FormFieldWrapper } from '@plone/volto/components';
 
 const messages = defineMessages({
   color: { id: 'color', defaultMessage: 'Colore' },
@@ -37,10 +37,15 @@ const messages = defineMessages({
     id: 'callout_style_highlight',
     defaultMessage: 'In evidenza',
   },
+  icon: {
+    id: 'icon',
+    defaultMessage: 'Icona',
+  },
 });
 
-const Sidebar = ({ data, block, onChangeBlock }) => {
+const Sidebar = ({ data, block, onChangeBlock, reactSelect }) => {
   const intl = useIntl();
+  const { Option } = reactSelect.components;
   const colors = [
     {
       name: 'callout_default',
@@ -59,7 +64,12 @@ const Sidebar = ({ data, block, onChangeBlock }) => {
 
   useEffect(() => {
     if (!data.style) {
-      onChangeBlock(block, { ...data, style: styles[0][0] });
+      //default nuovo blocco
+      onChangeBlock(block, {
+        ...data,
+        style: styles[0][0],
+        icon: 'it-info-circle',
+      });
     }
   }, []);
 
@@ -96,18 +106,46 @@ const Sidebar = ({ data, block, onChangeBlock }) => {
           colors={colors}
         />
 
-        <IconWidget
-          id="icon"
-          value={data.icon ?? ''}
-          defaultOptions={defaultIconWidgetOptions}
-          onChange={(name, value) => {
-            onChangeBlock(block, {
-              ...data,
-              [name]: value,
-            });
-          }}
-        />
+        <div className="select-icon-widget">
+          <SelectWidget
+            id="icon"
+            title={intl.formatMessage(messages.icon)}
+            required={false}
+            value={data.icon}
+            intl={intl}
+            onChange={(id, value) => {
+              onChangeBlock(block, { ...data, [id]: value });
+            }}
+            choices={[
+              ['it-info-circle', 'Info'],
+              ['it-check-circle', 'Check'],
+              ['it-help-circle', 'Help'],
+              ['it-close-circle', 'Close'],
+            ]}
+            customOptionStyling={(props) => {
+              return (
+                <Option {...props}>
+                  {props.data.value !== 'no-value' && (
+                    <span className="icon-container italia-icon">
+                      <Icon icon={props.data.value} />
+                    </span>
+                  )}
+                  <span className="label-container">{props.data.label}</span>
+                </Option>
+              );
+            }}
+          />
 
+          <FormFieldWrapper id="icon-preview-widget-id" title="">
+            <p className="help">
+              {data.icon ? (
+                <Icon icon={data.icon} className="show-icon-italia" />
+              ) : (
+                <></>
+              )}
+            </p>
+          </FormFieldWrapper>
+        </div>
         {/* <TextWidget
           id="title"
           title={intl.formatMessage(messages.linkMoreTitle)}
@@ -132,4 +170,4 @@ Sidebar.propTypes = {
   setSelected: PropTypes.func,
 };
 
-export default injectIntl(Sidebar);
+export default injectLazyLibs('reactSelect')(injectIntl(Sidebar));
diff --git a/src/components/ItaliaTheme/Blocks/Callout/View.jsx b/src/components/ItaliaTheme/Blocks/Callout/View.jsx
@@ -8,25 +8,26 @@ import PropTypes from 'prop-types';
 
 import { Callout, CalloutTitle, CalloutText } from 'design-react-kit';
 import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
+import { TextBlockView } from '@plone/volto-slate/blocks/Text';
 /**
  * View Callout block class.
  * @class CalloutView
  * @extends Component
  */
 
 const View = ({ data, id }) => {
+  const title = <TextBlockView id={id} data={{ value: data.title }} />;
+
   return (
     <div className="block callout_block" id={id}>
       <Callout>
         <CalloutTitle>
-          <Icon icon="it-check-circle" padding={false} aria-hidden />
-          <span className="sr-only">{data.title}</span>
-          {data.title}
+          {data.icon && <Icon icon={data.icon} padding={false} aria-hidden />}
+          <span className="sr-only">{title}</span>
+          {title}
         </CalloutTitle>
         <CalloutText>
-          Maecenas vulputate ante dictum vestibulum volutpat. Lorem ipsum dolor
-          sit amet, consectetur adipiscing elit. Aenean non augue non purus
-          vestibulum varius.
+          <TextBlockView id={id} data={{ value: data.text }} />
         </CalloutText>
       </Callout>
     </div>

diff --git a/src/theme/ItaliaTheme/Widgets/_iconWidget.scss b/src/theme/ItaliaTheme/Widgets/_iconWidget.scss
@@ -3,6 +3,10 @@
     font-size: 40px;
   }
 
+  .show-icon-italia {
+    height: 2rem;
+  }
+
   .icon-container {
     width: 15px;
   }

diff --git a/src/theme/_cms-ui.scss b/src/theme/_cms-ui.scss
@@ -398,6 +398,14 @@ body.cms-ui {
     }
   }
 
+  .field-wrapper-icon {
+    .icon-container.italia-icon {
+      svg.icon {
+        height: 1.5em;
+      }
+    }
+  }
+
   /*.DraftEditor-root {
     font-family: $font-family-serif;
     h1,