@parkassist/pa-ui-library/dist/components/SelectableList/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 List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import { Row, Column } from '../Layout/Flex';
import { styled } from '@mui/material/styles';
import Button from '../Button';
import Measures from '../../constants/Measures';
import Palette from '../../constants/Palette';
import { Checkbox, CustomRadio } from '../../index';
import Helmet from 'react-helmet';
const ListRow = styled('div')(() => ({
  width: '100%',
  marginTop: 0
}));
const ListStyled = styled(List)(() => ({
  minWidth: 240,
  width: 'auto'
}));
const Wrapper = styled(Row)(() => ({
  width: '100%',
  paddingLeft: Measures.unit
}));
export const ListHeader = ({
  onSelectAll,
  onClear,
  itemHeight = 45,
  width,
  selectedCount,
  totalCount,
  hideSelectedCount = false,
  selectAllText = "Select all",
  clearAllText = "Clear all",
  selectedText = "selected"
}) => {
  const everythingChecked = selectedCount > 0 && selectedCount === totalCount;
  const nothingChecked = selectedCount === 0;
  const somethingChecked = selectedCount > 0 && selectedCount < totalCount;
  return _jsx(ListItem, {
    variant: 'plain',
    sx: {
      boxShadow: 'none',
      height: itemHeight,
      width,
      backgroundColor: `${Palette.WHITE}`,
      borderBottom: `1px solid ${Palette.WHITE_SMOKE}`
    },
    children: _jsxs(Row, {
      style: {
        height: itemHeight,
        width: '100%',
        alignItems: 'center',
        justifyContent: 'space-between'
      },
      children: [_jsx(Column, {
        children: _jsxs(Row, {
          children: [_jsx(Column, {
            style: {
              marginLeft: 1
            },
            children: _jsx(Checkbox, {
              size: 20,
              onChange: () => {
                if (everythingChecked || somethingChecked) {
                  onClear();
                }
                if (nothingChecked) {
                  onSelectAll();
                }
              },
              checked: everythingChecked,
              indeterminate: somethingChecked,
              checkboxStyles: {
                padding: '8px 8px 8px 0'
              }
            })
          }), _jsx(Column, {
            style: {
              marginRight: 10,
              marginLeft: 10,
              justifyContent: 'center'
            },
            children: _jsx(Button, {
              small: true,
              outline: true,
              onClick: onSelectAll,
              "data-testid": 'select-all',
              children: selectAllText
            })
          }), !hideSelectedCount && _jsxs(Column, {
            small: true,
            style: {
              color: Palette.DIM_GREY,
              justifyContent: "center"
            },
            children: ["(", selectedCount, " ", selectedText, ")"]
          })]
        })
      }), _jsx(Column, {
        children: _jsx(Button, {
          disabled: selectedCount === 0,
          onClick: onClear,
          small: true,
          outline: true,
          "data-testid": 'clear-all',
          children: clearAllText
        })
      })]
    })
  }, 'header');
};
const RadioList = _a => {
  var {
      onChange = () => null,
      value,
      itemHeight = 45,
      width,
      values = [],
      multi = false
    } = _a,
    props = __rest(_a, ["onChange", "value", "itemHeight", "width", "values", "multi"]);
  return _jsxs(ListRow, {
    children: [_jsx(ListStyled, {
      className: 'custom-radio-list',
      sx: {
        '--List-gap': '0',
        '--ListItem-paddingY': '1rem',
        '--ListItem-radius': '0'
      },
      children: props.items.map(({
        name,
        component,
        id
      }, index) => _jsxs(ListItem, {
        datatestid: 'list-element',
        variant: 'plain',
        sx: {
          boxShadow: 'none',
          height: itemHeight,
          width,
          backgroundColor: `${Palette.WHITE}`,
          borderBottom: `1px solid ${Palette.WHITE_SMOKE}`,
          '&:hover': {
            backgroundColor: Palette.WHITE_SMOKE
          }
        },
        children: [!multi && _jsx(CustomRadio, {
          onChange: onChange,
          value: id,
          checked: value === String(id),
          styles: {
            padding: '8px 8px 8px 0'
          }
        }), multi && _jsx(Checkbox, {
          size: 20,
          value: id,
          onChange: () => {
            if (values.map(String).includes(String(id))) {
              onChange(values.filter(v => String(v) !== String(id)));
            } else {
              onChange(values.concat(id));
            }
          },
          checked: values.includes(id),
          checkboxStyles: {
            padding: '8px 8px 8px 0'
          }
        }), _jsx(Wrapper, {
          children: component
        })]
      }, index))
    }), _jsx(Helmet, {
      children: _jsx("style", {
        children: `
                    .custom-radio-list .MuiRadio-radio {
                        color: ${Palette.BLACK};
                        border-color: ${Palette.BLACK};
                    }
                `
      })
    })]
  });
};
export default RadioList;