@eeacms/volto-group-block 8.1.1 → 10.0.0

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

@@ -1,197 +0,0 @@
-import React from 'react';
-import { Icon, BlockChooser } from '@plone/volto/components';
-import {
-  blockHasValue,
-  buildStyleClassNamesFromData,
-} from '@plone/volto/helpers';
-import { Button } from 'semantic-ui-react';
-import includes from 'lodash/includes';
-import isBoolean from 'lodash/isBoolean';
-import { defineMessages, injectIntl } from 'react-intl';
-import cx from 'classnames';
-import config from '@plone/volto/registry';
-import { doesNodeContainClick } from 'semantic-ui-react/dist/commonjs/lib';
-
-import dragSVG from '@plone/volto/icons/drag.svg';
-import addSVG from '@plone/volto/icons/circle-plus.svg';
-import trashSVG from '@plone/volto/icons/delete.svg';
-
-const messages = defineMessages({
-  unknownBlock: {
-    id: 'Unknown Block',
-    defaultMessage: 'Unknown Block {block}',
-  },
-  delete: {
-    id: 'delete',
-    defaultMessage: 'delete',
-  },
-  addBlock: {
-    id: 'addBlock',
-    defaultMessage: 'Add block',
-  },
-  removeBlock: {
-    id: 'removeBlock',
-    defaultMessage: 'Remove block',
-  },
-});
-
-class EditBlockWrapper extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      addNewBlockOpened: false,
-    };
-  }
-
-  componentDidMount() {
-    document.addEventListener('mousedown', this.handleClickOutside, false);
-  }
-
-  componentWillUnmount() {
-    document.removeEventListener('mousedown', this.handleClickOutside);
-  }
-
-  handleClickOutside = (e) => {
-    if (
-      this.blockNode.current &&
-      doesNodeContainClick(this.blockNode.current, e)
-    )
-      return;
-
-    if (this.state.addNewBlockOpened) {
-      this.setState({
-        addNewBlockOpened: false,
-      });
-      return true;
-    }
-  };
-
-  blockNode = React.createRef();
-
-  render() {
-    const { intl, blockProps, draginfo, extraControls, disabled, children } =
-      this.props;
-
-    const {
-      allowedBlocks,
-      block,
-      data,
-      onSelectBlock,
-      onDeleteBlock,
-      onMutateBlock,
-      onInsertBlock,
-      selected,
-    } = blockProps;
-    const type = data['@type'];
-    const { disableNewBlocks } = data;
-    const dragVisible = !data.fixed;
-    const visible = selected;
-
-    const required = isBoolean(data.required)
-      ? data.required
-      : includes(config.blocks.requiredBlocks, type);
-
-    const styles = buildStyleClassNamesFromData(data.styles);
-
-    // Get editing instructions from block settings or props
-    let instructions = data?.instructions?.data || data?.instructions;
-    if (!instructions || instructions === '<p><br/></p>') {
-      instructions = '';
-    }
-
-    return (
-      <div ref={this.blockNode}>
-        <div
-          ref={draginfo?.innerRef}
-          {...(selected ? draginfo?.draggableProps : null)}
-          className={cx(`block-editor-${data['@type']}`, styles, {
-            [data.align]: data.align,
-          })}
-        >
-          {(!selected || !visible || disabled) && (
-            <div
-              style={{
-                display: 'none',
-                // keep react-beautiful-dnd happy
-              }}
-              {...draginfo.dragHandleProps}
-            ></div>
-          )}
-          {visible && (
-            <div className="block-toolbar">
-              {instructions ? extraControls : ''}
-
-              {!disabled && (
-                <>
-                  <div
-                    style={{
-                      display: dragVisible ? 'inline-block' : 'none',
-                    }}
-                    {...draginfo.dragHandleProps}
-                    className="drag handle wrapper-group-block"
-                  >
-                    <Button icon basic title="Drag and drop">
-                      <Icon name={dragSVG} size="19px" />
-                    </Button>
-                  </div>
-
-                  {!disableNewBlocks && !blockHasValue(data) && (
-                    <Button
-                      icon
-                      basic
-                      title={intl.formatMessage(messages.addBlock)}
-                      onClick={() => {
-                        this.setState((prevState) => ({
-                          addNewBlockOpened: !prevState.addNewBlockOpened,
-                        }));
-                      }}
-                      className="group-block-add-button"
-                    >
-                      <Icon name={addSVG} className="" size="19px" />
-                    </Button>
-                  )}
-                  {!required && (
-                    <Button
-                      icon
-                      basic
-                      title={intl.formatMessage(messages.removeBlock)}
-                      onClick={() => onDeleteBlock(block)}
-                      className="delete-button-group-block"
-                      aria-label={intl.formatMessage(messages.delete)}
-                    >
-                      <Icon name={trashSVG} size="19px" />
-                    </Button>
-                  )}
-                  {this.state.addNewBlockOpened && (
-                    <BlockChooser
-                      onMutateBlock={(id, value) => {
-                        onMutateBlock(id, value);
-                        this.setState({ addNewBlockOpened: false });
-                      }}
-                      onInsertBlock={(id, value) => {
-                        onSelectBlock(onInsertBlock(id, value));
-                        this.setState({ addNewBlockOpened: false });
-                      }}
-                      currentBlock={block}
-                      allowedBlocks={allowedBlocks}
-                    />
-                  )}
-                </>
-              )}
-            </div>
-          )}
-
-          <div
-            className={cx('ui drag block wrapper inner', type, {
-              multiSelected: this.props.multiSelected,
-            })}
-          >
-            {children}
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
-
-export default injectIntl(EditBlockWrapper);

package/src/components/manage/Blocks/Group/EditBlockWrapper.test.jsx

@@ -1,58 +0,0 @@
-import React from 'react';
-import { fireEvent, render } from '@testing-library/react';
-import { Provider } from 'react-intl-redux';
-import EditBlockWrapper from './EditBlockWrapper';
-import configureStore from 'redux-mock-store';
-import '@testing-library/jest-dom/extend-expect';
-
-const mockDragInfo = {
-  innerRef: {
-    current: {
-      childMethod: jest.fn(),
-    },
-  },
-  draggableProps: {},
-  dragHandleProps: {},
-};
-
-const mockStore = configureStore();
-const store = mockStore({
-  intl: {
-    locale: 'en',
-    messages: {},
-  },
-});
-
-describe('EditBlockWrapper', () => {
-  const mockBlockProps = {
-    allowedBlocks: [],
-    block: 'mockBlock',
-    data: {},
-    onSelectBlock: jest.fn(),
-    onDeleteBlock: jest.fn(),
-    onMutateBlock: jest.fn(),
-    onInsertBlock: jest.fn(),
-    selected: true,
-  };
-
-  it('renders children', () => {
-    const { getByText } = render(
-      <Provider store={store}>
-        <EditBlockWrapper blockProps={mockBlockProps} draginfo={mockDragInfo}>
-          <div>Test child</div>
-        </EditBlockWrapper>
-      </Provider>,
-    );
-    expect(getByText('Test child')).toBeInTheDocument();
-  });
-
-  it('calls onDeleteBlock when delete button is clicked', () => {
-    const { getByTitle } = render(
-      <Provider store={store}>
-        <EditBlockWrapper blockProps={mockBlockProps} draginfo={mockDragInfo} />
-      </Provider>,
-    );
-    fireEvent.click(getByTitle('Remove block'));
-    expect(mockBlockProps.onDeleteBlock).toHaveBeenCalledWith('mockBlock');
-  });
-});