design-comuni-plone-theme 11.10.2 → 12.0.0-alpha.1

package/src/components/ItaliaTheme/Blocks/CTABlock/Block.jsx

@@ -5,9 +5,10 @@ import { defineMessages, useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
 import { TextEditorWidget } from 'design-comuni-plone-theme/components/ItaliaTheme';
 import { UniversalLink } from '@plone/volto/components';
+import { TextBlockView } from '@plone/volto-slate/blocks/Text';
+import { useHandleDetachedBlockFocus } from 'design-comuni-plone-theme/helpers/blocks';
 import config from '@plone/volto/registry';
 import cx from 'classnames';
-import redraft from 'redraft';
 
 const messages = defineMessages({
   cta_title: {
@@ -24,36 +25,19 @@ const messages = defineMessages({
   },
 });
 
-
-const Block = ({
-  data,
-  block,
-  inEditMode,
-  onChangeBlock,
-  onSelectBlock,
-  onAddBlock,
-  index,
-  onFocusNextBlock,
-  onFocusPreviousBlock,
-  selected,
-}) => {
+const Block = (props) => {
+  const { data, block, inEditMode, selected, ...otherProps } = props;
   const intl = useIntl();
   const Image = config.getComponent({ name: 'Image' }).component;
-  const title = data?.cta_title?.blocks[0]?.text;
+  const title = data?.cta_title;
   const hasImage = data?.showImage && data?.ctaImage?.length > 0;
   const content = data?.cta_content;
   const showFullwidth = data?.showFullWidth;
 
-  const [selectedField, setSelectedField] = useState('title');
-  const titleRef = useRef();
-  const contentRef = useRef();
-  useEffect(() => {
-    if (selected) {
-      setSelectedField('title');
-    } else {
-      setSelectedField(null);
-    }
-  }, [selected]);
+  const { selectedField, setSelectedField } = useHandleDetachedBlockFocus(
+    props,
+    'cta_title',
+  );
 
   return (
     <div
@@ -61,20 +45,6 @@ const Block = ({
         'has-image': hasImage,
         'full-width': showFullwidth,
       })}
-      onKeyDown={(e) => {
-        if (e.key === 'Enter' && !e.shiftKey) {
-          if (
-            !titleRef.current.contains(e.target) &&
-            !contentRef.current.contains(e.target)
-          ) {
-            this.props.onAddBlock('text', index + 1);
-          }
-
-          if (titleRef.current.contains(e.target)) {
-            setSelectedField('content');
-          }
-        }
-      }}
     >
       {hasImage && data?.ctaImage?.length > 0 && (
         <figure className="img-wrapper">
@@ -94,70 +64,40 @@ const Block = ({
         <div className="cta-tile-text">
           <h2 className="title mt-0" id={block + 'title'}>
             {inEditMode ? (
-              <div
-                ref={titleRef}
-                onClick={() => {
-                  setSelectedField('title');
-                }}
-                onFocus={() => {
-                  setSelectedField('title');
+              <TextEditorWidget
+                {...otherProps}
+                showToolbar={false}
+                data={data}
+                fieldName="cta_title"
+                selected={selectedField === 'cta_title'}
+                setSelected={setSelectedField}
+                block={block}
+                placeholder={intl.formatMessage(messages.cta_title)}
+                focusNextField={() => {
+                  setSelectedField('cta_content');
                 }}
-              >
-                <TextEditorWidget
-                  data={data}
-                  fieldName="cta_title"
-                  selected={selectedField === 'title'}
-                  block={block}
-                  onChangeBlock={(data) => onChangeBlock(block, data)}
-                  placeholder={intl.formatMessage(messages.cta_title)}
-                  showToolbar={false}
-                  onSelectBlock={() => {}}
-                  onAddBlock={() => {
-                    setSelectedField('content');
-                  }}
-                  onFocusNextBlock={() => {
-                    setSelectedField('content');
-                  }}
-                  onFocusPreviousBlock={onFocusPreviousBlock}
-                />
-              </div>
+              />
             ) : (
               title
             )}
           </h2>
+
           {inEditMode ? (
-            <div
-              ref={contentRef}
-              onClick={() => {
-                setSelectedField('content');
-              }}
-              onFocus={() => {
-                setSelectedField('content');
+            <TextEditorWidget
+              {...otherProps}
+              showToolbar={true}
+              data={data}
+              fieldName="cta_content"
+              block={block}
+              selected={selectedField === 'cta_content'}
+              placeholder={intl.formatMessage(messages.cta_content)}
+              setSelected={setSelectedField}
+              focusPrevField={() => {
+                setSelectedField('cta_title');
               }}
-            >
-              <TextEditorWidget
-                data={data}
-                fieldName="cta_content"
-                selected={selectedField === 'content'}
-                block={block}
-                onChangeBlock={(data) => onChangeBlock(block, data)}
-                placeholder={intl.formatMessage(messages.cta_content)}
-                showToolbar={true}
-                onSelectBlock={onSelectBlock}
-                onAddBlock={onAddBlock}
-                index={index}
-                onFocusNextBlock={onFocusNextBlock}
-                onFocusPreviousBlock={() => {
-                  setSelectedField('title');
-                }}
-              />
-            </div>
+            />
           ) : (
-            redraft(
-              content,
-              config.settings.richtextViewSettings.ToHTMLRenderers,
-              config.settings.richtextViewSettings.ToHTMLOptions,
-            )
+            <TextBlockView data={{ value: content }} />
           )}
           {data.ctaLink?.length > 0 && data.ctaLinkTitle?.length > 0 && (
             <div className="mt-5">

package/src/components/ItaliaTheme/Blocks/Callout/Edit.jsx

@@ -0,0 +1,108 @@
+/**
+ * Edit Callout block.
+ * @module components/ItaliaTheme/Blocks/Callout/Edit
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { defineMessages, useIntl } from 'react-intl';
+import { SidebarPortal } from '@plone/volto/components';
+
+import { Callout, CalloutTitle, CalloutText } from 'design-react-kit';
+import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
+import Sidebar from './Sidebar.jsx';
+import { TextEditorWidget } from 'design-comuni-plone-theme/components/ItaliaTheme';
+import { useHandleDetachedBlockFocus } from 'design-comuni-plone-theme/helpers/blocks';
+
+const messages = defineMessages({
+  title: {
+    id: 'Type the title…',
+    defaultMessage: 'Type the title…',
+  },
+  text: {
+    id: 'Type text…',
+    defaultMessage: 'Digita il testo…',
+  },
+});
+/**
+ * Edit Calloout block class.
+ * @class Edit
+ * @extends Component
+ */
+const Edit = (props) => {
+  const { data, onChangeBlock, block, onSelectBlock, selected, ...otherProps } =
+    props;
+  const intl = useIntl();
+  const { selectedField, setSelectedField } = useHandleDetachedBlockFocus(
+    props,
+    'title',
+  );
+
+  return __SERVER__ ? (
+    <div />
+  ) : (
+    <div className="public-ui" id={block} tabIndex="-1" role="textbox">
+      <Callout
+        highlight={data.style === 'highlight'}
+        color={data.color?.replace('callout_', '')}
+      >
+        <CalloutTitle tag="h4">
+          {data.icon && <Icon icon={data.icon} padding={false} aria-hidden />}
+
+          <div className="text">
+            <TextEditorWidget
+              {...otherProps}
+              showToolbar={false}
+              data={data}
+              block={block}
+              fieldName="title"
+              onChangeBlock={onChangeBlock}
+              selected={selectedField === 'title'}
+              placeholder={intl.formatMessage(messages.title)}
+              setSelected={setSelectedField}
+              focusNextField={() => {
+                setSelectedField('text');
+              }}
+              onSelectBlock={onSelectBlock}
+            />
+          </div>
+        </CalloutTitle>
+        <CalloutText>
+          <TextEditorWidget
+            {...otherProps}
+            data={data}
+            fieldName="text"
+            block={block}
+            onSelectBlock={onSelectBlock}
+            selected={selectedField === 'text'}
+            placeholder={intl.formatMessage(messages.text)}
+            onChangeBlock={onChangeBlock}
+            setSelected={setSelectedField}
+            focusPrevField={() => {
+              setSelectedField('title');
+            }}
+          />
+        </CalloutText>
+      </Callout>
+
+      <SidebarPortal selected={selected || false}>
+        <Sidebar data={data} block={block} onChangeBlock={onChangeBlock} />
+      </SidebarPortal>
+    </div>
+  );
+};
+
+Edit.propTypes = {
+  properties: PropTypes.objectOf(PropTypes.any).isRequired,
+  selected: PropTypes.bool.isRequired,
+  index: PropTypes.number.isRequired,
+  onChangeField: PropTypes.func.isRequired,
+  onSelectBlock: PropTypes.func.isRequired,
+  onDeleteBlock: PropTypes.func.isRequired,
+  onAddBlock: PropTypes.func.isRequired,
+  onFocusPreviousBlock: PropTypes.func.isRequired,
+  onFocusNextBlock: PropTypes.func.isRequired,
+  block: PropTypes.string.isRequired,
+};
+
+export default Edit;

package/src/components/ItaliaTheme/Blocks/Callout/Sidebar.jsx

@@ -0,0 +1,173 @@
+import React, { useEffect } from 'react';
+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 { 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' },
+  color_default: {
+    id: 'color_default',
+    defaultMessage: 'Default',
+  },
+  color_success: {
+    id: 'color_success',
+    defaultMessage: 'Success',
+  },
+  color_warning: {
+    id: 'color_warning',
+    defaultMessage: 'Warning',
+  },
+  color_danger: {
+    id: 'color_danger',
+    defaultMessage: 'Danger',
+  },
+  color_note: {
+    id: 'color_note',
+    defaultMessage: 'Note',
+  },
+  style: { id: 'callout_style', defaultMessage: 'Stile' },
+  style_basic: { id: 'callout_style_basic', defaultMessage: 'Base' },
+  style_highlight: {
+    id: 'callout_style_highlight',
+    defaultMessage: 'In evidenza',
+  },
+  icon: {
+    id: 'icon',
+    defaultMessage: 'Icona',
+  },
+});
+
+const Sidebar = ({ data, block, onChangeBlock, reactSelect }) => {
+  const intl = useIntl();
+  const { Option } = reactSelect.components;
+  const colors = [
+    {
+      name: 'callout_default',
+      label: intl.formatMessage(messages.color_default),
+    },
+    { name: 'success', label: intl.formatMessage(messages.color_success) },
+    { name: 'warning', label: intl.formatMessage(messages.color_warning) },
+    { name: 'danger', label: intl.formatMessage(messages.color_danger) },
+    { name: 'callout_note', label: intl.formatMessage(messages.color_note) },
+  ];
+
+  const styles = [
+    ['base', intl.formatMessage(messages.style_basic)],
+    ['highlight', intl.formatMessage(messages.style_highlight)],
+  ];
+
+  useEffect(() => {
+    if (!data.style) {
+      //default nuovo blocco
+      onChangeBlock(block, {
+        ...data,
+        style: styles[0][0],
+        icon: 'it-info-circle',
+      });
+    }
+  }, []);
+
+  return (
+    <Segment.Group raised>
+      <header className="header pulled">
+        <h2>
+          <FormattedMessage id="Callout" defaultMessage="Callout" />
+        </h2>
+      </header>
+      <div className="ui form">
+        <SelectWidget
+          id="style"
+          title={intl.formatMessage(messages.style)}
+          required={false}
+          value={data.style}
+          intl={intl}
+          onChange={(id, value) => {
+            onChangeBlock(block, { ...data, [id]: value });
+          }}
+          choices={styles}
+          noValueOption={false}
+        />
+        <ColorListWidget
+          id="color"
+          title={intl.formatMessage(messages.color)}
+          value={data.color}
+          onChange={(id, value) => {
+            onChangeBlock(block, {
+              ...data,
+              [id]: value,
+            });
+          }}
+          colors={colors}
+        />
+
+        <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)}
+          value={data.linkMoreTitle}
+          onChange={(name, value) => {
+            onChangeBlock(block, {
+              ...data,
+              linkMoreTitle: value,
+            });
+          }}
+        /> */}
+      </div>
+    </Segment.Group>
+  );
+};
+
+Sidebar.propTypes = {
+  data: PropTypes.objectOf(PropTypes.any),
+  block: PropTypes.string,
+  onChangeBlock: PropTypes.func,
+  selected: PropTypes.any,
+  setSelected: PropTypes.func,
+};
+
+export default injectLazyLibs('reactSelect')(injectIntl(Sidebar));

package/src/components/ItaliaTheme/Blocks/Callout/View.jsx

@@ -0,0 +1,45 @@
+/**
+ * View Callout block.
+ * @module components/ItaliaTheme/Blocks/Callout/View
+ */
+
+import React from 'react';
+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 }) => {
+  return (
+    <div className="block callout_block" id={id}>
+      <Callout
+        highlight={data.style === 'highlight'}
+        color={data.color?.replace('callout_', '')}
+      >
+        <CalloutTitle>
+          {data.icon && <Icon icon={data.icon} padding={false} aria-hidden />}
+          <span className="text">{data.title}</span>
+        </CalloutTitle>
+        <CalloutText>
+          <TextBlockView id={id} data={{ value: data.text }} />
+        </CalloutText>
+      </Callout>
+    </div>
+  );
+};
+/**
+ * Property types.
+ * @property {Object} propTypes Property types.
+ * @static
+ */
+View.propTypes = {
+  data: PropTypes.objectOf(PropTypes.any).isRequired,
+};
+
+export default View;