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/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 (
-
+