@makeen.io/material-ui-kit/distr/molecules/Drawer/TransformDrawer.js

Makeen UI components kit. Based on material-ui.

import _slicedToArray from "@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";function _templateObject5() {var data = _taggedTemplateLiteral(["\n  ", ";\n  ", ";\n"]);_templateObject5 = function _templateObject5() {return data;};return data;}function _templateObject4() {var data = _taggedTemplateLiteral(["\n  display: inline-block;\n  width: 10px;\n  height: 1px;\n  background-color: ", ";\n"]);_templateObject4 = function _templateObject4() {return data;};return data;}function _templateObject3() {var data = _taggedTemplateLiteral(["\n  padding-top: 1em;\n  padding-bottom: 1em;\n  ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n  &.Mui-selected {\n    background-color: ", ";\n    color: ", ";\n    &:hover {\n      background-color: ", ";\n    }\n  }\n\n  .MuiBadge-badge {\n    background-color: ", ";\n    color: ", ";\n    font-size: 14px;\n  }\n\n  .right-icon {\n    transform: translateX(55%);\n  }\n\n  .label .MuiTypography-root {\n    font-size: 14px;\n  }\n"]);_templateObject3 = function _templateObject3() {return data;};return data;}function _templateObject2() {var data = _taggedTemplateLiteral(["\n  .header {\n    background-color: ", ";\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    min-height: 80px;\n    font-size: 24px;\n\n    .content {\n      flex: 1;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      & * {\n        margin: 0 0.15em;\n      }\n    }\n  }\n"]);_templateObject2 = function _templateObject2() {return data;};return data;}function _templateObject() {var data = _taggedTemplateLiteral(["\n  .MuiPaper-root.MuiDrawer-paper {\n    background-color: ", ";\n    color: ", ";\n    width: 270px;\n  }\n"]);_templateObject = function _templateObject() {return data;};return data;}import React from "react";
import Badge from "@material-ui/core/Badge";
import Collapse from "@material-ui/core/Collapse";
import Drawer from "@material-ui/core/Drawer";
import List from "@material-ui/core/List";
import MUIListItem from "@material-ui/core/ListItem";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemText from "@material-ui/core/ListItemText";
import { useTheme } from "@material-ui/core/styles";
import ChevronRight from "@material-ui/icons/ChevronRight";
import ExpandMore from "@material-ui/icons/ExpandMore";
import styled from "styled-components";
var DrawerWrapper = styled.div(_templateObject(),

function (props) {return props.theme.palette.secondary.main;},
function (props) {return props.theme.palette.colors.basic[600];});



var HeaderWrapper = styled.div(_templateObject2(),

function (props) {return props.theme.palette.drawer.foreground;});

















var ListItemWrapper = styled(MUIListItem)(_templateObject3(),


function (props) {return props.subItem ? "padding-left: 35px" : "";},


function (props) {return props.theme.palette.drawer.foreground;},


function (props) {return props.theme.palette.drawer.foreground;},
function (props) {return props.theme.palette.colors.basic[100];},

function (props) {return props.theme.palette.drawer.foreground;},




function (props) {return props.theme.palette.colors.danger[500];},
function (props) {return props.theme.palette.colors.basic[100];});











var Dash = styled.span(_templateObject4(),



function (props) {return props.theme.palette.colors.basic[600];});

var Header = function Header(props) {
  return /*#__PURE__*/React.createElement(HeaderWrapper, null, /*#__PURE__*/
  React.createElement("div", { className: "header" }, /*#__PURE__*/
  React.createElement("div", { className: "content" }, props.children),
  props.Icon && /*#__PURE__*/React.createElement("div", { className: "icon" }, props.Icon)));
};
var CustomListIcon = styled(ListItemIcon)(_templateObject5(),
function (_ref) {var isDash = _ref.isDash;return isDash ? "padding-left: 8px" : "";},
function (_ref2) {var isDash = _ref2.isDash;return isDash ? "min-width: 45px" : "";});

export var ListItem = function ListItem(_ref3) {var onClick = _ref3.onClick,subItem = _ref3.subItem,selected = _ref3.selected,props = _objectWithoutProperties(_ref3, ["onClick", "subItem", "selected"]);
  var theme = useTheme();
  return /*#__PURE__*/React.createElement(ListItemWrapper, { classes: { selected: "list-item-selected" }, onClick: onClick, button: true, disableRipple: true, subItem: subItem, selected: selected },
  props.Icon !== null ? /*#__PURE__*/React.createElement(CustomListIcon, { isDash: props.Icon === undefined }, props.Icon === undefined ? /*#__PURE__*/React.createElement(Dash, null) : /*#__PURE__*/React.createElement(props.Icon, { htmlColor: "white" })) : null, /*#__PURE__*/
  React.createElement(ListItemText, { className: "label", primary: props.text }), /*#__PURE__*/
  React.createElement(Badge, { badgeContent: props.notifications }),
  props.IconRight ? /*#__PURE__*/React.createElement(props.IconRight, { className: "right-icon", htmlColor: theme.palette.colors.basic[600] }) : null);
};
export var ExpandableListItem = function ExpandableListItem(props) {var _React$useState =
    React.useState(props.openByDefault),_React$useState2 = _slicedToArray(_React$useState, 2),expanded = _React$useState2[0],expandListItem = _React$useState2[1];
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/
  React.createElement(ListItem, { subItem: false, onClick: function onClick() {return expandListItem(!expanded);}, notifications: 1, text: props.text, IconRight: expanded ? ExpandMore : ChevronRight, Icon: props.Icon }), /*#__PURE__*/
  React.createElement(Collapse, { in: expanded, timeout: "auto", unmountOnExit: true }, /*#__PURE__*/
  React.createElement(List, { component: "div", disablePadding: true }, props.children)));
};
export default (function (_ref4) {var headerText = _ref4.headerText,HeaderIcon = _ref4.HeaderIcon,children = _ref4.children;
  return /*#__PURE__*/React.createElement(DrawerWrapper, null, /*#__PURE__*/
  React.createElement(Drawer, { variant: "persistent", anchor: "left", open: true }, /*#__PURE__*/
  React.createElement(Header, null,
  HeaderIcon ? /*#__PURE__*/React.createElement(HeaderIcon, null) : null, /*#__PURE__*/
  React.createElement("span", null, headerText)), /*#__PURE__*/
  React.createElement(List, null, children)));
});
//# sourceMappingURL=TransformDrawer.js.map