From e5a47a5230ed0168f363b3eb6c0fec6d6379ca76 Mon Sep 17 00:00:00 2001 From: Alin Voinea Date: Wed, 7 Oct 2020 19:16:46 +0300 Subject: [PATCH] Breaking: Rename coldata - data, columns - blocks, columns_layout - blocks_layout --- package.json | 2 +- src/ColumnsBlock/ColumnsBlockEdit.jsx | 51 +++++++++++---------------- src/ColumnsBlock/ColumnsBlockView.jsx | 4 +-- src/ColumnsBlock/schema.js | 4 +-- src/ColumnsBlock/utils.js | 14 ++++---- src/Widgets/ColumnsWidget.jsx | 32 ++++++++--------- 6 files changed, 49 insertions(+), 58 deletions(-) diff --git a/package.json b/package.json index a717f13..4160ea5 100644 --- 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 index 47ebc70..69dc8b1 100644 --- 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,7 +69,7 @@ class ColumnsBlockEdit extends React.Component { createFrom = (initialData) => { const { gridCols, gridSize } = initialData; return { - coldata: empty(gridCols.length), + data: empty(gridCols.length), gridSize, gridCols, }; @@ -78,17 +77,17 @@ class ColumnsBlockEdit extends React.Component { 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 || {})} >
{ 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 index c3f7eab..26a56d2 100644 --- 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 (
{block_title ?

{block_title}

: ''} diff --git a/src/ColumnsBlock/schema.js b/src/ColumnsBlock/schema.js index 1a4b6df..d47144b 100644 --- a/src/ColumnsBlock/schema.js +++ b/src/ColumnsBlock/schema.js @@ -21,7 +21,7 @@ export const ColumnsBlockSchema = () => ({ { id: 'default', title: 'Default', - fields: ['coldata', 'gridCols'], // 'nrColumns', 'block_title' + fields: ['data', 'gridCols'], // 'nrColumns', 'block_title' }, ], properties: { @@ -29,7 +29,7 @@ export const ColumnsBlockSchema = () => ({ 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 index aafc975..3cc494d 100644 --- 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 index a688555..72d07cd 100644 --- 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 ( {
Column {index}
- {value.columns_layout?.items?.length > 1 ? ( + {value.blocks_layout?.items?.length > 1 ? (