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

INX Platform elements

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import * as Icons from "../Icons";
import AccordionSummary from "@mui/material/AccordionSummary";
import Accordion from "@mui/material/Accordion";
import AccordionDetails from "@mui/material/AccordionDetails";
import styled from 'styled-components';
import { Palette } from "../../index";
const StyledContainer = styled.div`
  display: flex;
  align-items: center;
  height: 100%;
  width: 100%;
  padding: 12px 0;
`;
const FlexSpan = styled.span`
  display: flex
`;
function FoldingList({
  items,
  expanded,
  handleChange,
  marginBottom = 0,
  disableGutters = true,
  onTabClick,
  contentPadding,
  headerBackgroundColor = 'transparent',
  arrowOnRight = false,
  width = '100%',
  hideSeparator = false,
  expandedHeaderColor
}) {
  return _jsx("div", {
    style: {
      width
    },
    children: items.map(item => _jsxs(Accordion, {
      onChange: () => !onTabClick && handleChange(item.id),
      expanded: expanded.includes(item.id),
      disableGutters: disableGutters,
      sx: Object.assign({
        '&.MuiAccordion-root.MuiPaper-root': {
          marginBottom: marginBottom,
          boxShadow: 'none'
        },
        background: 'transparent'
      }, hideSeparator && {
        '&:before': {
          display: 'none'
        }
      }),
      children: [_jsx(AccordionSummary, {
        expandIcon: _jsx(Icons.OpenArrowIcon, {
          onClick: () => onTabClick && handleChange(item.id)
        }),
        sx: {
          '&.MuiButtonBase-root.MuiAccordionSummary-root': {
            padding: '0 12px'
          },
          '& .MuiAccordionSummary-content': {
            margin: 0
          },
          '&:hover': {
            backgroundColor: expandedHeaderColor
          },
          flexDirection: arrowOnRight ? '' : "row-reverse",
          borderBottom: hideSeparator ? 'none' : `1px solid ${Palette.VERY_LIGHT_GREY_NEW}`,
          backgroundColor: expandedHeaderColor && expanded.includes(item.id) ? expandedHeaderColor : headerBackgroundColor
        },
        children: _jsxs(StyledContainer, {
          onClick: () => onTabClick && onTabClick(item.id),
          children: [item.icon && _jsx(FlexSpan, {
            style: {
              marginRight: '6px'
            },
            children: item.icon
          }), _jsx(FlexSpan, {
            style: {
              wordBreak: 'break-word',
              marginLeft: !item.icon ? 10 : 0
            },
            children: item.heading
          })]
        })
      }), _jsx(AccordionDetails, {
        sx: {
          '&.MuiAccordionDetails-root': {
            padding: contentPadding || '8px 16px 16px'
          }
        },
        children: item.content
      })]
    }, item.id))
  });
}
export default FoldingList;