-
Notifications
You must be signed in to change notification settings - Fork 0
/
DomOverlayModule.js
executable file
·36 lines (30 loc) · 1.26 KB
/
DomOverlayModule.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
/**
* took this from the offical react-vr docs. Looks to be a way to to show and hide the overlay,
* could be useful. Just call the function to use.
* */
import React from 'react';
import ReactDOM from 'react-dom';
import {Module} from 'react-vr-web';
import TextboxOverlay from './TextboxOverlay';
// Example implementation of a dom overlay. This is useful on web and mobile,
// whenever a regular, 2D interaction makes more sense than dealing with a 360 scene.
// The key in this module is having a dom element (created in client.js) where our overlay will be rendered.
// What you render is up to you, and you could render as many different overlays as you want from a single module,
// or have multiple native modules, each taking care of a single overlay.
export default class DomOverlayModule extends Module {
constructor(overlayContainer) {
super('DomOverlayModule');
this._closeOverlay = this.closeOverlay.bind(this);
this._overlayContainer = overlayContainer;
}
// This method call opens up the overlay for display.
openOverlay(props) {
ReactDOM.render(
<TextboxOverlay {...props} onClose={this._closeOverlay} />,
this._overlayContainer
);
}
closeOverlay() {
ReactDOM.unmountComponentAtNode(this._overlayContainer);
}
}