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

Make add card content dynamic

Browse source
This commit is contained in:
Chen-I Lim 2021-03-10 14:55:01 -08:00
parent b7630dc178
commit 4fb54365f6
2 changed files with 44 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

68
webapp/src/components/cardDetail.tsx
View file

@ -4,6 +4,7 @@ import React from 'react'
import {FormattedMessage, injectIntl, IntlShape} from 'react-intl'
import {BlockIcons} from '../blockIcons'
import {BlockTypes} from '../blocks/block'
import {PropertyType} from '../blocks/board'
import {MutableTextBlock} from '../blocks/textBlock'
import mutator from '../mutator'
@ -20,6 +21,7 @@ import PropertyMenu from '../widgets/propertyMenu'
import BlockIconSelector from './blockIconSelector'
import './cardDetail.scss'
import CommentsList from './commentsList'
import {ContentHandler, contentRegistry} from './content/contentRegistry'
import ContentBlock from './contentBlock'
import {MarkdownEditor} from './markdownEditor'
import PropertyValueElement from './propertyValueElement'
@ -221,31 +223,7 @@ class CardDetail extends React.Component<Props, State> {
/>
</Button>
<Menu position='top'>
<Menu.Text
id='text'
name={intl.formatMessage({id: 'CardDetail.text', defaultMessage: 'Text'})}
onClick={() => {
this.addTextBlock('')
}}
/>
<Menu.Text
id='image'
name={intl.formatMessage({id: 'CardDetail.image', defaultMessage: 'Image'})}
onClick={() => Utils.selectLocalFile((file) => {
mutator.performAsUndoGroup(async () => {
const description = intl.formatMessage({id: 'ContentBlock.addImage', defaultMessage: 'add image'})
const newBlock = await mutator.createImageBlock(card, file, description)
if (newBlock) {
const contentOrder = card.contentOrder.slice()
contentOrder.push(newBlock.id)
await mutator.changeCardContentOrder(card, contentOrder, description)
}
})
},
'.jpg,.jpeg,.png',
)}
/>
{contentRegistry.contentTypes.map((type) => this.addContentMenu(type))}
</Menu>
</MenuWrapper>
</div>
@ -254,6 +232,46 @@ class CardDetail extends React.Component<Props, State> {
)
}
private addContentMenu(type: BlockTypes): JSX.Element {
const {intl} = this.props
const handler = contentRegistry.getHandler(type)
if (!handler) {
Utils.logError(`addContentMenu, unknown content type: ${type}`)
return <></>
}
return (
<Menu.Text
ref={type}
id={type}
name={handler.getDisplayText(intl)}
icon={handler.getIcon()}
onClick={() => {
this.addBlock(handler)
}}
/>
)
}
private async addBlock(handler: ContentHandler) {
const {intl, cardTree} = this.props
const {card} = cardTree
const newBlock = await handler.createBlock()
newBlock.parentId = card.id
newBlock.rootId = card.rootId
const contentOrder = card.contentOrder.slice()
contentOrder.push(newBlock.id)
const typeName = handler.getDisplayText(intl)
const description = intl.formatMessage({id: 'ContentBlock.addElement', defaultMessage: 'add {type}'}, {type: typeName})
mutator.performAsUndoGroup(async () => {
await mutator.insertBlock(newBlock, description)
await mutator.changeCardContentOrder(card, contentOrder, description)
})
}
private addTextBlock(text: string): void {
const {intl, cardTree} = this.props
const {card} = cardTree

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

@ -38,5 +38,5 @@ class ContentRegistry {
const contentRegistry = new ContentRegistry()
// export type {ContentHandler}
export type {ContentHandler}
export {contentRegistry}