[update] auto notes scrolling (#188)

Updated notes to scroll into view when the related annotation is selected.
Only triggers when a single annotation is selected.

Author: S0ulDrag0n

src/components/Note/Note.js

@@ -18,6 +18,7 @@ class Note extends React.PureComponent {
     annotation: PropTypes.object.isRequired,
     isNoteEditing: PropTypes.bool.isRequired,
     isNoteExpanded: PropTypes.bool.isRequired,
+    isAnnotationFocused: PropTypes.bool,
     setIsNoteEditing: PropTypes.func.isRequired,
     searchInput: PropTypes.string,
     isReadOnly: PropTypes.bool,
@@ -35,6 +36,7 @@ class Note extends React.PureComponent {
       isRootContentEditing: false,
       isReplyFocused: false
     };
+    this.containerRef = React.createRef();
   }
 
   componentDidMount() {
@@ -47,6 +49,7 @@ class Note extends React.PureComponent {
     const commentEditable = core.canModify(annotation) && !annotation.getContents();
     const noteBeingEdited = !prevProps.isNoteEditing && this.props.isNoteEditing;
     const noteCollapsed = prevProps.isNoteExpanded && !this.props.isNoteExpanded;
+    const annotationWasFocused = !prevProps.isAnnotationFocused && this.props.isAnnotationFocused;
 
     if (noteBeingEdited) {
       if (commentEditable) {
@@ -62,6 +65,10 @@ class Note extends React.PureComponent {
         isReplyFocused: false
       });
     }
+
+    if (annotationWasFocused) {
+      this.scrollIntoView();
+    }
   }
 
   componentWillUnmount() {
@@ -99,6 +106,10 @@ class Note extends React.PureComponent {
     }
   }
 
+  scrollIntoView = () => {
+    this.containerRef.current.scrollIntoView();
+  }
+
   openRootEditing = () => {
     this.setState({ isRootContentEditing: true });
   }
@@ -205,7 +216,7 @@ class Note extends React.PureComponent {
     ].join(' ').trim();
 
     return (
-      <div className={className} onClick={this.onClickNote}>
+      <div ref={this.containerRef} className={className} onClick={this.onClickNote}>
         <NoteRoot
           annotation={annotation}
           contents={rootContents}
@@ -256,6 +267,7 @@ class Note extends React.PureComponent {
 const mapStateToProps = (state, ownProps) => ({
   isNoteExpanded: selectors.isNoteExpanded(state, ownProps.annotation.Id),
   isNoteEditing: selectors.isNoteEditing(state, ownProps.annotation.Id),
+  isAnnotationFocused: selectors.isAnnotationFocused(state, ownProps.annotation.Id),
   isReadOnly: selectors.isDocumentReadOnly(state),
   isReplyDisabled: selectors.isElementDisabled(state, 'noteReply')
 });

src/redux/selectors/exposedSelectors.js

@@ -36,6 +36,7 @@ export const getActiveToolGroup = state => state.viewer.activeToolGroup;
 export const getNotePopupId = state => state.viewer.notePopupId;
 export const isNoteExpanded = (state, id) => !!state.viewer.expandedNotes[id];
 export const isNoteEditing = (state, id) => state.viewer.isNoteEditing && isNoteExpanded(state, id);
+export const isAnnotationFocused = (state, id) => Object.keys(state.viewer.expandedNotes).length === 1 && isNoteExpanded(state, id); // Considered focused when it is the only annotation selected
 export const getFitMode = state => state.viewer.fitMode;
 export const getZoom = state => state.viewer.zoom;
 export const getDisplayMode = state => state.viewer.displayMode;