diff --git a/package.json b/package.json
index b10cec32d..0fe9622c2 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
"postinstall": "electron-builder install-app-deps && node build/downloadDaemon.js"
},
"dependencies": {
+ "@types/three": "^0.93.1",
"bluebird": "^3.5.1",
"breakdance": "^3.0.1",
"classnames": "^2.2.5",
diff --git a/src/renderer/component/viewers/codeViewer.jsx b/src/renderer/component/viewers/codeViewer.jsx
index af6ea8fc0..d10f3135c 100644
--- a/src/renderer/component/viewers/codeViewer.jsx
+++ b/src/renderer/component/viewers/codeViewer.jsx
@@ -1,6 +1,6 @@
// @flow
-import React from 'react';
+import * as React from 'react';
import CodeMirror from 'codemirror/lib/codemirror';
import { openSnippetMenu, stopContextMenu } from 'util/contextMenu';
@@ -30,13 +30,12 @@ class CodeViewer extends React.PureComponent<Props> {
constructor(props: Props) {
super(props);
this.codeMirror = null;
- this.textarea = React.createRef();
}
componentDidMount() {
const { theme, contentType } = this.props;
// Init CodeMirror
- this.codeMirror = CodeMirror.fromTextArea(this.textarea.current, {
+ this.codeMirror = CodeMirror.fromTextArea(this.textarea, {
// Auto detect syntax with file contentType
mode: contentType,
// Adaptive theme
@@ -54,13 +53,14 @@ class CodeViewer extends React.PureComponent<Props> {
this.codeMirror.on('contextmenu', openSnippetMenu);
}
+ textarea: ?HTMLTextAreaElement;
codeMirror: any;
render() {
const { value } = this.props;
return (
<div className="code-viewer" onContextMenu={stopContextMenu}>
- <textarea ref={this.textarea} disabled value={value} />
+ <textarea ref={textarea => (this.textarea = textarea)} disabled value={value} />
</div>
);
}
diff --git a/src/renderer/component/viewers/pdfViewer.jsx b/src/renderer/component/viewers/pdfViewer.jsx
index 4f15ec315..e297adfd1 100644
--- a/src/renderer/component/viewers/pdfViewer.jsx
+++ b/src/renderer/component/viewers/pdfViewer.jsx
@@ -1,5 +1,5 @@
// @flow
-import React from 'react';
+import * as React from 'react';
import { stopContextMenu } from 'util/contextMenu';
type Props = {
@@ -7,18 +7,11 @@ type Props = {
};
class PdfViewer extends React.PureComponent<Props> {
- constructor(props: Props) {
- super(props);
- this.viewer = React.createRef();
- }
-
- viewer: { current: any };
-
render() {
const { source } = this.props;
return (
<div className="file-render__viewer" onContextMenu={stopContextMenu}>
- <webview ref={this.viewer} src={`chrome://pdf-viewer/index.html?src=file://${source}`} />
+ <webview src={`chrome://pdf-viewer/index.html?src=file://${source}`} />
</div>
);
}
diff --git a/src/renderer/component/viewers/threeViewer/index.jsx b/src/renderer/component/viewers/threeViewer/index.jsx
index 18e13d523..ad7f67b32 100644
--- a/src/renderer/component/viewers/threeViewer/index.jsx
+++ b/src/renderer/component/viewers/threeViewer/index.jsx
@@ -34,10 +34,11 @@ type State = {
};
class ThreeViewer extends React.PureComponent<Props, State> {
- static testWebgl = new Promise((resolve, reject) => {
- if (detectWebGL()) resolve();
- else reject();
- });
+ static testWebgl = (): Promise<void> =>
+ new Promise((resolve, reject) => {
+ if (detectWebGL()) resolve();
+ else reject();
+ });
static createOrbitControls(camera: any, canvas: any) {
const controls = new THREE.OrbitControls(camera, canvas);
@@ -92,8 +93,6 @@ class ThreeViewer extends React.PureComponent<Props, State> {
constructor(props: Props) {
super(props);
const { theme } = this.props;
- this.viewer = React.createRef();
- this.guiContainer = React.createRef();
// Object defualt color
this.materialColor = '#44b098';
// Viewer themes
@@ -197,8 +196,10 @@ class ThreeViewer extends React.PureComponent<Props, State> {
theme: viewerTheme;
themes: { dark: viewerTheme, light: viewerTheme };
materialColor: string;
+ // Refs
+ viewer: ?HTMLElement;
+ guiContainer: ?HTMLElement;
// Too complex to add a custom type
- // Posible solution: https://www.npmjs.com/package/@types/three
gui: any;
grid: any;
mesh: any;
@@ -293,7 +294,9 @@ class ThreeViewer extends React.PureComponent<Props, State> {
sceneFolder.add(config, 'reset').name('Reset');
- this.guiContainer.current.appendChild(this.gui.domElement);
+ if (this.guiContainer) {
+ this.guiContainer.appendChild(this.gui.domElement);
+ }
}
}
@@ -336,7 +339,7 @@ class ThreeViewer extends React.PureComponent<Props, State> {
};
handleResize = () => {
- const { offsetWidth: width, offsetHeight: height } = this.viewer.current;
+ const { offsetWidth: width, offsetHeight: height } = this.viewer || {};
this.camera.aspect = width / height;
this.camera.updateProjectionMatrix();
this.controls.update();
@@ -415,9 +418,8 @@ class ThreeViewer extends React.PureComponent<Props, State> {
...this.theme,
});
- const viewer = this.viewer.current;
const canvas = this.renderer.domElement;
- const { offsetWidth: width, offsetHeight: height } = viewer;
+ const { offsetWidth: width, offsetHeight: height } = this.viewer || {};
// Grid
this.grid = ThreeGrid({ size: 100, gridColor, centerLineColor });
@@ -446,7 +448,9 @@ class ThreeViewer extends React.PureComponent<Props, State> {
this.startLoader();
// Append canvas
- viewer.appendChild(canvas);
+ if (this.viewer) {
+ this.viewer.appendChild(canvas);
+ }
const updateScene = () => {
this.frameID = requestAnimationFrame(updateScene);
@@ -471,11 +475,11 @@ class ThreeViewer extends React.PureComponent<Props, State> {
<React.Fragment>
{error && <LoadingScreen status={error} spinner={false} />}
{showLoading && <LoadingScreen status={loadingMessage} spinner />}
- <div ref={this.guiContainer} className={containerClass} />
+ <div ref={element => (this.guiContainer = element)} className={containerClass} />
<div
style={{ opacity: showViewer ? 1 : 0 }}
className="three-viewer file-render__viewer"
- ref={this.viewer}
+ ref={viewer => (this.viewer = viewer)}
/>
</React.Fragment>
);
diff --git a/yarn.lock b/yarn.lock
index ff1003b87..5f1f4193e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -130,6 +130,10 @@
version "8.10.21"
resolved "https://registry.yarnpkg.com/@types/node/-/node-8.10.21.tgz#12b3f2359b27aa05a45d886c8ba1eb8d1a77e285"
+"@types/three@^0.93.1":
+ version "0.93.1"
+ resolved "https://registry.yarnpkg.com/@types/three/-/three-0.93.1.tgz#0b9ba53182afe16659e220d670471b4475687d64"
+
"@types/webpack-env@^1.13.5":
version "1.13.6"
resolved "https://registry.yarnpkg.com/@types/webpack-env/-/webpack-env-1.13.6.tgz#128d1685a7c34d31ed17010fc87d6a12c1de6976"