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

Move add content logic into handler

Browse source
This commit is contained in:
Chen-I Lim 2021-03-10 11:22:52 -08:00
parent 61015d1b5e
commit c55f414b19
5 changed files with 50 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
webapp/src/components/content/contentRegistry.tsx
View file

@ -4,6 +4,7 @@
import {IntlShape} from 'react-intl'
import {BlockTypes} from '../../blocks/block'
import {Card} from '../../blocks/card'
import {IContentBlock, MutableContentBlock} from '../../blocks/contentBlock'
type ContentHandler = {
@ -11,6 +12,7 @@ type ContentHandler = {
getDisplayText: (intl: IntlShape) => string,
getIcon: () => JSX.Element,
createBlock: () => MutableContentBlock,
addBlock(card: Card, contents: readonly IContentBlock[], index: number, intl: IntlShape): void,
createComponent: (block: IContentBlock, intl: IntlShape, readonly: boolean) => JSX.Element,
}

15
webapp/src/components/content/dividerElement.tsx
View file

@ -3,6 +3,7 @@
import React from 'react'
import {MutableDividerBlock} from '../../blocks/dividerBlock'
import mutator from '../../mutator'
import DividerIcon from '../../widgets/icons/divider'
import {contentRegistry} from './contentRegistry'
@ -21,6 +22,20 @@ contentRegistry.registerContentType({
createBlock: () => {
return new MutableDividerBlock()
},
addBlock: (card, contents, index, intl) => {
const newBlock = new MutableDividerBlock()
newBlock.parentId = card.id
newBlock.rootId = card.rootId
const contentOrder = contents.map((o) => o.id)
contentOrder.splice(index, 0, newBlock.id)
const typeName = intl.formatMessage({id: 'ContentBlock.divider', defaultMessage: 'divider'})
mutator.performAsUndoGroup(async () => {
const description = intl.formatMessage({id: 'ContentBlock.addElement', defaultMessage: 'add {type}'}, {type: typeName})
await mutator.insertBlock(newBlock, description)
await mutator.changeCardContentOrder(card, contentOrder, description)
})
},
createComponent: () => <DividerElement/>,
})

17
webapp/src/components/content/imageElement.tsx
View file

@ -5,7 +5,9 @@ import {injectIntl, IntlShape} from 'react-intl'
import {IContentBlock, MutableContentBlock} from '../../blocks/contentBlock'
import {MutableImageBlock} from '../../blocks/imageBlock'
import mutator from '../../mutator'
import octoClient from '../../octoClient'
import {Utils} from '../../utils'
import ImageIcon from '../../widgets/icons/image'
import {contentRegistry} from './contentRegistry'
@ -57,6 +59,21 @@ contentRegistry.registerContentType({
createBlock: () => {
return new MutableImageBlock()
},
addBlock: (card, contents, index, intl) => {
Utils.selectLocalFile((file) => {
mutator.performAsUndoGroup(async () => {
const typeName = intl.formatMessage({id: 'ContentBlock.image', defaultMessage: 'image'})
const description = intl.formatMessage({id: 'ContentBlock.addElement', defaultMessage: 'add {type}'}, {type: typeName})
const newBlock = await mutator.createImageBlock(card, file, description)
if (newBlock) {
const contentOrder = contents.map((o) => o.id)
contentOrder.splice(index, 0, newBlock.id)
await mutator.changeCardContentOrder(card, contentOrder, description)
}
})
},
'.jpg,.jpeg,.png')
},
createComponent: (block, intl) => {
return (
<ImageElement

14
webapp/src/components/content/textElement.tsx
View file

@ -55,6 +55,20 @@ contentRegistry.registerContentType({
createBlock: () => {
return new MutableTextBlock()
},
addBlock: (card, contents, index, intl) => {
const newBlock = new MutableTextBlock()
newBlock.parentId = card.id
newBlock.rootId = card.rootId
const contentOrder = contents.map((o) => o.id)
contentOrder.splice(index, 0, newBlock.id)
const typeName = intl.formatMessage({id: 'ContentBlock.text', defaultMessage: 'text'})
mutator.performAsUndoGroup(async () => {
const description = intl.formatMessage({id: 'ContentBlock.addElement', defaultMessage: 'add {type}'}, {type: typeName})
await mutator.insertBlock(newBlock, description)
await mutator.changeCardContentOrder(card, contentOrder, description)
})
},
createComponent: (block, intl, readonly) => {
return (
<TextElement

38
webapp/src/components/contentBlock.tsx
View file

@ -106,51 +106,17 @@ class ContentBlock extends React.PureComponent<Props> {
return <></>
}
switch (type) {
case 'image': return (
return (
<Menu.Text
ref={type}
id={type}
name={handler.getDisplayText(intl)}
icon={handler.getIcon()}
onClick={() => {
Utils.selectLocalFile((file) => {
mutator.performAsUndoGroup(async () => {
const description = intl.formatMessage({id: 'ContentBlock.addElement', defaultMessage: 'add {type}'}, {type: handler.getDisplayText(intl)})
const newBlock = await mutator.createImageBlock(card, file, description)
if (newBlock) {
const contentOrder = contents.map((o) => o.id)
contentOrder.splice(index, 0, newBlock.id)
await mutator.changeCardContentOrder(card, contentOrder, description)
}
})
},
'.jpg,.jpeg,.png')
handler.addBlock(card, contents, index, intl)
}}
/>
)
default: return (
<Menu.Text
ref={type}
id={type}
name={handler.getDisplayText(intl)}
icon={handler.getIcon()}
onClick={() => {
const newBlock = handler.createBlock()!
newBlock.parentId = card.id
newBlock.rootId = card.rootId
const contentOrder = contents.map((o) => o.id)
contentOrder.splice(index, 0, newBlock.id)
mutator.performAsUndoGroup(async () => {
const description = intl.formatMessage({id: 'ContentBlock.addElement', defaultMessage: 'add {type}'}, {type: handler.getDisplayText(intl)})
await mutator.insertBlock(newBlock, description)
await mutator.changeCardContentOrder(card, contentOrder, description)
})
}}
/>
)
}
}
}