You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
42 lines
2.9 KiB
42 lines
2.9 KiB
3 years ago
|
"use strict";
|
||
|
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
||
|
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
||
|
|
};
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
exports.CurrentUserNav = exports.default = void 0;
|
||
|
|
const react_1 = __importDefault(require("react"));
|
||
|
|
const box_1 = __importDefault(require("../../atoms/box"));
|
||
|
|
const button_1 = require("../../atoms/button");
|
||
|
|
const icon_1 = __importDefault(require("../../atoms/icon"));
|
||
|
|
const typography_1 = require("../../atoms/typography");
|
||
|
|
const drop_down_1 = require("../../molecules/drop-down");
|
||
|
|
const current_user_nav_styled_1 = __importDefault(require("./current-user-nav-styled"));
|
||
|
|
/**
|
||
|
|
* @load ./current-user-nav.doc.md
|
||
|
|
* @component
|
||
|
|
* @subcategory Organisms
|
||
|
|
* @hideconstructor
|
||
|
|
* @see CurrentUserNavProps
|
||
|
|
* @see {@link https://storybook.adminjs.co/?path=/story/designsystem-organisms-current-user-nav--default Storybook}
|
||
|
|
* @new In version 3.3
|
||
|
|
* @section design-system
|
||
|
|
*/
|
||
|
|
const CurrentUserNav = (props) => {
|
||
|
|
const { name, title, avatarUrl, dropActions, lineActions } = props;
|
||
|
|
return (react_1.default.createElement(current_user_nav_styled_1.default, null,
|
||
|
|
lineActions && lineActions.length && (react_1.default.createElement(box_1.default, { flex: true, flexDirection: "row", alignItems: "center" }, lineActions.map((action) => (react_1.default.createElement(button_1.Button, { size: "icon", variant: "text", title: action.label, key: action.label, href: action.href, as: "a", className: "line-action", onClick: action.onClick }, action.icon && react_1.default.createElement(icon_1.default, { icon: action.icon })))))),
|
||
|
|
react_1.default.createElement(drop_down_1.DropDown, { stick: "right", display: "flex" },
|
||
|
|
react_1.default.createElement(drop_down_1.DropDownTrigger, null,
|
||
|
|
react_1.default.createElement(box_1.default, { flex: true, flexDirection: "row", px: "xl", alignItems: "center", height: "navbarHeight" },
|
||
|
|
react_1.default.createElement(box_1.default, null,
|
||
|
|
react_1.default.createElement(typography_1.Title, null, name),
|
||
|
|
title && react_1.default.createElement(typography_1.SmallText, null, title)),
|
||
|
|
avatarUrl && react_1.default.createElement("img", { src: avatarUrl, alt: name }),
|
||
|
|
dropActions && dropActions.length && (react_1.default.createElement(icon_1.default, { icon: "OverflowMenuVertical", size: 16, ml: "md" })))),
|
||
|
|
dropActions && dropActions.length && (react_1.default.createElement(drop_down_1.DropDownMenu, { minWidth: "100%" }, dropActions.map((action) => (react_1.default.createElement(drop_down_1.DropDownItem, { key: action.label, as: "a", onClick: action.onClick, href: action.href },
|
||
|
|
action.icon && react_1.default.createElement(icon_1.default, { icon: action.icon }),
|
||
|
|
action.label))))))));
|
||
|
|
};
|
||
|
|
exports.default = CurrentUserNav;
|
||
|
|
exports.CurrentUserNav = CurrentUserNav;
|