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

INX Platform elements

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import OutlinedInput from '@mui/material/OutlinedInput';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import ListItemText from '@mui/material/ListItemText';
import Select from '@mui/material/Select';
import Palette from '../../constants/Palette';
import Checkbox from '../Checkbox';
import { Icons } from '../..';
const ITEM_HEIGHT = 32;
const ITEM_PADDING_TOP = 8;
const MenuProps = width => ({
  PaperProps: {
    style: {
      backgroundColor: "white",
      margin: 0,
      maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
      width
    }
  }
});
export default function CheckBoxSelector({
  label,
  values = [],
  onChange = () => null,
  options = [],
  disabled = false,
  width = 300
}) {
  const names = options.map(o => o.label);
  const handleChange = event => {
    const {
      target: {
        value
      }
    } = event;
    onChange(options.filter(option => {
      return value.includes(option.label.toString());
    }));
  };
  return _jsx("div", {
    children: _jsxs(FormControl, {
      sx: {
        width
      },
      children: [_jsx(InputLabel, {
        style: {
          fontSize: 13
        },
        size: 'small',
        children: label
      }), _jsx(Select, {
        disabled: disabled,
        IconComponent: () => _jsx(Icons.OpenArrowIcon, {
          style: {
            marginTop: 0,
            marginRight: 5
          }
        }),
        size: 'small',
        multiple: true,
        value: values.map(v => v.label.toString()),
        onChange: handleChange,
        input: _jsx(OutlinedInput, {
          style: {
            backgroundColor: Palette.WHITE,
            fontSize: 12
          },
          margin: 0,
          size: 'small',
          label: label
        }),
        renderValue: selected => {
          if (selected.length === 0) {
            return label;
          }
          if (selected.length === 1) {
            return selected;
          }
          if (selected.length > 1) {
            return selected.join(", ");
          }
        },
        MenuProps: MenuProps(width),
        children: names.map(name => _jsxs(MenuItem, {
          sx: {
            padding: 0,
            backgroundColor: `${Palette.WHITE} !important`
          },
          disableRipple: true,
          value: name,
          children: [_jsx(Checkbox, {
            size: 24,
            checked: values.some(value => value.label === name)
          }), _jsx(ListItemText, {
            primary: name
          })]
        }, name))
      })]
    })
  });
}