@@ -9,11 +9,32 @@ import { dateStringUTC } from 'lib/DateUtils';
9
9
import getFileName from 'lib/getFileName' ;
10
10
import Parse from 'parse' ;
11
11
import Pill from 'components/Pill/Pill.react' ;
12
- import React from 'react' ;
12
+ import React , { useEffect , useRef }
13
+ from 'react' ;
13
14
import styles from 'components/BrowserCell/BrowserCell.scss' ;
14
15
import { unselectable } from 'stylesheets/base.scss' ;
15
16
16
17
let BrowserCell = ( { type, value, hidden, width, current, onSelect, onEditChange, setRelation, onPointerClick } ) => {
18
+ const cellRef = current ? useRef ( ) : null ;
19
+ if ( current ) {
20
+ useEffect ( ( ) => {
21
+ const node = cellRef . current ;
22
+ const { left, right, bottom, top } = node . getBoundingClientRect ( ) ;
23
+
24
+ // Takes into consideration Sidebar width when over 980px wide.
25
+ const leftBoundary = window . innerWidth > 980 ? 300 : 0 ;
26
+
27
+ // BrowserToolbar + DataBrowserHeader height
28
+ const topBoundary = 126 ;
29
+
30
+ if ( left < leftBoundary || right > window . innerWidth ) {
31
+ node . scrollIntoView ( { behavior : 'smooth' , block : 'nearest' , inline : 'start' } ) ;
32
+ } else if ( top < topBoundary || bottom > window . innerHeight ) {
33
+ node . scrollIntoView ( { behavior : 'smooth' , block : 'nearest' , inline : 'nearest' } ) ;
34
+ }
35
+ } ) ;
36
+ }
37
+
17
38
let content = value ;
18
39
let classes = [ styles . cell , unselectable ] ;
19
40
if ( hidden ) {
@@ -98,6 +119,7 @@ let BrowserCell = ({ type, value, hidden, width, current, onSelect, onEditChange
98
119
}
99
120
return (
100
121
< span
122
+ ref = { cellRef }
101
123
className = { classes . join ( ' ' ) }
102
124
style = { { width } }
103
125
onClick = { onSelect }
0 commit comments