@plone/volto 17.0.0-alpha.8 → 17.0.0

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/Add/Add.jsx

@@ -124,9 +124,9 @@ class Add extends Component {
     this.onSubmit = this.onSubmit.bind(this);
 
     if (config.blocks?.initialBlocks[props.type]) {
-      this.initialBlocksLayout = config.blocks.initialBlocks[
-        props.type
-      ].map((item) => uuid());
+      this.initialBlocksLayout = config.blocks.initialBlocks[props.type].map(
+        (item) => uuid(),
+      );
       this.initialBlocks = this.initialBlocksLayout.reduce(
         (acc, value, index) => ({
           ...acc,
@@ -250,11 +250,10 @@ class Add extends Component {
         : null;
 
       // Lookup initialBlocks and initialBlocksLayout within schema
-      const schemaBlocks = this.props.schema.properties[blocksFieldname]
-        ?.default;
-      const schemaBlocksLayout = this.props.schema.properties[
-        blocksLayoutFieldname
-      ]?.default?.items;
+      const schemaBlocks =
+        this.props.schema.properties[blocksFieldname]?.default;
+      const schemaBlocksLayout =
+        this.props.schema.properties[blocksLayoutFieldname]?.default?.items;
       let initialBlocks = this.initialBlocks;
       let initialBlocksLayout = this.initialBlocksLayout;
 

package/src/components/manage/AnchorPlugin/index.jsx

@@ -44,7 +44,7 @@ function unboundRemoveEntity(editorState) {
   return newEditorState;
 }
 
-export default (config = {}) => {
+export default function AnchorPlugin(config = {}) {
   // ToDo: Get rif of the remainings of having the original CSS modules
   const defaultTheme = {};
 
@@ -79,4 +79,4 @@ export default (config = {}) => {
         setEditorState(removeEntity(getEditorState())),
     }),
   };
-};
+}

package/src/components/manage/AnchorPlugin/utils/EditorUtils.js

@@ -1,4 +1,4 @@
-export default ({ draftJs }) => ({
+const EditorUtils = ({ draftJs }) => ({
   createLinkAtSelection(editorState, url) {
     const contentState = editorState
       .getCurrentContent()
@@ -43,3 +43,5 @@ export default ({ draftJs }) => ({
     return entity && entity.getType() === entityType;
   },
 });
+
+export default EditorUtils;

package/src/components/manage/Blocks/Block/BlocksForm.jsx

@@ -40,8 +40,12 @@ const BlocksForm = (props) => {
     manage,
     children,
     isMainForm = true,
+    isContainer,
+    stopPropagation,
+    disableAddBlockOnEnterKey,
     blocksConfig = config.blocks.blocksConfig,
     editable = true,
+    direction = 'vertical',
   } = props;
 
   const blockList = getBlocks(properties);
@@ -83,7 +87,9 @@ const BlocksForm = (props) => {
       e.preventDefault();
     }
     if (e.key === 'Enter' && !disableEnter) {
-      onSelectBlock(onAddBlock(config.settings.defaultBlockType, index + 1));
+      if (!disableAddBlockOnEnterKey) {
+        onSelectBlock(onAddBlock(config.settings.defaultBlockType, index + 1));
+      }
       e.preventDefault();
     }
   };
@@ -199,7 +205,16 @@ const BlocksForm = (props) => {
   });
 
   return (
-    <div className="blocks-form" ref={ref}>
+    <div
+      className="blocks-form"
+      role="presentation"
+      ref={ref}
+      onKeyDown={(e) => {
+        if (stopPropagation) {
+          e.stopPropagation();
+        }
+      }}
+    >
       <fieldset className="invisible" disabled={!editable}>
         <DragDropList
           childList={blockList}
@@ -216,6 +231,7 @@ const BlocksForm = (props) => {
             onChangeFormData(newFormData);
             return true;
           }}
+          direction={direction}
         >
           {(dragProps) => {
             const { child, childId, index } = dragProps;
@@ -250,6 +266,7 @@ const BlocksForm = (props) => {
               type: child['@type'],
               editable,
               showBlockChooser: selectedBlock === childId,
+              detached: isContainer,
             };
             return editBlockWrapper(
               dragProps,

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

@@ -158,7 +158,7 @@ export class Edit extends Component {
                     )
                 : null
             }
-            className={cx(`block ${type} ${this.props.data.variation ?? ''}`, {
+            className={cx('block', type, this.props.data.variation, {
               selected: this.props.selected || this.props.multiSelected,
               multiSelected: this.props.multiSelected,
             })}

package/src/components/manage/Blocks/Block/Settings.jsx

@@ -14,7 +14,9 @@ const Settings = ({ data, block, onChangeBlock, schema }) => {
           [id]: value,
         });
       }}
+      onChangeBlock={onChangeBlock}
       formData={data}
+      applySchemaEnhancers={false}
     />
   );
 };

package/src/components/manage/Blocks/Block/Settings.test.jsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import Settings from './Settings';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import configureStore from 'redux-mock-store';
+import config from '@plone/volto/registry';
+import { Provider } from 'react-intl-redux';
+
+const mockStore = configureStore();
+
+const withStateManagement =
+  (Component) =>
+  ({ ...props }) => {
+    const [formData, onChangeFormData] = React.useState(props.formData || {});
+    const onChangeField = (id, value) => {
+      onChangeFormData({ ...formData, [id]: value });
+    };
+
+    // NOTE: onChangeBlock here is not "really" implemented
+
+    return (
+      <Component
+        {...props}
+        onChangeField={onChangeField}
+        onChangeBlock={(block, data) => onChangeFormData(data)}
+        formData={formData}
+      />
+    );
+  };
+
+beforeAll(() => {
+  config.widgets = {
+    id: {},
+    widget: {},
+    vocabulary: {},
+    choices: (props) => (
+      <div className="SelectWidget">{JSON.stringify(props.choices)}</div>
+    ),
+    type: {},
+    default: () => <div className="TextWidget" />,
+  };
+
+  config.blocks.blocksConfig = {
+    ...config.blocks.blocksConfig,
+
+    testBlock: {
+      id: 'testBlock',
+      variations: [
+        {
+          id: 'default',
+          title: 'Default',
+          isDefault: true,
+        },
+        {
+          id: 'extra',
+          title: 'Extra',
+        },
+      ],
+    },
+  };
+});
+
+describe('Settings', () => {
+  it('renders block settings form without schema enhancers', () => {
+    const WrappedSettings = withStateManagement(Settings);
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+    const testSchema = {
+      fieldsets: [{ title: 'Default', id: 'default', fields: [] }],
+      properties: {},
+      required: [],
+    };
+    const data = {
+      '@type': 'testBlock',
+    };
+    const { container } = render(
+      <Provider store={store}>
+        <WrappedSettings
+          data={data}
+          block="test"
+          schema={testSchema}
+          onChangeBlock={(block, value) => {}}
+        />
+      </Provider>,
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/manage/Blocks/Block/Style.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import cx from 'classnames';
 
-export default ({ data, detached, children }) => {
+export default function Style({ data, detached, children }) {
   return (
     <div
       className={cx(
@@ -25,4 +25,4 @@ export default ({ data, detached, children }) => {
       </div>
     </div>
   );
-};
+}