Fix some linting issues
This commit is contained in:
parent
4f2e6e567c
commit
cc5b413f7c
5 changed files with 101 additions and 80 deletions
|
@ -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
|
||||
}
|
||||
|
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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
|
||||
|
||||
|
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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()
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue