From d981c6b59c669712d60feb9cfb04022e228ac001 Mon Sep 17 00:00:00 2001 From: nileshgulia1 Date: Fri, 24 Feb 2023 15:40:39 +0530 Subject: [PATCH 1/2] feature: add variations support --- src/components/index.js | 1 + src/components/manage/Blocks/Group/Body.jsx | 17 +++ .../manage/Blocks/Group/DefaultBody.jsx | 101 +++++++++++++++ src/components/manage/Blocks/Group/Edit.jsx | 117 ++++-------------- src/components/manage/Blocks/Group/View.jsx | 9 +- src/index.js | 15 ++- 6 files changed, 161 insertions(+), 99 deletions(-) create mode 100644 src/components/manage/Blocks/Group/Body.jsx create mode 100644 src/components/manage/Blocks/Group/DefaultBody.jsx diff --git a/src/components/index.js b/src/components/index.js index d3fc1c1..ebbd6d1 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -1,3 +1,4 @@ export GroupBlockEdit from './manage/Blocks/Group/Edit'; export GroupBlockView from './manage/Blocks/Group/View'; export GroupBlockLayout from './manage/Blocks/Group/LayoutSchema'; +export GroupBlockDefaultBody from './manage/Blocks/Group/DefaultBody'; diff --git a/src/components/manage/Blocks/Group/Body.jsx b/src/components/manage/Blocks/Group/Body.jsx new file mode 100644 index 0000000..58f405f --- /dev/null +++ b/src/components/manage/Blocks/Group/Body.jsx @@ -0,0 +1,17 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { GroupBlockDefaultBody } from '@eeacms/volto-group-block/components'; + +const Body = (props) => { + const { variation } = props; + + const BodyComponent = variation?.template || GroupBlockDefaultBody; + + return ; +}; + +Body.propTypes = { + variation: PropTypes.objectOf(PropTypes.any).isRequired, +}; + +export default Body; diff --git a/src/components/manage/Blocks/Group/DefaultBody.jsx b/src/components/manage/Blocks/Group/DefaultBody.jsx new file mode 100644 index 0000000..a2040cf --- /dev/null +++ b/src/components/manage/Blocks/Group/DefaultBody.jsx @@ -0,0 +1,101 @@ +import { Button } from 'semantic-ui-react'; +import { isEmpty } from 'lodash'; +import { BlocksForm, Icon, RenderBlocks } from '@plone/volto/components'; +import { emptyBlocksForm } from '@plone/volto/helpers'; +import EditBlockWrapper from './EditBlockWrapper'; + +import helpSVG from '@plone/volto/icons/help.svg'; + +const GroupBlockDefaultBody = (props) => { + const { + block, + data, + onChangeBlock, + onChangeField, + pathname, + selected, + selectedBlock, + setSelectedBlock, + manage, + childBlocksForm, + formDescription, + isEditMode, + } = props; + const metadata = props.metadata || props.properties; + const blockState = {}; + + // Get editing instructions from block settings or props + let instructions = data?.instructions?.data || data?.instructions; + if (!instructions || instructions === '


') { + instructions = formDescription; + } + return isEditMode ? ( + { + setSelectedBlock(id); + }} + onChangeFormData={(newFormData) => { + onChangeBlock(block, { + ...data, + data: newFormData, + }); + }} + onChangeField={(id, value) => { + if (['blocks', 'blocks_layout'].indexOf(id) > -1) { + blockState[id] = value; + onChangeBlock(block, { + ...data, + data: { + ...data.data, + ...blockState, + }, + }); + } else { + onChangeField(id, value); + } + }} + pathname={pathname} + > + {({ draginfo }, editBlock, blockProps) => ( + + {instructions && ( + <> + + + )} + + } + > + {editBlock} + + )} + + ) : ( + + ); +}; + +export default GroupBlockDefaultBody; diff --git a/src/components/manage/Blocks/Group/Edit.jsx b/src/components/manage/Blocks/Group/Edit.jsx index 9af7dd3..e9ce0f0 100644 --- a/src/components/manage/Blocks/Group/Edit.jsx +++ b/src/components/manage/Blocks/Group/Edit.jsx @@ -1,56 +1,40 @@ import React, { useState } from 'react'; import { isEmpty } from 'lodash'; -import { - BlocksForm, - SidebarPortal, - Icon, - BlockDataForm, -} from '@plone/volto/components'; -import { emptyBlocksForm } from '@plone/volto/helpers'; +import { SidebarPortal, Icon, BlockDataForm } from '@plone/volto/components'; + +import { emptyBlocksForm, withBlockExtensions } from '@plone/volto/helpers'; +import BodyComponent from './Body'; import delightedSVG from '@plone/volto/icons/delighted.svg'; import dissatisfiedSVG from '@plone/volto/icons/dissatisfied.svg'; import PropTypes from 'prop-types'; -import { Button, Segment } from 'semantic-ui-react'; -import EditBlockWrapper from './EditBlockWrapper'; +import { Segment } from 'semantic-ui-react'; import EditSchema from './EditSchema'; -import helpSVG from '@plone/volto/icons/help.svg'; + import cx from 'classnames'; import './editor.less'; const Edit = (props) => { - const { - block, - data, - onChangeBlock, - onChangeField, - pathname, - selected, - manage, - formDescription, - } = props; - - const metadata = props.metadata || props.properties; + const { block, data, onChangeBlock, selected, formDescription } = props; const data_blocks = data?.data?.blocks; - const properties = isEmpty(data_blocks) ? emptyBlocksForm() : data.data; + const childBlocksForm = isEmpty(data_blocks) ? emptyBlocksForm() : data.data; const [selectedBlock, setSelectedBlock] = useState( - properties.blocks_layout.items[0], + childBlocksForm.blocks_layout.items[0], ); React.useEffect(() => { if ( isEmpty(data_blocks) && - properties.blocks_layout.items[0] !== selectedBlock + childBlocksForm.blocks_layout.items[0] !== selectedBlock ) { - setSelectedBlock(properties.blocks_layout.items[0]); + setSelectedBlock(childBlocksForm.blocks_layout.items[0]); onChangeBlock(block, { ...data, - data: properties, + data: childBlocksForm, }); } - }, [onChangeBlock, properties, selectedBlock, block, data, data_blocks]); + }, [onChangeBlock, childBlocksForm, selectedBlock, block, data, data_blocks]); - const blockState = {}; let charCount = 0; /** @@ -165,70 +149,13 @@ const Edit = (props) => { > {data.title || 'Section'} - { - setSelectedBlock(id); - }} - onChangeFormData={(newFormData) => { - onChangeBlock(block, { - ...data, - data: newFormData, - }); - }} - onChangeField={(id, value) => { - if (['blocks', 'blocks_layout'].indexOf(id) > -1) { - blockState[id] = value; - onChangeBlock(block, { - ...data, - data: { - ...data.data, - ...blockState, - }, - }); - } else { - onChangeField(id, value); - } - }} - pathname={pathname} - > - {({ draginfo }, editBlock, blockProps) => ( - - {instructions && ( - <> - - - )} - - } - > - {editBlock} - - )} - - + {counterComponent} {instructions && ( @@ -247,6 +174,8 @@ const Edit = (props) => { [id]: value, }); }} + onChangeBlock={onChangeBlock} + block={block} /> )} @@ -263,4 +192,4 @@ Edit.propTypes = { manage: PropTypes.bool.isRequired, }; -export default Edit; +export default withBlockExtensions(Edit); diff --git a/src/components/manage/Blocks/Group/View.jsx b/src/components/manage/Blocks/Group/View.jsx index 1c0cd40..f296904 100644 --- a/src/components/manage/Blocks/Group/View.jsx +++ b/src/components/manage/Blocks/Group/View.jsx @@ -1,9 +1,10 @@ import React from 'react'; -import { RenderBlocks } from '@plone/volto/components'; +//import { RenderBlocks } from '@plone/volto/components'; +import { withBlockExtensions } from '@plone/volto/helpers'; +import BodyComponent from './Body'; const View = (props) => { const { data } = props; - const metadata = props.metadata || props.properties; const CustomTag = `${data.as || 'div'}`; const customId = data?.title ?.toLowerCase() @@ -12,9 +13,9 @@ const View = (props) => { ?.replace(/\s+/gi, '-'); return ( - + ); }; -export default View; +export default withBlockExtensions(View); diff --git a/src/index.js b/src/index.js index 6289aec..57ac900 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,10 @@ import codeSVG from '@plone/volto/icons/row.svg'; -import { GroupBlockEdit, GroupBlockView, GroupBlockLayout } from './components'; +import { + GroupBlockEdit, + GroupBlockView, + GroupBlockLayout, + GroupBlockDefaultBody, +} from './components'; const applyConfig = (config) => { const choices = Object.keys(config.blocks.blocksConfig) @@ -43,6 +48,14 @@ const applyConfig = (config) => { addPermission: [], view: [], }, + variations: [ + { + id: 'default', + isDefault: true, + title: 'Default', + template: GroupBlockDefaultBody, + }, + ], }; return config; From cfdf2e900bcc456fa5a24ce7b03859170ad024ba Mon Sep 17 00:00:00 2001 From: nileshgulia1 Date: Fri, 10 Mar 2023 12:12:14 +0530 Subject: [PATCH 2/2] fix eslint warnings --- src/components/manage/Blocks/Group/DefaultBody.jsx | 2 -- src/components/manage/Blocks/Group/View.jsx | 1 - 2 files changed, 3 deletions(-) diff --git a/src/components/manage/Blocks/Group/DefaultBody.jsx b/src/components/manage/Blocks/Group/DefaultBody.jsx index a2040cf..8941eb3 100644 --- a/src/components/manage/Blocks/Group/DefaultBody.jsx +++ b/src/components/manage/Blocks/Group/DefaultBody.jsx @@ -1,7 +1,5 @@ import { Button } from 'semantic-ui-react'; -import { isEmpty } from 'lodash'; import { BlocksForm, Icon, RenderBlocks } from '@plone/volto/components'; -import { emptyBlocksForm } from '@plone/volto/helpers'; import EditBlockWrapper from './EditBlockWrapper'; import helpSVG from '@plone/volto/icons/help.svg'; diff --git a/src/components/manage/Blocks/Group/View.jsx b/src/components/manage/Blocks/Group/View.jsx index f296904..c46d970 100644 --- a/src/components/manage/Blocks/Group/View.jsx +++ b/src/components/manage/Blocks/Group/View.jsx @@ -1,5 +1,4 @@ import React from 'react'; -//import { RenderBlocks } from '@plone/volto/components'; import { withBlockExtensions } from '@plone/volto/helpers'; import BodyComponent from './Body';