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

Handle optional current

Browse Source
This commit is contained in:
Chen-I Lim 2020-11-17 10:53:46 -08:00
parent 184b2f1b25
commit c41ec11d0a
7 changed files with 60 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
webapp/src/components/boardComponent.tsx
View File

@ -279,19 +279,19 @@ class BoardComponent extends React.Component<Props, State> {
}}
onDragOver={(e) => {
ref.current!.classList.add('dragover')
ref.current?.classList.add('dragover')
e.preventDefault()
}}
onDragEnter={(e) => {
ref.current!.classList.add('dragover')
ref.current?.classList.add('dragover')
e.preventDefault()
}}
onDragLeave={(e) => {
ref.current!.classList.remove('dragover')
ref.current?.classList.remove('dragover')
e.preventDefault()
}}
onDrop={(e) => {
ref.current!.classList.remove('dragover')
ref.current?.classList.remove('dragover')
e.preventDefault()
this.onDropToColumn(group.option)
}}
@ -348,19 +348,19 @@ class BoardComponent extends React.Component<Props, State> {
}}
onDragOver={(e) => {
ref.current!.classList.add('dragover')
ref.current?.classList.add('dragover')
e.preventDefault()
}}
onDragEnter={(e) => {
ref.current!.classList.add('dragover')
ref.current?.classList.add('dragover')
e.preventDefault()
}}
onDragLeave={(e) => {
ref.current!.classList.remove('dragover')
ref.current?.classList.remove('dragover')
e.preventDefault()
}}
onDrop={(e) => {
ref.current!.classList.remove('dragover')
ref.current?.classList.remove('dragover')
e.preventDefault()
this.onDropToColumn(group.option)
}}
@ -424,25 +424,25 @@ class BoardComponent extends React.Component<Props, State> {
if (this.draggedCards?.length < 1) {
return
}
ref.current!.classList.add('dragover')
ref.current?.classList.add('dragover')
e.preventDefault()
}}
onDragEnter={(e) => {
if (this.draggedCards?.length < 1) {
return
}
ref.current!.classList.add('dragover')
ref.current?.classList.add('dragover')
e.preventDefault()
}}
onDragLeave={(e) => {
if (this.draggedCards?.length < 1) {
return
}
ref.current!.classList.remove('dragover')
ref.current?.classList.remove('dragover')
e.preventDefault()
}}
onDrop={(e) => {
ref.current!.classList.remove('dragover')
ref.current?.classList.remove('dragover')
e.preventDefault()
if (this.draggedCards?.length < 1) {
return

46
webapp/src/components/editable.tsx
View File

@ -32,12 +32,17 @@ class Editable extends React.PureComponent<Props> {
return this.privateText
}
set text(value: string) {
if (!this.elementRef.current) {
Utils.assertFailure('elementRef.current')
return
}
const {isMarkdown} = this.props
if (value) {
this.elementRef.current!.innerHTML = isMarkdown ? Utils.htmlFromMarkdown(value) : Utils.htmlEncode(value)
this.elementRef.current.innerHTML = isMarkdown ? Utils.htmlFromMarkdown(value) : Utils.htmlEncode(value)
} else {
this.elementRef.current!.innerText = ''
this.elementRef.current.innerText = ''
}
this.privateText = value || ''
@ -55,7 +60,7 @@ class Editable extends React.PureComponent<Props> {
}
focus(): void {
this.elementRef.current!.focus()
this.elementRef.current?.focus()
// Put cursor at end
document.execCommand('selectAll', false, undefined)
@ -63,7 +68,7 @@ class Editable extends React.PureComponent<Props> {
}
blur(): void {
this.elementRef.current!.blur()
this.elementRef.current?.blur()
}
render(): JSX.Element {
@ -90,9 +95,11 @@ class Editable extends React.PureComponent<Props> {
dangerouslySetInnerHTML={{__html: html}}
onFocus={() => {
this.elementRef.current!.innerText = this.text
this.elementRef.current!.style!.color = style?.color || ''
this.elementRef.current!.classList.add('active')
if (this.elementRef.current) {
this.elementRef.current.innerText = this.text
this.elementRef.current.style.color = style?.color || ''
this.elementRef.current.classList.add('active')
}
if (onFocus) {
onFocus()
@ -100,19 +107,22 @@ class Editable extends React.PureComponent<Props> {
}}
onBlur={async () => {
const newText = this.elementRef.current!.innerText
const oldText = this.props.text || ''
if (this.props.allowEmpty || newText) {
if (newText !== oldText && onChanged) {
onChanged(newText)
if (this.elementRef.current) {
const newText = this.elementRef.current.innerText
const oldText = this.props.text || ''
if (this.props.allowEmpty || newText) {
if (newText !== oldText && onChanged) {
onChanged(newText)
}
this.text = newText
} else {
this.text = oldText // Reset text
}
this.text = newText
} else {
this.text = oldText // Reset text
this.elementRef.current.classList.remove('active')
}
this.elementRef.current!.classList.remove('active')
if (onBlur) {
onBlur()
}
@ -121,10 +131,10 @@ class Editable extends React.PureComponent<Props> {
onKeyDown={(e) => {
if (e.keyCode === 27 && !(e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey) { // ESC
e.stopPropagation()
this.elementRef.current!.blur()
this.elementRef.current?.blur()
} else if (!isMultiline && e.keyCode === 13 && !(e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey) { // Return
e.stopPropagation()
this.elementRef.current!.blur()
this.elementRef.current?.blur()
}
if (onKeyDown) {

5
webapp/src/components/markdownEditor.tsx
View File

@ -152,9 +152,8 @@ class MarkdownEditor extends React.Component<Props, State> {
this.hideEditor()
},
focus: () => {
this.frameRef.current!.classList.add('active')
this.elementRef.current!.setState({value: this.text})
this.frameRef.current?.classList.add('active')
this.elementRef.current?.setState({value: this.text})
if (onFocus) {
onFocus()

16
webapp/src/components/tableComponent.tsx
View File

@ -127,13 +127,17 @@ class TableComponent extends React.Component<Props, State> {
onDrag={(offset) => {
const originalWidth = this.columnWidth(Constants.titleColumnId)
const newWidth = Math.max(Constants.minColumnWidth, originalWidth + offset)
titleRef.current!.style!.width = `${newWidth}px`
if (titleRef.current) {
titleRef.current.style.width = `${newWidth}px`
}
}}
onDragEnd={(offset) => {
Utils.log(`onDragEnd offset: ${offset}`)
const originalWidth = this.columnWidth(Constants.titleColumnId)
const newWidth = Math.max(Constants.minColumnWidth, originalWidth + offset)
titleRef.current!.style!.width = `${newWidth}px`
if (titleRef.current) {
titleRef.current.style.width = `${newWidth}px`
}
const columnWidths = {...activeView.columnWidths}
if (newWidth !== columnWidths[Constants.titleColumnId]) {
@ -211,13 +215,17 @@ class TableComponent extends React.Component<Props, State> {
onDrag={(offset) => {
const originalWidth = this.columnWidth(template.id)
const newWidth = Math.max(Constants.minColumnWidth, originalWidth + offset)
headerRef.current!.style.width = `${newWidth}px`
if (headerRef.current) {
headerRef.current.style.width = `${newWidth}px`
}
}}
onDragEnd={(offset) => {
Utils.log(`onDragEnd offset: ${offset}`)
const originalWidth = this.columnWidth(template.id)
const newWidth = Math.max(Constants.minColumnWidth, originalWidth + offset)
headerRef.current!.style.width = `${newWidth}px`
if (headerRef.current) {
headerRef.current.style.width = `${newWidth}px`
}
const columnWidths = {...activeView.columnWidths}
if (newWidth !== columnWidths[template.id]) {

2
webapp/src/components/tableRow.tsx
View File

@ -40,7 +40,7 @@ class TableRow extends React.Component<Props, State> {
componentDidMount(): void {
if (this.props.focusOnMount) {
setTimeout(() => this.titleRef.current!.focus(), 10)
setTimeout(() => this.titleRef.current?.focus(), 10)
}
}

6
webapp/src/components/viewHeader.tsx
View File

@ -61,7 +61,7 @@ class ViewHeader extends React.Component<Props, State> {
componentDidUpdate(prevPros: Props, prevState: State): void {
if (this.state.isSearching && !prevState.isSearching) {
this.searchFieldRef.current!.focus()
this.searchFieldRef.current?.focus()
}
}
@ -75,7 +75,9 @@ class ViewHeader extends React.Component<Props, State> {
private onSearchKeyDown = (e: React.KeyboardEvent) => {
if (e.keyCode === 27) { // ESC: Clear search
this.searchFieldRef.current!.text = ''
if (this.searchFieldRef.current) {
this.searchFieldRef.current.text = ''
}
this.setState({isSearching: false})
this.props.setSearchText(undefined)
e.preventDefault()

2
webapp/src/widgets/editable.tsx
View File

@ -33,7 +33,7 @@ export default class Editable extends React.Component<Props> {
public blur = (): void => {
this.saveOnBlur = false
this.elementRef.current!.blur()
this.elementRef.current?.blur()
this.saveOnBlur = true
}