aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/animationtimeline/TimelineMenu.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/animationtimeline/TimelineMenu.tsx')
-rw-r--r--src/client/views/animationtimeline/TimelineMenu.tsx81
1 files changed, 40 insertions, 41 deletions
diff --git a/src/client/views/animationtimeline/TimelineMenu.tsx b/src/client/views/animationtimeline/TimelineMenu.tsx
index 59c25596e..53ca9acad 100644
--- a/src/client/views/animationtimeline/TimelineMenu.tsx
+++ b/src/client/views/animationtimeline/TimelineMenu.tsx
@@ -1,7 +1,7 @@
import * as React from "react";
-import {observable, action, runInAction} from "mobx";
-import {observer} from "mobx-react";
-import "./TimelineMenu.scss";
+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";
@@ -9,67 +9,66 @@ import { Utils } from "../../../Utils";
@observer
export class TimelineMenu extends React.Component {
- public static Instance:TimelineMenu;
+ public static Instance: TimelineMenu;
@observable private _opacity = 0;
- @observable private _x = 0;
- @observable private _y = 0;
- @observable private _currentMenu:JSX.Element[] = [];
+ @observable private _x = 0;
+ @observable private _y = 0;
+ @observable private _currentMenu: JSX.Element[] = [];
- constructor (props:Readonly<{}>){
- super(props);
- TimelineMenu.Instance = this;
+ constructor(props: Readonly<{}>) {
+ super(props);
+ TimelineMenu.Instance = this;
}
-
+
@action
- openMenu = (x?:number, y?:number) => {
- this._opacity = 1;
- x ? this._x = x : this._x = 0;
- y ? this._y = y : this._y = 0;
+ openMenu = (x?: number, y?: number) => {
+ this._opacity = 1;
+ x ? this._x = x : this._x = 0;
+ y ? this._y = y : this._y = 0;
}
@action
closeMenu = () => {
- this._opacity = 0;
- this._currentMenu = [];
- this._x = -1000000;
- this._y = -1000000;
+ this._opacity = 0;
+ this._currentMenu = [];
+ this._x = -1000000;
+ this._y = -1000000;
}
@action
- addItem = (type: "input" | "button", title: string, event: (e:any, ...args:any[]) => void) => {
- if (type === "input"){
- let inputRef = React.createRef<HTMLInputElement>();
- let text = "";
- this._currentMenu.push(<div key={Utils.GenerateGuid()} className="timeline-menu-item"><FontAwesomeIcon icon={faClipboard} size="lg"/><input className="timeline-menu-input" ref = {inputRef} placeholder={title} onChange={(e) => {
+ 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} 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>);
+ event(text);
+ this.closeMenu();
+ e.stopPropagation();
+ }
+ }} /></div>);
} else if (type === "button") {
- let buttonRef = React.createRef<HTMLDivElement>();
- this._currentMenu.push( <div key={Utils.GenerateGuid()} className="timeline-menu-item"><FontAwesomeIcon icon={faChartLine}size="lg"/><p className="timeline-menu-desc" onClick={(e) => {
- e.preventDefault();
- e.stopPropagation();
- event(e);
- this.closeMenu();
- }}>{title}</p></div>);
- }
+ this._currentMenu.push(<div key={Utils.GenerateGuid()} className="timeline-menu-item"><FontAwesomeIcon icon={faChartLine} 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>);
+ @action
+ addMenu = (title: string) => {
+ 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>
);