self-hosted/focalboard
1
0
Fork 0
mirror of https://github.com/mattermost/focalboard.git synced 2025-07-12 23:50:27 +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
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) => { onDragOver={(e) => {
ref.current!.classList.add('dragover') ref.current?.classList.add('dragover')
e.preventDefault() e.preventDefault()
}} }}
onDragEnter={(e) => { onDragEnter={(e) => {
ref.current!.classList.add('dragover') ref.current?.classList.add('dragover')
e.preventDefault() e.preventDefault()
}} }}
onDragLeave={(e) => { onDragLeave={(e) => {
ref.current!.classList.remove('dragover') ref.current?.classList.remove('dragover')
e.preventDefault() e.preventDefault()
}} }}
onDrop={(e) => { onDrop={(e) => {
ref.current!.classList.remove('dragover') ref.current?.classList.remove('dragover')
e.preventDefault() e.preventDefault()
this.onDropToColumn(group.option) this.onDropToColumn(group.option)
}} }}
@ -348,19 +348,19 @@ class BoardComponent extends React.Component<Props, State> {
}} }}
onDragOver={(e) => { onDragOver={(e) => {
ref.current!.classList.add('dragover') ref.current?.classList.add('dragover')
e.preventDefault() e.preventDefault()
}} }}
onDragEnter={(e) => { onDragEnter={(e) => {
ref.current!.classList.add('dragover') ref.current?.classList.add('dragover')
e.preventDefault() e.preventDefault()
}} }}
onDragLeave={(e) => { onDragLeave={(e) => {
ref.current!.classList.remove('dragover') ref.current?.classList.remove('dragover')
e.preventDefault() e.preventDefault()
}} }}
onDrop={(e) => { onDrop={(e) => {
ref.current!.classList.remove('dragover') ref.current?.classList.remove('dragover')
e.preventDefault() e.preventDefault()
this.onDropToColumn(group.option) this.onDropToColumn(group.option)
}} }}
@ -424,25 +424,25 @@ class BoardComponent extends React.Component<Props, State> {
if (this.draggedCards?.length < 1) { if (this.draggedCards?.length < 1) {
return return
} }
ref.current!.classList.add('dragover') ref.current?.classList.add('dragover')
e.preventDefault() e.preventDefault()
}} }}
onDragEnter={(e) => { onDragEnter={(e) => {
if (this.draggedCards?.length < 1) { if (this.draggedCards?.length < 1) {
return return
} }
ref.current!.classList.add('dragover') ref.current?.classList.add('dragover')
e.preventDefault() e.preventDefault()
}} }}
onDragLeave={(e) => { onDragLeave={(e) => {
if (this.draggedCards?.length < 1) { if (this.draggedCards?.length < 1) {
return return
} }
ref.current!.classList.remove('dragover') ref.current?.classList.remove('dragover')
e.preventDefault() e.preventDefault()
}} }}
onDrop={(e) => { onDrop={(e) => {
ref.current!.classList.remove('dragover') ref.current?.classList.remove('dragover')
e.preventDefault() e.preventDefault()
if (this.draggedCards?.length < 1) { if (this.draggedCards?.length < 1) {
return return

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

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

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

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

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

@ -127,13 +127,17 @@ class TableComponent extends React.Component<Props, State> {
onDrag={(offset) => { onDrag={(offset) => {
const originalWidth = this.columnWidth(Constants.titleColumnId) const originalWidth = this.columnWidth(Constants.titleColumnId)
const newWidth = Math.max(Constants.minColumnWidth, originalWidth + offset) 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) => { onDragEnd={(offset) => {
Utils.log(`onDragEnd offset: ${offset}`) Utils.log(`onDragEnd offset: ${offset}`)
const originalWidth = this.columnWidth(Constants.titleColumnId) const originalWidth = this.columnWidth(Constants.titleColumnId)
const newWidth = Math.max(Constants.minColumnWidth, originalWidth + offset) 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} const columnWidths = {...activeView.columnWidths}
if (newWidth !== columnWidths[Constants.titleColumnId]) { if (newWidth !== columnWidths[Constants.titleColumnId]) {
@ -211,13 +215,17 @@ class TableComponent extends React.Component<Props, State> {
onDrag={(offset) => { onDrag={(offset) => {
const originalWidth = this.columnWidth(template.id) const originalWidth = this.columnWidth(template.id)
const newWidth = Math.max(Constants.minColumnWidth, originalWidth + offset) 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) => { onDragEnd={(offset) => {
Utils.log(`onDragEnd offset: ${offset}`) Utils.log(`onDragEnd offset: ${offset}`)
const originalWidth = this.columnWidth(template.id) const originalWidth = this.columnWidth(template.id)
const newWidth = Math.max(Constants.minColumnWidth, originalWidth + offset) 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} const columnWidths = {...activeView.columnWidths}
if (newWidth !== columnWidths[template.id]) { 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 { componentDidMount(): void {
if (this.props.focusOnMount) { 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 { componentDidUpdate(prevPros: Props, prevState: State): void {
if (this.state.isSearching && !prevState.isSearching) { 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) => { private onSearchKeyDown = (e: React.KeyboardEvent) => {
if (e.keyCode === 27) { // ESC: Clear search if (e.keyCode === 27) { // ESC: Clear search
this.searchFieldRef.current!.text = '' if (this.searchFieldRef.current) {
this.searchFieldRef.current.text = ''
}
this.setState({isSearching: false}) this.setState({isSearching: false})
this.props.setSearchText(undefined) this.props.setSearchText(undefined)
e.preventDefault() 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 => { public blur = (): void => {
this.saveOnBlur = false this.saveOnBlur = false
this.elementRef.current!.blur() this.elementRef.current?.blur()
this.saveOnBlur = true this.saveOnBlur = true
} }