self-hosted/focalboard
1
0
Fork 0
mirror of https://github.com/mattermost/focalboard.git synced 2024-12-24 13:43:12 +02:00
Code Issues Releases Activity

Property value editable migrated to the new editable widget

Browse Source
This commit is contained in:
Jesús Espino 2020-10-26 18:34:30 +01:00
parent fddda793bc
commit c9a7a1748c
1 changed files with 29 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,8 +8,7 @@ import {IPropertyTemplate, IPropertyOption} from '../blocks/board'
import {OctoUtils} from '../octoUtils' import {OctoUtils} from '../octoUtils'
import mutator from '../mutator' import mutator from '../mutator'
import {Editable} from './editable' import Editable from '../widgets/editable'
import MenuWrapper from '../widgets/menuWrapper' import MenuWrapper from '../widgets/menuWrapper'
import Menu from '../widgets/menu' import Menu from '../widgets/menu'
@ -20,7 +19,19 @@ type Props = {
emptyDisplayValue: string emptyDisplayValue: string
} }
export default class PropertyValueElement extends React.Component<Props> { type State = {
value: string
}
export default class PropertyValueElement extends React.Component<Props, State> {
private valueEditor = React.createRef<Editable>()
constructor(props: Props) {
super(props)
const propertyValue = props.card.properties[props.propertyTemplate.id]
this.state = {value: propertyValue}
}
shouldComponentUpdate(): boolean { shouldComponentUpdate(): boolean {
return true return true
} }
@ -78,12 +89,23 @@ export default class PropertyValueElement extends React.Component<Props> {
if (!readOnly) { if (!readOnly) {
return ( return (
<Editable <Editable
key={propertyTemplate.id} ref={this.valueEditor}
className='octo-propertyvalue' className='octo-propertyvalue'
placeholderText='Empty' placeholderText='Empty'
text={displayValue} value={this.state.value}
onChanged={(text) => { onChange={(value) => this.setState({value})}
mutator.changePropertyValue(card, propertyTemplate.id, text) onBlur={() => mutator.changePropertyValue(card, propertyTemplate.id, this.state.value)}
onFocus={() => this.valueEditor.current.focus()}
onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>): void => {
if (e.keyCode === 27 && !(e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey) { // ESC
e.stopPropagation()
this.setState({value: propertyValue})
setTimeout(() => this.valueEditor.current.blur(), 0)
} else if (e.keyCode === 13 && !(e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey) { // Return
e.stopPropagation()
mutator.changePropertyValue(card, propertyTemplate.id, this.state.value)
this.valueEditor.current.blur()
}
}} }}
/> />
) )