Refactor selected lines to read from React state (#833)

* holding opacities in state works

* refactor to use functional set state

* clean up onGutterClick code #1

* clean up onGutterClick code #2

* clean

* use regular effect

* return forward ref directly

components/Carbon.js

@@ -4,8 +4,8 @@ import * as hljs from 'highlight.js'
 import debounce from 'lodash.debounce'
 import ms from 'ms'
 import { Controlled as CodeMirror } from 'react-codemirror2'
-import SpinnerWrapper from './SpinnerWrapper'
 
+import SpinnerWrapper from './SpinnerWrapper'
 import WindowControls from './WindowControls'
 import {
   COLORS,
@@ -33,16 +33,6 @@ class Carbon extends React.PureComponent {
     onChange: () => {}
   }
 
-  componentDidUpdate(prevProps) {
-    // TODO keep opacities in state
-    if (
-      prevProps.config.theme != this.props.config.theme ||
-      prevProps.config.language != this.props.config.language
-    ) {
-      this.prevLine = null
-    }
-  }
-
   handleLanguageChange = debounce(
     (newCode, language) => {
       if (language === 'auto') {
@@ -76,33 +66,6 @@ class Carbon extends React.PureComponent {
     }
   }
 
-  prevLine = null
-  onGutterClick = (editor, lineNumber, gutter, e) => {
-    editor.display.view.forEach((line, i, arr) => {
-      if (i != lineNumber) {
-        if (this.prevLine == null) {
-          line.text.style.opacity = 0.5
-          line.gutter.style.opacity = 0.5
-        }
-      } else {
-        if (e.shiftKey && this.prevLine != null) {
-          for (
-            let index = Math.min(this.prevLine, i);
-            index < Math.max(this.prevLine, i) + 1;
-            index++
-          ) {
-            arr[index].text.style.opacity = arr[this.prevLine].text.style.opacity
-            arr[index].gutter.style.opacity = arr[this.prevLine].gutter.style.opacity
-          }
-        } else {
-          line.text.style.opacity = line.text.style.opacity == 1 ? 0.5 : 1
-          line.gutter.style.opacity = line.gutter.style.opacity == 1 ? 0.5 : 1
-        }
-      }
-    })
-    this.prevLine = lineNumber
-  }
-
   render() {
     const config = { ...DEFAULT_SETTINGS, ...this.props.config }
 
@@ -145,11 +108,12 @@ class Carbon extends React.PureComponent {
           />
         ) : null}
         <CodeMirror
+          ref={this.props.editorRef}
           className={`CodeMirror__container window-theme__${config.windowTheme}`}
           onBeforeChange={this.onBeforeChange}
           value={this.props.children}
           options={options}
-          onGutterClick={this.onGutterClick}
+          onGutterClick={this.props.onGutterClick}
         />
         {config.watermark && <Watermark light={light} />}
         <div className="container-bg">
@@ -299,4 +263,55 @@ class Carbon extends React.PureComponent {
   }
 }
 
-export default React.forwardRef((props, ref) => <Carbon {...props} innerRef={ref} />)
+function LineNumbersCarbon(props, ref) {
+  const [selectedLines, setSelected] = React.useState({})
+  const editorRef = React.useRef(null)
+  const prevLine = React.useRef(null)
+
+  function onGutterClick(editor, lineNumber, gutter, e) {
+    setSelected(currState => {
+      const newState = {}
+
+      if (e.shiftKey && prevLine.current != null) {
+        for (
+          let i = Math.min(prevLine.current, lineNumber);
+          i < Math.max(prevLine.current, lineNumber) + 1;
+          i++
+        ) {
+          newState[i] = currState[prevLine.current]
+        }
+
+        return { ...currState, ...newState }
+      }
+
+      for (let i = 0; i < editor.display.view.length; i++) {
+        if (i != lineNumber) {
+          if (prevLine.current == null) {
+            newState[i] = false
+          }
+        } else {
+          newState[lineNumber] = currState[lineNumber] === true ? false : true
+        }
+      }
+
+      return { ...currState, ...newState }
+    })
+
+    prevLine.current = lineNumber
+  }
+
+  React.useEffect(() => {
+    if (editorRef.current) {
+      editorRef.current.editor.display.view.forEach((line, i) => {
+        if (line.text && line.gutter) {
+          line.text.style.opacity = selectedLines[i] === false ? 0.5 : 1
+          line.gutter.style.opacity = selectedLines[i] === false ? 0.5 : 1
+        }
+      })
+    }
+  }, [selectedLines, props.children, props.config])
+
+  return <Carbon {...props} innerRef={ref} editorRef={editorRef} onGutterClick={onGutterClick} />
+}
+
+export default React.forwardRef(LineNumbersCarbon)