@parkassist/pa-ui-library/dist/components/MaterialSidePanel/index.js

INX Platform elements

var __rest = this && this.__rest || function (s, e) {
  var t = {};
  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  }
  return t;
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from "react";
import IconButton from "../IconButton";
import { Column, Row } from "../Layout/Flex";
import Measures from "../../constants/Measures";
import * as Icons from "../Icons";
import FontStyles from "../../constants/FontStyles";
import { styled } from "@mui/material/styles";
import Box from "@mui/material/Box";
import Drawer from "@mui/material/Drawer";
import CssBaseline from "@mui/material/CssBaseline";
import Divider from "@mui/material/Divider";
const DrawerHeader = styled("div")(({
  theme
}) => Object.assign(Object.assign({
  display: "flex",
  alignItems: "center",
  padding: theme.spacing(0, 1)
}, theme.mixins.toolbar), {
  justifyContent: "space-between"
}));
const MaterialSidePanel = _a => {
  var {
      visible,
      onClose = () => null,
      children,
      title = "",
      padding = 16,
      bottomContent,
      bottomContentHeight = 44,
      wider = false,
      showBackArrow = false,
      onBackArrowClick = () => null,
      hideDivider = false,
      width = null,
      headerHeight = null,
      extraMarginTop = 0,
      subtitle = null,
      headerMargin = 0,
      zIndex = 1
    } = _a,
    props = __rest(_a, ["visible", "onClose", "children", "title", "padding", "bottomContent", "bottomContentHeight", "wider", "showBackArrow", "onBackArrowClick", "hideDivider", "width", "headerHeight", "extraMarginTop", "subtitle", "headerMargin", "zIndex"]);
  const widthToUse = width || (wider ? Measures.sidePanelWiderWidth : Measures.sidePanelWidth);
  return _jsxs(Box, {
    sx: {
      display: "flex"
    },
    children: [_jsx(CssBaseline, {}), _jsxs(Drawer, Object.assign({}, props, {
      sx: {
        width: widthToUse,
        flexShrink: 0,
        "& .MuiDrawer-paper": {
          width: widthToUse,
          animation: "slide 0.5s",
          height: `calc(100% - ${headerHeight || extraMarginTop || Measures.topBarHeight})`,
          marginTop: `${extraMarginTop ? extraMarginTop + 'px' : Measures.topBarHeight}`,
          zIndex
        }
      },
      variant: "persistent",
      anchor: "right",
      open: visible,
      children: [_jsxs(DrawerHeader, {
        style: {
          height: headerHeight,
          margin: headerMargin
        },
        children: [_jsx(Column, {
          children: _jsxs(Row, {
            children: [showBackArrow && _jsx(IconButton, {
              marginLeft: 0,
              icon: _jsx(Icons.ArrowBackIcon, {}),
              onClick: onBackArrowClick
            }), _jsx(Column, {
              style: {
                justifyContent: "center",
                font: FontStyles.SUBHEADER,
                marginLeft: 5
              },
              children: title
            })]
          })
        }), _jsx(IconButton, {
          "data-testid": "close-side-panel",
          marginLeft: 0,
          icon: _jsx(Icons.Close2Icon, {}),
          onClick: onClose
        })]
      }), subtitle && _jsx(Row, {
        style: {
          font: FontStyles.SUBHEADER,
          marginLeft: 12
        },
        children: subtitle
      }), !hideDivider && _jsx(Divider, {}), _jsxs(Column, {
        style: {
          padding,
          height: '100%',
          justifyContent: 'space-between'
        },
        children: [_jsx(Row, {
          children: children
        }), bottomContent && _jsx(Row, {
          children: bottomContent
        })]
      })]
    }))]
  });
};
export default MaterialSidePanel;