@parkassist/pa-ui-library/dist/components/SidePanel/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, Fragment as _Fragment } from "react/jsx-runtime";
import React from "react";
import IconButton from "../IconButton";
import { Column, Row } from "../Layout/Flex";
import styled from "styled-components";
import { Palette } from "../../index";
import EditLayer from "../Layout/EditLayer";
import "./animation.css";
import Measures from "../../constants/Measures";
import * as Icons from "../Icons";
import FontStyles from "../../constants/FontStyles";
const SidePanelWrapper = styled.div(({
  subPanel
}) => ({
  animation: "slide 0.5s",
  height: `calc(100%${subPanel ? ` - ${Measures.topBarHeight}` : ""})`,
  zIndex: 1290,
  backgroundColor: Palette.WHITE,
  position: "fixed",
  top: subPanel ? Measures.topBarHeight : 0,
  right: 0,
  width: 300
}));
const ButtonBorderless = styled(IconButton)(() => ({
  borderColor: "transparent"
}));
function SidePanel(_a) {
  var {
      visible,
      onClose = () => null,
      children,
      title = "",
      padding = 16,
      subPanel,
      bottomContent,
      bottomContentHeight = 44
    } = _a,
    props = __rest(_a, ["visible", "onClose", "children", "title", "padding", "subPanel", "bottomContent", "bottomContentHeight"]);
  if (!visible) {
    return null;
  }
  return _jsxs(_Fragment, {
    children: [_jsx(EditLayer, {
      onClick: onClose
    }), _jsx(SidePanelWrapper, Object.assign({}, props, {
      subPanel: subPanel,
      children: _jsxs(Column, {
        children: [_jsxs(Row, {
          style: {
            justifyContent: "space-between",
            height: 50,
            alignItems: "center",
            padding: 10,
            borderBottom: "1px solid lightgrey"
          },
          children: [_jsx(Column, {
            style: {
              justifyContent: "center",
              font: FontStyles.SUBHEADER,
              marginLeft: 5
            },
            children: title
          }), _jsx(Column, {
            children: _jsx(ButtonBorderless, {
              "data-testid": "close-side-panel",
              marginLeft: 0,
              icon: _jsx(Icons.Close2Icon, {}),
              onClick: onClose
            })
          })]
        }), _jsx(Row, {
          style: {
            padding,
            overflowY: "auto",
            overflowX: "hidden",
            height: "calc(100vh - 50px)"
          },
          children: _jsxs(Column, {
            style: {
              height: bottomContent ? `calc(100% - ${bottomContentHeight}px)` : "100%",
              width: '100%',
              justifyContent: "space-between"
            },
            children: [_jsx(Row, {
              children: children
            }), bottomContent && _jsx(Row, {
              children: bottomContent
            })]
          })
        })]
      })
    }))]
  });
}
;
export default SidePanel;