self-hosted/focalboard
1
0
Fork 0
mirror of https://github.com/mattermost/focalboard.git synced 2025-01-11 18:13:52 +02:00
Code Issues Releases Activity

Migrating propertyValueElement to functional component

Browse Source
This commit is contained in:
Jesús Espino 2021-03-30 14:00:25 +02:00
parent 009639b1ea
commit 5f07dd52d3
1 changed files with 65 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
webapp/src/components/propertyValueElement.tsx
View File

@ -1,7 +1,7 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information. // See LICENSE.txt for license information.
import React from 'react' import React, {useState} from 'react'
import {IPropertyOption, IPropertyTemplate} from '../blocks/board' import {IPropertyOption, IPropertyTemplate} from '../blocks/board'
import {Card} from '../blocks/card' import {Card} from '../blocks/card'
@ -20,36 +20,21 @@ type Props = {
emptyDisplayValue: string emptyDisplayValue: string
} }
type State = { const PropertyValueElement = (props:Props): JSX.Element => {
value: string const [value, setValue] = useState(props.card.properties[props.propertyTemplate.id])
}
export default class PropertyValueElement extends React.Component<Props, State> { const {card, propertyTemplate, readOnly, emptyDisplayValue, boardTree} = props
constructor(props: Props) {
super(props)
const propertyValue = props.card.properties[props.propertyTemplate.id]
this.state = {value: propertyValue}
}
shouldComponentUpdate(): boolean {
return true
}
render(): JSX.Element {
const {card, propertyTemplate, readOnly, emptyDisplayValue, boardTree} = this.props
const propertyValue = card.properties[propertyTemplate.id] const propertyValue = card.properties[propertyTemplate.id]
const displayValue = OctoUtils.propertyDisplayValue(card, propertyValue, propertyTemplate) const displayValue = OctoUtils.propertyDisplayValue(card, propertyValue, propertyTemplate)
const finalDisplayValue = displayValue || emptyDisplayValue const finalDisplayValue = displayValue || emptyDisplayValue
if (propertyTemplate.type === 'select') {
let propertyColorCssClassName = '' let propertyColorCssClassName = ''
if (propertyValue && propertyTemplate.type === 'select') {
const cardPropertyValue = propertyTemplate.options.find((o) => o.id === propertyValue) const cardPropertyValue = propertyTemplate.options.find((o) => o.id === propertyValue)
if (cardPropertyValue) { if (cardPropertyValue) {
propertyColorCssClassName = cardPropertyValue.color propertyColorCssClassName = cardPropertyValue.color
} }
}
if (propertyTemplate.type === 'select') {
let className = 'octo-propertyvalue octo-label' let className = 'octo-propertyvalue octo-label'
if (!displayValue) { if (!displayValue) {
className += ' empty' className += ' empty'
@ -70,8 +55,8 @@ export default class PropertyValueElement extends React.Component<Props, State>
emptyValue={emptyDisplayValue} emptyValue={emptyDisplayValue}
options={propertyTemplate.options} options={propertyTemplate.options}
value={propertyTemplate.options.find((p) => p.id === propertyValue)} value={propertyTemplate.options.find((p) => p.id === propertyValue)}
onChange={(value) => { onChange={(newValue) => {
mutator.changePropertyValue(card, propertyTemplate.id, value) mutator.changePropertyValue(card, propertyTemplate.id, newValue)
}} }}
onChangeColor={(option: IPropertyOption, colorId: string): void => { onChangeColor={(option: IPropertyOption, colorId: string): void => {
mutator.changePropertyOptionColor(boardTree.board, propertyTemplate, option, colorId) mutator.changePropertyOptionColor(boardTree.board, propertyTemplate, option, colorId)
@ -80,10 +65,10 @@ export default class PropertyValueElement extends React.Component<Props, State>
mutator.deletePropertyOption(boardTree, propertyTemplate, option) mutator.deletePropertyOption(boardTree, propertyTemplate, option)
}} }}
onCreate={ onCreate={
async (value) => { async (newValue) => {
const option: IPropertyOption = { const option: IPropertyOption = {
id: Utils.createGuid(), id: Utils.createGuid(),
value, value: newValue,
color: 'propColorDefault', color: 'propColorDefault',
} }
await mutator.insertPropertyOption(boardTree, propertyTemplate, option, 'add property option') await mutator.insertPropertyOption(boardTree, propertyTemplate, option, 'add property option')
@ -100,10 +85,10 @@ export default class PropertyValueElement extends React.Component<Props, State>
<Editable <Editable
className='octo-propertyvalue' className='octo-propertyvalue'
placeholderText='Empty' placeholderText='Empty'
value={this.state.value} value={value}
onChange={(value) => this.setState({value})} onChange={setValue}
onSave={() => mutator.changePropertyValue(card, propertyTemplate.id, this.state.value)} onSave={() => mutator.changePropertyValue(card, propertyTemplate.id, value)}
onCancel={() => this.setState({value: propertyValue})} onCancel={() => setValue(propertyValue)}
/> />
) )
} }
@ -111,4 +96,5 @@ export default class PropertyValueElement extends React.Component<Props, State>
} }
return <div className='octo-propertyvalue'>{finalDisplayValue}</div> return <div className='octo-propertyvalue'>{finalDisplayValue}</div>
} }
}
export default PropertyValueElement