forked from babel/sandboxes
-
Notifications
You must be signed in to change notification settings - Fork 3
/
MainMenu.js
155 lines (150 loc) · 4.28 KB
/
MainMenu.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
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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
import React from "react";
import { Dropdown, Icon, Menu, Button, Label } from "semantic-ui-react";
import REPLState from "../state/REPLState.js";
import { ShareModal } from "./ShareModal";
import { ForkModal } from "./ForkModal";
import { loadPlugin, loadPreset } from "../plugins/addPlugin.js";
import logo from '../babel.png';
export function MainMenu({
source,
setSource,
jsonConfig,
setBabelConfig,
customPlugin,
toggleCustomPlugin,
enableCustomPlugin,
id,
setId,
toggleForksVisible,
forks,
setForks,
configsCount,
}) {
const [shareLink, setShareLink] = React.useState("");
return (
<Menu attached="top" inverted>
<Menu.Item>
<img
src={logo}
alt="Babel Logo"
/>
</Menu.Item>
<Dropdown item icon="wrench" simple>
<Dropdown.Menu>
<Dropdown.Item
disabled={configsCount >= 5}
onClick={() =>
setBabelConfig(configs => [
...configs,
{
plugins: [],
presets: [],
},
])
}
>
Add Config
</Dropdown.Item>
<Dropdown.Item
onClick={() => {
setSource("const hello = 'world';");
}}
>
Load Example
</Dropdown.Item>
<Dropdown.Divider />
<ShareModal
shareLink={shareLink}
trigger={
<Dropdown.Item
onClick={async () => {
const state = new REPLState(
source,
enableCustomPlugin ? customPlugin : "",
jsonConfig.map(config => JSON.stringify(config))
);
const link = await state.Link(id, setId);
setShareLink(link);
const linkId = link.split("/")[4];
// TODO: Replace title with name of config
window.history.replaceState(
null,
"Babel Test Playground",
`#/share/${linkId}`
);
}}
>
Share
</Dropdown.Item>
}
/>
</Dropdown.Menu>
</Dropdown>
<Menu.Item
onClick={async () => {
const state = new REPLState(
source,
enableCustomPlugin ? customPlugin : "",
jsonConfig.map(config => JSON.stringify(config))
);
state.PluginList().forEach(plugin => loadPlugin(plugin));
state.PresetList().forEach(preset => loadPreset(preset));
// Check if the id exists
if (!id) {
// If it doesn't, then this config has not been saved before
const blob = await state.New();
setId(blob.id);
// TODO: Replace title with name of config
window.history.replaceState(
null,
"Babel Test Playground",
`#/share/${blob.id}`
);
} else {
// If it does, update the blob
state.Save(id);
}
}}
>
<Icon name="save" /> Save
</Menu.Item>
{id && (
<Menu.Item>
<Button as="div" labelPosition="right">
<ForkModal
onFork={async () => {
const state = new REPLState(
source,
enableCustomPlugin ? customPlugin : "",
jsonConfig.map(config => JSON.stringify(config))
);
const fork = await state.Fork(id);
setId(fork.id);
setForks([]);
window.history.replaceState(
null,
"Babel Test Playground",
`#/share/${fork.id}`
);
}}
trigger={
<Button icon>
<Icon name="fork" /> Forks
</Button>
}
/>
<Label
as="a"
basic
onClick={async () => {
toggleForksVisible();
}}
>
{forks?.length ?? 0}
</Label>
</Button>
</Menu.Item>
)}
</Menu>
);
}