From 26bd6a5fddd3d21e94510b90fb87b01234a65e92 Mon Sep 17 00:00:00 2001
From: Alin Voinea <contact@avoinea.com>
Date: Wed, 7 Oct 2020 17:26:31 +0300
Subject: [PATCH] Refactor to work with @plone/volto#8.2.0

---
 src/ColumnsBlock/ColumnsBlockEdit.jsx |  5 +-
 src/ColumnsBlock/ColumnsBlockView.jsx |  2 +-
 src/ColumnsBlock/utils.js             |  2 +-
 src/Widgets/ColumnsWidget.jsx         | 89 ++++++++++++++-------------
 4 files changed, 52 insertions(+), 46 deletions(-)

diff --git a/src/ColumnsBlock/ColumnsBlockEdit.jsx b/src/ColumnsBlock/ColumnsBlockEdit.jsx
index 9b8be26..61052b3 100644
--- a/src/ColumnsBlock/ColumnsBlockEdit.jsx
+++ b/src/ColumnsBlock/ColumnsBlockEdit.jsx
@@ -1,8 +1,9 @@
 import React from 'react';
 import { Grid, Segment } from 'semantic-ui-react';
 import { isEmpty } from 'lodash';
-import { SidebarPortal, Icon, InlineForm } from '@plone/volto/components'; // BlocksForm, Icon,
-import { emptyBlocksForm } from '@plone/volto/helpers';
+import { SidebarPortal, Icon } from '@plone/volto/components'; // BlocksForm, Icon,
+import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
+import { emptyBlocksForm } from '@eeacms/volto-blocks-form/helpers';
 import { setSidebarTab } from '@plone/volto/actions';
 import { connect } from 'react-redux';
 import { BlocksForm } from '@eeacms/volto-blocks-form/components';
diff --git a/src/ColumnsBlock/ColumnsBlockView.jsx b/src/ColumnsBlock/ColumnsBlockView.jsx
index fd0a7a7..e0cac0a 100644
--- a/src/ColumnsBlock/ColumnsBlockView.jsx
+++ b/src/ColumnsBlock/ColumnsBlockView.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Grid } from 'semantic-ui-react';
-import { RenderBlocks } from '@plone/volto/components';
+import { RenderBlocks } from '@eeacms/volto-blocks-form/components';
 import { blocks } from '~/config';
 import { COLUMNSBLOCK } from '@eeacms/volto-columns-block/constants';
 
diff --git a/src/ColumnsBlock/utils.js b/src/ColumnsBlock/utils.js
index a97c222..aafc975 100644
--- a/src/ColumnsBlock/utils.js
+++ b/src/ColumnsBlock/utils.js
@@ -1,5 +1,5 @@
 import { v4 as uuid } from 'uuid';
-import { emptyBlocksForm } from '@plone/volto/helpers';
+import { emptyBlocksForm } from '@eeacms/volto-blocks-form/helpers';
 
 export const getColumns = (coldata) => {
   return (coldata?.columns_layout?.items || []).map((id) => [
diff --git a/src/Widgets/ColumnsWidget.jsx b/src/Widgets/ColumnsWidget.jsx
index fde7144..a688555 100644
--- a/src/Widgets/ColumnsWidget.jsx
+++ b/src/Widgets/ColumnsWidget.jsx
@@ -2,8 +2,9 @@ import React from 'react';
 import { v4 as uuid } from 'uuid';
 import { omit, without } from 'lodash';
 import move from 'lodash-move';
-import { DragDropList, Icon, FormFieldWrapper } from '@plone/volto/components';
-import { emptyBlocksForm } from '@plone/volto/helpers';
+import { Icon, FormFieldWrapper } from '@plone/volto/components';
+import { DragDropList } from '@eeacms/volto-blocks-form/components';
+import { emptyBlocksForm } from '@eeacms/volto-blocks-form/helpers';
 
 import dragSVG from '@plone/volto/icons/drag.svg';
 import trashSVG from '@plone/volto/icons/delete.svg';
@@ -53,48 +54,52 @@ const ColumnsWidget = (props) => {
             onChange(id, newFormData);
             return true;
           }}
-          renderChild={(child, childId, index, draginfo) => (
-            <div ref={draginfo.innerRef} {...draginfo.draggableProps}>
-              <div style={{ position: 'relative' }}>
-                <div
-                  style={{
-                    visibility: 'visible',
-                    display: 'inline-block',
-                  }}
-                  {...draginfo.dragHandleProps}
-                  className="drag handle wrapper"
-                >
-                  <Icon name={dragSVG} size="18px" />
-                </div>
-                <div className="column-area">
-                  <div className="label">Column {index}</div>
-                  {value.columns_layout?.items?.length > 1 ? (
-                    <button
-                      onClick={() => {
-                        const newFormData = {
-                          ...value,
-                          columns: omit({ ...value.columns }, [childId]),
-                          columns_layout: {
-                            ...value.columns_layout,
-                            items: without(
-                              [...value.columns_layout?.items],
-                              childId,
-                            ),
-                          },
-                        };
-                        onChange(id, newFormData);
-                      }}
-                    >
-                      <Icon name={trashSVG} size="18px" />
-                    </button>
-                  ) : (
-                    ''
-                  )}
+        >
+          {(dragProps) => {
+            const { childId, index, draginfo } = dragProps;
+            return (
+              <div ref={draginfo.innerRef} {...draginfo.draggableProps}>
+                <div style={{ position: 'relative' }}>
+                  <div
+                    style={{
+                      visibility: 'visible',
+                      display: 'inline-block',
+                    }}
+                    {...draginfo.dragHandleProps}
+                    className="drag handle wrapper"
+                  >
+                    <Icon name={dragSVG} size="18px" />
+                  </div>
+                  <div className="column-area">
+                    <div className="label">Column {index}</div>
+                    {value.columns_layout?.items?.length > 1 ? (
+                      <button
+                        onClick={() => {
+                          const newFormData = {
+                            ...value,
+                            columns: omit({ ...value.columns }, [childId]),
+                            columns_layout: {
+                              ...value.columns_layout,
+                              items: without(
+                                [...value.columns_layout?.items],
+                                childId,
+                              ),
+                            },
+                          };
+                          onChange(id, newFormData);
+                        }}
+                      >
+                        <Icon name={trashSVG} size="18px" />
+                      </button>
+                    ) : (
+                      ''
+                    )}
+                  </div>
                 </div>
               </div>
-            </div>
-          )}
-        />
+            );
+          }}
+        </DragDropList>
         {showAdd ? (
           <button
             onClick={() => {