opendash
Version:
open.DASH data visualization framework
56 lines • 4.49 kB
JavaScript
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
import * as React from "react";
import styled from "styled-components";
import { Icon as LegacyIcon } from "@ant-design/compatible";
import { Dropdown } from "antd";
import { useNavigate } from "react-router-dom";
import { OpenDashLogo, useAppState, useOpenDashApp } from "../..";
import UserMenu from "./menu-user";
import theme from "./theme";
import SourcePicker from "./source-picker";
var MainMenu = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n display: flex;\n padding: 0 24px;\n height: 48px;\n border-bottom: 2px solid #0063ac;\n"], ["\n position: relative;\n display: flex;\n padding: 0 24px;\n height: 48px;\n border-bottom: 2px solid #0063ac;\n"])));
var MainMenuLeft = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex: 1 1;\n"], ["\n display: flex;\n flex: 1 1;\n"])));
var MainMenuRight = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n float: right;\n"], ["\n float: right;\n"])));
var MainMenuCenter = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n margin: 0 auto;\n"], ["\n margin: 0 auto;\n"])));
var MenuItem = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n color: \"#444\";\n height: ", ";\n line-height: ", ";\n padding: 0 10px;\n min-width: ", ";\n text-align: center;\n\n cursor: pointer;\n\n :hover {\n color: \"#444\";\n background: rgba(255, 255, 255, 0.1);\n }\n"], ["\n color: \"#444\";\n height: ", ";\n line-height: ", ";\n padding: 0 10px;\n min-width: ", ";\n text-align: center;\n\n cursor: pointer;\n\n :hover {\n color: \"#444\";\n background: rgba(255, 255, 255, 0.1);\n }\n"])), theme.header.lineHeight, theme.header.lineHeight, theme.header.lineHeight);
export default function AppLayout() {
var navigate = useNavigate();
var user = useAppState(function (state) { return state.user.current; });
var _a = React.useState(false), open = _a[0], setOpen = _a[1];
var app = useOpenDashApp();
if (!user) {
return (React.createElement(MainMenu, null,
React.createElement(MainMenuCenter, null,
React.createElement(MenuItem, { key: "home", style: { cursor: "default" } },
React.createElement(OpenDashLogo, { style: {
display: "block",
height: "100%",
width: "auto",
padding: 4,
} })))));
}
return (React.createElement(MainMenu, null,
React.createElement(MainMenuLeft, null,
React.createElement("div", { key: "headerBeforeMenuLeft", ref: app.ui.refs.headerBeforeMenuLeft }),
React.createElement(MenuItem, { key: "home", onClick: function (e) { return navigate("/"); }, style: { paddingLeft: 0 } },
React.createElement(OpenDashLogo, { style: {
display: "block",
height: "100%",
width: "auto",
padding: "4px 0",
} })),
React.createElement("div", { key: "headerAfterLogo", ref: app.ui.refs.headerAfterLogo }),
React.createElement(MenuItem, { key: "source" },
React.createElement(SourcePicker, null)),
React.createElement("div", { key: "headerAfterMenuLeft", ref: app.ui.refs.headerAfterMenuLeft })),
React.createElement(MainMenuRight, null,
React.createElement("div", { key: "headerBeforeMenuRight", ref: app.ui.refs.headerBeforeMenuRight }),
React.createElement(Dropdown, { trigger: ["click"], placement: "bottomLeft", overlay: React.createElement(UserMenu, { right: true }), children: React.createElement(MenuItem, { style: { marginRight: -10 } },
React.createElement(LegacyIcon, { type: "user" })) }),
React.createElement("div", { key: "headerAfterMenuRight", ref: app.ui.refs.headerAfterMenuRight }))));
}
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
//# sourceMappingURL=header.js.map