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

Fix some linting issues

Browse Source
This commit is contained in:
Chen-I Lim 2020-10-22 14:10:38 -07:00
parent 4f2e6e567c
commit cc5b413f7c
5 changed files with 101 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
webapp/src/components/boardCard.tsx
View File

@ -30,23 +30,29 @@ class BoardCard extends React.Component<BoardCardProps, BoardCardState> {
this.state = {}
}
render() {
shouldComponentUpdate(): boolean {
return true
}
render(): JSX.Element {
const {card} = this.props
const optionsButtonRef = React.createRef<HTMLDivElement>()
const visiblePropertyTemplates = this.props.visiblePropertyTemplates || []
const className = this.props.isSelected ? 'octo-board-card selected' : 'octo-board-card'
const element =
(<div
const element = (
<div
className={className}
draggable={true}
style={{opacity: this.state.isDragged ? 0.5 : 1}}
onClick={this.props.onClick}
onDragStart={(e) => {
this.setState({isDragged: true}); this.props.onDragStart(e)
this.setState({isDragged: true})
this.props.onDragStart(e)
}}
onDragEnd={(e) => {
this.setState({isDragged: false}); this.props.onDragEnd(e)
this.setState({isDragged: false})
this.props.onDragEnd(e)
}}
onMouseOver={() => {
@ -72,7 +78,8 @@ class BoardCard extends React.Component<BoardCardProps, BoardCardState> {
{visiblePropertyTemplates.map((template) => {
return OctoUtils.propertyValueReadonlyElement(card, template, '')
})}
</div>)
</div>
)
return element
}

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

@ -209,7 +209,7 @@ class BoardComponent extends React.Component<Props, State> {
Group by <span
style={groupByStyle}
id='groupByLabel'
>{boardTree.groupByProperty?.name}</span>
>{boardTree.groupByProperty?.name}</span>
</div>
<div
className={hasFilter ? 'octo-button active' : 'octo-button'}
@ -437,7 +437,7 @@ class BoardComponent extends React.Component<Props, State> {
}
}
async addCard(groupByValue?: string): Promise<void> {
private async addCard(groupByValue?: string): Promise<void> {
const {boardTree} = this.props
const {activeView, board} = boardTree
@ -455,7 +455,7 @@ class BoardComponent extends React.Component<Props, State> {
})
}
async propertyNameChanged(option: IPropertyOption, text: string): Promise<void> {
private async propertyNameChanged(option: IPropertyOption, text: string): Promise<void> {
const {boardTree} = this.props
await mutator.changePropertyOptionValue(boardTree, boardTree.groupByProperty, option, text)
@ -589,7 +589,7 @@ class BoardComponent extends React.Component<Props, State> {
e.stopPropagation()
}
async addGroupClicked() {
private async addGroupClicked() {
Utils.log('onAddGroupClicked')
const {boardTree} = this.props
@ -603,7 +603,7 @@ class BoardComponent extends React.Component<Props, State> {
await mutator.insertPropertyOption(boardTree, boardTree.groupByProperty, option, 'add group')
}
async onDropToColumn(option: IPropertyOption) {
private async onDropToColumn(option: IPropertyOption) {
const {boardTree} = this.props
const {draggedCards, draggedHeaderOption} = this
const propertyValue = option ? option.value : undefined
@ -632,7 +632,7 @@ class BoardComponent extends React.Component<Props, State> {
}
}
onSearchKeyDown(e: React.KeyboardEvent) {
private onSearchKeyDown(e: React.KeyboardEvent) {
if (e.keyCode === 27) { // ESC: Clear search
this.searchFieldRef.current.text = ''
this.setState({isSearching: false})
@ -641,7 +641,7 @@ class BoardComponent extends React.Component<Props, State> {
}
}
searchChanged(text?: string) {
private searchChanged(text?: string) {
this.props.setSearchText(text)
}
}

8
webapp/src/components/switch.tsx
View File

@ -27,7 +27,11 @@ class Switch extends React.Component<Props, State> {
this.state = {isOn: props.isOn}
}
focus() {
shouldComponentUpdate(): boolean {
return true
}
focus(): void {
this.elementRef.current.focus()
// Put cursor at end
@ -35,7 +39,7 @@ class Switch extends React.Component<Props, State> {
document.getSelection().collapseToEnd()
}
render() {
render(): JSX.Element {
const {style} = this.props
const {isOn} = this.state

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

@ -47,13 +47,17 @@ class TableComponent extends React.Component<Props, State> {
this.state = {isHoverOnCover: false, isSearching: Boolean(this.props.boardTree?.getSearchText()), viewMenu: false}
}
componentDidUpdate(prevPros: Props, prevState: State) {
shouldComponentUpdate(): boolean {
return true
}
componentDidUpdate(prevPros: Props, prevState: State): void {
if (this.state.isSearching && !prevState.isSearching) {
this.searchFieldRef.current.focus()
}
}
render() {
render(): JSX.Element {
const {boardTree, showView} = this.props
if (!boardTree || !boardTree.board) {
@ -288,7 +292,7 @@ class TableComponent extends React.Component<Props, State> {
}
}
}}
/>)
/>)
this.cardIdToRowMap.set(card.id, tableRowRef)
@ -442,13 +446,13 @@ class TableComponent extends React.Component<Props, State> {
OldMenu.shared.showAtElement(e.target as HTMLElement)
}
focusOnCardTitle(cardId: string) {
private focusOnCardTitle(cardId: string): void {
const tableRowRef = this.cardIdToRowMap.get(cardId)
Utils.log(`focusOnCardTitle, ${tableRowRef?.current ?? 'undefined'}`)
tableRowRef?.current.focusOnTitle()
}
async addCard(show = false) {
private async addCard(show = false) {
const {boardTree} = this.props
const card = new MutableCard()
@ -487,7 +491,7 @@ class TableComponent extends React.Component<Props, State> {
await mutator.changePropertyTemplateOrder(board, draggedHeaderTemplate, destIndex)
}
onSearchKeyDown(e: React.KeyboardEvent) {
private onSearchKeyDown(e: React.KeyboardEvent) {
if (e.keyCode === 27) { // ESC: Clear search
this.searchFieldRef.current.text = ''
this.setState({...this.state, isSearching: false})
@ -496,7 +500,7 @@ class TableComponent extends React.Component<Props, State> {
}
}
searchChanged(text?: string) {
private searchChanged(text?: string) {
this.props.setSearchText(text)
}
}

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

@ -28,86 +28,92 @@ class TableRow extends React.Component<Props, State> {
showCard: false,
}
componentDidMount() {
shouldComponentUpdate(): boolean {
return true
}
componentDidMount(): void {
if (this.props.focusOnMount) {
this.titleRef.current.focus()
}
}
render() {
render(): JSX.Element {
const {boardTree, card, onKeyDown} = this.props
const {board, activeView} = boardTree
const openButonRef = React.createRef<HTMLDivElement>()
const element = (<div
className='octo-table-row'
key={card.id}
>
{/* Name / title */}
const element = (
<div
className='octo-table-cell title-cell'
id='mainBoardHeader'
onMouseOver={() => {
openButonRef.current.style.display = null
}}
onMouseLeave={() => {
openButonRef.current.style.display = 'none'
}}
className='octo-table-row'
key={card.id}
>
<div className='octo-icontitle'>
<div className='octo-icon'>{card.icon}</div>
<Editable
ref={this.titleRef}
text={card.title}
placeholderText='Untitled'
onChanged={(text) => {
mutator.changeTitle(card, text)
}}
onKeyDown={(e) => {
onKeyDown(e)
}}
/>
</div>
{/* Name / title */}
<div
ref={openButonRef}
className='octo-hoverbutton'
style={{display: 'none'}}
onClick={() => {
this.setState({showCard: true})
className='octo-table-cell title-cell'
id='mainBoardHeader'
onMouseOver={() => {
openButonRef.current.style.display = null
}}
>Open</div>
{this.state.showCard &&
<RootPortal>
<CardDialog
boardTree={boardTree}
card={card}
onClose={() => this.setState({showCard: false})}
/>
</RootPortal>}
</div>
onMouseLeave={() => {
openButonRef.current.style.display = 'none'
}}
>
<div className='octo-icontitle'>
<div className='octo-icon'>{card.icon}</div>
<Editable
ref={this.titleRef}
text={card.title}
placeholderText='Untitled'
onChanged={(text) => {
mutator.changeTitle(card, text)
}}
onKeyDown={(e) => {
onKeyDown(e)
}}
/>
</div>
{/* Columns, one per property */}
<div
ref={openButonRef}
className='octo-hoverbutton'
style={{display: 'none'}}
onClick={() => {
this.setState({showCard: true})
}}
>Open</div>
{this.state.showCard &&
<RootPortal>
<CardDialog
boardTree={boardTree}
card={card}
onClose={() => this.setState({showCard: false})}
/>
</RootPortal>}
</div>
{board.cardProperties.
filter((template) => activeView.visiblePropertyIds.includes(template.id)).
map((template) => {
return (<div
className='octo-table-cell'
key={template.id}
{/* Columns, one per property */}
{board.cardProperties.
filter((template) => activeView.visiblePropertyIds.includes(template.id)).
map((template) => {
return (
<div
className='octo-table-cell'
key={template.id}
>
{OctoUtils.propertyValueEditableElement(card, template)}
</div>)
})}
</div>)
{OctoUtils.propertyValueEditableElement(card, template)}
</div>)
})}
</div>)
return element
}
focusOnTitle() {
focusOnTitle(): void {
this.titleRef.current?.focus()
}
}