Update react refs

src/components/D2Panel.js

@@ -69,6 +69,11 @@ class D2Panel extends React.Component {
   activeNeedRender = false;
   inactiveNeedRender = false;
 
+  constructor(props) {
+    super(props);
+    this.canvasContainer = React.createRef();
+  }
+
   componentWillMount() {
     // Scene space
     this.sceneActive = new EventGroup({
@@ -97,12 +102,12 @@ class D2Panel extends React.Component {
   }
 
   componentDidMount() {
-    const { canvasContainer } = this.refs;
-    this.container = canvasContainer;
+    if (this.canvasContainer.current) {
+      this.container = this.canvasContainer.current;
 
       this.container.appendChild(this.sceneInactive.image);
       this.container.appendChild(this.sceneActive.image);
-
+    }
     this.sceneActive.onClick = (event) => event.stopPropagation();
   }
 
@@ -218,7 +223,7 @@ class D2Panel extends React.Component {
     return (
       <div className={classes.container}>
         <ReactResizeDetector handleWidth handleHeight onResize={this.resizeHandler} />
-        <div className={classes.canvasContainer} ref="canvasContainer" />
+        <div className={classes.canvasContainer} ref={this.canvasContainer} />
         <InputText screenMatrix={screenMatrix} />
       </div>
     );

src/components/D3Panel.js

@@ -50,6 +50,10 @@ const styles = {
 };
 
 class D3Panel extends React.Component {
+  constructor(props) {
+    super(props);
+    this.canvasContainer = React.createRef();
+  }
 
   static propTypes = {
     state: PropTypes.object.isRequired,
@@ -73,11 +77,12 @@ class D3Panel extends React.Component {
   }
 
   componentDidMount() {
-    this.container = this.refs.canvasContainer;
+    if (this.canvasContainer.current) {
+      this.container = this.canvasContainer.current;
       this.container.appendChild(this.renderer.domElement);
-
       this.renderScene(); // immidiatly render because when THREE.JS inits, a black screen is generated
     }
+  }
 
   componentWillUnmount() {
     this.scene.setCanvas(null);
@@ -221,7 +226,7 @@ class D3Panel extends React.Component {
     return (
       <div className={classes.container}>
         <ReactResizeDetector handleWidth handleHeight onResize={this.resizeHandler} />
-        <div className={classes.canvasContainer} ref="canvasContainer"/>
+        <div className={classes.canvasContainer} ref={this.canvasContainer}/>
       </div>
     );
   }

src/components/DoodlePreview.js

@@ -28,6 +28,11 @@ class DoodlePreview extends React.Component {
     pixelRatio: 1
   };
 
+  constructor(props) {
+    super(props);
+    this.canvas = React.createRef();
+  }
+
   static propTypes = {
     classes: PropTypes.objectOf(PropTypes.string),
     width: PropTypes.number.isRequired,
@@ -49,14 +54,12 @@ class DoodlePreview extends React.Component {
 
     if (docData) sketchData = await JSONToSketchData(docData);
 
-    const { canvas } = this.refs;
-
     const sceneData = await createSceneData(sketchData);
 
-    const scene = createScene(sceneData, canvas);
+    const scene = createScene(sceneData, this.canvas.current);
     this.setState(scene);
 
-    this.editorControls = new THREE.EditorControls(scene.camera, canvas);
+    this.editorControls = new THREE.EditorControls(scene.camera, this.canvas.current);
     this.editorControls.addEventListener('change', () => rafOnce(scene.render));
   }
 
@@ -78,7 +81,7 @@ class DoodlePreview extends React.Component {
     return (
       <div className={classes.container}>
         <ReactResizeDetector handleWidth handleHeight onResize={this.resizeHandler} />
-        <canvas className={classes.canvas} ref="canvas" />
+        <canvas className={classes.canvas} ref={this.canvas} />
       </div>
     );
   }

src/components/InputText.js

@@ -25,6 +25,11 @@ const styles = {
 };
 
 class InputText extends React.Component {
+  constructor(props) {
+    super(props);
+    this.text = React.createRef();
+  }
+
   static propTypes = {
     state: PropTypes.object.isRequired,
     classes: PropTypes.objectOf(PropTypes.string),
@@ -37,7 +42,7 @@ class InputText extends React.Component {
     if (!shapeData) return;
 
     const { changeText } = this.props;
-    const text = this.refs.text.value;
+    const text = this.text.current.value;
 
     changeText(text);
   };
@@ -51,7 +56,7 @@ class InputText extends React.Component {
   }
 
   componentWillUpdate() {
-    if (this.refs.text) this.refs.text.focus();
+    if (this.text.current) this.text.current.focus();
   }
 
   render() {
@@ -82,7 +87,7 @@ class InputText extends React.Component {
               width: `${width}px`
             }}
             value={text}
-            ref="text"
+            ref={this.text}
             spellCheck="false"
             autoFocus
             onChange={this.onInputChange}

src/components/SubMenu.js

@@ -8,6 +8,11 @@ import { hexToStyle } from '../utils/colorUtils.js';
 // const debug = createDebug('d3d:ui:submenu');
 
 class SubMenu extends React.Component {
+  constructor(props) {
+    super(props);
+    this.li = React.createRef();
+  }
+
   static propTypes = {
     onSelect: PropTypes.func,
     onOpen: PropTypes.func,
@@ -61,7 +66,7 @@ class SubMenu extends React.Component {
     const { open, onClose, value } = this.props;
     if (open && onClose) {
       // was click on this submenu?
-      const onSubmenu = this.refs.li.contains(event.target);
+      const onSubmenu = this.li.current.contains(event.target);
       // debug(`onDocumentClick ${event.type} ${onSubmenu ? 'onSubmenu' : ''}`);
       if (!onSubmenu) onClose({ menuValue: value });
     }
@@ -79,7 +84,7 @@ class SubMenu extends React.Component {
     let className = 'submenu';
     if (open) className += ' open';
     return (
-      <li id={id} className={className} ref="li" style={style}>
+      <li id={id} className={className} ref={this.li} style={style}>
         <Button
           id={`${selectedValue}-menu`}
           value={selectedValue}