From 4bc73d24e4e0e25a2d008270881e2ccb8c741d4d Mon Sep 17 00:00:00 2001 From: Artur Drozdz Date: Mon, 4 Oct 2021 13:21:07 +0200 Subject: [PATCH 1/6] Data Browser: skipping invisible column when navigating using keyboard --- .../Data/Browser/DataBrowser.react.js | 26 ++++++++++++++----- 1 file changed, 19 insertions(+), 7 deletions(-) diff --git a/src/dashboard/Data/Browser/DataBrowser.react.js b/src/dashboard/Data/Browser/DataBrowser.react.js index 2b30dfc7c5..884fb13343 100644 --- a/src/dashboard/Data/Browser/DataBrowser.react.js +++ b/src/dashboard/Data/Browser/DataBrowser.react.js @@ -67,7 +67,7 @@ export default class DataBrowser extends React.Component { simplifiedSchema: this.getSimplifiedSchema(props.schema, props.className) }); } else if (Object.keys(props.columns).length !== Object.keys(this.props.columns).length - || (props.isUnique && props.uniqueField !== this.props.uniqueField)) { + || (props.isUnique && props.uniqueField !== this.props.uniqueField)) { const columnPreferences = context.currentApp.columnPreference || {} let order = ColumnPreferences.getOrder( props.columns, @@ -127,7 +127,7 @@ export default class DataBrowser extends React.Component { * @param {Number} hoverIndex - index of headerbar moved to left of */ handleHeaderDragDrop(dragIndex, hoverIndex) { - const newOrder = [ ...this.state.order ]; + const newOrder = [...this.state.order]; const movedIndex = newOrder.splice(dragIndex, 1); newOrder.splice(hoverIndex, 0, movedIndex[0]); this.setState({ order: newOrder }, () => { @@ -154,9 +154,9 @@ export default class DataBrowser extends React.Component { } return; } - if(!this.state.editing && this.props.newObject){ + if (!this.state.editing && this.props.newObject) { // if user is not editing any row but there's new row - if(e.keyCode === 27){ + if (e.keyCode === 27) { this.props.onAbortAddRow(); e.preventDefault(); } @@ -195,7 +195,7 @@ export default class DataBrowser extends React.Component { this.setState({ current: { row: this.state.current.row, - col: Math.max(this.state.current.col - 1, 0) + col: this.getNextVisibleColumnIndex(-1) } }); e.preventDefault(); @@ -213,7 +213,7 @@ export default class DataBrowser extends React.Component { this.setState({ current: { row: this.state.current.row, - col: Math.min(this.state.current.col + 1, this.state.order.length - 1) + col: this.getNextVisibleColumnIndex(1) } }); e.preventDefault(); @@ -239,6 +239,18 @@ export default class DataBrowser extends React.Component { } } + getNextVisibleColumnIndex(distance) { + let newIndex = this.state.current.col + distance; + const min = 0; + const max = this.state.order.length - 1; + while (true) { + if (this.state.order[newIndex]?.visible) { return newIndex; } + if (newIndex <= min) { return min; } + if (newIndex >= max) { return max; } + newIndex += distance; + } + } + setEditing(editing) { if (this.props.updateRow) { if (this.state.editing !== editing) { @@ -264,7 +276,7 @@ export default class DataBrowser extends React.Component { } handleColumnsOrder(order, shouldReload) { - this.setState({ order: [ ...order ] }, () => { + this.setState({ order: [...order] }, () => { this.updatePreferences(order, shouldReload); }); } From 8c931b2e6c5d047b04ee72e3816e9c7e0dac0ca7 Mon Sep 17 00:00:00 2001 From: Artur Drozdz Date: Mon, 4 Oct 2021 13:26:25 +0200 Subject: [PATCH 2/6] Data Browser - navigating to the beggining/end when using left/right keys with modifier (ctrl/meta) key pressed --- src/dashboard/Data/Browser/DataBrowser.react.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/dashboard/Data/Browser/DataBrowser.react.js b/src/dashboard/Data/Browser/DataBrowser.react.js index 884fb13343..fb4922e147 100644 --- a/src/dashboard/Data/Browser/DataBrowser.react.js +++ b/src/dashboard/Data/Browser/DataBrowser.react.js @@ -191,11 +191,11 @@ export default class DataBrowser extends React.Component { } e.preventDefault(); break; - case 37: // Left + case 37: // Left - standalone & with ctrl/meta this.setState({ current: { row: this.state.current.row, - col: this.getNextVisibleColumnIndex(-1) + col: (e.ctrlKey || e.metaKey) ? 0 : this.getNextVisibleColumnIndex(-1) } }); e.preventDefault(); @@ -209,11 +209,11 @@ export default class DataBrowser extends React.Component { }); e.preventDefault(); break; - case 39: // Right + case 39: // Right - standalone & with ctrl/meta this.setState({ current: { row: this.state.current.row, - col: this.getNextVisibleColumnIndex(1) + col: (e.ctrlKey || e.metaKey) ? (this.state.order.length - 1) : this.getNextVisibleColumnIndex(1) } }); e.preventDefault(); From a1c6ce47d366a1e9afd97b884107787c01386727 Mon Sep 17 00:00:00 2001 From: Artur Drozdz Date: Mon, 4 Oct 2021 13:52:29 +0200 Subject: [PATCH 3/6] Data Browser: taking hidden columns into account when establishing the left/right edges --- .../Data/Browser/DataBrowser.react.js | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/src/dashboard/Data/Browser/DataBrowser.react.js b/src/dashboard/Data/Browser/DataBrowser.react.js index fb4922e147..776f4af488 100644 --- a/src/dashboard/Data/Browser/DataBrowser.react.js +++ b/src/dashboard/Data/Browser/DataBrowser.react.js @@ -176,6 +176,14 @@ export default class DataBrowser extends React.Component { if (!this.state.current) { return; } + + const visibleColumnIndexes = []; + this.state.order.forEach((column, index) => { + column.visible && visibleColumnIndexes.push(index); + }) + const firstVisibleColumnIndex = Math.min(...visibleColumnIndexes); + const lastVisibleColumnIndex = Math.max(...visibleColumnIndexes); + switch (e.keyCode) { case 8: case 46: @@ -195,7 +203,8 @@ export default class DataBrowser extends React.Component { this.setState({ current: { row: this.state.current.row, - col: (e.ctrlKey || e.metaKey) ? 0 : this.getNextVisibleColumnIndex(-1) + col: (e.ctrlKey || e.metaKey) ? firstVisibleColumnIndex : + this.getNextVisibleColumnIndex(-1, firstVisibleColumnIndex, lastVisibleColumnIndex) } }); e.preventDefault(); @@ -213,7 +222,8 @@ export default class DataBrowser extends React.Component { this.setState({ current: { row: this.state.current.row, - col: (e.ctrlKey || e.metaKey) ? (this.state.order.length - 1) : this.getNextVisibleColumnIndex(1) + col: (e.ctrlKey || e.metaKey) ? lastVisibleColumnIndex : + this.getNextVisibleColumnIndex(1, firstVisibleColumnIndex, lastVisibleColumnIndex) } }); e.preventDefault(); @@ -239,10 +249,8 @@ export default class DataBrowser extends React.Component { } } - getNextVisibleColumnIndex(distance) { + getNextVisibleColumnIndex(distance = 1, min = 0, max = 0) { let newIndex = this.state.current.col + distance; - const min = 0; - const max = this.state.order.length - 1; while (true) { if (this.state.order[newIndex]?.visible) { return newIndex; } if (newIndex <= min) { return min; } From 804187ad28ae0b8a86b54f80bb6fb70526be04fa Mon Sep 17 00:00:00 2001 From: Artur Drozdz Date: Mon, 4 Oct 2021 14:02:31 +0200 Subject: [PATCH 4/6] Data Browser: safety check to prevent from infinite loop --- src/dashboard/Data/Browser/DataBrowser.react.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/dashboard/Data/Browser/DataBrowser.react.js b/src/dashboard/Data/Browser/DataBrowser.react.js index 776f4af488..40afe4c493 100644 --- a/src/dashboard/Data/Browser/DataBrowser.react.js +++ b/src/dashboard/Data/Browser/DataBrowser.react.js @@ -250,6 +250,7 @@ export default class DataBrowser extends React.Component { } getNextVisibleColumnIndex(distance = 1, min = 0, max = 0) { + if (distance === 0) { return this.state.current.col; } let newIndex = this.state.current.col + distance; while (true) { if (this.state.order[newIndex]?.visible) { return newIndex; } From 1648a53e5b7c70a3e1910265b8097da627cf1d01 Mon Sep 17 00:00:00 2001 From: Artur Drozdz Date: Tue, 5 Oct 2021 11:09:13 +0200 Subject: [PATCH 5/6] Data Browser: updating comments --- src/dashboard/Data/Browser/DataBrowser.react.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/dashboard/Data/Browser/DataBrowser.react.js b/src/dashboard/Data/Browser/DataBrowser.react.js index 40afe4c493..039f692fe9 100644 --- a/src/dashboard/Data/Browser/DataBrowser.react.js +++ b/src/dashboard/Data/Browser/DataBrowser.react.js @@ -199,7 +199,9 @@ export default class DataBrowser extends React.Component { } e.preventDefault(); break; - case 37: // Left - standalone & with ctrl/meta + case 37: + // Left - standalone (move to the next visible column on the left) + // & with ctrl/meta (excel style - move to the first visible column) this.setState({ current: { row: this.state.current.row, @@ -218,7 +220,9 @@ export default class DataBrowser extends React.Component { }); e.preventDefault(); break; - case 39: // Right - standalone & with ctrl/meta + case 39: + // Right - standalone (move to the next visible column on the right) + // & with ctrl/meta (excel style - move to the last visible column) this.setState({ current: { row: this.state.current.row, From 1826ebbec2f07dd7fa758138fcab4f041fd3537a Mon Sep 17 00:00:00 2001 From: Artur Drozdz Date: Tue, 5 Oct 2021 12:26:40 +0200 Subject: [PATCH 6/6] Data Browser - navigating to the first/last row when using up/down keys with modifier (ctrl/meta) key pressed --- src/dashboard/Data/Browser/DataBrowser.react.js | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/src/dashboard/Data/Browser/DataBrowser.react.js b/src/dashboard/Data/Browser/DataBrowser.react.js index 039f692fe9..9415dd4876 100644 --- a/src/dashboard/Data/Browser/DataBrowser.react.js +++ b/src/dashboard/Data/Browser/DataBrowser.react.js @@ -201,7 +201,7 @@ export default class DataBrowser extends React.Component { break; case 37: // Left - standalone (move to the next visible column on the left) - // & with ctrl/meta (excel style - move to the first visible column) + // or with ctrl/meta (excel style - move to the first visible column) this.setState({ current: { row: this.state.current.row, @@ -211,10 +211,12 @@ export default class DataBrowser extends React.Component { }); e.preventDefault(); break; - case 38: // Up + case 38: + // Up - standalone (move to the previous row) + // or with ctrl/meta (excel style - move to the first row) this.setState({ current: { - row: Math.max(this.state.current.row - 1, 0), + row: (e.ctrlKey || e.metaKey) ? 0 : Math.max(this.state.current.row - 1, 0), col: this.state.current.col } }); @@ -222,7 +224,7 @@ export default class DataBrowser extends React.Component { break; case 39: // Right - standalone (move to the next visible column on the right) - // & with ctrl/meta (excel style - move to the last visible column) + // or with ctrl/meta (excel style - move to the last visible column) this.setState({ current: { row: this.state.current.row, @@ -232,10 +234,12 @@ export default class DataBrowser extends React.Component { }); e.preventDefault(); break; - case 40: // Down + case 40: + // Down - standalone (move to the next row) + // or with ctrl/meta (excel style - move to the last row) this.setState({ current: { - row: Math.min(this.state.current.row + 1, this.props.data.length - 1), + row: (e.ctrlKey || e.metaKey) ? this.props.data.length - 1 : Math.min(this.state.current.row + 1, this.props.data.length - 1), col: this.state.current.col } });