77 lines
1.9 KiB
JavaScript
77 lines
1.9 KiB
JavaScript
// @flow
|
|
import * as React from "react";
|
|
|
|
import withStyles from "@material-ui/core/styles/withStyles";
|
|
import Drawer from "@material-ui/core/Drawer";
|
|
import Typography from "@material-ui/core/Typography";
|
|
import IconButton from "@material-ui/core/IconButton";
|
|
import AppBar from "@material-ui/core/AppBar";
|
|
import Toolbar from "@material-ui/core/Toolbar";
|
|
import List from "@material-ui/core/List";
|
|
import { renderIcon } from "config/icon";
|
|
|
|
import type { RawIcon } from "config/icon";
|
|
import type { Control } from "config/flowtypes";
|
|
|
|
export type SideBarProps = {
|
|
control: ?Control,
|
|
open: boolean,
|
|
onCloseRequest: () => void,
|
|
icon?: ?RawIcon,
|
|
children?: React.Node
|
|
};
|
|
|
|
export type SideBarState = {
|
|
};
|
|
|
|
type Props = SideBarProps & Classes;
|
|
|
|
class SideBar extends React.PureComponent<Props, SideBarState> {
|
|
constructor(props: Props) {
|
|
super(props);
|
|
}
|
|
|
|
static styles(): Object {
|
|
return {
|
|
drawerPaper: {
|
|
width: 340
|
|
},
|
|
flex: {
|
|
flex: 1
|
|
}
|
|
};
|
|
}
|
|
|
|
close() {
|
|
this.props.onCloseRequest();
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<Drawer open={this.props.open}
|
|
anchor="right"
|
|
onClose={this.close}
|
|
classes={{paper: this.props.classes.drawerPaper}}
|
|
variant="persistent"
|
|
>
|
|
<AppBar position="static">
|
|
<Toolbar>
|
|
<span>{this.props.icon == null
|
|
|| renderIcon(this.props.icon, "mdi-36px")}</span>
|
|
<Typography variant="title" className={this.props.classes.flex}>
|
|
{this.props.control == null ? "" : this.props.control.name}
|
|
</Typography>
|
|
<IconButton onClick={this.close.bind(this)}>
|
|
<i className="mdi mdi-close mdi-36px"></i>
|
|
</IconButton>
|
|
</Toolbar>
|
|
</AppBar>
|
|
<List id="drawer_uiComponents">
|
|
<React.Fragment>{this.props.children}</React.Fragment>
|
|
</List>
|
|
</Drawer>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default withStyles(SideBar.styles)(SideBar);
|