From 470676f01f6f783ef7442dbd04e7d083f9f07aa5 Mon Sep 17 00:00:00 2001
From: Tiberiu Ichim <tiberiu.ichim@gmail.com>
Date: Mon, 28 Sep 2020 08:00:52 +0300
Subject: [PATCH] Updates

---
 src/ColumnsBlock/ColumnsBlockEdit.jsx | 101 +++++++++++++-------------
 src/ColumnsBlock/styles.less          |   8 +-
 2 files changed, 55 insertions(+), 54 deletions(-)

diff --git a/src/ColumnsBlock/ColumnsBlockEdit.jsx b/src/ColumnsBlock/ColumnsBlockEdit.jsx
index a0495e4..f00e826 100644
--- a/src/ColumnsBlock/ColumnsBlockEdit.jsx
+++ b/src/ColumnsBlock/ColumnsBlockEdit.jsx
@@ -72,15 +72,54 @@ class ColumnsBlockEdit extends React.Component {
     };
   };
 
+  onChangeColumnSettings = (id, value) => {
+    const { data, onChangeBlock, block } = this.props;
+    const { coldata } = data;
+    const formData = {
+      ...data,
+      coldata: {
+        ...coldata,
+        columns: {
+          ...coldata.columns,
+          [this.state.activeColumn]: {
+            ...coldata.columns?.[this.state.activeColumn],
+            settings: {
+              ...coldata.columns?.[this.state.activeColumn]?.settings,
+              [id]: value,
+            },
+          },
+        },
+      },
+    };
+    onChangeBlock(block, formData);
+  };
+
+  onChangeColumnData = (id, value, colId) => {
+    const { data, onChangeBlock, block, onChangeField } = this.props;
+    const { coldata } = data;
+    // special handling of blocks and blocks_layout
+    if (['blocks', 'blocks_layout'].indexOf(id) > -1) {
+      this.blocksState[id] = value;
+      onChangeBlock(block, {
+        ...data,
+        coldata: {
+          ...coldata,
+          columns: {
+            ...coldata.columns,
+            [colId]: {
+              ...coldata.columns?.[colId],
+              ...this.blocksState,
+            },
+          },
+        },
+      });
+    } else {
+      onChangeField(id, value);
+    }
+  };
+
   render() {
-    const {
-      block,
-      data,
-      onChangeBlock,
-      onChangeField,
-      pathname,
-      selected,
-    } = this.props;
+    const { block, data, onChangeBlock, pathname, selected } = this.props;
 
     const { coldata, gridCols, gridSize } = data;
     const columnList = getColumns(coldata);
@@ -141,27 +180,9 @@ class ColumnsBlockEdit extends React.Component {
                       },
                     });
                   }}
-                  onChangeField={(id, value) => {
-                    // special handling of blocks and blocks_layout
-                    if (['blocks', 'blocks_layout'].indexOf(id) > -1) {
-                      this.blocksState[id] = value;
-                      onChangeBlock(block, {
-                        ...data,
-                        coldata: {
-                          ...coldata,
-                          columns: {
-                            ...coldata.columns,
-                            [colId]: {
-                              ...coldata.columns?.[colId],
-                              ...this.blocksState,
-                            },
-                          },
-                        },
-                      });
-                    } else {
-                      onChangeField(id, value);
-                    }
-                  }}
+                  onChangeField={(id, value) =>
+                    this.onChangeColumnData(id, value, colId)
+                  }
                   pathname={pathname}
                 >
                   {({ draginfo }, editBlock, blockProps) => (
@@ -208,27 +229,7 @@ class ColumnsBlockEdit extends React.Component {
                 <InlineForm
                   schema={ColumnSchema}
                   title="Edit column"
-                  onChangeField={(id, value) => {
-                    const formData = {
-                      ...data,
-                      coldata: {
-                        ...coldata,
-                        columns: {
-                          ...coldata.columns,
-                          [this.state.activeColumn]: {
-                            ...coldata.columns?.[this.state.activeColumn],
-                            settings: {
-                              ...coldata.columns?.[this.state.activeColumn]
-                                ?.settings,
-                              [id]: value,
-                            },
-                          },
-                        },
-                      },
-                    };
-                    console.log('formdata', formData);
-                    onChangeBlock(block, formData);
-                  }}
+                  onChangeField={this.onChangeColumnSettings}
                   formData={
                     data?.coldata?.columns?.[this.state.activeColumn]
                       ?.settings || {}
diff --git a/src/ColumnsBlock/styles.less b/src/ColumnsBlock/styles.less
index 7ba9e21..e32607b 100644
--- a/src/ColumnsBlock/styles.less
+++ b/src/ColumnsBlock/styles.less
@@ -1,9 +1,9 @@
 .columns-block {
   & > .column {
-    padding: 0px;
-    & > .column {
-      padding: 4px !important;
-    }
+    // padding: 4px;
+    // & > .column {
+    //   padding: 4px !important;
+    // }
   }
   .block-column {
     padding: 0.3em;