mirror of
https://github.com/mattermost/focalboard.git
synced 2024-12-24 13:43:12 +02:00
Merge branch 'main' of github.com:mattermost/mattermost-octo-tasks into main
This commit is contained in:
commit
17e802f9fb
@ -13,9 +13,9 @@ import {Utils} from '../utils'
|
||||
|
||||
import MenuWrapper from '../widgets/menuWrapper'
|
||||
import Menu from '../widgets/menu'
|
||||
import Editable from '../widgets/editable'
|
||||
|
||||
import Button from './button'
|
||||
import {Editable} from './editable'
|
||||
import {MarkdownEditor} from './markdownEditor'
|
||||
import ContentBlock from './contentBlock'
|
||||
import CommentsList from './commentsList'
|
||||
@ -32,6 +32,7 @@ type Props = {
|
||||
|
||||
type State = {
|
||||
cardTree?: CardTree
|
||||
title: string
|
||||
}
|
||||
|
||||
class CardDetail extends React.Component<Props, State> {
|
||||
@ -44,7 +45,9 @@ class CardDetail extends React.Component<Props, State> {
|
||||
|
||||
constructor(props: Props) {
|
||||
super(props)
|
||||
this.state = {}
|
||||
this.state = {
|
||||
title: '',
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
@ -52,11 +55,11 @@ class CardDetail extends React.Component<Props, State> {
|
||||
this.cardListener.open([this.props.cardId], async (blockId) => {
|
||||
Utils.log(`cardListener.onChanged: ${blockId}`)
|
||||
await cardTree.sync()
|
||||
this.setState({...this.state, cardTree})
|
||||
this.setState({cardTree})
|
||||
})
|
||||
const cardTree = new MutableCardTree(this.props.cardId)
|
||||
cardTree.sync().then(() => {
|
||||
this.setState({...this.state, cardTree})
|
||||
this.setState({cardTree, title: cardTree.card.title})
|
||||
setTimeout(() => {
|
||||
if (this.titleRef.current) {
|
||||
this.titleRef.current.focus()
|
||||
@ -79,8 +82,6 @@ class CardDetail extends React.Component<Props, State> {
|
||||
}
|
||||
const {card, comments} = cardTree
|
||||
|
||||
const newCommentRef = React.createRef<Editable>()
|
||||
const sendCommentButtonRef = React.createRef<HTMLDivElement>()
|
||||
let contentElements
|
||||
if (cardTree.contents.length > 0) {
|
||||
contentElements =
|
||||
@ -151,10 +152,21 @@ class CardDetail extends React.Component<Props, State> {
|
||||
<Editable
|
||||
ref={this.titleRef}
|
||||
className='title'
|
||||
text={card.title}
|
||||
value={this.state.title}
|
||||
placeholderText='Untitled'
|
||||
onChanged={(text) => {
|
||||
mutator.changeTitle(card, text)
|
||||
onChange={(title: string) => this.setState({title})}
|
||||
onBlur={() => mutator.changeTitle(card, this.state.title)}
|
||||
onFocus={() => this.titleRef.current.focus()}
|
||||
onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>): void => {
|
||||
if (e.keyCode === 27 && !(e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey) { // ESC
|
||||
e.stopPropagation()
|
||||
this.setState({title: this.state.cardTree.card.title})
|
||||
setTimeout(() => this.titleRef.current.blur(), 0)
|
||||
} else if (e.keyCode === 13 && !(e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey) { // Return
|
||||
e.stopPropagation()
|
||||
mutator.changeTitle(card, this.state.title)
|
||||
this.titleRef.current.blur()
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
|
@ -8,8 +8,7 @@ import {IPropertyTemplate, IPropertyOption} from '../blocks/board'
|
||||
import {OctoUtils} from '../octoUtils'
|
||||
import mutator from '../mutator'
|
||||
|
||||
import {Editable} from './editable'
|
||||
|
||||
import Editable from '../widgets/editable'
|
||||
import MenuWrapper from '../widgets/menuWrapper'
|
||||
import Menu from '../widgets/menu'
|
||||
|
||||
@ -20,7 +19,19 @@ type Props = {
|
||||
emptyDisplayValue: string
|
||||
}
|
||||
|
||||
export default class PropertyValueElement extends React.Component<Props> {
|
||||
type State = {
|
||||
value: string
|
||||
}
|
||||
|
||||
export default class PropertyValueElement extends React.Component<Props, State> {
|
||||
private valueEditor = React.createRef<Editable>()
|
||||
|
||||
constructor(props: Props) {
|
||||
super(props)
|
||||
const propertyValue = props.card.properties[props.propertyTemplate.id]
|
||||
this.state = {value: propertyValue}
|
||||
}
|
||||
|
||||
shouldComponentUpdate(): boolean {
|
||||
return true
|
||||
}
|
||||
@ -78,12 +89,23 @@ export default class PropertyValueElement extends React.Component<Props> {
|
||||
if (!readOnly) {
|
||||
return (
|
||||
<Editable
|
||||
key={propertyTemplate.id}
|
||||
ref={this.valueEditor}
|
||||
className='octo-propertyvalue'
|
||||
placeholderText='Empty'
|
||||
text={displayValue}
|
||||
onChanged={(text) => {
|
||||
mutator.changePropertyValue(card, propertyTemplate.id, text)
|
||||
value={this.state.value}
|
||||
onChange={(value) => this.setState({value})}
|
||||
onBlur={() => mutator.changePropertyValue(card, propertyTemplate.id, this.state.value)}
|
||||
onFocus={() => this.valueEditor.current.focus()}
|
||||
onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>): void => {
|
||||
if (e.keyCode === 27 && !(e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey) { // ESC
|
||||
e.stopPropagation()
|
||||
this.setState({value: propertyValue})
|
||||
setTimeout(() => this.valueEditor.current.blur(), 0)
|
||||
} else if (e.keyCode === 13 && !(e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey) { // Return
|
||||
e.stopPropagation()
|
||||
mutator.changePropertyValue(card, propertyTemplate.id, this.state.value)
|
||||
this.valueEditor.current.blur()
|
||||
}
|
||||
}}
|
||||
/>
|
||||
)
|
||||
|
@ -29,33 +29,19 @@ type Props = {
|
||||
}
|
||||
|
||||
type State = {
|
||||
isSearching: boolean
|
||||
shownCard?: Card
|
||||
viewMenu: boolean
|
||||
showFilter: boolean
|
||||
}
|
||||
|
||||
class TableComponent extends React.Component<Props, State> {
|
||||
private draggedHeaderTemplate: IPropertyTemplate
|
||||
private cardIdToRowMap = new Map<string, React.RefObject<TableRow>>()
|
||||
private cardIdToFocusOnRender: string
|
||||
private searchFieldRef = React.createRef<Editable>()
|
||||
|
||||
constructor(props: Props) {
|
||||
super(props)
|
||||
this.state = {isSearching: Boolean(this.props.boardTree?.getSearchText()), viewMenu: false, showFilter: false}
|
||||
}
|
||||
state: State = {}
|
||||
|
||||
shouldComponentUpdate(): boolean {
|
||||
return true
|
||||
}
|
||||
|
||||
componentDidUpdate(prevPros: Props, prevState: State): void {
|
||||
if (this.state.isSearching && !prevState.isSearching) {
|
||||
this.searchFieldRef.current.focus()
|
||||
}
|
||||
}
|
||||
|
||||
render(): JSX.Element {
|
||||
const {boardTree, showView} = this.props
|
||||
|
||||
@ -225,12 +211,6 @@ class TableComponent extends React.Component<Props, State> {
|
||||
)
|
||||
}
|
||||
|
||||
private focusOnCardTitle(cardId: string): void {
|
||||
const tableRowRef = this.cardIdToRowMap.get(cardId)
|
||||
Utils.log(`focusOnCardTitle, ${tableRowRef?.current ?? 'undefined'}`)
|
||||
tableRowRef?.current.focusOnTitle()
|
||||
}
|
||||
|
||||
private addCard = async (show = false) => {
|
||||
const {boardTree} = this.props
|
||||
|
||||
|
@ -6,8 +6,9 @@ import {BoardTree} from '../viewModel/boardTree'
|
||||
import {Card} from '../blocks/card'
|
||||
import mutator from '../mutator'
|
||||
|
||||
import Editable from '../widgets/editable'
|
||||
|
||||
import PropertyValueElement from './propertyValueElement'
|
||||
import {Editable} from './editable'
|
||||
import {CardDialog} from './cardDialog'
|
||||
import RootPortal from './rootPortal'
|
||||
|
||||
@ -20,12 +21,17 @@ type Props = {
|
||||
|
||||
type State = {
|
||||
showCard: boolean
|
||||
title: string
|
||||
}
|
||||
|
||||
class TableRow extends React.Component<Props, State> {
|
||||
private titleRef = React.createRef<Editable>()
|
||||
state = {
|
||||
showCard: false,
|
||||
constructor(props: Props) {
|
||||
super(props)
|
||||
this.state = {
|
||||
showCard: false,
|
||||
title: props.card.title,
|
||||
}
|
||||
}
|
||||
|
||||
shouldComponentUpdate(): boolean {
|
||||
@ -44,7 +50,7 @@ class TableRow extends React.Component<Props, State> {
|
||||
|
||||
const openButonRef = React.createRef<HTMLDivElement>()
|
||||
|
||||
const element = (
|
||||
return (
|
||||
<div
|
||||
className='octo-table-row'
|
||||
key={card.id}
|
||||
@ -66,12 +72,21 @@ class TableRow extends React.Component<Props, State> {
|
||||
<div className='octo-icon'>{card.icon}</div>
|
||||
<Editable
|
||||
ref={this.titleRef}
|
||||
text={card.title}
|
||||
value={this.state.title}
|
||||
placeholderText='Untitled'
|
||||
onChanged={(text) => {
|
||||
mutator.changeTitle(card, text)
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
onChange={(title: string) => this.setState({title})}
|
||||
onBlur={() => mutator.changeTitle(card, this.state.title)}
|
||||
onFocus={() => this.titleRef.current.focus()}
|
||||
onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>): void => {
|
||||
if (e.keyCode === 27 && !(e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey) { // ESC
|
||||
e.stopPropagation()
|
||||
this.setState({title: card.title})
|
||||
setTimeout(() => this.titleRef.current.blur(), 0)
|
||||
} else if (e.keyCode === 13 && !(e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey) { // Return
|
||||
e.stopPropagation()
|
||||
mutator.changeTitle(card, this.state.title)
|
||||
this.titleRef.current.blur()
|
||||
}
|
||||
onKeyDown(e)
|
||||
}}
|
||||
/>
|
||||
@ -113,9 +128,8 @@ class TableRow extends React.Component<Props, State> {
|
||||
/>
|
||||
</div>)
|
||||
})}
|
||||
</div>)
|
||||
|
||||
return element
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
focusOnTitle(): void {
|
||||
|
Loading…
Reference in New Issue
Block a user