@plone/volto 17.0.0-alpha.21 → 17.0.0-alpha.22

package/src/components/manage/Actions/Actions.jsx

@@ -1,16 +1,10 @@
-/**
- * Actions component.
- * @module components/manage/Actions/Actions
- */
-
-import React, { Component } from 'react';
+import { useState } from 'react';
 import PropTypes from 'prop-types';
-import { compose } from 'redux';
-import { connect } from 'react-redux';
+import { useDispatch, useSelector, shallowEqual } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { Dropdown, Icon } from 'semantic-ui-react';
 import { toast } from 'react-toastify';
-import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
+import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { cut, copy, copyContent, moveContent } from '@plone/volto/actions';
 import { getBaseUrl } from '@plone/volto/helpers';
@@ -55,267 +49,163 @@ const messages = defineMessages({
   },
 });
 
-/**
- * Actions container class.
- * @class Actions
- * @extends Component
- */
-class Actions extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    actions: PropTypes.shape({
-      object: PropTypes.arrayOf(PropTypes.object),
-      object_buttons: PropTypes.arrayOf(PropTypes.object),
-      user: PropTypes.arrayOf(PropTypes.object),
-    }),
-    pathname: PropTypes.string.isRequired,
-    id: PropTypes.string.isRequired,
-    title: PropTypes.string.isRequired,
-    action: PropTypes.string,
-    source: PropTypes.arrayOf(PropTypes.string),
-    cut: PropTypes.func.isRequired,
-    copy: PropTypes.func.isRequired,
-    copyContent: PropTypes.func.isRequired,
-    moveContent: PropTypes.func.isRequired,
-  };
+const Actions = (props) => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const [showRename, setshowRename] = useState(false);
+  const actions = useSelector((state) => state.actions.actions, shallowEqual);
+  const action = useSelector((state) => state.clipboard.action);
+  const source = useSelector((state) => state.clipboard.source, shallowEqual);
 
-  /**
-   * Default properties
-   * @property {Object} defaultProps Default properties.
-   * @static
-   */
-  static defaultProps = {
-    action: null,
-    actions: null,
-    source: null,
-  };
+  const id = useSelector((state) =>
+    state.content.data ? state.content.data.id : '',
+  );
+  const title = useSelector((state) =>
+    state.content.data ? state.content.data.title : '',
+  );
 
-  /**
-   * Constructor
-   * @method constructor
-   * @param {Object} props Component properties
-   * @constructs Actions
-   */
-  constructor(props) {
-    super(props);
-    this.cut = this.cut.bind(this);
-    this.copy = this.copy.bind(this);
-    this.paste = this.paste.bind(this);
-    this.rename = this.rename.bind(this);
-    this.onRenameOk = this.onRenameOk.bind(this);
-    this.onRenameCancel = this.onRenameCancel.bind(this);
-    this.state = {
-      showRename: false,
-    };
-  }
+  const onRenameOk = () => {
+    setshowRename(false);
+  };
 
-  /**
-   * On rename ok
-   * @method onRenameOk
-   * @returns {undefined}
-   */
-  onRenameOk() {
-    this.setState({
-      showRename: false,
-    });
-  }
+  const onRenameCancel = () => {
+    setshowRename(false);
+  };
 
-  /**
-   * On rename cancel
-   * @method onRenameCancel
-   * @returns {undefined}
-   */
-  onRenameCancel() {
-    this.setState({
-      showRename: false,
-    });
-  }
+  const fncut = () => {
+    dispatch(cut([getBaseUrl(props.pathname)]));
 
-  /**
-   * Cut handler
-   * @method cut
-   * @returns {undefined}
-   */
-  cut() {
-    this.props.cut([getBaseUrl(this.props.pathname)]);
     toast.success(
       <Toast
         success
-        title={this.props.intl.formatMessage(messages.success)}
-        content={this.props.intl.formatMessage(messages.messageCut, {
-          title: this.props.title,
+        title={intl.formatMessage(messages.success)}
+        content={intl.formatMessage(messages.messageCut, {
+          title: title,
         })}
       />,
     );
-  }
+  };
 
-  /**
-   * Copy handler
-   * @method copy
-   * @returns {undefined}
-   */
-  copy() {
-    this.props.copy([getBaseUrl(this.props.pathname)]);
+  const fncopy = () => {
+    dispatch(copy([getBaseUrl(props.pathname)]));
     toast.success(
       <Toast
         success
-        title={this.props.intl.formatMessage(messages.success)}
-        content={this.props.intl.formatMessage(messages.messageCopied, {
-          title: this.props.title,
+        title={intl.formatMessage(messages.success)}
+        content={intl.formatMessage(messages.messageCopied, {
+          title: title,
         })}
       />,
     );
-  }
+  };
 
-  /**
-   * Paste handler
-   * @method paste
-   * @returns {undefined}
-   */
-  paste() {
-    if (this.props.action === 'copy') {
-      this.props.copyContent(
-        this.props.source,
-        getBaseUrl(this.props.pathname),
-      );
+  const paste = () => {
+    if (action === 'copy') {
+      dispatch(copyContent(source, getBaseUrl(props.pathname)));
     }
-    if (this.props.action === 'cut') {
-      this.props.moveContent(
-        this.props.source,
-        getBaseUrl(this.props.pathname),
-      );
+    if (action === 'cut') {
+      dispatch(moveContent(source, getBaseUrl(props.pathname)));
     }
     toast.success(
       <Toast
         success
-        title={this.props.intl.formatMessage(messages.success)}
-        content={this.props.intl.formatMessage(messages.messagePasted)}
+        title={intl.formatMessage(messages.success)}
+        content={intl.formatMessage(messages.messagePasted)}
       />,
     );
-  }
+  };
 
-  /**
-   * Rename handler
-   * @method rename
-   * @returns {undefined}
-   */
-  rename() {
-    this.setState({
-      showRename: true,
-    });
-  }
+  const rename = () => {
+    setshowRename(true);
+  };
 
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    return (
-      <Dropdown
-        item
-        id="toolbar-actions"
-        trigger={
-          <span>
-            <Icon name="lightning" size="big" />{' '}
-            <FormattedMessage id="Actions" defaultMessage="Actions" />
-          </span>
-        }
-      >
-        <Dropdown.Menu>
-          {this.props.actions.object_buttons &&
-            this.props.actions.object_buttons.map((item) => {
-              switch (item.id) {
-                case 'cut':
-                  return (
-                    <Dropdown.Item
-                      key={item.id}
-                      icon="cut"
-                      text={item.title}
-                      onClick={this.cut}
-                    />
-                  );
-                case 'copy':
-                  return (
-                    <Dropdown.Item
-                      key={item.id}
-                      icon="copy"
-                      text={item.title}
-                      onClick={this.copy}
-                    />
-                  );
-                case 'paste':
-                  return (
-                    <Dropdown.Item
-                      key={item.id}
-                      icon="paste"
-                      text={item.title}
-                      onClick={this.paste}
-                      disabled={this.props.action === null}
-                    />
-                  );
-                case 'delete':
-                  return (
-                    <Link
-                      key={item.id}
-                      to={`${this.props.pathname}/delete`}
-                      className="item"
-                    >
-                      <Icon name="trash" />
-                      {item.title}
-                    </Link>
-                  );
-                case 'rename':
-                  return (
-                    <Dropdown.Item
-                      key={item.id}
-                      icon="text cursor"
-                      text={item.title}
-                      onClick={this.rename}
-                    />
-                  );
-                default:
-                  return null;
-              }
-            })}
+  return (
+    <Dropdown
+      item
+      id="toolbar-actions"
+      trigger={
+        <span>
+          <Icon name="lightning" size="big" />{' '}
+          <FormattedMessage id="Actions" defaultMessage="Actions" />
+        </span>
+      }
+    >
+      <Dropdown.Menu>
+        {actions.object_buttons &&
+          actions.object_buttons.map((item) => {
+            switch (item.id) {
+              case 'cut':
+                return (
+                  <Dropdown.Item
+                    key={item.id}
+                    icon="cut"
+                    text={item.title}
+                    onClick={fncut}
+                  />
+                );
+              case 'copy':
+                return (
+                  <Dropdown.Item
+                    key={item.id}
+                    icon="copy"
+                    text={item.title}
+                    onClick={fncopy}
+                  />
+                );
+              case 'paste':
+                return (
+                  <Dropdown.Item
+                    key={item.id}
+                    icon="paste"
+                    text={item.title}
+                    onClick={paste}
+                    disabled={action === null}
+                  />
+                );
+              case 'delete':
+                return (
+                  <Link
+                    key={item.id}
+                    to={`${props.pathname}/delete`}
+                    className="item"
+                  >
+                    <Icon name="trash" />
+                    {item.title}
+                  </Link>
+                );
+              case 'rename':
+                return (
+                  <Dropdown.Item
+                    key={item.id}
+                    icon="text cursor"
+                    text={item.title}
+                    onClick={rename}
+                  />
+                );
+              default:
+                return null;
+            }
+          })}
 
-          <ContentsRenameModal
-            open={this.state.showRename}
-            onCancel={this.onRenameCancel}
-            onOk={this.onRenameOk}
-            items={[
-              {
-                url: this.props.pathname,
-                title: this.props.title,
-                id: this.props.id,
-              },
-            ]}
-          />
-        </Dropdown.Menu>
-      </Dropdown>
-    );
-  }
-}
+        <ContentsRenameModal
+          open={showRename}
+          onCancel={onRenameCancel}
+          onOk={onRenameOk}
+          items={[
+            {
+              url: props.pathname,
+              title: title,
+              id: id,
+            },
+          ]}
+        />
+      </Dropdown.Menu>
+    </Dropdown>
+  );
+};
+
+Actions.propTypes = {
+  pathname: PropTypes.string.isRequired,
+};
 
-export default compose(
-  injectIntl,
-  connect(
-    (state) => ({
-      actions: state.actions.actions,
-      action: state.clipboard.action,
-      source: state.clipboard.source,
-      id: state.content.data ? state.content.data.id : '',
-      title: state.content.data ? state.content.data.title : '',
-    }),
-    {
-      cut,
-      copy,
-      copyContent,
-      moveContent,
-    },
-  ),
-)(Actions);
+export default Actions;

package/src/components/manage/Blocks/Container/Edit.jsx

@@ -43,9 +43,12 @@ const ContainerBlockEdit = (props) => {
   const EditBlockWrapper =
     blockConfig.editBlockWrapper || DefaultEditBlockWrapper;
 
-  const [selectedBlock, setSelectedBlock] = useState(
+  let [selectedBlock, setSelectedBlock] = useState(
     properties.blocks_layout.items[0],
   );
+  if (props.setSelectedBlock) {
+    ({ selectedBlock, setSelectedBlock } = props);
+  }
 
   const blockState = {};
 

package/src/components/manage/Blocks/Container/EditBlockWrapper.jsx

@@ -49,6 +49,7 @@ const EditBlockWrapper = (props) => {
         role="presentation"
         className="cell-wrapper"
         onClick={(e) => {
+          e.stopPropagation();
           onSelectBlock(block);
         }}
       >

package/src/components/manage/Blocks/Grid/Edit.jsx

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import cx from 'classnames';
+import { useState } from 'react';
 import ContainerEdit from '../Container/Edit';
 
 const GridBlockEdit = (props) => {
@@ -7,6 +8,8 @@ const GridBlockEdit = (props) => {
 
   const columnsLength = data?.blocks_layout?.items?.length || 0;
 
+  const [selectedBlock, setSelectedBlock] = useState(null);
+
   return (
     <div
       className={cx({
@@ -16,8 +19,17 @@ const GridBlockEdit = (props) => {
         four: columnsLength >= 4,
         'grid-items': true,
       })}
+      // This is required to enabling a small "in-between" clickable area
+      // for bringing the Grid sidebar alive once you have selected an inner block
+      onClick={(e) => setSelectedBlock(null)}
+      role="presentation"
     >
-      <ContainerEdit {...props} direction="horizontal" />
+      <ContainerEdit
+        {...props}
+        selectedBlock={selectedBlock}
+        setSelectedBlock={setSelectedBlock}
+        direction="horizontal"
+      />
     </div>
   );
 };

package/src/components/manage/Blocks/Image/View.jsx

@@ -19,7 +19,7 @@ import config from '@plone/volto/registry';
  * @class View
  * @extends Component
  */
-export const View = ({ data, detached, properties }) => {
+export const View = ({ className, data, detached, properties }) => {
   const href = data?.href?.[0]?.['@id'] || '';
 
   const Image = config.getComponent({ name: 'Image' }).component;
@@ -33,6 +33,7 @@ export const View = ({ data, detached, properties }) => {
           detached,
         },
         data.align,
+        className,
       )}
     >
       {data.url && (