feat(ui): sync note editor text and preview scrolling

influxdata · Apr 10, 2019 · 7c0d4f8 · 7c0d4f8
1 parent c8741b4
commit 7c0d4f8
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 6 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,10 +6,15 @@
 1. [13078](https://github.com/influxdata/influxdb/pull/13078): Add the option to create a Dashboard from a Template.
 1. [13161](https://github.com/influxdata/influxdb/pull/13161): Add the ability to add labels on variables
 1. [13171](https://github.com/influxdata/influxdb/pull/13171): Add switch organizations dropdown to home navigation menu item.
+1. [13173](https://github.com/influxdata/influxdb/pull/13173): Add create org to side nav
 
 ### Bug Fixes
+1. [13284](https://github.com/influxdata/influxdb/pull/13284): Update shift to timeShift in the flux functions side bar
 
 ### UI Improvements
+1. [13287](https://github.com/influxdata/influxdb/pull/13287): Update cursor to grab when hovering draggable areas
+1. [13311](https://github.com/influxdata/influxdb/pull/13311): Sync note editor text and preview scrolling
+1. [13249](https://github.com/influxdata/influxdb/pull/13249): Add the ability to create a bucket when creating an organization
 
 ## v2.0.0-alpha.7 [2019-03-28]
 

diff --git a/ui/src/dashboards/components/NoteEditor.tsx b/ui/src/dashboards/components/NoteEditor.tsx
@@ -1,5 +1,5 @@
 // Libraries
-import React, {PureComponent} from 'react'
+import React, {PureComponent, MouseEvent} from 'react'
 import {connect} from 'react-redux'
 
 // Components
@@ -38,9 +38,16 @@ interface OwnProps {}
 
 type Props = StateProps & DispatchProps & OwnProps
 
-class NoteEditor extends PureComponent<Props> {
+interface State {
+  scrollTop: number
+}
+
+class NoteEditor extends PureComponent<Props, State> {
+  public state = {scrollTop: 0}
+
   public render() {
     const {note, onSetNote} = this.props
+    const {scrollTop} = this.state
 
     return (
       <div className="note-editor">
@@ -57,8 +64,17 @@ class NoteEditor extends PureComponent<Props> {
           {this.visibilityToggle}
         </div>
         <div className="note-editor--body">
-          <NoteEditorText note={note} onChangeNote={onSetNote} />
-          <NoteEditorPreview note={note} />
+          <NoteEditorText
+            note={note}
+            onChangeNote={onSetNote}
+            onScroll={this.handleEditorScroll}
+            scrollTop={scrollTop}
+          />
+          <NoteEditorPreview
+            note={note}
+            scrollTop={scrollTop}
+            onScroll={this.handlePreviewScroll}
+          />
         </div>
       </div>
     )
@@ -81,6 +97,17 @@ class NoteEditor extends PureComponent<Props> {
       </ComponentSpacer>
     )
   }
+
+  private handleEditorScroll = (scrollTop: number) => {
+    this.setState({scrollTop})
+  }
+
+  private handlePreviewScroll = (e: MouseEvent<HTMLElement>) => {
+    const target = e.target as HTMLElement
+    const {scrollTop} = target
+
+    this.setState({scrollTop})
+  }
 }
 
 const mstp = (state: AppState) => {

diff --git a/ui/src/dashboards/components/NoteEditorPreview.tsx b/ui/src/dashboards/components/NoteEditorPreview.tsx
@@ -1,16 +1,22 @@
-import React, {SFC} from 'react'
+import React, {SFC, MouseEvent} from 'react'
 import ReactMarkdown from 'react-markdown'
 
 import FancyScrollbar from 'src/shared/components/fancy_scrollbar/FancyScrollbar'
 
 interface Props {
   note: string
+  scrollTop: number
+  onScroll: (e: MouseEvent) => void
 }
 
 const NoteEditorPreview: SFC<Props> = props => {
   return (
     <div className="note-editor--preview">
-      <FancyScrollbar className="note-editor--preview-scroll">
+      <FancyScrollbar
+        className="note-editor--preview-scroll"
+        scrollTop={props.scrollTop}
+        setScrollTop={props.onScroll}
+      >
         <div className="note-editor--markdown-container">
           <ReactMarkdown
             source={props.note}

diff --git a/ui/src/dashboards/components/NoteEditorText.tsx b/ui/src/dashboards/components/NoteEditorText.tsx
@@ -1,6 +1,7 @@
 // Libraries
 import React, {PureComponent} from 'react'
 import {Controlled as ReactCodeMirror, IInstance} from 'react-codemirror2'
+import {ScrollInfo} from 'codemirror'
 
 // Utils
 import {humanizeNote} from 'src/dashboards/utils/notes'
@@ -22,9 +23,20 @@ const noOp = () => {}
 interface Props {
   note: string
   onChangeNote: (value: string) => void
+  onScroll: (scrollTop: number) => void
+  scrollTop: number
 }
 
 class NoteEditorText extends PureComponent<Props, {}> {
+  private editor: IInstance
+
+  public componentDidUpdate() {
+    const currentScrollTop = this.editor.getScrollInfo().top
+    if (this.props.scrollTop !== currentScrollTop) {
+      this.editor.scrollTo(0, this.props.scrollTop)
+    }
+  }
+
   public render() {
     const {note} = this.props
 
@@ -36,19 +48,27 @@ class NoteEditorText extends PureComponent<Props, {}> {
         onBeforeChange={this.handleChange}
         onTouchStart={noOp}
         editorDidMount={this.handleMount}
+        onScroll={this.handleScroll}
       />
     )
   }
 
   private handleMount = (instance: IInstance) => {
     instance.focus()
+    this.editor = instance
   }
 
   private handleChange = (_, __, note: string) => {
     const {onChangeNote} = this.props
 
     onChangeNote(note)
   }
+
+  private handleScroll = (__: IInstance, scrollInfo: ScrollInfo) => {
+    const {onScroll} = this.props
+
+    onScroll(scrollInfo.top)
+  }
 }
 
 export default NoteEditorText