WIP on columns

eea · Sep 26, 2020 · 17f52d1 · 17f52d1
1 parent ecb50be
commit 17f52d1
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 32 deletions.
diff --git a/src/ColumnsBlock/ColumnsBlockEdit.jsx b/src/ColumnsBlock/ColumnsBlockEdit.jsx
@@ -1,18 +1,20 @@
 import React from 'react';
 import { Grid } from 'semantic-ui-react';
 import { isEmpty } from 'lodash';
-import { Icon, SidebarPortal, InlineForm } from '@plone/volto/components'; // BlocksForm
+import { SidebarPortal, 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 { 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 { blocks } from '~/config';
-import { COLUMNSBLOCK } from '@eeacms/volto-columns-block/constants';
 import EditBlockWrapper from './EditBlockWrapper';
 
-import dragSVG from '@plone/volto/icons/drag.svg';
+// import dragSVG from '@plone/volto/icons/drag.svg';
 // import dotsSVG from '@plone/volto/icons/drag.svg';
 
 import './styles.less';
@@ -21,7 +23,9 @@ class ColumnsBlockEdit extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      colSelections: {},
+      colSelections: {}, // selected block for each column
+      showSidebar: false,
+      activeColumn: null,
     };
 
     // This special variable is needed because of the onChangeField(block...) is
@@ -44,7 +48,7 @@ class ColumnsBlockEdit extends React.Component {
     // blockState trick to overcome this. If there would be a onChangeBlocks or
     // onChangeFormData in Volto core, then BlocksForm could match that API
     // and this wouldn't be needed (together with the unstable_batchedUpdates
-    // calls.
+    // calls).
     this.blocksState = {};
   }
 
@@ -92,7 +96,20 @@ class ColumnsBlockEdit extends React.Component {
                   <div className="column-header"></div>
                   <BlocksForm
                     properties={isEmpty(column) ? emptyBlocksForm() : column}
-                    blockWrapper={EditBlockWrapper}
+                    blockWrapper={(props) => (
+                      <EditBlockWrapper
+                        key={colId}
+                        {...props}
+                        onShowColumnSettings={() => {
+                          setSidebarTab(1);
+                          this.setState({
+                            showSidebar: true,
+                            activeColumn: colId,
+                            colSelections: {},
+                          });
+                        }}
+                      />
+                    )}
                     selectedBlock={
                       selected ? this.state.colSelections[colId] : null
                     }
@@ -144,30 +161,33 @@ class ColumnsBlockEdit extends React.Component {
             })}
           </Grid>
         </div>
-        <SidebarPortal selected={selected}>
-          <InlineForm
-            schema={ColumnsBlockSchema}
-            title={ColumnsBlockSchema.title}
-            onChangeField={(id, value) => {
-              onChangeBlock(block, {
-                ...data,
-                [id]: value,
-              });
-            }}
-            formData={data}
-          />
-        </SidebarPortal>
+        {Object.keys(this.state.colSelections).length === 0 && (
+          <SidebarPortal selected={selected}>
+            {this.state.activeColumn ? (
+              <div>{this.state.activeColumn}</div>
+            ) : (
+              <InlineForm
+                schema={ColumnsBlockSchema}
+                title={ColumnsBlockSchema.title}
+                onChangeField={(id, value) => {
+                  onChangeBlock(block, {
+                    ...data,
+                    [id]: value,
+                  });
+                }}
+                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> */ }
+export default connect(
+  (state, props) => {
+    return {};
+  },
+  { setSidebarTab },
+)(ColumnsBlockEdit);
diff --git a/src/ColumnsBlock/EditBlockWrapper.jsx b/src/ColumnsBlock/EditBlockWrapper.jsx
@@ -8,6 +8,8 @@ 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';
@@ -67,7 +69,9 @@ class EditBlockWrapper extends React.Component {
       onDeleteBlock,
       onMutateBlock,
       selected,
+      onShowColumnSettings,
     } = this.props;
+    console.log('draginfo', draginfo);
     const type = block['@type'];
     const { disableNewBlocks } = block;
 
@@ -81,10 +85,19 @@ class EditBlockWrapper extends React.Component {
     return (
       <div ref={this.blockNode}>
         <div
-          ref={draginfo.innerRef}
-          {...draginfo.draggableProps}
+          ref={draginfo?.innerRef}
+          {...(selected ? draginfo?.draggableProps : null)}
           className={`block-editor-${block['@type']}`}
         >
+          {!selected && (
+            <div
+              style={{
+                display: 'none',
+                // keep react-beautiful-dnd happy
+              }}
+              {...draginfo.dragHandleProps}
+            ></div>
+          )}
           {selected && (
             <div className="block-toolbar">
               <div
@@ -99,6 +112,15 @@ class EditBlockWrapper extends React.Component {
                 </Button>
               </div>
 
+              <Button
+                icon
+                basic
+                onClick={onShowColumnSettings}
+                className="column-block-add-button"
+              >
+                <Icon name={tuneSVG} className="" size="18px" />
+              </Button>
+
               {!disableNewBlocks && !blockHasValue(block) && (
                 <Button
                   icon

diff --git a/src/ColumnsBlock/styles.less b/src/ColumnsBlock/styles.less
@@ -3,7 +3,7 @@
     padding: 0.3em;
 
     .column-header {
-      width: 80%;
+      width: 100%;
       text-align: center;
       border-bottom: 6px solid #eaeaea;
       margin: 0.3em auto 0.8em auto;