43 lines
1.4 KiB
JavaScript
43 lines
1.4 KiB
JavaScript
// @flow
|
|
import React from "react";
|
|
import AppBar from "material-ui/AppBar";
|
|
import CircularProgress from "material-ui/CircularProgress";
|
|
import MapIcon from "material-ui/svg-icons/maps/map";
|
|
import PhonelinkOffIcon from "material-ui/svg-icons/hardware/phonelink-off";
|
|
import IconMenu from "material-ui/IconMenu";
|
|
import IconButton from "material-ui/IconButton";
|
|
import MenuItem from "material-ui/MenuItem";
|
|
import { orange400, grey50 } from "material-ui/styles/colors";
|
|
|
|
const TopBarIndicatorMenu = (props: Object) => (
|
|
<IconMenu
|
|
iconButtonElement={
|
|
<IconButton style={{width:48, height:48, padding: 0}}
|
|
iconStyle={{width:48, height: 48}}
|
|
tooltip={props.mqtt.connected ? "Connected!" : "Disconnected!"}>
|
|
{props.mqtt.connected ?
|
|
(<MapIcon color={grey50} />) :
|
|
(<PhonelinkOffIcon color={grey50} />)}
|
|
</IconButton>}
|
|
style={{width:48, height:48}}>
|
|
<MenuItem primaryText="Reconnect (Not yet implemented)" />
|
|
</IconMenu>
|
|
);
|
|
|
|
|
|
const TopBarIndicator = (props: Object) => {
|
|
if (props.mqtt == null || props.mqtt.reconnecting) {
|
|
return (<CircularProgress size={48} color={grey50} />);
|
|
} else {
|
|
return (<TopBarIndicatorMenu {...props} />);
|
|
}
|
|
};
|
|
|
|
const TopBar = (props: Object) => (
|
|
<AppBar title={props.title}
|
|
style={{background:orange400}}
|
|
iconElementLeft={<TopBarIndicator {...props} />}
|
|
className="nav"
|
|
/>);
|
|
|
|
export default TopBar;
|