From fddda793bc4ad40eb18f4c7959c3db4eba7e9339 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jes=C3=BAs=20Espino?= Date: Mon, 26 Oct 2020 18:05:02 +0100 Subject: [PATCH 1/4] Migrate cardDetail Editable to the new widget --- webapp/src/components/cardDetail.tsx | 30 +++++++++++++++++++--------- 1 file changed, 21 insertions(+), 9 deletions(-) diff --git a/webapp/src/components/cardDetail.tsx b/webapp/src/components/cardDetail.tsx index 5fc1434e2..9622ed3b1 100644 --- a/webapp/src/components/cardDetail.tsx +++ b/webapp/src/components/cardDetail.tsx @@ -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 { @@ -44,7 +45,9 @@ class CardDetail extends React.Component { constructor(props: Props) { super(props) - this.state = {} + this.state = { + title: '', + } } componentDidMount() { @@ -52,11 +55,11 @@ class CardDetail extends React.Component { 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 { } const {card, comments} = cardTree - const newCommentRef = React.createRef() - const sendCommentButtonRef = React.createRef() let contentElements if (cardTree.contents.length > 0) { contentElements = @@ -151,10 +152,21 @@ class CardDetail extends React.Component { { - 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): 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() + } }} /> From c9a7a1748cd448e6d47473d96b23e642ee4b1542 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jes=C3=BAs=20Espino?= Date: Mon, 26 Oct 2020 18:34:30 +0100 Subject: [PATCH 2/4] Property value editable migrated to the new editable widget --- .../src/components/propertyValueElement.tsx | 36 +++++++++++++++---- 1 file changed, 29 insertions(+), 7 deletions(-) diff --git a/webapp/src/components/propertyValueElement.tsx b/webapp/src/components/propertyValueElement.tsx index ee508a51d..47d11ad54 100644 --- a/webapp/src/components/propertyValueElement.tsx +++ b/webapp/src/components/propertyValueElement.tsx @@ -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 { +type State = { + value: string +} + +export default class PropertyValueElement extends React.Component { + private valueEditor = React.createRef() + + 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 { if (!readOnly) { return ( { - 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): 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() + } }} /> ) From 15f85069421143b28aeb0970ab2124be803f96c7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jes=C3=BAs=20Espino?= Date: Mon, 26 Oct 2020 18:42:17 +0100 Subject: [PATCH 3/4] Table row editable migrated to the new editable widget --- webapp/src/components/tableRow.tsx | 38 ++++++++++++++++++++---------- 1 file changed, 26 insertions(+), 12 deletions(-) diff --git a/webapp/src/components/tableRow.tsx b/webapp/src/components/tableRow.tsx index c55e58773..d985750c3 100644 --- a/webapp/src/components/tableRow.tsx +++ b/webapp/src/components/tableRow.tsx @@ -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 { private titleRef = React.createRef() - 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 { const openButonRef = React.createRef() - const element = ( + return (
{
{card.icon}
{ - 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): 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 { />
) })} - ) - - return element + + ) } focusOnTitle(): void { From 083ec6e2fffb450d0a5eb760dd80a859a8e7a9be Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jes=C3=BAs=20Espino?= Date: Mon, 26 Oct 2020 18:45:45 +0100 Subject: [PATCH 4/4] Remove unneded code in the tableComponent --- webapp/src/components/tableComponent.tsx | 22 +--------------------- 1 file changed, 1 insertion(+), 21 deletions(-) diff --git a/webapp/src/components/tableComponent.tsx b/webapp/src/components/tableComponent.tsx index 3e83c37a1..adc0dde70 100644 --- a/webapp/src/components/tableComponent.tsx +++ b/webapp/src/components/tableComponent.tsx @@ -29,33 +29,19 @@ type Props = { } type State = { - isSearching: boolean shownCard?: Card - viewMenu: boolean - showFilter: boolean } class TableComponent extends React.Component { private draggedHeaderTemplate: IPropertyTemplate private cardIdToRowMap = new Map>() private cardIdToFocusOnRender: string - private searchFieldRef = React.createRef() - - 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 { ) } - 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