@thivi/react
Version:
The React implementation of the Oxygen Design System
64 lines (63 loc) • 7.85 kB
JavaScript
import { __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
* Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
*
* WSO2 LLC. licenses this file to you under the Apache License,
* Version 2.0 (the "License"); you may not use this file except
* in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import { useColorScheme } from '@mui/material/styles';
import { ChevronDownIcon, HamburgerIcon, PowerIcon } from '@thivi/react-icons';
import clsx from 'clsx';
import { useIsMobile } from '../hooks/use-is-mobile';
import { composeComponentDisplayName } from '../utils';
import AppBar from '../AppBar';
import Avatar from '../Avatar';
import Box from '../Box';
import IconButton from '../IconButton';
import Link from '../Link';
import Toolbar from '../Toolbar';
import Typography from '../Typography';
import UserDropdownMenu from '../UserDropdownMenu';
const userDropdownMenuDefaultProps = {
actionIcon: _jsx(PowerIcon, {}),
actionText: 'Logout',
onActionClick: () => null,
};
const COMPONENT_NAME = 'Header';
const Header = (props) => {
var _a, _b;
const { brand, className, modes, showCollapsibleHamburger, leftAlignedElements, onCollapsibleHamburgerClick, rightAlignedElements, user, userDropdownMenu } = props, rest = __rest(props, ["brand", "className", "modes", "showCollapsibleHamburger", "leftAlignedElements", "onCollapsibleHamburgerClick", "rightAlignedElements", "user", "userDropdownMenu"]);
const userDropdownMenuProps = Object.assign(Object.assign({}, userDropdownMenuDefaultProps), userDropdownMenu);
const { mode, setMode } = useColorScheme();
const isMobile = useIsMobile();
const classes = clsx('oxygen-header', {
mobile: isMobile,
'with-hamburger': showCollapsibleHamburger,
}, className);
const onModeChange = (selectedMode) => {
setMode(selectedMode);
};
return (_jsx(AppBar, Object.assign({ position: "static", color: "default", variant: "outlined", elevation: 0, className: classes, role: "banner" }, rest, { children: _jsxs(Toolbar, Object.assign({ className: "oxygen-header-toolbar" }, { children: [showCollapsibleHamburger && (_jsx("div", Object.assign({ className: "oxygen-header-collapsible-hamburger" }, { children: _jsx(IconButton, Object.assign({ "aria-label": "Menu Icon", onClick: onCollapsibleHamburgerClick || (() => null) }, { children: _jsx(HamburgerIcon, {}) })) }))), brand && (_jsxs(Box, Object.assign({ tabIndex: 0, component: brand.onClick ? Link : Box, className: clsx('oxygen-brand', {
'with-link': Boolean(brand.onClick),
}), onClick: brand.onClick, underline: "none", color: "inherit" }, { children: [_jsx(Box, Object.assign({ className: "oxygen-brand-logo" }, { children: isMobile ? (_a = brand.logo.mobile) !== null && _a !== void 0 ? _a : brand.logo.desktop : brand.logo.desktop })), _jsx(Typography, Object.assign({ variant: "h6", component: "h1", className: "oxygen-brand-portal-name" }, { children: brand.title }))] }))), (leftAlignedElements || rightAlignedElements) && (_jsxs(Box, Object.assign({ className: "oxygen-header-elements" }, { children: [(leftAlignedElements === null || leftAlignedElements === void 0 ? void 0 : leftAlignedElements.length) > 0 && (_jsx(Box, Object.assign({ className: "oxygen-header-elements-left" }, { children: leftAlignedElements }))), (rightAlignedElements === null || rightAlignedElements === void 0 ? void 0 : rightAlignedElements.length) > 0 && (_jsx(Box, Object.assign({ className: "oxygen-header-elements-right" }, { children: rightAlignedElements })))] }))), _jsx(Box, Object.assign({ className: "oxygen-header-user-dropdown-menu" }, { children: _jsx(UserDropdownMenu, { user: user, triggerOptions: Object.assign({ children: user === null || user === void 0 ? void 0 : user.name, color: 'inherit', endIcon: _jsx(ChevronDownIcon, {}), startIcon: (_jsx(Avatar, Object.assign({ className: "image", alt: "User Image", src: user === null || user === void 0 ? void 0 : user.image }, { children: (_b = user === null || user === void 0 ? void 0 : user.name) === null || _b === void 0 ? void 0 : _b.split('')[0] }))) }, userDropdownMenuProps.triggerOptions), modesHeading: "Theme", modes: modes, onActionTrigger: userDropdownMenuProps.onActionClick, actionText: userDropdownMenuProps.actionText, actionIcon: userDropdownMenuProps.actionIcon, mode: mode, onModeChange: onModeChange, menuItems: userDropdownMenuProps.menuItems, footerContent: userDropdownMenu.footerContent }) }))] })) })));
};
Header.displayName = composeComponentDisplayName(COMPONENT_NAME);
Header.muiName = COMPONENT_NAME;
Header.defaultProps = {
userDropdownMenu: userDropdownMenuDefaultProps,
};
export default Header;
function addCSS(css){var head = document.getElementsByTagName('head')[ 0 ];var s = document.createElement('style');s.setAttribute('type', 'text/css');s.appendChild(document.createTextNode(css));head.appendChild(s);}
addCSS("/**\n * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n.oxygen-header {\n border-left: none;\n border-right: none;\n border-top: none; }\n .oxygen-header-collapsible-hamburger {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n padding: 0 12px 0 23px; }\n .oxygen-header .oxygen-brand {\n display: flex;\n align-items: center;\n width: calc(var(--oxygen-customComponents-Navbar-properties-width) - 77px);\n text-decoration: none;\n color: inherit; }\n .oxygen-header .oxygen-brand-logo {\n height: 40px;\n max-width: 100px;\n display: flex;\n margin-right: 0.5rem; }\n .oxygen-header .oxygen-brand-logo img {\n width: 100%; }\n .oxygen-header .oxygen-brand.with-link {\n cursor: pointer; }\n .oxygen-header-toolbar {\n min-height: var(--oxygen-customComponents-Header-properties-min-height); }\n .oxygen-header.with-hamburger .oxygen-header-toolbar {\n padding-left: 0; }\n .oxygen-header.with-hamburger .oxygen-header-toolbar .oxygen-brand {\n margin-left: 10px; }\n .oxygen-header-elements {\n display: flex;\n flex: 1; }\n .oxygen-header-elements-left, .oxygen-header-elements-right {\n display: flex;\n align-items: center; }\n .oxygen-header-elements-left > *, .oxygen-header-elements-right > * {\n margin-right: 0.5rem; }\n .oxygen-header-elements-right {\n margin-left: auto; }\n .oxygen-header-user-dropdown-menu {\n margin-left: auto; }\n .oxygen-header-user-dropdown-menu .image {\n width: 2.2rem;\n height: 2.2rem; }\n .oxygen-header.mobile .menu-icon-button {\n margin-right: 0.5rem; }\n .oxygen-header.mobile .oxygen-header-links,\n .oxygen-header.mobile .oxygen-header-user-dropdown-menu {\n display: none; }\n");