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