From 52f0324b36b020e1e897ecf1be26a1e8e99339a0 Mon Sep 17 00:00:00 2001
From: Alin Voinea <contact@avoinea.com>
Date: Thu, 3 Dec 2020 16:12:14 +0200
Subject: [PATCH] Add support for DX Cpanel Layout

---
 src/ColumnsBlock/ColumnsBlockEdit.jsx   | 48 +++++++++++------
 src/ColumnsBlock/ColumnsLayoutSchema.js | 69 +++++++++++++++++++++++++
 src/ColumnsBlock/EditBlockWrapper.jsx   |  6 +--
 src/ColumnsBlock/index.js               |  1 +
 src/ColumnsBlock/styles.less            |  7 ++-
 src/index.js                            | 36 ++++++++++++-
 6 files changed, 144 insertions(+), 23 deletions(-)
 create mode 100644 src/ColumnsBlock/ColumnsLayoutSchema.js

diff --git a/src/ColumnsBlock/ColumnsBlockEdit.jsx b/src/ColumnsBlock/ColumnsBlockEdit.jsx
index 2769026..6927c0c 100644
--- a/src/ColumnsBlock/ColumnsBlockEdit.jsx
+++ b/src/ColumnsBlock/ColumnsBlockEdit.jsx
@@ -187,7 +187,14 @@ class ColumnsBlockEdit extends React.Component {
   }
 
   render() {
-    const { block, data, onChangeBlock, pathname, selected } = this.props;
+    const {
+      block,
+      data,
+      onChangeBlock,
+      pathname,
+      selected,
+      manage,
+    } = this.props;
 
     const metadata = this.props.metadata || this.props.properties;
     const { gridCols, gridSize } = data;
@@ -232,6 +239,10 @@ class ColumnsBlockEdit extends React.Component {
                 <div className="column-header"></div>
                 <BlocksForm
                   key={colId}
+                  title={data?.placeholder}
+                  description={data?.instructions?.data}
+                  manage={manage}
+                  allowedBlocks={data?.allowedBlocks}
                   metadata={metadata}
                   properties={isEmpty(column) ? emptyBlocksForm() : column}
                   selectedBlock={
@@ -268,21 +279,23 @@ class ColumnsBlockEdit extends React.Component {
                       blockProps={blockProps}
                       extraControls={
                         <>
-                          <Button
-                            icon
-                            basic
-                            title="Edit column"
-                            onClick={() => {
-                              this.setState({
-                                showSidebar: true,
-                                activeColumn: colId,
-                                colSelections: {},
-                              });
-                              this.props.setSidebarTab(1);
-                            }}
-                          >
-                            <Icon name={tuneSVG} className="" size="19px" />
-                          </Button>
+                          {!data?.readOnlySettings && (
+                            <Button
+                              icon
+                              basic
+                              title="Edit column"
+                              onClick={() => {
+                                this.setState({
+                                  showSidebar: true,
+                                  activeColumn: colId,
+                                  colSelections: {},
+                                });
+                                this.props.setSidebarTab(1);
+                              }}
+                            >
+                              <Icon name={tuneSVG} className="" size="19px" />
+                            </Button>
+                          )}
                         </>
                       }
                     >
@@ -295,7 +308,8 @@ class ColumnsBlockEdit extends React.Component {
           </Grid>
         )}
 
-        {Object.keys(this.state.colSelections).length === 0 ? (
+        {Object.keys(this.state.colSelections).length === 0 &&
+        !data?.readOnlySettings ? (
           <SidebarPortal selected={true}>
             {this.state.activeColumn ? (
               <>
diff --git a/src/ColumnsBlock/ColumnsLayoutSchema.js b/src/ColumnsBlock/ColumnsLayoutSchema.js
new file mode 100644
index 0000000..9a45466
--- /dev/null
+++ b/src/ColumnsBlock/ColumnsLayoutSchema.js
@@ -0,0 +1,69 @@
+const Schema = {
+  title: 'Columns block settings',
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: [
+        'placeholder',
+        'instructions',
+        'allowedBlocks',
+        'required',
+        'fixed',
+        'disableNewBlocks',
+        'readOnly',
+        'readOnlySettings',
+      ],
+    },
+  ],
+  properties: {
+    allowedBlocks: {
+      title: 'Allowed blocks',
+      description: 'Allow only the following blocks types',
+      type: 'array',
+      items: {
+        choices: [],
+      },
+    },
+    placeholder: {
+      title: 'Helper text',
+      description:
+        'A short hint that describes the expected value within this block',
+      type: 'string',
+    },
+    instructions: {
+      title: 'Instructions',
+      description: 'Detailed expected value within this block',
+      type: 'string',
+      widget: 'richtext',
+    },
+    required: {
+      title: 'Required',
+      description: "Don't allow deletion of this block",
+      type: 'boolean',
+    },
+    fixed: {
+      title: 'Fixed position',
+      description: 'Disable drag & drop on this block',
+      type: 'boolean',
+    },
+    disableNewBlocks: {
+      title: 'Disable new blocks',
+      description: 'Disable creation of new blocks after this block',
+      type: 'boolean',
+    },
+    readOnly: {
+      title: 'Read-only',
+      description: 'Disable editing on this block',
+      type: 'boolean',
+    },
+    readOnlySettings: {
+      title: 'Read-only settings',
+      description: 'Disable editing on columns block settings',
+      type: 'boolean',
+    },
+  },
+  required: [],
+};
+
+export default Schema;
diff --git a/src/ColumnsBlock/EditBlockWrapper.jsx b/src/ColumnsBlock/EditBlockWrapper.jsx
index d319210..f69ce48 100644
--- a/src/ColumnsBlock/EditBlockWrapper.jsx
+++ b/src/ColumnsBlock/EditBlockWrapper.jsx
@@ -70,9 +70,7 @@ class EditBlockWrapper extends React.Component {
     } = blockProps;
     const type = data['@type'];
     const { disableNewBlocks } = data;
-
-    // const visible = selected && blockHasValue(block) && !block.fixed;
-    // visibility: visible ? 'visible' : 'hidden',
+    const visible = !data.fixed;
 
     const required = isBoolean(data.required)
       ? data.required
@@ -98,7 +96,7 @@ class EditBlockWrapper extends React.Component {
             <div className="block-toolbar">
               <div
                 style={{
-                  display: 'inline-block',
+                  display: visible ? 'inline-block' : 'none',
                 }}
                 {...draginfo.dragHandleProps}
                 className="drag handle wrapper-column-block"
diff --git a/src/ColumnsBlock/index.js b/src/ColumnsBlock/index.js
index 0959b48..5de6d6e 100644
--- a/src/ColumnsBlock/index.js
+++ b/src/ColumnsBlock/index.js
@@ -1,2 +1,3 @@
 export ColumnsBlockView from './ColumnsBlockView';
 export ColumnsBlockEdit from './ColumnsBlockEdit';
+export ColumnsLayoutSchema from './ColumnsLayoutSchema';
diff --git a/src/ColumnsBlock/styles.less b/src/ColumnsBlock/styles.less
index 743cb21..4ddbf19 100644
--- a/src/ColumnsBlock/styles.less
+++ b/src/ColumnsBlock/styles.less
@@ -110,7 +110,6 @@
   position: absolute;
   left: 0px;
   display: flex;
-  padding: 3px;
   border: none;
   margin-top: -34px;
   margin-bottom: 8px;
@@ -118,6 +117,12 @@
   border-top-left-radius: 6px;
   border-top-right-radius: 6px;
 
+
+  .ui.basic.button {
+    padding: 3px;
+    padding-right: 0;
+  }
+
   .wrapper-column-block {
     > .ui.basic.button {
       &:hover {
diff --git a/src/index.js b/src/index.js
index f16d79f..439f4e8 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,12 +1,45 @@
 import columnSVG from './ColumnsBlock/icons/three-columns.svg';
 
-import { ColumnsBlockView, ColumnsBlockEdit } from './ColumnsBlock';
+import {
+  ColumnsBlockView,
+  ColumnsBlockEdit,
+  ColumnsLayoutSchema,
+} from './ColumnsBlock';
 import { ColumnsWidget, LayoutSelectWidget } from './Widgets';
 import ColorPickerWidget from './Widgets/SimpleColorPickerWidget.jsx';
 import { gridSizes, variants } from './grid';
 import { COLUMNSBLOCK } from './constants';
 import { cloneColumnsBlockData } from './utils';
 
+const extendedSchema = (config) => {
+  const choices = Object.keys(config.blocks.blocksConfig)
+    .map((key) => {
+      if (config.blocks.blocksConfig[key]?.restricted) {
+        return false;
+      } else {
+        const title = config.blocks.blocksConfig[key]?.title || key;
+        return [key, title];
+      }
+    })
+    .filter((val) => !!val);
+
+  choices.push(['accordion', 'Accordion']);
+
+  return {
+    ...ColumnsLayoutSchema,
+    properties: {
+      ...ColumnsLayoutSchema.properties,
+      allowedBlocks: {
+        ...ColumnsLayoutSchema.properties.allowedBlocks,
+        items: {
+          choices: choices,
+        },
+      },
+    },
+  };
+};
+
+
 export default function install(config) {
   config.blocks.blocksConfig[COLUMNSBLOCK] = {
     id: 'columnsBlock',
@@ -18,6 +51,7 @@ export default function install(config) {
     restricted: false,
     mostUsed: false,
     blockHasOwnFocusManagement: true,
+    schema: extendedSchema(config),
     sidebarTab: 1,
     security: {
       addPermission: [],