design-comuni-plone-theme 8.0.0-alpha.37

package/src/components/ItaliaTheme/Blocks/TextCard/CardWithImage/Sidebar.jsx

@@ -0,0 +1,122 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Segment, Accordion } from 'semantic-ui-react';
+import { FormattedMessage, injectIntl } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
+
+import {
+  FileWidget,
+  CheckboxWidget,
+  FormFieldWrapper,
+} from '@plone/volto/components';
+import ImageSizeWidget from '@plone/volto/components/manage/Widgets/ImageSizeWidget';
+
+const messages = defineMessages({
+  cardImage: {
+    id: 'cardImage',
+    defaultMessage: "Seleziona l'immagine da mostrare",
+  },
+  cardImageEnable: {
+    id: 'cardImageEnable',
+    defaultMessage: "Mostra l'immagine",
+  },
+  CardImageRight: {
+    id: 'CardImageRight',
+    defaultMessage: 'Allinea immagine a destra',
+  },
+  CardImageSize: {
+    id: 'CardImageSize',
+    defaultMessage: 'Dimensione immagine',
+  },
+  natural_image_size: {
+    id: 'natural_image_size',
+    defaultMessage: "Non alterare le dimensioni naturali dell'immagine",
+  },
+  small: {
+    id: 'Piccolo',
+    defaultMessage: 'Piccolo',
+  },
+  medium: {
+    id: 'Medio',
+    defaultMessage: 'Medio',
+  },
+  large: {
+    id: 'Grande',
+    defaultMessage: 'Grande',
+  },
+});
+
+const Sidebar = ({ data, block, onChangeBlock }) => {
+  const intl = useIntl();
+
+  return (
+    <Segment.Group raised>
+      <header className="header pulled">
+        <h2>
+          <FormattedMessage
+            id="card_width_image"
+            defaultMessage="Card con immagine"
+          />
+        </h2>
+      </header>
+      <Accordion className="form">
+        <Accordion.Content active={true}>
+          <FileWidget
+            id="CardImage"
+            title={intl.formatMessage(messages.cardImage)}
+            value={data.image}
+            onChange={(name, value) => {
+              onChangeBlock({ ...data, image: value, showImage: !!value });
+            }}
+          />
+          <CheckboxWidget
+            id={'CardImageEnable'}
+            title={intl.formatMessage(messages.cardImageEnable)}
+            value={data.showImage || false}
+            onChange={(name, value) => {
+              onChangeBlock({ ...data, showImage: value });
+            }}
+          />
+          <CheckboxWidget
+            id="natural_image_size"
+            title={intl.formatMessage(messages.natural_image_size)}
+            value={data.sizeNatural || false}
+            onChange={(name, value) => {
+              onChangeBlock({ ...data, sizeNatural: value });
+            }}
+          />
+          <CheckboxWidget
+            id="CardImageRight"
+            title={intl.formatMessage(messages.CardImageRight)}
+            value={data.rightImage || false}
+            onChange={(name, value) => {
+              onChangeBlock({ ...data, rightImage: value });
+            }}
+          />
+          <FormFieldWrapper
+            id="image_size"
+            title={intl.formatMessage(messages.CardImageSize)}
+          >
+            <ImageSizeWidget
+              onChange={(b, value) => {
+                onChangeBlock({ ...data, [b]: value });
+              }}
+              id={'sizeImage'}
+              value={data.sizeImage || 's'}
+            />
+          </FormFieldWrapper>
+        </Accordion.Content>
+      </Accordion>
+    </Segment.Group>
+  );
+};
+
+Sidebar.propTypes = {
+  data: PropTypes.objectOf(PropTypes.any),
+  block: PropTypes.string,
+  onChangeBlock: PropTypes.func,
+  selected: PropTypes.any,
+  setSelected: PropTypes.func,
+};
+
+export default injectIntl(Sidebar);

package/src/components/ItaliaTheme/Blocks/TextCard/CardWithImage/View.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import BodyWrapper from './BodyWrapper';
+
+import Block from './Block';
+
+const TextCardWithImageView = ({ data, id }) => {
+  return (
+    <BodyWrapper data={data} inEditMode={false}>
+      <Block data={data} inEditMode={false} />
+    </BodyWrapper>
+  );
+};
+/**
+ * Property types.
+ * @property {Object} propTypes Property types.
+ * @static
+ */
+TextCardWithImageView.propTypes = {
+  data: PropTypes.objectOf(PropTypes.any).isRequired,
+  id: PropTypes.string.isRequired,
+};
+
+export default TextCardWithImageView;

package/src/components/ItaliaTheme/Blocks/TextCard/SimpleCard/Block.jsx

@@ -0,0 +1,187 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import React, { useState, useRef, useEffect } from 'react';
+import { Card, CardBody, CardTitle, CardText } from 'design-react-kit';
+import { defineMessages, useIntl } from 'react-intl';
+import PropTypes from 'prop-types';
+import redraft from 'redraft';
+import { TextEditorWidget } from 'design-comuni-plone-theme/components/ItaliaTheme';
+import { Divider } from 'semantic-ui-react';
+import cx from 'classnames';
+import config from '@plone/volto/registry';
+
+const messages = defineMessages({
+  simple_card_title: {
+    id: 'Type the title…',
+    defaultMessage: 'Type the title…',
+  },
+  simple_card_content: {
+    id: 'Type description…',
+    defaultMessage: 'Digita la descrizione…',
+  },
+  simple_card_click: {
+    id: 'Type text…',
+    defaultMessage: 'Digita il testo…',
+  },
+});
+
+const Block = ({
+  inEditMode,
+  data,
+  block,
+  onChange,
+  onSelectBlock,
+  onAddBlock,
+  index,
+  blockIsSelected,
+}) => {
+  const intl = useIntl();
+  const title = data?.simple_card_title?.blocks[0]?.text;
+  const content = data?.simple_card_content;
+  const [selected, setSelected] = useState('title');
+  const titleRef = useRef();
+  const contentRef = useRef();
+  const wrapperRef = useRef();
+
+  const handleKeydownNothingSelected = (e) => {
+    if (inEditMode) {
+      if (e.key === 'Enter' && !e.shiftKey && !selected && blockIsSelected) {
+        onAddBlock('text', index + 1);
+      }
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener('keydown', handleKeydownNothingSelected);
+
+    return () => {
+      window.removeEventListener('keydown', handleKeydownNothingSelected);
+    };
+  });
+
+  return (
+    <div className="simple-text-card-wrapper" ref={wrapperRef}>
+      <Card
+        color="white"
+        className=" card-bg rounded"
+        noWrapper={false}
+        space
+        tag="div"
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' && !e.shiftKey) {
+            if (
+              !titleRef.current.contains(e.target) &&
+              !contentRef.current.contains(e.target)
+            ) {
+              onAddBlock('text', index + 1);
+            }
+            if (titleRef.current.contains(e.target)) {
+              setSelected('content');
+            }
+          }
+        }}
+      >
+        <CardBody>
+          <div className={cx('simple-text-card', { 'cms-ui': inEditMode })}>
+            {inEditMode ? (
+              <>
+                <CardTitle tag="h4">
+                  <div
+                    ref={titleRef}
+                    onClick={() => {
+                      setSelected('title');
+                    }}
+                    onFocus={() => {
+                      setSelected('title');
+                    }}
+                  >
+                    <TextEditorWidget
+                      data={data}
+                      fieldName="simple_card_title"
+                      selected={selected === 'title'}
+                      block={block}
+                      onChangeBlock={(data) =>
+                        onChange(data, 'simple_card_title')
+                      }
+                      placeholder={intl.formatMessage(
+                        messages.simple_card_title,
+                      )}
+                      showToolbar={false}
+                      onSelectBlock={() => {}}
+                      onAddBlock={() => {
+                        setSelected('content');
+                      }}
+                      nextFocus="content"
+                      setFocus={(f) => {
+                        setSelected(f);
+                      }}
+                      disableMoveToNearest={true}
+                    />
+                  </div>
+                </CardTitle>
+                <Divider />
+                <div
+                  ref={contentRef}
+                  onClick={() => {
+                    setSelected('content');
+                  }}
+                  onFocus={() => {
+                    setSelected('content');
+                  }}
+                >
+                  <CardText>
+                    <TextEditorWidget
+                      data={data}
+                      fieldName="simple_card_content"
+                      selected={selected === 'content'}
+                      block={block}
+                      onChangeBlock={(data) =>
+                        onChange(data, 'simple_card_content')
+                      }
+                      placeholder={intl.formatMessage(
+                        messages.simple_card_content,
+                      )}
+                      showToolbar={true}
+                      onSelectBlock={onSelectBlock}
+                      onAddBlock={onAddBlock}
+                      index={index}
+                      prevFocus="title"
+                      setFocus={(f) => {
+                        setSelected(f);
+                      }}
+                      disableMoveToNearest={true}
+                    />
+                  </CardText>
+                </div>
+              </>
+            ) : (
+              <>
+                <CardTitle tag="h4">{title}</CardTitle>
+                <Divider />
+                <div>
+                  <CardText>
+                    {redraft(
+                      content,
+                      config.settings.richtextViewSettings.ToHTMLRenderers,
+                      config.settings.richtextViewSettings.ToHTMLOptions,
+                    )}
+                  </CardText>
+                </div>
+              </>
+            )}
+          </div>
+        </CardBody>
+      </Card>
+    </div>
+  );
+};
+
+Block.propTypes = {
+  entityMap: PropTypes.any,
+  data: PropTypes.any,
+  block: PropTypes.any,
+  inEditMode: PropTypes.bool.isRequired,
+  onChange: PropTypes.func,
+};
+
+export default Block;

package/src/components/ItaliaTheme/Blocks/TextCard/SimpleCard/BodyWrapper.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import cx from 'classnames';
+
+const BodyWrapper = ({ inEditMode, children }) => {
+  return (
+    <div
+      className={cx('block simple-text-block', {
+        'public-ui': inEditMode,
+      })}
+    >
+      <div>{children}</div>
+    </div>
+  );
+};
+export default BodyWrapper;

package/src/components/ItaliaTheme/Blocks/TextCard/SimpleCard/Edit.jsx

@@ -0,0 +1,98 @@
+/**
+ * Edit title block.
+ * @module components/Blocks/TitleVM/Edit
+ */
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Block from './Block';
+import { injectIntl } from 'react-intl';
+import { isEqual } from 'lodash';
+import BodyWrapper from './BodyWrapper';
+
+/**
+ * Edit title block class.
+ * @class Edit
+ * @extends Component
+ */
+class Edit extends Component {
+  /**
+   * Property types.
+   * @property {Object} propTypes Property types.
+   * @static
+   */
+  static 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,
+  };
+
+  /**
+   * Constructor
+   * @method constructor
+   * @param {Object} props Component properties
+   * @constructs SimpleCard Edit block
+   */
+  constructor(props) {
+    super(props);
+
+    if (!__SERVER__) {
+    }
+  }
+
+  /**
+   * Component did mount lifecycle method
+   * @method componentDidMount
+   * @returns {undefined}
+   */
+  componentDidMount() {}
+
+  /**
+   * Change handler
+   * @method onChange
+   * @param {object} editorState Editor state.
+   * @returns {undefined}
+   */
+  onChange(obj, fieldname) {
+    if (!isEqual(obj[fieldname], this.props.data[fieldname])) {
+      this.props.onChangeBlock(this.props.block, {
+        ...this.props.data,
+        [fieldname]: obj[fieldname],
+      });
+    }
+  }
+
+  /**
+   * Render method.
+   * @method render
+   * @returns {string} Markup for the component.
+   */
+  render() {
+    if (__SERVER__) {
+      return <div />;
+    }
+    return (
+      <BodyWrapper data={this.props.data} inEditMode={true}>
+        <Block
+          data={this.props.data}
+          block={this.props.block}
+          onChange={(obj, fieldname) => this.onChange(obj, fieldname)}
+          inEditMode={true}
+          onSelectBlock={this.props.onSelectBlock}
+          onAddBlock={this.props.onAddBlock}
+          index={this.props.index}
+          blockIsSelected={this.props.selected}
+        />
+      </BodyWrapper>
+    );
+  }
+}
+
+export default injectIntl(Edit);

package/src/components/ItaliaTheme/Blocks/TextCard/SimpleCard/View.jsx

@@ -0,0 +1,33 @@
+/**
+ * View title block.
+ * @module components/manage/Blocks/Title/View
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import Block from './Block';
+import BodyWrapper from './BodyWrapper';
+
+/**
+ * View title block class.
+ * @class View
+ * @extends Component
+ */
+
+const TextCardView = ({ data }) => {
+  return (
+    <BodyWrapper data={data} inEditMode={false}>
+      <Block data={data} inEditMode={false} />
+    </BodyWrapper>
+  );
+};
+/**
+ * Property types.
+ * @property {Object} propTypes Property types.
+ * @static
+ */
+TextCardView.propTypes = {
+  data: PropTypes.objectOf(PropTypes.any).isRequired,
+};
+
+export default TextCardView;

package/src/components/ItaliaTheme/Blocks/TwitterPosts/Body.jsx

@@ -0,0 +1,176 @@
+/**
+ * TwitterPostsBody
+ * @module components/ItaliaTheme/Blocks/TwitterPosts/Body
+ */
+
+import React, { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { defineMessages, useIntl } from 'react-intl';
+import { Container, Section } from 'design-react-kit';
+import moment from 'moment';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
+import { UniversalLink } from '@plone/volto/components';
+import { getTwitterPosts } from 'design-comuni-plone-theme/actions';
+import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
+import TwitterSkeleton from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/TwitterPosts/Skeleton';
+
+const messages = defineMessages({
+  no_results: {
+    id: 'twitter_posts_no_results',
+    defaultMessage: "Non c'è nessun post da mostrare.",
+  },
+});
+
+const getTwitterSliderSettings = (nItems) => {
+  return {
+    dots: true,
+    infinite: true,
+    speed: 500,
+    slidesToShow: nItems < 4 ? nItems : 4,
+    slidesToScroll: 1,
+    responsive: [
+      {
+        breakpoint: 1025,
+        settings: {
+          slidesToShow: nItems < 3 ? nItems : 3,
+          slidesToScroll: 3,
+          infinite: true,
+          dots: true,
+        },
+      },
+      {
+        breakpoint: 1024,
+        settings: {
+          slidesToShow: nItems < 2 ? nItems : 2,
+          slidesToScroll: 2,
+          initialSlide: 2,
+        },
+      },
+      {
+        breakpoint: 600,
+        settings: {
+          slidesToShow: 1,
+          slidesToScroll: 1,
+        },
+      },
+    ],
+  };
+};
+
+/**
+ * Body TwitterPosts
+ * @class TwitterPostsBody
+ * @extends Component
+ */
+const Body = ({ data, isEditMode, reactSlick }) => {
+  const intl = useIntl();
+  moment.locale(intl.locale);
+  const Slider = reactSlick.default;
+
+  const dispatch = useDispatch();
+  const request = useSelector((state) => state.twitterPosts);
+  const authors = data.twitter_accounts?.split(',').filter((a) => a.length > 0);
+
+  useEffect(() => {
+    if (data.twitter_accounts?.length > 0) {
+      dispatch(getTwitterPosts(authors));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data.twitter_accounts]);
+
+  const twitter_posts = request?.result || [];
+
+  const content =
+    twitter_posts?.length > 0 ? (
+      <div className="py-4 px-4 px-md-0">
+        {data.title && <h2>{data.title}</h2>}
+        {authors?.length > 0 && (
+          <div className="authors">
+            <Icon icon="it-twitter" />{' '}
+            {authors.map((author) => (
+              <UniversalLink href={`https://twitter.com/${author}`}>
+                @{author}
+              </UniversalLink>
+            ))}
+          </div>
+        )}
+
+        <Slider {...getTwitterSliderSettings(twitter_posts.length)}>
+          {twitter_posts.map((tweet, index) => (
+            <div className="it-single-slide-wrapper" key={index}>
+              <div className="tweet rounded">
+                <div className="author">
+                  <div className="user-infos">
+                    <div className="user-name">
+                      <UniversalLink
+                        href={`https://twitter.com/${tweet.author.username}`}
+                      >
+                        {tweet.author.name}
+                      </UniversalLink>
+                    </div>
+                    <div className="user-username pb-3">
+                      <UniversalLink
+                        href={`https://twitter.com/${tweet.author.username}`}
+                      >
+                        @{tweet.author.username}
+                      </UniversalLink>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  className="tweet-text"
+                  dangerouslySetInnerHTML={{
+                    __html: tweet.text,
+                  }}
+                />
+                <div className="date-time">
+                  {moment(tweet.created_at)
+                    .locale(intl.locale)
+                    .format('HH:mm - DD MMM YYYY')}
+                </div>
+                <div className="numbers">
+                  <div className="number reply" title="Replies">
+                    <Icon icon="reply" />
+                    {tweet.reply_count > 0 && tweet.reply_count}
+                  </div>
+                  <div className="number retweet" title="Retweets">
+                    <Icon icon="retweet" />{' '}
+                    {tweet.retweet_count > 0 && tweet.retweet_count}
+                  </div>
+                  <div className="number like" title="Likes">
+                    <Icon icon="heart" />
+                    {tweet.like_count > 0 && tweet.like_count}
+                  </div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </Slider>
+      </div>
+    ) : isEditMode ? (
+      intl.formatMessage(messages.no_results)
+    ) : null;
+
+  return request?.loadingResults ? (
+    <TwitterSkeleton data={data} authors={authors} isEditMode={isEditMode} />
+  ) : request.error ? (
+    <div className="public-ui">
+      <Section className="full-width">
+        <Container className="p-2">
+          <div className="pt-4 pb-4">
+            <strong>Twitter Posts: </strong>
+            {request.error?.response?.body?.error?.message}
+          </div>
+        </Container>
+      </Section>
+    </div>
+  ) : content ? (
+    <div className="public-ui">
+      <Section className="full-width">
+        <Container className="p-2">{content}</Container>
+      </Section>
+    </div>
+  ) : null;
+};
+
+export default injectLazyLibs(['moment', 'reactSlick'])(Body);