1 files changed, 61 insertions, 39 deletions

diff --git a/src/client/views/animationtimeline/TimelineMenu.tsx b/src/client/views/animationtimeline/TimelineMenu.tsx
index aa422c092..1769c41bd 100644
--- a/src/client/views/animationtimeline/TimelineMenu.tsx
+++ b/src/client/views/animationtimeline/TimelineMenu.tsx
@@ -1,12 +1,11 @@
-import * as React from "react";
-import { observable, action, runInAction } from "mobx";
-import { observer } from "mobx-react";
-import "./TimelineMenu.scss";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faChartLine, faRoad, faClipboard, faPen, faTrash, faTable } from "@fortawesome/free-solid-svg-icons";
-import { Utils } from "../../../Utils";
-import { IconLookup } from "@fortawesome/fontawesome-svg-core";
-
+import { IconLookup } from '@fortawesome/fontawesome-svg-core';
+import { faChartLine, faClipboard } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { action, observable } from 'mobx';
+import { observer } from 'mobx-react';
+import * as React from 'react';
+import { Utils } from '../../../Utils';
+import './TimelineMenu.scss';
 
 @observer
 export class TimelineMenu extends React.Component {
@@ -25,9 +24,9 @@ export class TimelineMenu extends React.Component {
     @action
     openMenu = (x?: number, y?: number) => {
         this._opacity = 1;
-        x ? this._x = x : this._x = 0;
-        y ? this._y = y : this._y = 0;
-    }
+        x ? (this._x = x) : (this._x = 0);
+        y ? (this._y = y) : (this._y = 0);
+    };
 
     @action
     closeMenu = () => {
@@ -35,44 +34,67 @@ export class TimelineMenu extends React.Component {
         this._currentMenu = [];
         this._x = -1000000;
         this._y = -1000000;
-    }
+    };
 
     @action
-    addItem = (type: "input" | "button", title: string, event: (e: any, ...args: any[]) => void) => {
-        if (type === "input") {
+    addItem = (type: 'input' | 'button', title: string, event: (e: any, ...args: any[]) => void) => {
+        if (type === 'input') {
             const inputRef = React.createRef<HTMLInputElement>();
-            let text = "";
-            this._currentMenu.push(<div key={Utils.GenerateGuid()} className="timeline-menu-item"><FontAwesomeIcon icon={faClipboard as IconLookup} size="lg" /><input className="timeline-menu-input" ref={inputRef} placeholder={title} onChange={(e) => {
-                e.stopPropagation();
-                text = e.target.value;
-            }} onKeyDown={(e) => {
-                if (e.keyCode === 13) {
-                    event(text);
-                    this.closeMenu();
-                    e.stopPropagation();
-                }
-            }} /></div>);
-        } else if (type === "button") {
-            this._currentMenu.push(<div key={Utils.GenerateGuid()} className="timeline-menu-item"><FontAwesomeIcon icon={faChartLine as IconLookup} size="lg" /><p className="timeline-menu-desc" onClick={(e) => {
-                e.preventDefault();
-                e.stopPropagation();
-                event(e);
-                this.closeMenu();
-            }}>{title}</p></div>);
+            let text = '';
+            this._currentMenu.push(
+                <div key={Utils.GenerateGuid()} className="timeline-menu-item">
+                    <FontAwesomeIcon icon={faClipboard as IconLookup} size="lg" />
+                    <input
+                        className="timeline-menu-input"
+                        ref={inputRef}
+                        placeholder={title}
+                        onChange={e => {
+                            e.stopPropagation();
+                            text = e.target.value;
+                        }}
+                        onKeyDown={e => {
+                            if (e.keyCode === 13) {
+                                event(Number(text));
+                                this.closeMenu();
+                                e.stopPropagation();
+                            }
+                        }}
+                    />
+                </div>
+            );
+        } else if (type === 'button') {
+            this._currentMenu.push(
+                <div key={Utils.GenerateGuid()} className="timeline-menu-item">
+                    <FontAwesomeIcon icon={faChartLine as IconLookup} size="lg" />
+                    <p
+                        className="timeline-menu-desc"
+                        onClick={e => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            event(e);
+                            this.closeMenu();
+                        }}>
+                        {title}
+                    </p>
+                </div>
+            );
         }
-    }
+    };
 
     @action
     addMenu = (title: string) => {
-        this._currentMenu.unshift(<div key={Utils.GenerateGuid()} className="timeline-menu-header"><p className="timeline-menu-header-desc">{title}</p></div>);
-    }
+        this._currentMenu.unshift(
+            <div key={Utils.GenerateGuid()} className="timeline-menu-header">
+                <p className="timeline-menu-header-desc">{title}</p>
+            </div>
+        );
+    };
 
     render() {
         return (
-            <div key={Utils.GenerateGuid()} className="timeline-menu-container" style={{ opacity: this._opacity, left: this._x, top: this._y }} >
+            <div key={Utils.GenerateGuid()} className="timeline-menu-container" style={{ opacity: this._opacity, left: this._x, top: this._y }}>
                 {this._currentMenu}
             </div>
         );
     }
-
-}
\ No newline at end of file
+}