@makeen.io/material-ui-kit
Version:
Makeen UI components kit. Based on material-ui.
190 lines (83 loc) • 8.14 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";function _templateObject3() {var data = _taggedTemplateLiteral(["\n min-width: 26px;\n & .logout-icon {\n filter: invert(47%) sepia(94%) saturate(1722%) hue-rotate(336deg)\n brightness(99%) contrast(105%);\n }\n"]);_templateObject3 = function _templateObject3() {return data;};return data;}function _templateObject2() {var data = _taggedTemplateLiteral(["\n min-width: 26px;\n & .manage-profile-icon {\n filter: invert(42%) sepia(68%) saturate(744%) hue-rotate(159deg)\n brightness(104%) contrast(90%);\n }\n"]);_templateObject2 = function _templateObject2() {return data;};return data;}function _templateObject() {var data = _taggedTemplateLiteral(["\n display: flex;\n width: 100%;\n height: 64px;\n border-radius: 0;\n padding: 12px;\n align-items: center;\n\n ", ";\n\n .input-container {\n min-width: 600px;\n margin-left: 15px;\n padding: 0.6em 1em;\n background-color: ", ";\n border-radius: 5px;\n svg {\n margin-right: 15px;\n }\n }\n\n .explorer-toolbar {\n &_main {\n padding: 0 15px;\n &__drawer-toggle {\n display: none;\n }\n ", " {\n &__drawer-toggle {\n display: inline-block;\n }\n\n &__search {\n display: none;\n }\n }\n }\n\n &__icon-list {\n display: flex;\n align-items: center;\n }\n\n &__icon-container {\n margin: 0 10px;\n\n &:last-child {\n margin-right: 34px;\n }\n }\n\n &__icon {\n &_comment,\n &_bell {\n path[fill] {\n fill: #c5cee0;\n }\n }\n }\n\n &_actions {\n padding: 0 15px;\n margin-left: auto;\n cursor: pointer;\n display: flex;\n align-items: center;\n\n .explorer-toolbar_actions_content {\n display: flex;\n align-items: center;\n\n .explorer-toolbar_actions_name {\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n font-size: 13px;\n text-transform: capitalize;\n margin-right: 16px;\n margin-left: 20px;\n ", " {\n display: none;\n }\n\n &_role {\n color: ", ";\n }\n }\n }\n }\n }\n\n & {\n ", " {\n border-bottom: 1px solid\n ", ";\n }\n }\n"]);_templateObject = function _templateObject() {return data;};return data;}import React from "react";
import IconButton from "@material-ui/core/IconButton";
import Input from "@material-ui/core/Input";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemText from "@material-ui/core/ListItemText";
import { useTheme } from "@material-ui/core/styles";
import MenuIcon from "@material-ui/icons/Menu";
import SearchIcon from "@material-ui/icons/Search";
// import { ReactComponent as BellIcon } from "assets/icons/bell.svg";
// import { ReactComponent as CommentIcon } from "assets/icons/comment.svg";
import LogoutIcon from "../../../assets/icons/log-out.svg";
import ManageProfileIcon from "../../../assets/icons/user-cog.svg";
import { Avatar, Menu } from "../../atoms";
import styled from "styled-components";
var ToolbarWrapper = styled.div(_templateObject(),
function (_ref) {var variant = _ref.variant,theme = _ref.theme;return variant === "default" ? "border-bottom: 1px solid ".concat(
theme.palette.colors.basic[300]) : "background-color: white;\n box-shadow: 0px 0px 17px -7px rgba(0,0,0,0.67);";},
function (_ref2) {var theme = _ref2.theme;return theme.palette.colors.basic[300];},
function (props) {return props.theme.breakpoints.down("sm");},
function (props) {return props.theme.breakpoints.down("sm");},
function (props) {return props.theme.palette.common.grey;},
function (props) {return props.theme.breakpoints.down("sm");},
function (props) {return props.theme.palette.common.whiteShade1;});
// The props here is the same that's passed to the ExplorerMenu at runtime.
// It can be used to access theme to build dynamic css rules as well as have rules depend on diff prop values
var explorerMenuStyle = function explorerMenuStyle() {return "\n width: auto;\n";};
var ManageProfileComp = styled(function (_ref3) {var className = _ref3.className;return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/
React.createElement(ListItemIcon, { className: className }, /*#__PURE__*/
React.createElement(ManageProfileIcon, { className: "manage-profile-icon", fontSize: "18", width: "18", height: "18" })), /*#__PURE__*/
React.createElement(ListItemText, { primary: "Manage Profile" }));})(_templateObject2());
var LogoutComp = styled(function (_ref4) {var className = _ref4.className;return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/
React.createElement(ListItemIcon, { className: className }, /*#__PURE__*/
React.createElement(LogoutIcon, { className: "logout-icon", fontSize: "18", width: "18", height: "18", fill: "red" })), /*#__PURE__*/
React.createElement(ListItemText, { primary: "Logout" }));})(_templateObject3());
export default (function (_ref5) {var onToggleDrawer = _ref5.onToggleDrawer,userRole = _ref5.userRole,goManageProfile = _ref5.goManageProfile,_ref5$isTester = _ref5.isTester,isTester = _ref5$isTester === void 0 ? false : _ref5$isTester,children = _ref5.children,value = _ref5.value,onChange = _ref5.onChange,variant = _ref5.variant,restProps = _objectWithoutProperties(_ref5, ["onToggleDrawer", "userRole", "goManageProfile", "isTester", "children", "value", "onChange", "variant"]);
var theme = useTheme();
var user = restProps.user || {};
var itemActions = [
{
comp: ManageProfileComp,
name: "Manage Profile",
onClick: function onClick() {return goManageProfile();}
},
{
comp: LogoutComp,
name: "Logout",
onClick: function onClick() {
// client.resetStore()
// dispatch(logout({ redirectToSamePath: true }));
restProps.logout();
}
}];
return /*#__PURE__*/React.createElement(ToolbarWrapper, _extends({ variant: variant }, restProps), /*#__PURE__*/
React.createElement(IconButton, { color: "inherit", "aria-label": "open drawer", edge: "start", onClick: onToggleDrawer, className: "explorer-toolbar_main__drawer-toggle" }, /*#__PURE__*/
React.createElement(MenuIcon, null)), /*#__PURE__*/
React.createElement(Input, { classes: { root: "input-container" }, disableUnderline: true, startAdornment: /*#__PURE__*/React.createElement(SearchIcon, { htmlColor: theme.palette.colors.basic[600] }), placeholder: "Search", value: value, onChange: onChange }), /*#__PURE__*/
React.createElement("div", { className: "explorer-toolbar_actions" },
children, /*#__PURE__*/
React.createElement(Menu, { options: itemActions, menuStyle: explorerMenuStyle, getContentAnchorEl: null, anchorOrigin: {
horizontal: "right",
vertical: "bottom"
}, transformOrigin: {
horizontal: "right",
vertical: "top"
}, closeOnSelect: true }, /*#__PURE__*/
React.createElement("div", { className: "explorer-toolbar_actions_content" }, (user.name ||
isTester && user.profile && user.profile.firstName) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/
React.createElement("div", { className: "explorer-toolbar_actions_name" },
!isTester ?
user.name.split(" ")[0] :
user.profile.firstName || "",
userRole && /*#__PURE__*/React.createElement("span", { className: "explorer-toolbar_actions_name_role" }, userRole)), /*#__PURE__*/
React.createElement(Avatar, { image: !isTester ?
user.photo :
user.profile ?
user.profile.photo :
null, palette: "warning", title: !isTester ?
user.name[0] :
user.profile && user.profile.firstName ?
user.profile.firstName[0] :
"" }))))));
});
//# sourceMappingURL=index.js.map