WIP on columns

src/ColumnsBlock/ColumnVariations.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Segment, Card } from 'semantic-ui-react';
+import { Icon } from '@plone/volto/components';
+
+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
+  );
+};

src/ColumnsBlock/ColumnsBlockEdit.jsx

@@ -1,15 +1,19 @@
 import React from 'react';
 import { Grid } from 'semantic-ui-react';
 import { isEmpty } from 'lodash';
-import { BlocksForm, SidebarPortal, InlineForm } from '@plone/volto/components'; // BlocksForm
+import { Icon, SidebarPortal, InlineForm } from '@plone/volto/components'; // BlocksForm
 import { emptyBlocksForm } from '@plone/volto/helpers';
+import { BlocksForm } from '@eeacms/volto-blocks-form/components';
 
 import { ColumnsBlockSchema } from './schema';
 import { getColumns, empty } from './utils';
-import DeviceSelect from './DeviceSelect';
-import ColumnControls from './ColumnControls';
+import ColumnVariations from './ColumnVariations';
+import { blocks } from '~/config';
+import { COLUMNSBLOCK } from '@eeacms/volto-columns-block/constants';
+import EditBlockWrapper from './EditBlockWrapper';
 
-import moreIcon from '@plone/volto/icons/more.svg';
+import dragSVG from '@plone/volto/icons/drag.svg';
+// import dotsSVG from '@plone/volto/icons/drag.svg';
 
 import './styles.less';
 
@@ -44,6 +48,15 @@ class ColumnsBlockEdit extends React.Component {
     this.blocksState = {};
   }
 
+  createFrom = (initialData) => {
+    const { gridCols, gridSize } = initialData;
+    return {
+      coldata: empty(gridCols.length),
+      gridSize,
+      gridCols,
+    };
+  };
+
   render() {
     const {
       block,
@@ -53,26 +66,35 @@ class ColumnsBlockEdit extends React.Component {
       pathname,
       selected,
     } = this.props;
+    const { gridSizes, variants } = blocks.blocksConfig[COLUMNSBLOCK];
 
-    // TODO: need to reinitialize with empty data, there's a bug when trying to
-    // add a new column and the column block has just been created
-    const { coldata = empty() } = data;
+    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">
-          <DeviceSelect />
-          <ColumnControls />
-          <hr class="splitter" />
-          {/* {<h3>{data.block_title}</h3>} */}
-          <Grid columns={columnList.length}>
+          <Grid columns={gridSize} stackable>
             {columnList.map(([colId, column], index) => {
               return (
-                <Grid.Column className="block-column" key={colId}>
-                  {/* <h4>{`Column ${index}`}</h4> */}
+                <Grid.Column
+                  className="block-column"
+                  key={colId}
+                  {...(gridSizes[gridCols[index]] || gridCols[index])}
+                >
+                  <div className="column-header">
+                    <Icon name={dragSVG} size="18px" />
+                  </div>
                   <BlocksForm
                     properties={isEmpty(column) ? emptyBlocksForm() : column}
+                    blockWrapper={EditBlockWrapper}
                     selectedBlock={
                       selected ? this.state.colSelections[colId] : null
                     }
@@ -109,7 +131,6 @@ class ColumnsBlockEdit extends React.Component {
                               [colId]: {
                                 ...coldata.columns?.[colId],
                                 ...this.blocksState,
-                                [id]: value,
                               },
                             },
                           },
@@ -138,9 +159,17 @@ class ColumnsBlockEdit extends React.Component {
             formData={data}
           />
         </SidebarPortal>
-      </>
+      </ColumnVariations>
     );
   }
 }
 
 export default ColumnsBlockEdit;
+//
+// import DeviceSelect from './DeviceSelect';
+// import ColumnControls from './ColumnControls';
+//
+// import moreIcon from '@plone/volto/icons/more.svg';
+// {/* <DeviceSelect /> */}
+// {/* {<h3>{data.block_title}</h3>} */}
+// { /* <h4>{`Column ${index}`}</h4> */ }

src/ColumnsBlock/ColumnsBlockView.jsx

@@ -1,20 +1,32 @@
 import React from 'react';
 import { Grid } from 'semantic-ui-react';
 import { RenderBlocks } from '@plone/volto/components';
+import { blocks } from '~/config';
+import { COLUMNSBLOCK } from '@eeacms/volto-columns-block/constants';
 
-import { getColumns, empty } from './utils';
+import { getColumns } from './utils';
 
 const ColumnsBlockView = (props) => {
-  const { coldata = empty(), block_title } = props.data;
+  const { gridSizes } = blocks.blocksConfig[COLUMNSBLOCK];
+  const {
+    coldata = {},
+    gridSize = 12,
+    gridCols = [],
+    block_title,
+  } = props.data;
   const columnList = getColumns(coldata);
   return (
     <div>
       {block_title ? <h3>{block_title}</h3> : ''}
-      <Grid columns={columnList.length}>
+      <Grid columns={gridSize}>
         {columnList.map(([id, column], index) => {
           return (
-            <Grid.Column className="demo-column" key={id}>
-              <h4>{`Column ${index}`}</h4>
+            <Grid.Column
+              className="demo-column"
+              key={id}
+              {...(gridSizes[gridCols[index]] || gridCols[index])}
+            >
+              {/* <h4>{`Column ${index}`}</h4> */}
               <RenderBlocks {...props} content={column} />
             </Grid.Column>
           );

src/ColumnsBlock/EditBlockWrapper.jsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { Icon } from '@plone/volto/components';
+import { blockHasValue } from '@plone/volto/helpers';
+import dragSVG from '@plone/volto/icons/drag.svg';
+import { blocks } from '~/config';
+import { Button } from 'semantic-ui-react';
+import includes from 'lodash/includes';
+import isBoolean from 'lodash/isBoolean';
+import { defineMessages, injectIntl } from 'react-intl';
+
+import trashSVG from '@plone/volto/icons/delete.svg';
+
+const messages = defineMessages({
+  unknownBlock: {
+    id: 'Unknown Block',
+    defaultMessage: 'Unknown Block {block}',
+  },
+  delete: {
+    id: 'delete',
+    defaultMessage: 'delete',
+  },
+});
+
+const EditBlockWrapper = (props) => {
+  const {
+    draginfo,
+    block,
+    selected,
+    children,
+    blockId,
+    onDeleteBlock,
+    intl,
+  } = props;
+  console.log('block', block);
+  const type = block['@type'];
+  const visible = selected && blockHasValue(block) && !block.fixed;
+
+  const required = isBoolean(block.required)
+    ? block.required
+    : includes(blocks.requiredBlocks, type);
+
+  return (
+    <div
+      ref={draginfo.innerRef}
+      {...draginfo.draggableProps}
+      className={`block-editor-${block['@type']}`}
+    >
+      <div style={{ position: 'relative' }}>
+        <div
+          style={{
+            visibility: visible ? 'visible' : 'hidden',
+            display: 'inline-block',
+          }}
+          {...draginfo.dragHandleProps}
+          className="drag handle wrapper"
+        >
+          <Icon name={dragSVG} size="18px" />
+        </div>
+
+        {selected && !required && (
+          <Button
+            icon
+            basic
+            onClick={() => onDeleteBlock(blockId)}
+            className="delete-button"
+            aria-label={intl.formatMessage(messages.delete)}
+          >
+            <Icon name={trashSVG} size="18px" />
+          </Button>
+        )}
+      </div>
+      <div className={`ui drag block inner ${type}`}>{children}</div>
+    </div>
+  );
+};
+
+export default injectIntl(EditBlockWrapper);

src/ColumnsBlock/styles.less

@@ -1,18 +1,20 @@
 .columns-block {
   .block-column {
     padding: 0.3em;
-  }
 
-  .splitter {
-    background-color: red;
-    height: 10px;
-  }
+    .column-header {
+      width: 60%;
+      text-align: center;
 
-  .block-column {
-    border-top: 4px solid gray;
-    border-radius: 6px;
-    padding: 0.3em 1em 0em 1em;
-    margin-top: 0.3em;
+      // height: 6px;
+      // border-radius: 4px;
+      // background-color: #ccc;
+      // transform: rotate(90deg);
+      margin: 0.1em auto;
+    }
+  }
+  .columns-devices-selector {
+    text-align: center;
   }
 }
 

src/ColumnsBlock/utils.js

@@ -8,12 +8,19 @@ export const getColumns = (coldata) => {
   ]);
 };
 
-export const empty = () => {
-  const id = uuid();
+export const empty = (count) => {
+  const columns = {};
+  const items = [];
+  for (let x = 0; x < count; x++) {
+    const id = uuid();
+    columns[id] = emptyBlocksForm();
+    items.push(id);
+  }
+
   return {
-    columns: { [id]: emptyBlocksForm() },
+    columns,
     columns_layout: {
-      items: [id],
+      items,
     },
   };
 };