From cc5b413f7cc00f6ddca2a772b6f485310180fe1a Mon Sep 17 00:00:00 2001 From: Chen-I Lim Date: Thu, 22 Oct 2020 14:10:38 -0700 Subject: [PATCH] Fix some linting issues --- webapp/src/components/boardCard.tsx | 19 ++-- webapp/src/components/boardComponent.tsx | 14 +-- webapp/src/components/switch.tsx | 8 +- webapp/src/components/tableComponent.tsx | 18 ++-- webapp/src/components/tableRow.tsx | 122 ++++++++++++----------- 5 files changed, 101 insertions(+), 80 deletions(-) diff --git a/webapp/src/components/boardCard.tsx b/webapp/src/components/boardCard.tsx index a7cc96646..9de6f1d1b 100644 --- a/webapp/src/components/boardCard.tsx +++ b/webapp/src/components/boardCard.tsx @@ -30,23 +30,29 @@ class BoardCard extends React.Component { this.state = {} } - render() { + shouldComponentUpdate(): boolean { + return true + } + + render(): JSX.Element { const {card} = this.props const optionsButtonRef = React.createRef() const visiblePropertyTemplates = this.props.visiblePropertyTemplates || [] const className = this.props.isSelected ? 'octo-board-card selected' : 'octo-board-card' - const element = - (
{ - 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 { {visiblePropertyTemplates.map((template) => { return OctoUtils.propertyValueReadonlyElement(card, template, '') })} -
) + + ) return element } diff --git a/webapp/src/components/boardComponent.tsx b/webapp/src/components/boardComponent.tsx index 03d85b600..64ee72554 100644 --- a/webapp/src/components/boardComponent.tsx +++ b/webapp/src/components/boardComponent.tsx @@ -209,7 +209,7 @@ class BoardComponent extends React.Component { Group by {boardTree.groupByProperty?.name} + >{boardTree.groupByProperty?.name}
{ } } - async addCard(groupByValue?: string): Promise { + private async addCard(groupByValue?: string): Promise { const {boardTree} = this.props const {activeView, board} = boardTree @@ -455,7 +455,7 @@ class BoardComponent extends React.Component { }) } - async propertyNameChanged(option: IPropertyOption, text: string): Promise { + private async propertyNameChanged(option: IPropertyOption, text: string): Promise { const {boardTree} = this.props await mutator.changePropertyOptionValue(boardTree, boardTree.groupByProperty, option, text) @@ -589,7 +589,7 @@ class BoardComponent extends React.Component { e.stopPropagation() } - async addGroupClicked() { + private async addGroupClicked() { Utils.log('onAddGroupClicked') const {boardTree} = this.props @@ -603,7 +603,7 @@ class BoardComponent extends React.Component { 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 { } } - 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 { } } - searchChanged(text?: string) { + private searchChanged(text?: string) { this.props.setSearchText(text) } } diff --git a/webapp/src/components/switch.tsx b/webapp/src/components/switch.tsx index 47e67c58c..6ccfa38e5 100644 --- a/webapp/src/components/switch.tsx +++ b/webapp/src/components/switch.tsx @@ -27,7 +27,11 @@ class Switch extends React.Component { 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 { document.getSelection().collapseToEnd() } - render() { + render(): JSX.Element { const {style} = this.props const {isOn} = this.state diff --git a/webapp/src/components/tableComponent.tsx b/webapp/src/components/tableComponent.tsx index 33161bde4..6ba4c0655 100644 --- a/webapp/src/components/tableComponent.tsx +++ b/webapp/src/components/tableComponent.tsx @@ -47,13 +47,17 @@ class TableComponent extends React.Component { 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 { } } }} - />) + />) this.cardIdToRowMap.set(card.id, tableRowRef) @@ -442,13 +446,13 @@ class TableComponent extends React.Component { 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 { 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 { } } - searchChanged(text?: string) { + private searchChanged(text?: string) { this.props.setSearchText(text) } } diff --git a/webapp/src/components/tableRow.tsx b/webapp/src/components/tableRow.tsx index fe1936739..394d0714f 100644 --- a/webapp/src/components/tableRow.tsx +++ b/webapp/src/components/tableRow.tsx @@ -28,86 +28,92 @@ class TableRow extends React.Component { 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() - const element = (
- - {/* Name / title */} - + const element = (
{ - openButonRef.current.style.display = null - }} - onMouseLeave={() => { - openButonRef.current.style.display = 'none' - }} + className='octo-table-row' + key={card.id} > -
-
{card.icon}
- { - mutator.changeTitle(card, text) - }} - onKeyDown={(e) => { - onKeyDown(e) - }} - /> -
+ + {/* Name / title */}
{ - this.setState({showCard: true}) + className='octo-table-cell title-cell' + id='mainBoardHeader' + onMouseOver={() => { + openButonRef.current.style.display = null }} - >Open
- {this.state.showCard && - - this.setState({showCard: false})} - /> - } -
+ onMouseLeave={() => { + openButonRef.current.style.display = 'none' + }} + > +
+
{card.icon}
+ { + mutator.changeTitle(card, text) + }} + onKeyDown={(e) => { + onKeyDown(e) + }} + /> +
- {/* Columns, one per property */} +
{ + this.setState({showCard: true}) + }} + >Open
+ {this.state.showCard && + + this.setState({showCard: false})} + /> + } +
- {board.cardProperties. - filter((template) => activeView.visiblePropertyIds.includes(template.id)). - map((template) => { - return (
activeView.visiblePropertyIds.includes(template.id)). + map((template) => { + return ( +
- {OctoUtils.propertyValueEditableElement(card, template)} -
) - })} -
) + {OctoUtils.propertyValueEditableElement(card, template)} +
) + })} + ) return element } - focusOnTitle() { + focusOnTitle(): void { this.titleRef.current?.focus() } }