Skip to content

Commit

Permalink
fix(Database Browser): Table not scrolling when using arrow keys (#1239)
Browse files Browse the repository at this point in the history
  • Loading branch information
douglasmuraoka authored and davimacedo committed Aug 22, 2019
1 parent 7260816 commit cb6286e
Showing 1 changed file with 23 additions and 1 deletion.
24 changes: 23 additions & 1 deletion src/components/BrowserCell/BrowserCell.react.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,32 @@ import { dateStringUTC } from 'lib/DateUtils';
import getFileName from 'lib/getFileName';
import Parse from 'parse';
import Pill from 'components/Pill/Pill.react';
import React from 'react';
import React, { useEffect, useRef }
from 'react';
import styles from 'components/BrowserCell/BrowserCell.scss';
import { unselectable } from 'stylesheets/base.scss';

let BrowserCell = ({ type, value, hidden, width, current, onSelect, onEditChange, setRelation, onPointerClick }) => {
const cellRef = current ? useRef() : null;
if (current) {
useEffect(() => {
const node = cellRef.current;
const { left, right, bottom, top } = node.getBoundingClientRect();

// Takes into consideration Sidebar width when over 980px wide.
const leftBoundary = window.innerWidth > 980 ? 300 : 0;

// BrowserToolbar + DataBrowserHeader height
const topBoundary = 126;

if (left < leftBoundary || right > window.innerWidth) {
node.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' });
} else if (top < topBoundary || bottom > window.innerHeight) {
node.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });
}
});
}

let content = value;
let classes = [styles.cell, unselectable];
if (hidden) {
Expand Down Expand Up @@ -98,6 +119,7 @@ let BrowserCell = ({ type, value, hidden, width, current, onSelect, onEditChange
}
return (
<span
ref={cellRef}
className={classes.join(' ')}
style={{ width }}
onClick={onSelect}
Expand Down

0 comments on commit cb6286e

Please sign in to comment.