Michel2/pybricks-code
1
0
Fork 0
mirror of https://github.com/pybricks/pybricks-code.git synced 2026-09-12 01:23:52 +00:00
Code Issues Releases Activity

toolbar: convert Toolbar to function

Browse Source
This commit is contained in:
David Lechner
2021-12-27 12:38:50 -06:00
parent 8cd014c2ab
commit 534d3f80e6
1 changed files with 36 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/toolbar/Toolbar.tsx
+36 -40
View File
@@ -1,8 +1,8 @@
// SPDX-License-Identifier: MIT
// Copyright (c) 2020 The Pybricks Authors
// Copyright (c) 2020-2021 The Pybricks Authors
import { ButtonGroup } from '@blueprintjs/core';
import React from 'react';
import React, { useState } from 'react';
import OpenButton from '../editor/OpenButton';
import SaveAsButton from '../editor/SaveAsButton';
import FlashButton from '../firmware/FlashButton';
@@ -15,44 +15,40 @@ import SettingsDrawer from '../settings/SettingsDrawer';
import './toolbar.scss';
class Toolbar extends React.Component {
public state = {
settingsDrawerIsOpen: false,
};
const Toolbar: React.VFC = (_props) => {
const [isSettingsDrawerOpen, setIsSettingsDrawerOpen] = useState(false);
render(): JSX.Element {
return (
<div
role="toolbar"
onContextMenu={(e): void => e.preventDefault()}
className="pb-toolbar no-box-shadow"
>
<ButtonGroup className="pb-toolbar-group pb-align-left">
<OpenButton id="open" />
<SaveAsButton id="saveAs" />
</ButtonGroup>
<ButtonGroup className="pb-toolbar-group pb-align-left">
<RunButton id="run" keyboardShortcut="F5" />
<StopButton id="stop" keyboardShortcut="F6" />
<ReplButton id="repl" />
</ButtonGroup>
<ButtonGroup className="pb-toolbar-group pb-align-left">
<FlashButton id="flash" />
<BluetoothButton id="bluetooth" />
</ButtonGroup>
<ButtonGroup className="pb-toolbar-group pb-align-right">
<SettingsButton
id="settings"
onAction={() => this.setState({ settingsDrawerIsOpen: true })}
/>
<SettingsDrawer
isOpen={this.state.settingsDrawerIsOpen}
onClose={() => this.setState({ settingsDrawerIsOpen: false })}
/>
</ButtonGroup>
</div>
);
}
}
return (
<div
role="toolbar"
onContextMenu={(e): void => e.preventDefault()}
className="pb-toolbar no-box-shadow"
>
<ButtonGroup className="pb-toolbar-group pb-align-left">
<OpenButton id="open" />
<SaveAsButton id="saveAs" />
</ButtonGroup>
<ButtonGroup className="pb-toolbar-group pb-align-left">
<RunButton id="run" keyboardShortcut="F5" />
<StopButton id="stop" keyboardShortcut="F6" />
<ReplButton id="repl" />
</ButtonGroup>
<ButtonGroup className="pb-toolbar-group pb-align-left">
<FlashButton id="flash" />
<BluetoothButton id="bluetooth" />
</ButtonGroup>
<ButtonGroup className="pb-toolbar-group pb-align-right">
<SettingsButton
id="settings"
onAction={() => setIsSettingsDrawerOpen(true)}
/>
<SettingsDrawer
isOpen={isSettingsDrawerOpen}
onClose={() => setIsSettingsDrawerOpen(false)}
/>
</ButtonGroup>
</div>
);
};
export default Toolbar;