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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
|
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { observable, action, configure, reaction, computed, ObservableMap, runInAction } from 'mobx';
import { observer } from "mobx-react";
import * as request from 'request'
import './WorkspacesMenu.css'
export interface WorkspaceMenuProps {
active: string;
load: (workspaceId: string) => void;
new: () => string;
}
@observer
export class WorkspacesMenu extends React.Component<WorkspaceMenuProps> {
static Instance: WorkspacesMenu;
@observable private workspacesExposed: boolean = false;
@observable private workspaceIds: Array<string> = [];
@observable private selectedWorkspaceId: string = "";
constructor(props: WorkspaceMenuProps) {
super(props);
WorkspacesMenu.Instance = this;
this.loadExistingWorkspace = this.loadExistingWorkspace.bind(this);
this.addNewWorkspace = this.addNewWorkspace.bind(this);
this.selectedWorkspaceId = this.props.active;
}
@action
addNewWorkspace() {
let newId = this.props.new();
this.selectedWorkspaceId = newId;
this.props.load(newId);
this.toggle();
// setTimeout(action(() => {
// }), 100);
}
@action
loadExistingWorkspace = (e: React.MouseEvent<HTMLLIElement, MouseEvent>) => {
let id = e.currentTarget.innerHTML;
this.props.load(id);
this.selectedWorkspaceId = id;
}
@action
toggle() {
if (this.workspacesExposed) {
this.workspacesExposed = !this.workspacesExposed;
} else {
request.get(window.location.origin + "/getAllWorkspaceIds", this.idCallback)
}
}
@action.bound
idCallback: request.RequestCallback = (error, response, body) => {
this.workspaceIds = [];
let ids: Array<string> = JSON.parse(body) as Array<string>;
if (ids) {
for (let i = 0; i < ids.length; i++) {
this.workspaceIds.push(ids[i]);
}
this.workspacesExposed = !this.workspacesExposed;
}
}
render() {
let p = this.props;
return (
<div
style={{
width: "auto",
height: "auto",
borderRadius: 5,
position: "absolute",
top: 50,
left: this.workspacesExposed ? 8 : -500,
background: "white",
border: "black solid 2px",
transition: "all 1s ease",
zIndex: 15,
padding: 10,
}}
>
<img
src="https://bit.ly/2IBBkxk"
style={{
width: 20,
height: 20,
marginBottom: 10,
cursor: "grab"
}}
onClick={this.addNewWorkspace}
/>
{this.workspaceIds.map(s =>
<li className={"ids"}
key={s}
style={{
listStyleType: "none",
color: s === this.selectedWorkspaceId ? "darkblue" : "black",
cursor: "grab"
}}
onClick={this.loadExistingWorkspace}
>{s}</li>
)}
</div>
);
}
}
|
