self-hosted/focalboard
1
0
Fork 0
mirror of https://github.com/mattermost/focalboard.git synced 2025-01-05 14:50:29 +02:00
Code Issues Releases Activity

Migrating contentBlock to functional component

Browse Source
This commit is contained in:
Jesús Espino 2021-03-31 12:32:52 +02:00
parent 3bf1b574bc
commit ccba85bf27
1 changed files with 67 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

136
webapp/src/components/contentBlock.tsx
View File

@ -30,79 +30,77 @@ type Props = {
intl: IntlShape
}
class ContentBlock extends React.PureComponent<Props> {
public render(): JSX.Element | null {
const {intl, card, contents, block, readonly} = this.props
const ContentBlock = React.memo((props: Props): JSX.Element => {
const {intl, card, contents, block, readonly} = props
const index = contents.indexOf(block)
return (
<div className='ContentBlock octo-block'>
<div className='octo-block-margin'>
{!this.props.readonly &&
<MenuWrapper>
<IconButton icon={<OptionsIcon/>}/>
<Menu>
{index > 0 &&
<Menu.Text
id='moveUp'
name={intl.formatMessage({id: 'ContentBlock.moveUp', defaultMessage: 'Move up'})}
icon={<SortUpIcon/>}
onClick={() => {
const contentOrder = contents.map((o) => o.id)
Utils.arrayMove(contentOrder, index, index - 1)
mutator.changeCardContentOrder(card, contentOrder)
}}
/>}
{index < (contents.length - 1) &&
<Menu.Text
id='moveDown'
name={intl.formatMessage({id: 'ContentBlock.moveDown', defaultMessage: 'Move down'})}
icon={<SortDownIcon/>}
onClick={() => {
const contentOrder = contents.map((o) => o.id)
Utils.arrayMove(contentOrder, index, index + 1)
mutator.changeCardContentOrder(card, contentOrder)
}}
/>}
<Menu.SubMenu
id='insertAbove'
name={intl.formatMessage({id: 'ContentBlock.insertAbove', defaultMessage: 'Insert above'})}
icon={<AddIcon/>}
>
{contentRegistry.contentTypes.map((type) => (
<AddContentMenuItem
key={type}
type={type}
block={block}
card={card}
contents={contents}
/>
))}
</Menu.SubMenu>
const index = contents.indexOf(block)
return (
<div className='ContentBlock octo-block'>
<div className='octo-block-margin'>
{!props.readonly &&
<MenuWrapper>
<IconButton icon={<OptionsIcon/>}/>
<Menu>
{index > 0 &&
<Menu.Text
icon={<DeleteIcon/>}
id='delete'
name={intl.formatMessage({id: 'ContentBlock.Delete', defaultMessage: 'Delete'})}
id='moveUp'
name={intl.formatMessage({id: 'ContentBlock.moveUp', defaultMessage: 'Move up'})}
icon={<SortUpIcon/>}
onClick={() => {
const description = intl.formatMessage({id: 'ContentBlock.DeleteAction', defaultMessage: 'delete'})
const contentOrder = contents.map((o) => o.id).filter((o) => o !== block.id)
mutator.performAsUndoGroup(async () => {
await mutator.deleteBlock(block, description)
await mutator.changeCardContentOrder(card, contentOrder, description)
})
const contentOrder = contents.map((o) => o.id)
Utils.arrayMove(contentOrder, index, index - 1)
mutator.changeCardContentOrder(card, contentOrder)
}}
/>
</Menu>
</MenuWrapper>
}
</div>
<ContentElement
block={block}
readonly={readonly}
/>
/>}
{index < (contents.length - 1) &&
<Menu.Text
id='moveDown'
name={intl.formatMessage({id: 'ContentBlock.moveDown', defaultMessage: 'Move down'})}
icon={<SortDownIcon/>}
onClick={() => {
const contentOrder = contents.map((o) => o.id)
Utils.arrayMove(contentOrder, index, index + 1)
mutator.changeCardContentOrder(card, contentOrder)
}}
/>}
<Menu.SubMenu
id='insertAbove'
name={intl.formatMessage({id: 'ContentBlock.insertAbove', defaultMessage: 'Insert above'})}
icon={<AddIcon/>}
>
{contentRegistry.contentTypes.map((type) => (
<AddContentMenuItem
key={type}
type={type}
block={block}
card={card}
contents={contents}
/>
))}
</Menu.SubMenu>
<Menu.Text
icon={<DeleteIcon/>}
id='delete'
name={intl.formatMessage({id: 'ContentBlock.Delete', defaultMessage: 'Delete'})}
onClick={() => {
const description = intl.formatMessage({id: 'ContentBlock.DeleteAction', defaultMessage: 'delete'})
const contentOrder = contents.map((o) => o.id).filter((o) => o !== block.id)
mutator.performAsUndoGroup(async () => {
await mutator.deleteBlock(block, description)
await mutator.changeCardContentOrder(card, contentOrder, description)
})
}}
/>
</Menu>
</MenuWrapper>
}
</div>
)
}
}
<ContentElement
block={block}
readonly={readonly}
/>
</div>
)
})
export default injectIntl(ContentBlock)