@eeacms/volto-bise-policy 1.0.0 → 1.0.1

package/src/customizations/volto/components/manage/Form/BlocksToolbar.jsx

@@ -0,0 +1,214 @@
+import React from 'react';
+import { compose } from 'redux';
+import { connect } from 'react-redux';
+import { injectIntl } from 'react-intl';
+import {
+  messages,
+  getBlocksFieldname,
+  getBlocksLayoutFieldname,
+} from '@plone/volto/helpers';
+import { Icon } from '@plone/volto/components';
+import { Plug } from '@plone/volto/components/manage/Pluggable';
+import { v4 as uuid } from 'uuid';
+import { load } from 'redux-localstorage-simple';
+import { isEqual, omit, without } from 'lodash';
+
+import { setBlocksClipboard, resetBlocksClipboard } from '@plone/volto/actions';
+import config from '@plone/volto/registry';
+
+import copySVG from '@plone/volto/icons/copy.svg';
+import cutSVG from '@plone/volto/icons/cut.svg';
+import pasteSVG from '@plone/volto/icons/paste.svg';
+import trashSVG from '@plone/volto/icons/delete.svg';
+
+export class BlocksToolbarComponent extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.copyBlocksToClipboard = this.copyBlocksToClipboard.bind(this);
+    this.cutBlocksToClipboard = this.cutBlocksToClipboard.bind(this);
+    this.deleteBlocks = this.deleteBlocks.bind(this);
+    this.loadFromStorage = this.loadFromStorage.bind(this);
+    this.pasteBlocks = this.pasteBlocks.bind(this);
+    this.setBlocksClipboard = this.setBlocksClipboard.bind(this);
+  }
+
+  loadFromStorage() {
+    const clipboard = load({ states: ['blocksClipboard'] })?.blocksClipboard;
+    if (!isEqual(clipboard, this.props.blocksClipboard))
+      this.props.setBlocksClipboard(clipboard || {});
+  }
+
+  componentDidMount() {
+    window.addEventListener('storage', this.loadFromStorage, true);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('storage', this.loadFromStorage);
+  }
+
+  deleteBlocks() {
+    const blockIds = this.props.selectedBlocks;
+
+    const { formData } = this.props;
+    const blocksFieldname = getBlocksFieldname(formData);
+    const blocksLayoutFieldname = getBlocksLayoutFieldname(formData);
+
+    // Might need ReactDOM.unstable_batchedUpdates()
+    this.props.onSelectBlock(null);
+    const newBlockData = {
+      [blocksFieldname]: omit(formData[blocksFieldname], blockIds),
+      [blocksLayoutFieldname]: {
+        ...formData[blocksLayoutFieldname],
+        items: without(formData[blocksLayoutFieldname].items, ...blockIds),
+      },
+    };
+    this.props.onChangeBlocks(newBlockData);
+  }
+
+  copyBlocksToClipboard() {
+    this.setBlocksClipboard('copy');
+  }
+
+  cutBlocksToClipboard() {
+    this.setBlocksClipboard('cut');
+    this.deleteBlocks();
+  }
+
+  setBlocksClipboard(actionType) {
+    const { formData } = this.props;
+    const blocksFieldname = getBlocksFieldname(formData);
+    const blocks = formData[blocksFieldname];
+    const blocksData = this.props.selectedBlocks.map(
+      (blockId) => blocks[blockId],
+    );
+    this.props.setBlocksClipboard({ [actionType]: blocksData });
+    this.props.onSetSelectedBlocks([]);
+  }
+
+  pasteBlocks(e) {
+    const { formData, blocksClipboard = {}, selectedBlock } = this.props;
+    const mode = Object.keys(blocksClipboard).includes('cut') ? 'cut' : 'copy';
+    const blocksData = blocksClipboard[mode] || [];
+    const cloneWithIds = blocksData
+      .filter((blockData) => !!blockData['@type'])
+      .map((blockData) => {
+        const blockConfig = config.blocks.blocksConfig[blockData['@type']];
+        return mode === 'copy'
+          ? blockConfig.cloneData
+            ? blockConfig.cloneData(blockData)
+            : [uuid(), blockData]
+          : [uuid(), blockData]; // if cut/pasting blocks, we don't clone
+      })
+      .filter((info) => !!info); // some blocks may refuse to be copied
+    const blocksFieldname = getBlocksFieldname(formData);
+    const blocksLayoutFieldname = getBlocksLayoutFieldname(formData);
+    const selectedIndex =
+      formData[blocksLayoutFieldname].items.indexOf(selectedBlock) + 1;
+
+    const newBlockData = {
+      [blocksFieldname]: {
+        ...formData[blocksFieldname],
+        ...Object.assign(
+          {},
+          ...cloneWithIds.map(([id, data]) => ({ [id]: data })),
+        ),
+      },
+      [blocksLayoutFieldname]: {
+        ...formData[blocksLayoutFieldname],
+        items: [
+          ...formData[blocksLayoutFieldname].items.slice(0, selectedIndex),
+          ...cloneWithIds.map(([id]) => id),
+          ...formData[blocksLayoutFieldname].items.slice(selectedIndex),
+        ],
+      },
+    };
+
+    if (!(e.ctrlKey || e.metaKey)) this.props.resetBlocksClipboard();
+    this.props.onChangeBlocks(newBlockData);
+  }
+
+  render() {
+    const {
+      blocksClipboard = {},
+      selectedBlock,
+      selectedBlocks,
+      intl,
+    } = this.props;
+    return (
+      <>
+        {selectedBlocks.length > 0 ? (
+          <>
+            <Plug pluggable="main.toolbar.bottom" id="blocks-delete-btn">
+              <button
+                aria-label={intl.formatMessage(messages.deleteBlocks)}
+                onClick={this.deleteBlocks}
+                tabIndex={0}
+                className="deleteBlocks"
+                id="toolbar-delete-blocks"
+              >
+                <Icon name={trashSVG} size="30px" />
+              </button>
+            </Plug>
+            <Plug pluggable="main.toolbar.bottom" id="blocks-cut-btn">
+              <button
+                aria-label={intl.formatMessage(messages.cutBlocks)}
+                onClick={this.cutBlocksToClipboard}
+                tabIndex={0}
+                className="cutBlocks"
+                id="toolbar-cut-blocks"
+              >
+                <Icon name={cutSVG} size="30px" />
+              </button>
+            </Plug>
+            <Plug pluggable="main.toolbar.bottom" id="blocks-copy-btn">
+              <button
+                aria-label={intl.formatMessage(messages.copyBlocks)}
+                onClick={this.copyBlocksToClipboard}
+                tabIndex={0}
+                className="copyBlocks"
+                id="toolbar-copy-blocks"
+              >
+                <Icon name={copySVG} size="30px" />
+              </button>
+            </Plug>
+          </>
+        ) : (
+          ''
+        )}
+        {selectedBlock && (blocksClipboard?.cut || blocksClipboard?.copy) && (
+          <Plug
+            pluggable="main.toolbar.bottom"
+            id="block-paste-btn"
+            dependencies={[selectedBlock]}
+          >
+            <button
+              aria-label={intl.formatMessage(messages.pasteBlocks)}
+              onClick={this.pasteBlocks}
+              tabIndex={0}
+              className="pasteBlocks"
+              id="toolbar-paste-blocks"
+            >
+              <span className="blockCount">
+                {(blocksClipboard.cut || blocksClipboard.copy).length}
+              </span>
+              <Icon name={pasteSVG} size="30px" />
+            </button>
+          </Plug>
+        )}
+      </>
+    );
+  }
+}
+
+export default compose(
+  injectIntl,
+  connect(
+    (state) => {
+      return {
+        blocksClipboard: state?.blocksClipboard || {},
+      };
+    },
+    { setBlocksClipboard, resetBlocksClipboard },
+  ),
+)(BlocksToolbarComponent);

package/src/customizations/volto/components/manage/Form/Field.jsx

@@ -0,0 +1,269 @@
+/**
+ * Field component.
+ * @module components/manage/Form/Field
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { injectIntl } from 'react-intl';
+import config from '@plone/volto/registry';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
+
+const MODE_HIDDEN = 'hidden'; //hidden mode. If mode is hidden, field is not rendered
+/**
+ * Get default widget
+ * @method getViewDefault
+ * @returns {string} Widget component.
+ */
+const getWidgetDefault = () => config.widgets.default;
+
+/**
+ * Get widget by field's `id` attribute
+ * @method getWidgetById
+ * @param {string} id Id
+ * @returns {string} Widget component.
+ */
+const getWidgetByFieldId = (id) => config.widgets.id[id] || null;
+
+/**
+ * Get widget by factory attribute
+ * @method getWidgetByFactory
+ * @param {string} id Id
+ * @returns {string} Widget component.
+ */
+const getWidgetByFactory = (factory) =>
+  config.widgets.factory?.[factory] || null;
+
+/**
+ * Get widget by field's `widget` attribute
+ * @method getWidgetByName
+ * @param {string} widget Widget
+ * @returns {string} Widget component.
+ */
+const getWidgetByName = (widget) =>
+  typeof widget === 'string'
+    ? config.widgets.widget[widget] || getWidgetDefault()
+    : null;
+
+/**
+ * Get widget by tagged values
+ * @param {object} widgetOptions
+ * @returns {string} Widget component.
+ *
+
+directives.widget(
+    'fieldname',
+    frontendOptions={
+        "widget": 'specialwidget',
+        "version": 'extra'
+    })
+
+ */
+const getWidgetFromTaggedValues = (widgetOptions) =>
+  typeof widgetOptions?.frontendOptions?.widget === 'string'
+    ? config.widgets.widget[widgetOptions.frontendOptions.widget]
+    : null;
+
+/**
+ * Get widget props from tagged values
+ * @param {object} widgetOptions
+ * @returns {string} Widget component.
+ *
+
+directives.widget(
+    "fieldname",
+    frontendOptions={
+        "widget": "specialwidget",
+        "widgetProps": {"prop1": "specialprop"}
+    })
+
+ */
+const getWidgetPropsFromTaggedValues = (widgetOptions) =>
+  typeof widgetOptions?.frontendOptions?.widgetProps === 'object'
+    ? widgetOptions.frontendOptions.widgetProps
+    : null;
+
+/**
+ * Get widget by field's `vocabulary` attribute
+ * @method getWidgetByVocabulary
+ * @param {string} vocabulary Widget
+ * @returns {string} Widget component.
+ */
+const getWidgetByVocabulary = (vocabulary) =>
+  vocabulary && vocabulary['@id']
+    ? config.widgets.vocabulary[
+        vocabulary['@id'].replace(/^.*\/@vocabularies\//, '')
+      ]
+    : null;
+
+/**
+ * Get widget by field's hints `vocabulary` attribute in widgetOptions
+ * @method getWidgetByVocabularyFromHint
+ * @param {string} props Widget props
+ * @returns {string} Widget component.
+ */
+const getWidgetByVocabularyFromHint = (props) =>
+  props.widgetOptions && props.widgetOptions.vocabulary
+    ? config.widgets.vocabulary[
+        props.widgetOptions.vocabulary['@id'].replace(
+          /^.*\/@vocabularies\//,
+          '',
+        )
+      ]
+    : null;
+
+/**
+ * Get widget by field's `choices` attribute
+ * @method getWidgetByChoices
+ * @param {string} choices Widget
+ * @returns {string} Widget component.
+ */
+const getWidgetByChoices = (props) => {
+  if (props.choices) {
+    return config.widgets.choices;
+  }
+
+  if (props.vocabulary) {
+    // If vocabulary exists, then it means it's a choice field in disguise with
+    // no widget specified that probably contains a string then we force it
+    // to be a select widget instead
+    return config.widgets.choices;
+  }
+
+  return null;
+};
+
+/**
+ * Get widget by field's `type` attribute
+ * @method getWidgetByType
+ * @param {string} type Type
+ * @returns {string} Widget component.
+ */
+const getWidgetByType = (type) => config.widgets.type[type] || null;
+
+/**
+ * Field component class.
+ * @function Field
+ * @param {Object} props Properties.
+ * @returns {string} Markup of the component.
+ */
+const UnconnectedField = (props, { intl }) => {
+  const Widget =
+    getWidgetByFieldId(props.id) ||
+    getWidgetFromTaggedValues(props.widgetOptions) ||
+    getWidgetByName(props.widget) ||
+    getWidgetByChoices(props) ||
+    getWidgetByVocabulary(props.vocabulary) ||
+    getWidgetByVocabularyFromHint(props) ||
+    getWidgetByFactory(props.factory) ||
+    getWidgetByType(props.type) ||
+    getWidgetDefault();
+
+  if (props.mode === MODE_HIDDEN) {
+    return null;
+  }
+
+  // Adding the widget props from tagged values (if any)
+  const widgetProps = {
+    ...props,
+    ...getWidgetPropsFromTaggedValues(props.widgetOptions),
+  };
+
+  if (props.onOrder) {
+    const { DropTarget, DragSource } = props.reactDnd;
+    const WrappedWidget = DropTarget(
+      'field',
+      {
+        hover(properties, monitor) {
+          const dragOrder = monitor.getItem().order;
+          const hoverOrder = properties.order;
+
+          if (dragOrder === hoverOrder) {
+            return;
+          }
+          properties.onOrder(dragOrder, hoverOrder - dragOrder);
+
+          monitor.getItem().order = hoverOrder;
+        },
+      },
+      (connect) => ({
+        connectDropTarget: connect.dropTarget(),
+      }),
+    )(
+      DragSource(
+        'field',
+        {
+          beginDrag(properties) {
+            return {
+              id: properties.label,
+              order: properties.order,
+            };
+          },
+        },
+        (connect, monitor) => ({
+          connectDragSource: connect.dragSource(),
+          connectDragPreview: connect.dragPreview(),
+          isDragging: monitor.isDragging(),
+        }),
+      )(
+        ({
+          connectDropTarget,
+          connectDragSource,
+          connectDragPreview,
+          ...rest
+        }) =>
+          connectDropTarget(
+            connectDragSource(
+              connectDragPreview(
+                <div>
+                  <Widget {...rest} />
+                </div>,
+              ),
+            ),
+          ),
+      ),
+    );
+    return <WrappedWidget {...widgetProps} />;
+  }
+  return <Widget {...widgetProps} />;
+};
+
+const DndConnectedField = injectLazyLibs(['reactDnd'])(UnconnectedField);
+
+const Field = (props) =>
+  props.onOrder ? (
+    <DndConnectedField {...props} />
+  ) : (
+    <UnconnectedField {...props} />
+  );
+
+/**
+ * Property types.
+ * @property {Object} propTypes Property types.
+ * @static
+ */
+Field.propTypes = {
+  widget: PropTypes.string,
+  vocabulary: PropTypes.shape({ '@id': PropTypes.string }),
+  choices: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string)),
+  type: PropTypes.string,
+  id: PropTypes.string.isRequired,
+  focus: PropTypes.bool,
+  onOrder: PropTypes.func,
+};
+
+/**
+ * Default properties.
+ * @property {Object} defaultProps Default properties.
+ * @static
+ */
+Field.defaultProps = {
+  widget: null,
+  vocabulary: null,
+  choices: null,
+  type: 'string',
+  focus: false,
+  onOrder: null,
+};
+
+export default injectIntl(Field);