luisgulo/focalboard
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor ContentBlock, fix order logic.

Browse Source
This commit is contained in:
Chen-I Lim 2020-11-09 13:06:39 -08:00
parent 48e4cfd102
commit 4524a3713e
2 changed files with 19 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
webapp/src/components/cardDetail.tsx
View File

@ -112,7 +112,7 @@ class CardDetail extends React.Component<Props, State> {
key={block.id}
block={block}
cardId={card.id}
cardTree={cardTree}
contents={cardTree.contents}
/>
))}
</div>)
@ -128,7 +128,7 @@ class CardDetail extends React.Component<Props, State> {
const block = new MutableTextBlock()
block.parentId = card.id
block.title = text
block.order = cardTree.contents.length * 1000
block.order = (this.state.cardTree.contents.length + 1) * 1000
mutator.insertBlock(block, 'add card text')
}
}}
@ -253,7 +253,7 @@ class CardDetail extends React.Component<Props, State> {
onClick={() => {
const block = new MutableTextBlock()
block.parentId = card.id
block.order = cardTree.contents.length * 1000
block.order = (this.state.cardTree.contents.length + 1) * 1000
mutator.insertBlock(block, 'add text')
}}
/>
@ -261,7 +261,7 @@ class CardDetail extends React.Component<Props, State> {
id='image'
name={intl.formatMessage({id: 'CardDetail.image', defaultMessage: 'Image'})}
onClick={() => Utils.selectLocalFile(
(file) => mutator.createImageBlock(card.id, file, cardTree.contents.length * 1000),
(file) => mutator.createImageBlock(card.id, file, (this.state.cardTree.contents.length + 1) * 1000),
'.jpg,.jpeg,.png',
)}
/>

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

@ -4,7 +4,6 @@
import React from 'react'
import {IOrderedBlock} from '../blocks/orderedBlock'
import {CardTree} from '../viewModel/cardTree'
import {OctoUtils} from '../octoUtils'
import mutator from '../mutator'
import {Utils} from '../utils'
@ -30,20 +29,19 @@ import './contentBlock.scss'
type Props = {
block: IOrderedBlock
cardId: string
cardTree: CardTree
contents: readonly IOrderedBlock[]
}
class ContentBlock extends React.Component<Props> {
shouldComponentUpdate(): boolean {
return true
}
class ContentBlock extends React.PureComponent<Props> {
public render(): JSX.Element {
const {cardId, cardTree, block} = this.props
const {cardId, contents, block} = this.props
if (block.type !== 'text' && block.type !== 'image' && block.type !== 'divider') {
Utils.assertFailure(`Block type is unknown: ${block.type}`)
return null
}
const index = cardTree.contents.indexOf(block)
const index = contents.indexOf(block)
return (
<div className='ContentBlock octo-block'>
<div className='octo-block-margin'>
@ -56,20 +54,20 @@ class ContentBlock extends React.Component<Props> {
name='Move up'
icon={<SortUpIcon/>}
onClick={() => {
const previousBlock = cardTree.contents[index - 1]
const newOrder = OctoUtils.getOrderBefore(previousBlock, cardTree.contents)
const previousBlock = contents[index - 1]
const newOrder = OctoUtils.getOrderBefore(previousBlock, contents)
Utils.log(`moveUp ${newOrder}`)
mutator.changeOrder(block, newOrder, 'move up')
}}
/>}
{index < (cardTree.contents.length - 1) &&
{index < (contents.length - 1) &&
<Menu.Text
id='moveDown'
name='Move down'
icon={<SortDownIcon/>}
onClick={() => {
const nextBlock = cardTree.contents[index + 1]
const newOrder = OctoUtils.getOrderAfter(nextBlock, cardTree.contents)
const nextBlock = contents[index + 1]
const newOrder = OctoUtils.getOrderAfter(nextBlock, contents)
Utils.log(`moveDown ${newOrder}`)
mutator.changeOrder(block, newOrder, 'move down')
}}
@ -88,7 +86,7 @@ class ContentBlock extends React.Component<Props> {
newBlock.parentId = cardId
// TODO: Handle need to reorder all blocks
newBlock.order = OctoUtils.getOrderBefore(block, cardTree.contents)
newBlock.order = OctoUtils.getOrderBefore(block, contents)
Utils.log(`insert block ${block.id}, order: ${block.order}`)
mutator.insertBlock(newBlock, 'insert card text')
}}
@ -100,7 +98,7 @@ class ContentBlock extends React.Component<Props> {
onClick={() => {
Utils.selectLocalFile(
(file) => {
mutator.createImageBlock(cardId, file, OctoUtils.getOrderBefore(block, cardTree.contents))
mutator.createImageBlock(cardId, file, OctoUtils.getOrderBefore(block, contents))
},
'.jpg,.jpeg,.png')
}}
@ -114,7 +112,7 @@ class ContentBlock extends React.Component<Props> {
newBlock.parentId = cardId
// TODO: Handle need to reorder all blocks
newBlock.order = OctoUtils.getOrderBefore(block, cardTree.contents)
newBlock.order = OctoUtils.getOrderBefore(block, contents)
Utils.log(`insert block ${block.id}, order: ${block.order}`)
mutator.insertBlock(newBlock, 'insert card text')
}}