generated from eea/volto-addon-template
-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Rewrite ColumnsBlockEdit as class; solve slate block creation issue
- Loading branch information
1 parent
d57e2c1
commit 5d3726b
Showing
1 changed file
with
97 additions
and
80 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |