include subblock

collective · Jun 23, 2020 · 3b664e0 · 3b664e0
1 parent 1c4a33a
commit 3b664e0
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 19 deletions.
diff --git a/src/Subblock.jsx b/src/Subblock.jsx
@@ -1,40 +1,36 @@
 import React from 'react'
 import cx from 'classnames'
 
-const Subblock = ({
-  className,
-  draggable = true,
-  children,
-  onFocus,
-  isDragging,
-  node,
-  connectDropTarget,
-  connectDragPreview,
-}) => {
+const Subblock = ({ className, draggable = true, children, subblock }) => {
   let ret = (
     <div
       className={cx(
         'single-block',
         draggable ? 'subblock-draggable' : '',
         draggable
           ? {
-              isDragging: isDragging,
+              isDragging: subblock.isDragging,
             }
           : null,
         className,
       )}
-      onFocus={onFocus}
+      onFocus={subblock.onFocus}
       ref={(_node) => {
-        node = _node
+        subblock.node = _node
       }}
     >
+      {subblock.renderDNDButton()}
+      {subblock.renderDeleteButton()}
       {children}
     </div>
   )
 
   if (draggable) {
-    return connectDropTarget(connectDragPreview(ret))
+    if (subblock.props.connectDropTarget && subblock.props.connectDragPreview) {
+      return subblock.props.connectDropTarget(subblock.props.connectDragPreview(ret))
+    }
   }
+
   return ret
 }
 

diff --git a/src/SubblocksEdit.jsx b/src/SubblocksEdit.jsx
@@ -132,11 +132,11 @@ class SubblocksEdit extends Component {
     this.onSubblockChangeFocus(index)
   }
 
-  onSubblockChangeFocus = index => {
+  onSubblockChangeFocus = (index) => {
     this.setState({ subIndexSelected: index })
   }
 
-  deleteSubblock = index => {
+  deleteSubblock = (index) => {
     var sbb = this.state.subblocks
     var subblocks = [...sbb.slice(0, index), ...sbb.slice(index + 1)]
     this.setState({ subblocks })
@@ -146,7 +146,7 @@ class SubblocksEdit extends Component {
     })
   }
 
-  renderAddBlockButton = title => {
+  renderAddBlockButton = (title) => {
     return (
       this.props.selected && (
         <Button onClick={this.addSubblock} className="add-element">
@@ -155,6 +155,16 @@ class SubblocksEdit extends Component {
       )
     )
   }
+
+  isSubblockSelected = (subindex) => {
+    return this.props.selected && this.state.subIndexSelected === subindex
+  }
+  subblockFn = {
+    onSubblockChangeFocus: this.onSubblockChangeFocus,
+    onChangeBlock: this.onChangeSubblocks,
+    onMoveSubblock: this.onMoveSubblock,
+    onDelete: this.deleteSubblock,
+  }
 }
 
 export default SubblocksEdit
diff --git a/src/volto-subblocks.css b/src/volto-subblocks.css
@@ -24,22 +24,32 @@
 
 .volto-subblocks-wrapper .single-block .dragsubblock {
     position: absolute;
-    top: -20px;
+    top: -25px;
 
     left: 0;
     color: #b8c6c8;
 }
 
+.volto-subblocks-wrapper .single-block .dragsubblock:hover,
+.volto-subblocks-wrapper .single-block .dragsubblock:active {
+    cursor: move;
+}
+
 .volto-subblocks-wrapper .single-block.subblock-draggable .ui.basic.button.delete-button {
     left: 25px;
 }
 
 .volto-subblocks-wrapper .single-block .ui.basic.button.delete-button {
     position: absolute;
-    top: -15px;
+    top: -20px;
     left: 0;
 }
 
 .volto-subblocks-wrapper .single-block .ui.basic.button.delete-button svg {
     fill: #000 !important;
 }
+
+.volto-subblocks-wrapper .single-block .ui.basic.button.delete-button:hover svg,
+.volto-subblocks-wrapper .single-block .ui.basic.button.delete-button:active svg {
+    fill: #e40166 !important;
+}