Breaking: Rename coldata - data, columns - blocks, columns_layout - b…

…locks_layout
eea · Oct 7, 2020 · e5a47a5 · e5a47a5
1 parent 8267b27
commit e5a47a5
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 58 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-columns-block",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "volto-columns-block: Volto add-on",
   "main": "src/index.js",
   "repository": "https://github.com/eea/volto-columns-block",

diff --git a/src/ColumnsBlock/ColumnsBlockEdit.jsx b/src/ColumnsBlock/ColumnsBlockEdit.jsx
@@ -18,7 +18,6 @@ import EditBlockWrapper from './EditBlockWrapper';
 import { COLUMNSBLOCK } from '@eeacms/volto-columns-block/constants';
 import { variants } from '@eeacms/volto-columns-block/grid';
 import { makeStyleSchema, getStyle } from '@eeacms/volto-columns-block/Styles';
-import { settings } from '~/config';
 
 import tuneSVG from '@plone/volto/icons/tune.svg';
 import upSVG from '@plone/volto/icons/up.svg';
@@ -70,25 +69,25 @@ class ColumnsBlockEdit extends React.Component {
   createFrom = (initialData) => {
     const { gridCols, gridSize } = initialData;
     return {
-      coldata: empty(gridCols.length),
+      data: empty(gridCols.length),
       gridSize,
       gridCols,
     };
   };
 
   onChangeColumnSettings = (id, value) => {
     const { data, onChangeBlock, block } = this.props;
-    const { coldata } = data;
+    const coldata = data.data;
     const formData = {
       ...data,
-      coldata: {
+      data: {
         ...coldata,
-        columns: {
-          ...coldata.columns,
+        blocks: {
+          ...coldata.blocks,
           [this.state.activeColumn]: {
-            ...coldata.columns?.[this.state.activeColumn],
+            ...coldata.blocks?.[this.state.activeColumn],
             settings: {
-              ...coldata.columns?.[this.state.activeColumn]?.settings,
+              ...coldata.blocks?.[this.state.activeColumn]?.settings,
               [id]: value,
             },
           },
@@ -100,18 +99,18 @@ class ColumnsBlockEdit extends React.Component {
 
   onChangeColumnData = (id, value, colId) => {
     const { data, onChangeBlock, block, onChangeField } = this.props;
-    const { coldata } = data;
+    const coldata = data.data;
     // special handling of blocks and blocks_layout
     if (['blocks', 'blocks_layout'].indexOf(id) > -1) {
       this.blocksState[id] = value;
       onChangeBlock(block, {
         ...data,
-        coldata: {
+        data: {
           ...coldata,
-          columns: {
-            ...coldata.columns,
+          blocks: {
+            ...coldata.blocks,
             [colId]: {
-              ...coldata.columns?.[colId],
+              ...coldata.blocks?.[colId],
               ...this.blocksState,
             },
           },
@@ -137,17 +136,11 @@ class ColumnsBlockEdit extends React.Component {
   };
 
   render() {
-    const {
-      block,
-      data,
-      onChangeBlock,
-      pathname,
-      selected,
-      index,
-    } = this.props;
+    const { block, data, onChangeBlock, pathname, selected } = this.props;
 
     const metadata = this.props.metadata || this.props.properties;
-    const { coldata, gridCols, gridSize } = data;
+    const { gridCols, gridSize } = data;
+    const coldata = data.data;
     const columnList = getColumns(coldata);
 
     const { gridSizes, variants, available_colors } = blocks.blocksConfig[
@@ -182,9 +175,7 @@ class ColumnsBlockEdit extends React.Component {
                 className="block-column"
                 key={colId}
                 {...(gridSizes[gridCols[index]] || gridCols[index])}
-                style={getStyle(
-                  data?.coldata?.columns?.[colId]?.settings || {},
-                )}
+                style={getStyle(data?.data?.blocks?.[colId]?.settings || {})}
               >
                 <div className="column-header"></div>
                 <BlocksForm
@@ -205,10 +196,10 @@ class ColumnsBlockEdit extends React.Component {
                   onChangeFormData={(newFormData) => {
                     onChangeBlock(block, {
                       ...data,
-                      coldata: {
+                      data: {
                         ...coldata,
-                        columns: {
-                          ...coldata.columns,
+                        blocks: {
+                          ...coldata.blocks,
                           [colId]: newFormData,
                         },
                       },
@@ -271,8 +262,8 @@ class ColumnsBlockEdit extends React.Component {
                   }`}
                   onChangeField={this.onChangeColumnSettings}
                   formData={
-                    data?.coldata?.columns?.[this.state.activeColumn]
-                      ?.settings || {}
+                    data?.data?.blocks?.[this.state.activeColumn]?.settings ||
+                    {}
                   }
                 />
               </>

diff --git a/src/ColumnsBlock/ColumnsBlockView.jsx b/src/ColumnsBlock/ColumnsBlockView.jsx
@@ -10,13 +10,13 @@ import { getStyle } from '@eeacms/volto-columns-block/Styles';
 const ColumnsBlockView = (props) => {
   const { gridSizes } = blocks.blocksConfig[COLUMNSBLOCK];
   const {
-    coldata = {},
+    data = {},
     gridSize = 12,
     gridCols = [],
     block_title,
   } = props.data;
   const metadata = props.metadata || props.properties;
-  const columnList = getColumns(coldata);
+  const columnList = getColumns(data);
   return (
     <div className="columns-view">
       {block_title ? <h3>{block_title}</h3> : ''}

diff --git a/src/ColumnsBlock/schema.js b/src/ColumnsBlock/schema.js
@@ -21,15 +21,15 @@ export const ColumnsBlockSchema = () => ({
     {
       id: 'default',
       title: 'Default',
-      fields: ['coldata', 'gridCols'], //  'nrColumns', 'block_title'
+      fields: ['data', 'gridCols'], //  'nrColumns', 'block_title'
     },
   ],
   properties: {
     block_title: {
       title: 'Block title',
       default: 'Columns',
     },
-    coldata: {
+    data: {
       title: 'Columns',
       type: 'columns',
       schema: ColumnSchema,

diff --git a/src/ColumnsBlock/utils.js b/src/ColumnsBlock/utils.js
@@ -1,25 +1,25 @@
 import { v4 as uuid } from 'uuid';
 import { emptyBlocksForm } from '@eeacms/volto-blocks-form/helpers';
 
-export const getColumns = (coldata) => {
-  return (coldata?.columns_layout?.items || []).map((id) => [
+export const getColumns = (data) => {
+  return (data?.blocks_layout?.items || []).map((id) => [
     id,
-    coldata.columns?.[id],
+    data.blocks?.[id],
   ]);
 };
 
 export const empty = (count) => {
-  const columns = {};
+  const blocks = {};
   const items = [];
   for (let x = 0; x < count; x++) {
     const id = uuid();
-    columns[id] = emptyBlocksForm();
+    blocks[id] = emptyBlocksForm();
     items.push(id);
   }
 
   return {
-    columns,
-    columns_layout: {
+    blocks,
+    blocks_layout: {
       items,
     },
   };

diff --git a/src/Widgets/ColumnsWidget.jsx b/src/Widgets/ColumnsWidget.jsx
@@ -13,8 +13,8 @@ import plusSVG from '@plone/volto/icons/circle-plus.svg';
 export function moveColumn(formData, source, destination) {
   return {
     ...formData,
-    columns_layout: {
-      items: move(formData.columns_layout?.items, source, destination),
+    blocks_layout: {
+      items: move(formData.blocks_layout?.items, source, destination),
     },
   };
 }
@@ -25,13 +25,13 @@ const empty = () => {
 
 const ColumnsWidget = (props) => {
   const { value = {}, id, onChange, maxSize = 4 } = props;
-  const { columns = {} } = value;
-  const columnsList = (value.columns_layout?.items || []).map((id) => [
+  const { blocks = {} } = value;
+  const columnsList = (value.blocks_layout?.items || []).map((id) => [
     id,
-    columns[id],
+    blocks[id],
   ]);
 
-  const showAdd = value.columns_layout?.items?.length < maxSize;
+  const showAdd = value.blocks_layout?.items?.length < maxSize;
   return (
     <FormFieldWrapper
       {...props}
@@ -72,16 +72,16 @@ const ColumnsWidget = (props) => {
                   </div>
                   <div className="column-area">
                     <div className="label">Column {index}</div>
-                    {value.columns_layout?.items?.length > 1 ? (
+                    {value.blocks_layout?.items?.length > 1 ? (
                       <button
                         onClick={() => {
                           const newFormData = {
                             ...value,
-                            columns: omit({ ...value.columns }, [childId]),
-                            columns_layout: {
-                              ...value.columns_layout,
+                            blocks: omit({ ...value.blocks }, [childId]),
+                            blocks_layout: {
+                              ...value.blocks_layout,
                               items: without(
-                                [...value.columns_layout?.items],
+                                [...value.blocks_layout?.items],
                                 childId,
                               ),
                             },
@@ -106,13 +106,13 @@ const ColumnsWidget = (props) => {
               const [newId, newData] = empty();
               onChange(id, {
                 ...value,
-                columns: {
-                  ...value.columns,
+                blocks: {
+                  ...value.blocks,
                   [newId]: newData,
                 },
-                columns_layout: {
-                  ...value.columns_layout,
-                  items: [...value.columns_layout?.items, newId],
+                blocks_layout: {
+                  ...value.blocks_layout,
+                  items: [...value.blocks_layout?.items, newId],
                 },
               });
             }}