Refactored for new volto-blocks-form API

src/ColumnsBlock/ColumnVariations.jsx

@@ -1,23 +1,40 @@
 import React from 'react';
 import { Segment, Card } from 'semantic-ui-react';
 import { Icon } from '@plone/volto/components';
+import { isEqual } from 'lodash';
 
-export default ({ data, onChange, children, variants }) => {
-  // data by default is like { '@type': 'columns }
-  return Object.keys(data).length === 1 ? (
-    <Segment>
-      <Card.Group>
-        {variants.map(({ icon, defaultData, title }, index) => (
-          <Card key={index} onClick={() => onChange(defaultData)}>
-            <Card.Content>
-              <Icon name={icon} />
-              {title ? <Card.Header>{title}</Card.Header> : ''}
-            </Card.Content>
-          </Card>
-        ))}
-      </Card.Group>
-    </Segment>
-  ) : (
-    children
-  );
-};
+export default React.memo(
+  ({ data, onChange, children, variants }) => {
+    // data by default is like { '@type': 'columns }
+    const mounted = React.useRef();
+    React.useEffect(() => {
+      if (!mounted.current) console.log('mount column variations');
+      mounted.current = true;
+    });
+
+    return Object.keys(data).length === 1 ? (
+      <Segment>
+        <Card.Group>
+          {variants.map(({ icon, defaultData, title }, index) => (
+            <Card key={index} onClick={() => onChange(defaultData)}>
+              <Card.Content>
+                <Icon name={icon} />
+                {title ? <Card.Header>{title}</Card.Header> : ''}
+              </Card.Content>
+            </Card>
+          ))}
+        </Card.Group>
+      </Segment>
+    ) : (
+      children
+    );
+  },
+  (p, n) => {
+    const res =
+      isEqual(p.data, n.data) &&
+      p.selected === n.selected &&
+      isEqual(n.colSelections, p.colSelections);
+    console.log('variantions', res);
+    return res;
+  },
+);

src/ColumnsBlock/ColumnsBlockEdit.jsx

@@ -1,24 +1,38 @@
 import React from 'react';
 import { Grid } from 'semantic-ui-react';
 import { isEmpty } from 'lodash';
-import { SidebarPortal, InlineForm } from '@plone/volto/components'; // BlocksForm, Icon,
+import { SidebarPortal, Icon, InlineForm } from '@plone/volto/components'; // BlocksForm, Icon,
 import { emptyBlocksForm } from '@plone/volto/helpers';
 import { setSidebarTab } from '@plone/volto/actions';
 import { connect } from 'react-redux';
 import { BlocksForm } from '@eeacms/volto-blocks-form/components';
+import { Button } from 'semantic-ui-react';
 import { blocks } from '~/config';
 
 import { COLUMNSBLOCK } from '@eeacms/volto-columns-block/constants';
 import { ColumnsBlockSchema } from './schema';
 import { getColumns, empty } from './utils';
 import ColumnVariations from './ColumnVariations';
 import EditBlockWrapper from './EditBlockWrapper';
-
-// import dragSVG from '@plone/volto/icons/drag.svg';
-// import dotsSVG from '@plone/volto/icons/drag.svg';
+import tuneSVG from '@plone/volto/icons/tune.svg';
 
 import './styles.less';
 
+/*
+ * not pretty, there's a lot of render props passing, to please React
+ * reconciliation algos
+ *
+ColumnsBlockEdit ->
+  EditBlockWrapper
+    -> EditBlock
+    -> dragProps
+
+CBE
+  -> BlocksForm
+    -> DragDropList
+      -> EditBlockWrapper
+        -> EditBlock
+*/
 class ColumnsBlockEdit extends React.Component {
   constructor(props) {
     super(props);
@@ -74,95 +88,100 @@ class ColumnsBlockEdit extends React.Component {
 
     const { coldata, gridCols, gridSize } = data;
     const columnList = getColumns(coldata);
-    // console.log('data', gridCols);
 
     return (
-      <ColumnVariations
-        variants={variants}
-        data={data}
-        onChange={(initialData) => {
-          onChangeBlock(block, { ...data, ...this.createFrom(initialData) });
-        }}
-      >
+      <>
         <div className="columns-block">
           <Grid columns={gridSize} stackable>
-            {columnList.map(([colId, column], index) => {
-              return (
-                <Grid.Column
-                  className="block-column"
+            {columnList.map(([colId, column], index) => (
+              <Grid.Column
+                className="block-column"
+                key={colId}
+                {...(gridSizes[gridCols[index]] || gridCols[index])}
+              >
+                <div className="column-header"></div>
+                <BlocksForm
                   key={colId}
-                  {...(gridSizes[gridCols[index]] || gridCols[index])}
-                >
-                  <div className="column-header"></div>
-                  <BlocksForm
-                    properties={isEmpty(column) ? emptyBlocksForm() : column}
-                    blockWrapper={(props) => (
-                      <EditBlockWrapper
-                        key={colId}
-                        {...props}
-                        onShowColumnSettings={() => {
-                          setSidebarTab(1);
-                          this.setState({
-                            showSidebar: true,
-                            activeColumn: colId,
-                            colSelections: {},
-                          });
-                        }}
-                      />
-                    )}
-                    selectedBlock={
-                      selected ? this.state.colSelections[colId] : null
-                    }
-                    onSelectBlock={(id) =>
-                      this.setState({
-                        colSelections: {
-                          // this invalidates selection in all other columns
-                          [colId]: id,
+                  properties={isEmpty(column) ? emptyBlocksForm() : column}
+                  selectedBlock={
+                    selected ? this.state.colSelections[colId] : null
+                  }
+                  onSelectBlock={(id) =>
+                    this.setState({
+                      colSelections: {
+                        // this invalidates selection in all other columns
+                        [colId]: id,
+                      },
+                    })
+                  }
+                  onChangeFormData={(newFormData) => {
+                    onChangeBlock(block, {
+                      ...data,
+                      coldata: {
+                        ...coldata,
+                        columns: {
+                          ...coldata.columns,
+                          [colId]: newFormData,
                         },
-                      })
-                    }
-                    onChangeFormData={(newFormData) => {
+                      },
+                    });
+                  }}
+                  onChangeField={(id, value) => {
+                    // special handling of blocks and blocks_layout
+                    if (['blocks', 'blocks_layout'].indexOf(id) > -1) {
+                      this.blocksState[id] = value;
                       onChangeBlock(block, {
                         ...data,
                         coldata: {
                           ...coldata,
                           columns: {
                             ...coldata.columns,
-                            [colId]: newFormData,
+                            [colId]: {
+                              ...coldata.columns?.[colId],
+                              ...this.blocksState,
+                            },
                           },
                         },
                       });
-                    }}
-                    onChangeField={(id, value) => {
-                      // special handling of blocks and blocks_layout
-                      if (['blocks', 'blocks_layout'].indexOf(id) > -1) {
-                        this.blocksState[id] = value;
-                        onChangeBlock(block, {
-                          ...data,
-                          coldata: {
-                            ...coldata,
-                            columns: {
-                              ...coldata.columns,
-                              [colId]: {
-                                ...coldata.columns?.[colId],
-                                ...this.blocksState,
-                              },
-                            },
-                          },
-                        });
-                      } else {
-                        onChangeField(id, value);
+                    } else {
+                      onChangeField(id, value);
+                    }
+                  }}
+                  pathname={pathname}
+                >
+                  {({ draginfo }, editBlock, blockProps) => (
+                    <EditBlockWrapper
+                      draginfo={draginfo}
+                      blockProps={blockProps}
+                      extraControls={
+                        <>
+                          <Button
+                            icon
+                            basic
+                            onClick={() => {
+                              this.setState({
+                                showSidebar: true,
+                                activeColumn: 1, //colId,
+                                colSelections: {},
+                              });
+                              this.props.setSidebarTab(1);
+                            }}
+                          >
+                            <Icon name={tuneSVG} className="" size="18px" />
+                          </Button>
+                        </>
                       }
-                    }}
-                    pathname={pathname}
-                  />
-                </Grid.Column>
-              );
-            })}
+                    >
+                      {editBlock}
+                    </EditBlockWrapper>
+                  )}
+                </BlocksForm>
+              </Grid.Column>
+            ))}
           </Grid>
         </div>
         {Object.keys(this.state.colSelections).length === 0 && (
-          <SidebarPortal selected={selected}>
+          <SidebarPortal selected={true}>
             {this.state.activeColumn ? (
               <div>{this.state.activeColumn}</div>
             ) : (
@@ -180,7 +199,7 @@ class ColumnsBlockEdit extends React.Component {
             )}
           </SidebarPortal>
         )}
-      </ColumnVariations>
+      </>
     );
   }
 }
@@ -191,3 +210,7 @@ export default connect(
   },
   { setSidebarTab },
 )(ColumnsBlockEdit);
+// import columnSVG from '@plone/volto/icons/column.svg';
+// import decorateComponentWithProps from 'decorate-component-with-props';
+// import dragSVG from '@plone/volto/icons/drag.svg';
+// import dotsSVG from '@plone/volto/icons/drag.svg';

src/ColumnsBlock/EditBlockWrapper.jsx

@@ -8,8 +8,6 @@ import isBoolean from 'lodash/isBoolean';
 import { defineMessages, injectIntl } from 'react-intl';
 import { doesNodeContainClick } from 'semantic-ui-react/dist/commonjs/lib';
 
-import tuneSVG from '@plone/volto/icons/tune.svg';
-import columnSVG from '@plone/volto/icons/column.svg';
 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';
@@ -34,6 +32,7 @@ class EditBlockWrapper extends React.Component {
   }
 
   componentDidMount() {
+    console.log('mount editblockwrapper', this.props.blockProps.block);
     document.addEventListener('mousedown', this.handleClickOutside, false);
   }
 
@@ -59,35 +58,32 @@ class EditBlockWrapper extends React.Component {
   blockNode = React.createRef();
 
   render() {
+    const { intl, blockProps, draginfo, extraControls, children } = this.props;
+
     const {
       allowedBlocks,
       block,
-      blockId,
-      children,
-      draginfo,
-      intl,
+      data,
       onDeleteBlock,
       onMutateBlock,
       selected,
-      onShowColumnSettings,
-    } = this.props;
-    console.log('draginfo', draginfo);
-    const type = block['@type'];
-    const { disableNewBlocks } = block;
+    } = blockProps;
+    const type = data['@type'];
+    const { disableNewBlocks } = data;
 
     // const visible = selected && blockHasValue(block) && !block.fixed;
     // visibility: visible ? 'visible' : 'hidden',
 
-    const required = isBoolean(block.required)
-      ? block.required
+    const required = isBoolean(data.required)
+      ? data.required
       : includes(blocks.requiredBlocks, type);
 
     return (
       <div ref={this.blockNode}>
         <div
           ref={draginfo?.innerRef}
           {...(selected ? draginfo?.draggableProps : null)}
-          className={`block-editor-${block['@type']}`}
+          className={`block-editor-${data['@type']}`}
         >
           {!selected && (
             <div
@@ -112,16 +108,9 @@ class EditBlockWrapper extends React.Component {
                 </Button>
               </div>
 
-              <Button
-                icon
-                basic
-                onClick={onShowColumnSettings}
-                className="column-block-add-button"
-              >
-                <Icon name={tuneSVG} className="" size="18px" />
-              </Button>
+              {extraControls}
 
-              {!disableNewBlocks && !blockHasValue(block) && (
+              {!disableNewBlocks && !blockHasValue(data) && (
                 <Button
                   icon
                   basic
@@ -139,7 +128,7 @@ class EditBlockWrapper extends React.Component {
                 <Button
                   icon
                   basic
-                  onClick={() => onDeleteBlock(blockId)}
+                  onClick={() => onDeleteBlock(block)}
                   className="delete-button-column-block"
                   aria-label={intl.formatMessage(messages.delete)}
                 >
@@ -152,7 +141,7 @@ class EditBlockWrapper extends React.Component {
                     this.setState({ addNewBlockOpened: false });
                     onMutateBlock(id, value);
                   }}
-                  currentBlock={blockId}
+                  currentBlock={block}
                   allowedBlocks={allowedBlocks}
                 />
               )}