luisgulo/focalboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki 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.
// See LICENSE.txt for license information.
import React from 'react'
import React, {useState} from 'react'
import {IPropertyOption, IPropertyTemplate} from '../blocks/board'
import {Card} from '../blocks/card'
@ -20,95 +20,81 @@ type Props = {
emptyDisplayValue: string
}
type State = {
value: string
}
const PropertyValueElement = (props:Props): JSX.Element => {
const [value, setValue] = useState(props.card.properties[props.propertyTemplate.id])
export default class PropertyValueElement extends React.Component<Props, State> {
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 displayValue = OctoUtils.propertyDisplayValue(card, propertyValue, propertyTemplate)
const finalDisplayValue = displayValue || emptyDisplayValue
const {card, propertyTemplate, readOnly, emptyDisplayValue, boardTree} = props
const propertyValue = card.properties[propertyTemplate.id]
const displayValue = OctoUtils.propertyDisplayValue(card, propertyValue, propertyTemplate)
const finalDisplayValue = displayValue || emptyDisplayValue
if (propertyTemplate.type === 'select') {
let propertyColorCssClassName = ''
if (propertyValue && propertyTemplate.type === 'select') {
const cardPropertyValue = propertyTemplate.options.find((o) => o.id === propertyValue)
if (cardPropertyValue) {
propertyColorCssClassName = cardPropertyValue.color
}
const cardPropertyValue = propertyTemplate.options.find((o) => o.id === propertyValue)
if (cardPropertyValue) {
propertyColorCssClassName = cardPropertyValue.color
}
if (propertyTemplate.type === 'select') {
let className = 'octo-propertyvalue octo-label'
if (!displayValue) {
className += ' empty'
}
let className = 'octo-propertyvalue octo-label'
if (!displayValue) {
className += ' empty'
}
if (readOnly || !boardTree) {
return (
<div
className={`${className} ${propertyColorCssClassName}`}
tabIndex={0}
>
{finalDisplayValue}
</div>
)
}
if (readOnly || !boardTree) {
return (
<ValueSelector
emptyValue={emptyDisplayValue}
options={propertyTemplate.options}
value={propertyTemplate.options.find((p) => p.id === propertyValue)}
onChange={(value) => {
mutator.changePropertyValue(card, propertyTemplate.id, value)
}}
onChangeColor={(option: IPropertyOption, colorId: string): void => {
mutator.changePropertyOptionColor(boardTree.board, propertyTemplate, option, colorId)
}}
onDeleteOption={(option: IPropertyOption): void => {
mutator.deletePropertyOption(boardTree, propertyTemplate, option)
}}
onCreate={
async (value) => {
const option: IPropertyOption = {
id: Utils.createGuid(),
value,
color: 'propColorDefault',
}
await mutator.insertPropertyOption(boardTree, propertyTemplate, option, 'add property option')
mutator.changePropertyValue(card, propertyTemplate.id, option.id)
<div
className={`${className} ${propertyColorCssClassName}`}
tabIndex={0}
>
{finalDisplayValue}
</div>
)
}
return (
<ValueSelector
emptyValue={emptyDisplayValue}
options={propertyTemplate.options}
value={propertyTemplate.options.find((p) => p.id === propertyValue)}
onChange={(newValue) => {
mutator.changePropertyValue(card, propertyTemplate.id, newValue)
}}
onChangeColor={(option: IPropertyOption, colorId: string): void => {
mutator.changePropertyOptionColor(boardTree.board, propertyTemplate, option, colorId)
}}
onDeleteOption={(option: IPropertyOption): void => {
mutator.deletePropertyOption(boardTree, propertyTemplate, option)
}}
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)}
/>
)
}
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'>{displayValue}</div>
}
return <div className='octo-propertyvalue'>{finalDisplayValue}</div>
}
export default PropertyValueElement