design-comuni-plone-theme 11.29.2 → 12.0.0

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

@@ -1,151 +0,0 @@
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-import React, { useState, useEffect } from 'react';
-import { Card, CardBody, CardTitle } 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,
-  onFocusPreviousBlock,
-  onFocusNextBlock,
-  index,
-  selected,
-}) => {
-  const intl = useIntl();
-  const title = data?.simple_card_title?.blocks[0]?.text;
-  const content = data?.simple_card_content;
-  const [selectedField, setSelectedField] = useState('title');
-
-  useEffect(() => {
-    if (selected) {
-      setSelectedField('title');
-    } else {
-      setSelectedField(null);
-    }
-  }, [selected]);
-
-  return (
-    <div className="simple-text-card-wrapper">
-      <Card color="white" className="no-after card-bg rounded" space tag="div">
-        <CardBody>
-          <div className={cx('simple-text-card', { 'cms-ui': inEditMode })}>
-            {inEditMode ? (
-              <>
-                <CardTitle tag="h3" className="h4">
-                  <div
-                    onClick={() => {
-                      setSelectedField('title');
-                    }}
-                    onFocus={() => {
-                      setSelectedField('title');
-                    }}
-                  >
-                    <TextEditorWidget
-                      data={data}
-                      fieldName="simple_card_title"
-                      selected={selectedField === 'title'}
-                      block={block}
-                      onChangeBlock={(data) =>
-                        onChange(data, 'simple_card_title')
-                      }
-                      placeholder={intl.formatMessage(
-                        messages.simple_card_title,
-                      )}
-                      showToolbar={false}
-                      onSelectBlock={() => {}}
-                      onAddBlock={() => {
-                        setSelectedField('content');
-                      }}
-                      onFocusNextBlock={() => {
-                        setSelectedField('content');
-                      }}
-                      onFocusPreviousBlock={onFocusPreviousBlock}
-                    />
-                  </div>
-                </CardTitle>
-                <Divider />
-                <div
-                  onClick={() => {
-                    setSelectedField('content');
-                  }}
-                  onFocus={() => {
-                    setSelectedField('content');
-                  }}
-                >
-                  <TextEditorWidget
-                    data={data}
-                    fieldName="simple_card_content"
-                    selected={selectedField === '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}
-                    onFocusNextBlock={onFocusNextBlock}
-                    onFocusPreviousBlock={() => {
-                      setSelectedField('title');
-                    }}
-                  />
-                </div>
-              </>
-            ) : (
-              <>
-                <CardTitle tag="h3" id={block.id + '-title'} className="h4">
-                  {title}
-                </CardTitle>
-                <hr />
-                {redraft(
-                  content,
-                  config.settings.richtextViewSettings.ToHTMLRenderers,
-                  config.settings.richtextViewSettings.ToHTMLOptions,
-                )}
-              </>
-            )}
-          </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/RemoveBodyClass/RemoveBodyClass.jsx

@@ -1,84 +0,0 @@
-import { Component, Children } from 'react';
-import PropTypes from 'prop-types';
-import withSideEffect from 'react-side-effect';
-
-/**
- * @export
- * @class RemoveBodyClass
- * @extends {Component}
- */
-class RemoveBodyClass extends Component {
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    if (this.props.children) {
-      return Children.only(this.props.children);
-    }
-    return null;
-  }
-}
-
-RemoveBodyClass.propTypes = {
-  children: PropTypes.element,
-  className: PropTypes.string,
-};
-
-RemoveBodyClass.defaultProps = {
-  children: null,
-  className: null,
-};
-
-/**
- * reducePropsToState
- * @function reducePropsToState
- * @param {*} propsList propsList
- * @returns {List} classList
- */
-function reducePropsToState(propsList) {
-  let classList = [];
-  propsList.forEach((props) => {
-    if (props.className) {
-      classList = classList.concat(props.className);
-    }
-  });
-  return classList;
-}
-
-/**
- * handleStateChangeOnClient
- * @function handleStateChangeOnClient
- * @param {*} classList classList
- * @returns {null} null
- */
-function handleStateChangeOnClient(classList) {
-  //  document.body.className = '';
-  let domClassNames = [];
-  Object.keys(document.body.classList).forEach((k) => {
-    domClassNames.push(document.body.classList[k]);
-  });
-
-  classList.forEach((className) => {
-    // This allows the component to accept more than one class at the same time
-    if (className.includes(' ')) {
-      className.split(' ').forEach((className) => {
-        if (document.body.classList.contains(className)) {
-          domClassNames.splice(domClassNames.indexOf(className), 1);
-        }
-      });
-      document.body.classList = domClassNames.join(' ');
-    } else {
-      if (document.body.classList.contains(className)) {
-        domClassNames.splice(domClassNames.indexOf(className), 1);
-        document.body.classList = domClassNames.join(' ');
-      }
-    }
-  });
-}
-
-export default withSideEffect(
-  reducePropsToState,
-  handleStateChangeOnClient,
-)(RemoveBodyClass);

package/src/config/RichTextEditor/LinkEntity.jsx

@@ -1,27 +0,0 @@
-import React from 'react';
-import { connect } from 'react-redux';
-import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';
-import { IntlProvider } from 'react-intl';
-
-const LinkEntity = connect((state) => ({
-  token: state.userSession.token,
-}))((props) => {
-  const { token, url, target, targetUrl, download, children, dataElement } =
-    props;
-  const to = token ? url : targetUrl || url;
-
-  return (
-    <IntlProvider>
-      <UniversalLink
-        href={to}
-        openLinkInNewTab={target === '_blank' || undefined}
-        download={download}
-        data-element={dataElement || props['data-element'] || null}
-      >
-        {children}
-      </UniversalLink>
-    </IntlProvider>
-  );
-});
-
-export default LinkEntity;

package/src/config/RichTextEditor/Plugins/AnchorPlugin/components/Link/index.jsx

@@ -1,44 +0,0 @@
-/**
- * Questo è il link quando viene mostrato dentro l'editor nelle viste di edit
- * Customizzato
- * - aggiunto data-element
- * - aggiunto icona link esterno
- */
-import React from 'react';
-import PropTypes from 'prop-types';
-import { isInternalURL, flattenToAppURL } from '@plone/volto/helpers';
-
-const propTypes = {
-  className: PropTypes.string,
-  children: PropTypes.node.isRequired,
-  entityKey: PropTypes.string,
-  getEditorState: PropTypes.func.isRequired,
-  target: PropTypes.string,
-};
-
-const Link = ({ children, className, entityKey, getEditorState, target }) => {
-  const entity = getEditorState().getCurrentContent().getEntity(entityKey);
-  const entityData = entity ? entity.get('data') : undefined;
-  const href = (entityData && entityData.url) || undefined;
-
-  return (
-    <a
-      className={className}
-      title={href}
-      href={isInternalURL(href) ? flattenToAppURL(href) : href}
-      target={target}
-      rel="noopener noreferrer"
-      data-element={entityData.dataElement || entityData['data-element']}
-    >
-      {children}
-    </a>
-  );
-};
-
-Link.propTypes = propTypes;
-Link.defaultProps = {
-  className: null,
-  entityKey: null,
-  target: null,
-};
-export default Link;

package/src/config/RichTextEditor/Plugins/AnchorPlugin/components/LinkButton/AddLinkForm.jsx

@@ -1,349 +0,0 @@
-/**
- * Add link form.
- * @module components/manage/AnchorPlugin/components/LinkButton/AddLinkForm
- * Customizzato
- * - Aggiunta gestione data-element
- * - Aggiunte opzioni per la select del data-element
- * - Modificate icone ed elementi per stilizzare il tooltip del link
- */
-
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { compose } from 'redux';
-
-import cx from 'classnames';
-import {
-  addAppURL,
-  isInternalURL,
-  flattenToAppURL,
-  URLUtils,
-} from '@plone/volto/helpers';
-
-import { doesNodeContainClick } from 'semantic-ui-react/dist/commonjs/lib';
-import { Input, Form, Button } from 'semantic-ui-react';
-import { defineMessages, injectIntl } from 'react-intl';
-
-import clearSVG from '@plone/volto/icons/clear.svg';
-import navTreeSVG from '@plone/volto/icons/nav.svg';
-import aheadSVG from '@plone/volto/icons/ahead.svg';
-
-import withObjectBrowser from '@plone/volto/components/manage/Sidebar/ObjectBrowser';
-import { withRouter } from 'react-router';
-
-import { Icon, SelectWidget } from '@plone/volto/components';
-
-const messages = defineMessages({
-  placeholder: {
-    id: 'Enter URL or select an item',
-    defaultMessage: 'Enter URL or select an item',
-  },
-  placeholderLighthouse: {
-    id: 'Select a data-element ID',
-    defaultMessage: 'Seleziona un data-element ID', // TO DO: da sistemare quando si risolve il bug su i18n
-  },
-});
-
-/**
- * Add link form class.
- * @class AddLinkForm
- * @extends Component
- */
-class AddLinkForm extends Component {
-  static propTypes = {
-    onChangeValue: PropTypes.func.isRequired,
-    onClear: PropTypes.func.isRequired,
-    onOverrideContent: PropTypes.func.isRequired,
-    theme: PropTypes.objectOf(PropTypes.any).isRequired,
-    openObjectBrowser: PropTypes.func.isRequired,
-  };
-
-  /**
-   * Constructor
-   * @method constructor
-   * @param {Object} props Component properties
-   * @constructs AddLinkForm
-   */
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      dataElement: props.data.dataElement,
-      value: isInternalURL(props.data.url)
-        ? flattenToAppURL(props.data.url)
-        : props.data.url || '',
-      isInvalid: false,
-    };
-    this.onRef = this.onRef.bind(this);
-    this.onChange = this.onChange.bind(this);
-    this.onKeyDown = this.onKeyDown.bind(this);
-    this.onSubmit = this.onSubmit.bind(this);
-
-    // Options to data-element select
-    this.selectOptions = [
-      ['appointment-booking', 'appointment-booking'],
-      ['service-booking-access', 'service-booking-access'],
-      ['faq', 'faq'],
-      ['report-inefficiency', 'report-inefficiency'],
-      ['accessibility-link', 'accessibility-link'],
-      ['privacy-policy-link', 'privacy-policy-link'],
-      ['legal-notes', 'legal-notes'],
-      ['pager-link', 'pager-link'],
-    ];
-  }
-
-  /**
-   * Component did mount
-   * @method componentDidMount
-   * @returns {undefined}
-   */
-  componentDidMount() {
-    setTimeout(() => this.input.focus(), 50);
-    document.addEventListener('mousedown', this.handleClickOutside, false);
-  }
-
-  componentWillUnmount() {
-    document.removeEventListener('mousedown', this.handleClickOutside, false);
-  }
-
-  handleClickOutside = (e) => {
-    if (
-      this.linkFormContainer.current &&
-      doesNodeContainClick(this.linkFormContainer.current, e)
-    )
-      return;
-    if (this.linkFormContainer.current && this.props.isObjectBrowserOpen)
-      return;
-    this.onClose();
-  };
-
-  /**
-   * Ref handler
-   * @method onRef
-   * @param {Object} node Node
-   * @returns {undefined}
-   */
-  onRef(node) {
-    this.input = node;
-  }
-
-  linkFormContainer = React.createRef();
-
-  /**
-   * Change handler
-   * @method onChange
-   * @param {Object} value Value
-   * @returns {undefined}
-   */
-  onChange(value, clear) {
-    let nextState = { value };
-    if (!clear) {
-      if (
-        this.state.isInvalid &&
-        URLUtils.isUrl(URLUtils.normalizeUrl(value))
-      ) {
-        nextState.isInvalid = false;
-      }
-
-      if (isInternalURL(value)) {
-        nextState = { value: flattenToAppURL(value) };
-      }
-    }
-    this.setState(nextState);
-
-    if (clear) this.props.onClear();
-  }
-
-  /**
-   * Select item handler
-   * @method onSelectItem
-   * @param {string} e event
-   * @param {string} url Url
-   * @returns {undefined}
-   */
-  onSelectItem = (e, url) => {
-    e.preventDefault();
-    this.setState({
-      value: url,
-      isInvalid: false,
-    });
-    this.props.onChangeValue(addAppURL(url));
-  };
-
-  /**
-   * Clear handler
-   * @method clear
-   * @param {Object} value Value
-   * @returns {undefined}
-   */
-  clear() {
-    const nextState = { value: '' };
-    this.setState(nextState);
-
-    this.props.onClear();
-  }
-
-  /**
-   * Close handler
-   * @method onClose
-   * @returns {undefined}
-   */
-  onClose = () => this.props.onOverrideContent(undefined);
-
-  /**
-   * Keydown handler
-   * @method onKeyDown
-   * @param {Object} e Event object
-   * @returns {undefined}
-   */
-  onKeyDown(e) {
-    if (e.key === 'Enter') {
-      e.preventDefault();
-      e.stopPropagation();
-      this.onSubmit();
-    } else if (e.key === 'Escape') {
-      e.preventDefault();
-      this.onClose();
-    }
-  }
-
-  /**
-   * Submit handler
-   * @method onSubmit
-   * @returns {undefined}
-   */
-  onSubmit() {
-    let { value: url, dataElement } = this.state;
-
-    const checkedURL = URLUtils.checkAndNormalizeUrl(url);
-    url = checkedURL.url;
-    if (!checkedURL.isValid) {
-      this.setState({ isInvalid: true });
-      return;
-    }
-
-    const editorStateUrl = isInternalURL(url) ? addAppURL(url) : url;
-
-    this.props.onChangeValue(editorStateUrl, dataElement);
-    this.onClose();
-  }
-
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    const { value, isInvalid, dataElement } = this.state;
-    const className = isInvalid
-      ? cx(
-          'ui input editor-link',
-          'input-anchorlink-theme',
-          'input-anchorlink-theme-Invalid',
-        )
-      : cx('ui input editor-link', 'input-anchorlink-theme');
-
-    return (
-      <div className="link-form-container" ref={this.linkFormContainer}>
-        <Form.Field>
-          <div className="wrapper-fields">
-            {/* INPUT LINK */}
-            <div className="wrap-field">
-              <Input
-                className={className}
-                id={`field-link`}
-                name="link"
-                value={value || ''}
-                onChange={({ target }) => this.onChange(target.value)}
-                placeholder={this.props.intl.formatMessage(
-                  messages.placeholder,
-                )}
-                onKeyDown={this.onKeyDown}
-                ref={this.onRef}
-              />
-              {value.length > 0 ? (
-                <Button.Group>
-                  <Button
-                    basic
-                    className="cancel"
-                    onClick={(e) => {
-                      e.preventDefault();
-                      e.stopPropagation();
-                      this.clear();
-                    }}
-                  >
-                    <Icon name={clearSVG} size="20px" />
-                  </Button>
-                </Button.Group>
-              ) : (
-                <Button.Group>
-                  <Button
-                    basic
-                    icon
-                    onClick={(e) => {
-                      e.preventDefault();
-                      e.stopPropagation();
-                      this.props.openObjectBrowser({
-                        mode: 'link',
-                        overlay: true,
-                        onSelectItem: (url) => {
-                          this.onChange(url);
-                          this.onSubmit();
-                        },
-                      });
-                    }}
-                  >
-                    <Icon name={navTreeSVG} size="22px" />
-                  </Button>
-                </Button.Group>
-              )}
-            </div>
-
-            {/* DATA-ELEMENT SELECT */}
-            <div className="wrap-field">
-              <SelectWidget
-                id="data-element-select"
-                title="data-element"
-                placeholder={this.props.intl.formatMessage(
-                  messages.placeholderLighthouse,
-                )}
-                isMulti={false}
-                value={dataElement}
-                onChange={(_, value) => {
-                  this.setState({ dataElement: value });
-                }}
-                choices={this.selectOptions}
-                noValueOption={false}
-                wrapped={false}
-              />
-            </div>
-          </div>
-
-          {/* BUTTON SUBMIT */}
-          <div className="wrapper-submit">
-            <Button.Group>
-              <Button
-                basic
-                primary
-                disabled={!value.length > 0}
-                onClick={(e) => {
-                  e.preventDefault();
-                  e.stopPropagation();
-                  this.onSubmit();
-                }}
-                onKeyDown={(e) => {
-                  e.preventDefault();
-                  e.stopPropagation();
-                  this.onSubmit();
-                }}
-              >
-                <Icon name={aheadSVG} size="28px" />
-              </Button>
-            </Button.Group>
-          </div>
-        </Form.Field>
-      </div>
-    );
-  }
-}
-
-export default compose(injectIntl, withRouter, withObjectBrowser)(AddLinkForm);