From 31e9ec735f855d754eeef4aada6759773def85b6 Mon Sep 17 00:00:00 2001 From: Casper Lamboo Date: Wed, 19 May 2021 19:51:34 +0200 Subject: [PATCH] Update react refs --- src/components/D2Panel.js | 17 +++++++++++------ src/components/D3Panel.js | 15 ++++++++++----- src/components/DoodlePreview.js | 13 ++++++++----- src/components/InputText.js | 11 ++++++++--- src/components/SubMenu.js | 9 +++++++-- 5 files changed, 44 insertions(+), 21 deletions(-) diff --git a/src/components/D2Panel.js b/src/components/D2Panel.js index ebfcd17..c1d044a 100644 --- a/src/components/D2Panel.js +++ b/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; - - this.container.appendChild(this.sceneInactive.image); - this.container.appendChild(this.sceneActive.image); + 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 (
-
+
); diff --git a/src/components/D3Panel.js b/src/components/D3Panel.js index 09fee90..857acf4 100644 --- a/src/components/D3Panel.js +++ b/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,10 +77,11 @@ class D3Panel extends React.Component { } componentDidMount() { - this.container = this.refs.canvasContainer; - this.container.appendChild(this.renderer.domElement); - - this.renderScene(); // immidiatly render because when THREE.JS inits, a black screen is generated + 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() { @@ -221,7 +226,7 @@ class D3Panel extends React.Component { return (
-
+
); } diff --git a/src/components/DoodlePreview.js b/src/components/DoodlePreview.js index c063679..de7385e 100644 --- a/src/components/DoodlePreview.js +++ b/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 (
- +
); } diff --git a/src/components/InputText.js b/src/components/InputText.js index 73e74bd..af16385 100644 --- a/src/components/InputText.js +++ b/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} diff --git a/src/components/SubMenu.js b/src/components/SubMenu.js index 79e6eef..5ecda39 100644 --- a/src/components/SubMenu.js +++ b/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 ( -
  • +