WIP on columns

eea · Sep 26, 2020 · ecb50be · ecb50be
1 parent 8ee7a4e
commit ecb50be
Show file tree

Hide file tree

Showing 3 changed files with 139 additions and 67 deletions.
diff --git a/src/ColumnsBlock/ColumnsBlockEdit.jsx b/src/ColumnsBlock/ColumnsBlockEdit.jsx
@@ -70,7 +70,7 @@ class ColumnsBlockEdit extends React.Component {
 
     const { coldata, gridCols, gridSize } = data;
     const columnList = getColumns(coldata);
-    console.log('data', gridCols);
+    // console.log('data', gridCols);
 
     return (
       <ColumnVariations
@@ -89,9 +89,7 @@ class ColumnsBlockEdit extends React.Component {
                   key={colId}
                   {...(gridSizes[gridCols[index]] || gridCols[index])}
                 >
-                  <div className="column-header">
-                    <Icon name={dragSVG} size="18px" />
-                  </div>
+                  <div className="column-header"></div>
                   <BlocksForm
                     properties={isEmpty(column) ? emptyBlocksForm() : column}
                     blockWrapper={EditBlockWrapper}

diff --git a/src/ColumnsBlock/EditBlockWrapper.jsx b/src/ColumnsBlock/EditBlockWrapper.jsx
@@ -1,13 +1,15 @@
 import React from 'react';
-import { Icon } from '@plone/volto/components';
+import { Icon, BlockChooser } 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 { 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({
@@ -21,62 +23,125 @@ const messages = defineMessages({
   },
 });
 
-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;
+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;
+    }
+  };
 
-  const required = isBoolean(block.required)
-    ? block.required
-    : includes(blocks.requiredBlocks, type);
+  blockNode = React.createRef();
 
-  // visibility: visible ? 'visible' : 'hidden',
-  return (
-    <div
-      ref={draginfo.innerRef}
-      {...draginfo.draggableProps}
-      className={`block-editor-${block['@type']}`}
-    >
-      {selected && (
-        <div className="block-toolbar">
-          <div
-            style={{
-              display: 'inline-block',
-            }}
-            {...draginfo.dragHandleProps}
-            className="drag handle wrapper-column-block"
-          >
-            <Button icon basic>
-              <Icon name={dragSVG} size="18px" />
-            </Button>
-          </div>
+  render() {
+    const {
+      allowedBlocks,
+      block,
+      blockId,
+      children,
+      draginfo,
+      intl,
+      onDeleteBlock,
+      onMutateBlock,
+      selected,
+    } = this.props;
+    const type = block['@type'];
+    const { disableNewBlocks } = block;
 
-          {!required && (
-            <Button
-              icon
-              basic
-              onClick={() => onDeleteBlock(blockId)}
-              className="delete-button-column-block"
-              aria-label={intl.formatMessage(messages.delete)}
-            >
-              <Icon name={trashSVG} size="18px" />
-            </Button>
+    // const visible = selected && blockHasValue(block) && !block.fixed;
+    // visibility: visible ? 'visible' : 'hidden',
+
+    const required = isBoolean(block.required)
+      ? block.required
+      : includes(blocks.requiredBlocks, type);
+
+    return (
+      <div ref={this.blockNode}>
+        <div
+          ref={draginfo.innerRef}
+          {...draginfo.draggableProps}
+          className={`block-editor-${block['@type']}`}
+        >
+          {selected && (
+            <div className="block-toolbar">
+              <div
+                style={{
+                  display: 'inline-block',
+                }}
+                {...draginfo.dragHandleProps}
+                className="drag handle wrapper-column-block"
+              >
+                <Button icon basic>
+                  <Icon name={dragSVG} size="18px" />
+                </Button>
+              </div>
+
+              {!disableNewBlocks && !blockHasValue(block) && (
+                <Button
+                  icon
+                  basic
+                  onClick={() => {
+                    this.setState({
+                      addNewBlockOpened: !this.state.addNewBlockOpened,
+                    });
+                  }}
+                  className="column-block-add-button"
+                >
+                  <Icon name={addSVG} className="" size="18px" />
+                </Button>
+              )}
+              {!required && (
+                <Button
+                  icon
+                  basic
+                  onClick={() => onDeleteBlock(blockId)}
+                  className="delete-button-column-block"
+                  aria-label={intl.formatMessage(messages.delete)}
+                >
+                  <Icon name={trashSVG} size="18px" />
+                </Button>
+              )}
+              {this.state.addNewBlockOpened && (
+                <BlockChooser
+                  onMutateBlock={(id, value) => {
+                    this.setState({ addNewBlockOpened: false });
+                    onMutateBlock(id, value);
+                  }}
+                  currentBlock={blockId}
+                  allowedBlocks={allowedBlocks}
+                />
+              )}
+            </div>
           )}
-        </div>
-      )}
 
-      <div className={`ui drag block inner ${type}`}>{children}</div>
-    </div>
-  );
-};
+          <div className={`ui drag block inner ${type}`}>{children}</div>
+        </div>
+      </div>
+    );
+  }
+}
 
 export default injectIntl(EditBlockWrapper);
diff --git a/src/ColumnsBlock/styles.less b/src/ColumnsBlock/styles.less
@@ -3,27 +3,36 @@
     padding: 0.3em;
 
     .column-header {
-      width: 60%;
+      width: 80%;
       text-align: center;
+      border-bottom: 6px solid #eaeaea;
+      margin: 0.3em auto 0.8em auto;
+    }
 
-      // height: 6px;
-      // border-radius: 4px;
-      // background-color: #ccc;
-      // transform: rotate(90deg);
-      margin: 0.1em auto;
+    .block {
+      .block-add-button {
+        display: none;
+      }
     }
   }
-  .columns-devices-selector {
-    text-align: center;
+
+  [data-rbd-draggable-context-id] {
+    margin-bottom: 0.3em;
   }
 }
 
 .block-toolbar {
-  background-color: #eaeaea;
+  background-color: #d9edf4;
   padding: 3px;
+  // margin-top: -10px;
+  display: inline-block;
+  margin-bottom: 8px;
   position: absolute;
   margin-top: -36px;
   z-index: 10;
+  border-top-left-radius: 6px;
+  border-top-right-radius: 6px;
+  right: 0px;
 
   .drag.handle.wrapper-column-block {
     position: initial;