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
e82e9dba89
@ -155,19 +155,8 @@ class CardDetail extends React.Component<Props, State> {
|
||||
value={this.state.title}
|
||||
placeholderText='Untitled'
|
||||
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()
|
||||
}
|
||||
}}
|
||||
onSave={() => mutator.changeTitle(card, this.state.title)}
|
||||
onCancel={() => this.setState({title: this.state.cardTree.card.title})}
|
||||
/>
|
||||
|
||||
{/* Property list */}
|
||||
|
@ -20,6 +20,14 @@
|
||||
color: rgba(55, 53, 47, 0.8);
|
||||
flex-grow: 1;
|
||||
margin-left: 5px;
|
||||
.octo-button {
|
||||
display: none;
|
||||
}
|
||||
&:focus {
|
||||
.octo-button {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -78,16 +78,12 @@ class CommentsList extends React.Component<Props, State> {
|
||||
placeholderText={intl.formatMessage({id: 'CardDetail.new-comment-placeholder', defaultMessage: 'Add a comment...'})}
|
||||
onChange={(value: string) => this.setState({newComment: value})}
|
||||
value={this.state.newComment}
|
||||
onFocus={() => this.setState({inputFocused: true})}
|
||||
onBlur={() => this.setState({inputFocused: false})}
|
||||
onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
|
||||
if (e.keyCode === 13 && !(e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey) {
|
||||
this.sendComment()
|
||||
}
|
||||
onSave={() => {
|
||||
this.sendComment()
|
||||
}}
|
||||
/>
|
||||
|
||||
{this.state.newComment && this.state.inputFocused &&
|
||||
{this.state.newComment &&
|
||||
<div
|
||||
className='octo-button filled'
|
||||
onClick={() => {
|
||||
|
@ -24,7 +24,6 @@ type State = {
|
||||
}
|
||||
|
||||
export default class PropertyValueElement extends React.Component<Props, State> {
|
||||
private valueEditor = React.createRef<Editable>()
|
||||
|
||||
constructor(props: Props) {
|
||||
super(props)
|
||||
@ -89,24 +88,12 @@ export default class PropertyValueElement extends React.Component<Props, State>
|
||||
if (!readOnly) {
|
||||
return (
|
||||
<Editable
|
||||
ref={this.valueEditor}
|
||||
className='octo-propertyvalue'
|
||||
placeholderText='Empty'
|
||||
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()
|
||||
}
|
||||
}}
|
||||
onSave={() => mutator.changePropertyValue(card, propertyTemplate.id, this.state.value)}
|
||||
onCancel={() => this.setState({value: propertyValue})}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
@ -174,13 +174,12 @@ class TableComponent extends React.Component<Props, State> {
|
||||
boardTree={boardTree}
|
||||
card={card}
|
||||
focusOnMount={focusOnMount}
|
||||
onKeyDown={(e) => {
|
||||
if (e.keyCode === 13) {
|
||||
// Enter: Insert new card if on last row
|
||||
if (cards.length > 0 && cards[cards.length - 1] === card) {
|
||||
this.addCard(false)
|
||||
}
|
||||
onSaveWithEnter={() => {
|
||||
console.log("WORKING")
|
||||
if (cards.length > 0 && cards[cards.length - 1] === card) {
|
||||
this.addCard(false)
|
||||
}
|
||||
console.log("STILL WORKING")
|
||||
}}
|
||||
/>)
|
||||
|
||||
|
@ -16,12 +16,12 @@ type Props = {
|
||||
boardTree: BoardTree
|
||||
card: Card
|
||||
focusOnMount: boolean
|
||||
onKeyDown: (e: React.KeyboardEvent) => void
|
||||
onSaveWithEnter: () => void
|
||||
}
|
||||
|
||||
type State = {
|
||||
showCard: boolean
|
||||
title: string
|
||||
title: string
|
||||
}
|
||||
|
||||
class TableRow extends React.Component<Props, State> {
|
||||
@ -40,12 +40,12 @@ class TableRow extends React.Component<Props, State> {
|
||||
|
||||
componentDidMount(): void {
|
||||
if (this.props.focusOnMount) {
|
||||
this.titleRef.current.focus()
|
||||
setTimeout(() => this.titleRef.current.focus(), 10)
|
||||
}
|
||||
}
|
||||
|
||||
render(): JSX.Element {
|
||||
const {boardTree, card, onKeyDown} = this.props
|
||||
const {boardTree, card, onSaveWithEnter} = this.props
|
||||
const {board, activeView} = boardTree
|
||||
|
||||
const openButonRef = React.createRef<HTMLDivElement>()
|
||||
@ -75,20 +75,13 @@ class TableRow extends React.Component<Props, State> {
|
||||
value={this.state.title}
|
||||
placeholderText='Untitled'
|
||||
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()
|
||||
onSave={(saveType) => {
|
||||
mutator.changeTitle(card, this.state.title)
|
||||
if (saveType === 'onEnter') {
|
||||
onSaveWithEnter()
|
||||
}
|
||||
onKeyDown(e)
|
||||
}}
|
||||
onCancel={() => this.setState({title: card.title})}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
@ -65,7 +65,7 @@ class ViewHeader extends React.Component<Props, State> {
|
||||
private onSearchKeyDown = (e: React.KeyboardEvent) => {
|
||||
if (e.keyCode === 27) { // ESC: Clear search
|
||||
this.searchFieldRef.current.text = ''
|
||||
this.setState({...this.state, isSearching: false})
|
||||
this.setState({isSearching: false})
|
||||
this.props.setSearchText(undefined)
|
||||
e.preventDefault()
|
||||
}
|
||||
@ -280,7 +280,7 @@ class ViewHeader extends React.Component<Props, State> {
|
||||
<div
|
||||
className='octo-button'
|
||||
onClick={() => {
|
||||
this.setState({...this.state, isSearching: true})
|
||||
this.setState({isSearching: true})
|
||||
}}
|
||||
>
|
||||
<FormattedMessage
|
||||
|
@ -84,19 +84,8 @@ class ViewTitle extends React.Component<Props, State> {
|
||||
value={this.state.title}
|
||||
placeholderText={intl.formatMessage({id: 'ViewTitle.untitled-board', defaultMessage: 'Untitled Board'})}
|
||||
onChange={(title) => this.setState({title})}
|
||||
onBlur={() => mutator.changeTitle(board, this.state.title)}
|
||||
onFocus={() => this.titleEditor.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.props.board.title})
|
||||
setTimeout(() => this.titleEditor.current.blur(), 0)
|
||||
} else if (e.keyCode === 13 && !(e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey) { // Return
|
||||
e.stopPropagation()
|
||||
mutator.changeTitle(board, this.state.title)
|
||||
this.titleEditor.current.blur()
|
||||
}
|
||||
}}
|
||||
onSave={() => mutator.changeTitle(board, this.state.title)}
|
||||
onCancel={() => this.setState({title: this.props.board.title})}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
|
@ -168,7 +168,6 @@ export default class BoardPage extends React.Component<Props, State> {
|
||||
|
||||
// TODO: Handle error (viewId not found)
|
||||
this.setState({
|
||||
...this.state,
|
||||
boardTree,
|
||||
boardId,
|
||||
viewId: boardTree.activeView.id,
|
||||
|
@ -10,13 +10,13 @@ type Props = {
|
||||
placeholderText?: string
|
||||
className?: string
|
||||
|
||||
onFocus?: () => void
|
||||
onBlur?: () => void
|
||||
onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void
|
||||
onCancel?: () => void
|
||||
onSave?: (saveType: 'onEnter'|'onBlur') => void
|
||||
}
|
||||
|
||||
export default class Editable extends React.Component<Props> {
|
||||
private elementRef = React.createRef<HTMLInputElement>()
|
||||
private saveOnBlur = true
|
||||
|
||||
shouldComponentUpdate(): boolean {
|
||||
return true
|
||||
@ -26,16 +26,18 @@ export default class Editable extends React.Component<Props> {
|
||||
this.elementRef.current.focus()
|
||||
|
||||
// Put cursor at end
|
||||
// document.execCommand('selectAll', false, null)
|
||||
// document.getSelection().collapseToEnd()
|
||||
document.execCommand('selectAll', false, null)
|
||||
document.getSelection().collapseToEnd()
|
||||
}
|
||||
|
||||
public blur(): void {
|
||||
public blur = (): void => {
|
||||
this.saveOnBlur = false
|
||||
this.elementRef.current.blur()
|
||||
this.saveOnBlur = true
|
||||
}
|
||||
|
||||
public render(): JSX.Element {
|
||||
const {value, onChange, className, placeholderText, onFocus, onBlur, onKeyDown} = this.props
|
||||
const {value, onChange, className, placeholderText} = this.props
|
||||
|
||||
return (
|
||||
<input
|
||||
@ -46,9 +48,22 @@ export default class Editable extends React.Component<Props> {
|
||||
onChange(e.target.value)
|
||||
}}
|
||||
value={value}
|
||||
onFocus={onFocus}
|
||||
onBlur={onBlur}
|
||||
onKeyDown={onKeyDown}
|
||||
onBlur={() => this.saveOnBlur && this.props.onSave && this.props.onSave('onBlur')}
|
||||
onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>): void => {
|
||||
if (e.keyCode === 27 && !(e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey) { // ESC
|
||||
e.stopPropagation()
|
||||
if (this.props.onCancel) {
|
||||
this.props.onCancel()
|
||||
}
|
||||
this.blur()
|
||||
} else if (e.keyCode === 13 && !(e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey) { // Return
|
||||
e.stopPropagation()
|
||||
if (this.props.onSave) {
|
||||
this.props.onSave('onEnter')
|
||||
}
|
||||
this.blur()
|
||||
}
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user