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

144
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,95 +20,81 @@ 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) { const propertyValue = card.properties[propertyTemplate.id]
super(props) const displayValue = OctoUtils.propertyDisplayValue(card, propertyValue, propertyTemplate)
const propertyValue = props.card.properties[props.propertyTemplate.id] const finalDisplayValue = displayValue || emptyDisplayValue
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 displayValue = OctoUtils.propertyDisplayValue(card, propertyValue, propertyTemplate)
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' }
}
if (readOnly || !boardTree) { if (readOnly || !boardTree) {
return (
<div
className={`${className} ${propertyColorCssClassName}`}
tabIndex={0}
>
{finalDisplayValue}
</div>
)
}
return ( return (
<ValueSelector <div
emptyValue={emptyDisplayValue} className={`${className} ${propertyColorCssClassName}`}
options={propertyTemplate.options} tabIndex={0}
value={propertyTemplate.options.find((p) => p.id === propertyValue)} >
onChange={(value) => { {finalDisplayValue}
mutator.changePropertyValue(card, propertyTemplate.id, value) </div>
}} )
onChangeColor={(option: IPropertyOption, colorId: string): void => { }
mutator.changePropertyOptionColor(boardTree.board, propertyTemplate, option, colorId) return (
}} <ValueSelector
onDeleteOption={(option: IPropertyOption): void => { emptyValue={emptyDisplayValue}
mutator.deletePropertyOption(boardTree, propertyTemplate, option) options={propertyTemplate.options}
}} value={propertyTemplate.options.find((p) => p.id === propertyValue)}
onCreate={ onChange={(newValue) => {
async (value) => { mutator.changePropertyValue(card, propertyTemplate.id, newValue)
const option: IPropertyOption = { }}
id: Utils.createGuid(), onChangeColor={(option: IPropertyOption, colorId: string): void => {
value, mutator.changePropertyOptionColor(boardTree.board, propertyTemplate, option, colorId)
color: 'propColorDefault', }}
} onDeleteOption={(option: IPropertyOption): void => {
await mutator.insertPropertyOption(boardTree, propertyTemplate, option, 'add property option') mutator.deletePropertyOption(boardTree, propertyTemplate, option)
mutator.changePropertyValue(card, propertyTemplate.id, option.id) }}
onCreate={
async (newValue) => {
const option: IPropertyOption = {
id: Utils.createGuid(),
value: newValue,
color: 'propColorDefault',
} }
await mutator.insertPropertyOption(boardTree, propertyTemplate, option, 'add property option')
mutator.changePropertyValue(card, propertyTemplate.id, option.id)
} }
}
/>
)
}
if (propertyTemplate.type === 'text' || propertyTemplate.type === 'number' || propertyTemplate.type === 'email') {
if (!readOnly) {
return (
<Editable
className='octo-propertyvalue'
placeholderText='Empty'
value={value}
onChange={setValue}
onSave={() => mutator.changePropertyValue(card, propertyTemplate.id, value)}
onCancel={() => setValue(propertyValue)}
/> />
) )
} }
return <div className='octo-propertyvalue'>{displayValue}</div>
if (propertyTemplate.type === 'text' || propertyTemplate.type === 'number' || propertyTemplate.type === 'email') {
if (!readOnly) {
return (
<Editable
className='octo-propertyvalue'
placeholderText='Empty'
value={this.state.value}
onChange={(value) => this.setState({value})}
onSave={() => mutator.changePropertyValue(card, propertyTemplate.id, this.state.value)}
onCancel={() => this.setState({value: propertyValue})}
/>
)
}
return <div className='octo-propertyvalue'>{displayValue}</div>
}
return <div className='octo-propertyvalue'>{finalDisplayValue}</div>
} }
return <div className='octo-propertyvalue'>{finalDisplayValue}</div>
} }
export default PropertyValueElement