74 lines
1.8 KiB
JavaScript
74 lines
1.8 KiB
JavaScript
// @flow
|
|
import * as React from "react";
|
|
|
|
import withStyles from "material-ui/styles/withStyles";
|
|
import Drawer from "material-ui/Drawer";
|
|
import Typography from "material-ui/Typography";
|
|
import IconButton from "material-ui/IconButton";
|
|
import AppBar from "material-ui/AppBar";
|
|
import Toolbar from "material-ui/Toolbar";
|
|
import List from "material-ui/List";
|
|
import { renderIcon } from "utils/parseIconName";
|
|
|
|
import type { Control } from "config/flowtypes";
|
|
|
|
export type SideBarProps = {
|
|
control: ?Control,
|
|
open: boolean,
|
|
onCloseRequest: () => void,
|
|
icon?: ?string,
|
|
children?: React.Node
|
|
};
|
|
|
|
export type SideBarState = {
|
|
};
|
|
|
|
class SideBar extends React.Component<SideBarProps & Classes, SideBarState> {
|
|
constructor(props: SideBarProps & Classes) {
|
|
super(props);
|
|
}
|
|
|
|
static styles(_theme: Object): Object {
|
|
return {
|
|
drawerPaper: {
|
|
width: 340
|
|
},
|
|
flex: {
|
|
flex: 1
|
|
}
|
|
};
|
|
}
|
|
|
|
close() {
|
|
this.props.onCloseRequest();
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<Drawer open={this.props.open}
|
|
anchor="right"
|
|
onRequestClose={this.close}
|
|
classes={{paper: this.props.classes.drawerPaper}}
|
|
variant="persistent"
|
|
>
|
|
<AppBar position="static">
|
|
<Toolbar>
|
|
{this.props.icon == null
|
|
|| renderIcon(this.props.icon, "mdi-36px")}
|
|
<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">
|
|
{this.props.children}
|
|
</List>
|
|
</Drawer>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default withStyles(SideBar.styles)(SideBar);
|