aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/OverlayView.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/OverlayView.tsx')
-rw-r--r--src/client/views/OverlayView.tsx9
1 files changed, 5 insertions, 4 deletions
diff --git a/src/client/views/OverlayView.tsx b/src/client/views/OverlayView.tsx
index 72f1068ce..f8fc94274 100644
--- a/src/client/views/OverlayView.tsx
+++ b/src/client/views/OverlayView.tsx
@@ -1,6 +1,7 @@
import * as React from "react";
import { observer } from "mobx-react";
import { observable, action } from "mobx";
+import { Utils } from "../../Utils";
export type OverlayDisposer = () => void;
@@ -15,7 +16,7 @@ export type OverlayElementOptions = {
export class OverlayView extends React.Component {
public static Instance: OverlayView;
@observable.shallow
- private _elements: { ele: JSX.Element, options: OverlayElementOptions }[] = [];
+ private _elements: { ele: JSX.Element, id: string, options: OverlayElementOptions }[] = [];
constructor(props: any) {
super(props);
@@ -26,7 +27,7 @@ export class OverlayView extends React.Component {
@action
addElement(ele: JSX.Element, options: OverlayElementOptions): OverlayDisposer {
- const eleWithPosition = { ele, options };
+ const eleWithPosition = { ele, options, id: Utils.GenerateGuid() };
this._elements.push(eleWithPosition);
return action(() => {
const index = this._elements.indexOf(eleWithPosition);
@@ -37,8 +38,8 @@ export class OverlayView extends React.Component {
render() {
return (
<div>
- {this._elements.map(({ ele, options: { x, y, width, height } }) => (
- <div style={{ position: "absolute", transform: `translate(${x}px, ${y}px)`, width, height }}>{ele}</div>
+ {this._elements.map(({ ele, options: { x, y, width, height }, id }) => (
+ <div key={id} style={{ position: "absolute", transform: `translate(${x}px, ${y}px)`, width, height }}>{ele}</div>
))}
</div>
);