From 5d3726bf8908cc25d2695d7c165e57a3bccf267e Mon Sep 17 00:00:00 2001
From: Tiberiu Ichim <tiberiu.ichim@gmail.com>
Date: Mon, 21 Sep 2020 20:35:52 +0300
Subject: [PATCH] Rewrite ColumnsBlockEdit as class; solve slate block creation
 issue

---
 src/ColumnsBlock/ColumnsBlockEdit.jsx | 177 ++++++++++++++------------
 1 file changed, 97 insertions(+), 80 deletions(-)

diff --git a/src/ColumnsBlock/ColumnsBlockEdit.jsx b/src/ColumnsBlock/ColumnsBlockEdit.jsx
index d14ad0d..1bfe096 100644
--- a/src/ColumnsBlock/ColumnsBlockEdit.jsx
+++ b/src/ColumnsBlock/ColumnsBlockEdit.jsx
@@ -1,106 +1,123 @@
 import React from 'react';
 import { Grid } from 'semantic-ui-react';
 import { isEmpty } from 'lodash';
-import { SidebarPortal, InlineForm, BlocksForm } from '@plone/volto/components';
+import { BlocksForm, SidebarPortal, InlineForm } from '@plone/volto/components'; // BlocksForm
 import { emptyBlocksForm } from '@plone/volto/helpers';
 
+// import  from BlocksForm '../futurevolto/BlocksForm';
 import { ColumnsBlockSchema } from './schema';
 import { getColumns, empty } from './utils';
 
 import './styles.less';
 
-const ColumnsBlockEdit = (props) => {
-  const {
-    block,
-    data,
-    onChangeBlock,
-    onChangeField,
-    pathname,
-    selected,
-  } = props;
+class ColumnsBlockEdit extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      colSelections: {},
+    };
+    this.blocksState = {};
+  }
 
-  React.useEffect(() => {
-    if (!data.coldata) {
-      onChangeBlock(block, { ...data, coldata: empty() });
-    }
-  });
+  render() {
+    const {
+      block,
+      data,
+      onChangeBlock,
+      onChangeField,
+      pathname,
+      selected,
+    } = this.props;
 
-  const [colSelections, setColSelections] = React.useState({});
+    // React.useEffect(() => {
+    //   if (!data.coldata) {
+    //     // TODO: this is a hack that causes volto-slate to lose focus
+    //     onChangeBlock(block, { ...data, coldata: empty() });
+    //   }
+    // });
 
-  const { coldata = empty() } = data;
-  const columnList = getColumns(coldata);
+    const { coldata = empty() } = data;
+    const columnList = getColumns(coldata);
 
-  return (
-    <>
-      <div className="columns-block">
-        {/* {<h3>{data.block_title}</h3>} */}
-        <Grid columns={columnList.length}>
-          {columnList.map(([colId, column], index) => {
-            return (
-              <Grid.Column className="block-column" key={colId}>
-                {/* <h4>{`Column ${index}`}</h4> */}
-                <BlocksForm
-                  properties={isEmpty(column) ? emptyBlocksForm() : column}
-                  selectedBlock={selected ? colSelections[colId] : null}
-                  onSelectBlock={(id) =>
-                    setColSelections({
-                      // this invalidates selection in all other columns
-                      [colId]: id,
-                    })
-                  }
-                  onChangeFormData={(newFormData) => {
-                    onChangeBlock(block, {
-                      ...data,
-                      coldata: {
-                        ...coldata,
-                        columns: {
-                          ...coldata.columns,
-                          [colId]: newFormData,
+    return (
+      <>
+        <div className="columns-block">
+          {/* {<h3>{data.block_title}</h3>} */}
+          <Grid columns={columnList.length}>
+            {columnList.map(([colId, column], index) => {
+              return (
+                <Grid.Column className="block-column" key={colId}>
+                  {/* <h4>{`Column ${index}`}</h4> */}
+                  <BlocksForm
+                    properties={isEmpty(column) ? emptyBlocksForm() : column}
+                    selectedBlock={
+                      selected ? this.state.colSelections[colId] : null
+                    }
+                    onSelectBlock={(id) =>
+                      this.setState({
+                        colSelections: {
+                          // this invalidates selection in all other columns
+                          [colId]: id,
                         },
-                      },
-                    });
-                  }}
-                  onChangeField={(id, value) => {
-                    if (['blocks', 'blocks_layout'].indexOf(id) > -1) {
+                      })
+                    }
+                    onChangeFormData={(newFormData) => {
                       onChangeBlock(block, {
                         ...data,
                         coldata: {
                           ...coldata,
                           columns: {
                             ...coldata.columns,
-                            [colId]: {
-                              ...coldata.columns?.[colId],
-                              [id]: value,
-                            },
+                            [colId]: newFormData,
                           },
                         },
                       });
-                    } else {
-                      onChangeField(id, value);
-                    }
-                  }}
-                  pathname={pathname}
-                />
-              </Grid.Column>
-            );
-          })}
-        </Grid>
-      </div>
-      <SidebarPortal selected={selected}>
-        <InlineForm
-          schema={ColumnsBlockSchema}
-          title={ColumnsBlockSchema.title}
-          onChangeField={(id, value) => {
-            onChangeBlock(block, {
-              ...data,
-              [id]: value,
-            });
-          }}
-          formData={data}
-        />
-      </SidebarPortal>
-    </>
-  );
-};
+                    }}
+                    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,
+                                [id]: value,
+                              },
+                            },
+                          },
+                        });
+                      } else {
+                        onChangeField(id, value);
+                      }
+                    }}
+                    pathname={pathname}
+                  />
+                </Grid.Column>
+              );
+            })}
+          </Grid>
+        </div>
+        <SidebarPortal selected={selected}>
+          <InlineForm
+            schema={ColumnsBlockSchema}
+            title={ColumnsBlockSchema.title}
+            onChangeField={(id, value) => {
+              onChangeBlock(block, {
+                ...data,
+                [id]: value,
+              });
+            }}
+            formData={data}
+          />
+        </SidebarPortal>
+      </>
+    );
+  }
+}
 
 export default ColumnsBlockEdit;