@veecode-platform/plugin-kong-service-manager/dist/components/shared/SelectComponent/Select.esm.js

import Box from '@material-ui/core/Box';
import Checkbox from '@material-ui/core/Checkbox';
import Chip from '@material-ui/core/Chip';
import FormControl from '@material-ui/core/FormControl';
import InputBase from '@material-ui/core/InputBase';
import InputLabel from '@material-ui/core/InputLabel';
import MenuItem from '@material-ui/core/MenuItem';
import Select from '@material-ui/core/Select';
import { makeStyles, withStyles, createStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
import React, { useState, useEffect } from 'react';
import ClosedDropdown from './static/ClosedDropdown.esm.js';
import OpenedDropdown from './static/OpenedDropdown.esm.js';

const BootstrapInput = withStyles(
  (theme) => createStyles({
    root: {
      "label + &": {
        marginTop: theme.spacing(3)
      },
      width: "100%",
      "&.Mui-focused > div[role=button]": {
        borderColor: theme.palette.primary.main
      }
    },
    input: {
      borderRadius: theme.shape.borderRadius,
      position: "relative",
      backgroundColor: theme.palette.background.paper,
      border: "1px solid #ced4da",
      fontSize: theme.typography.body1.fontSize,
      padding: theme.spacing(1.25, 3.25, 1.25, 1.5),
      transition: theme.transitions.create(["border-color", "box-shadow"]),
      "&:focus": {
        background: theme.palette.background.paper,
        borderRadius: theme.shape.borderRadius
      }
    }
  }),
  { name: "BackstageSelectInputBase" }
)(InputBase);
const useStyles = makeStyles(
  (theme) => createStyles({
    formControl: {
      margin: theme.spacing(1, 0),
      width: "100%"
    },
    select: {
      width: "100%"
    },
    label: {
      transform: "initial",
      fontWeight: "bold",
      fontSize: theme.typography.body2.fontSize,
      fontFamily: theme.typography.fontFamily,
      color: theme.palette.text.primary,
      "&.Mui-focused": {
        color: theme.palette.text.primary
      }
    },
    formLabel: {
      transform: "initial",
      fontWeight: "bold",
      fontSize: theme.typography.body2.fontSize,
      fontFamily: theme.typography.fontFamily,
      color: theme.palette.text.primary,
      "&.Mui-focused": {
        color: theme.palette.text.primary
      }
    },
    chips: {
      display: "flex",
      flexWrap: "wrap"
    },
    chip: {
      margin: 2
    },
    checkbox: {},
    root: {
      display: "flex",
      flexDirection: "column"
    }
  }),
  { name: "BackstageSelect" }
);
const SelectComponent = (props) => {
  const {
    multiple,
    items,
    label,
    placeholder,
    selected,
    onChange,
    triggerReset,
    native = false,
    disabled = false,
    margin
  } = props;
  const classes = useStyles();
  const [value, setValue] = useState(
    selected || (multiple ? [] : "")
  );
  const [isOpen, setOpen] = useState(false);
  useEffect(() => {
    setValue(multiple ? [] : "");
  }, [triggerReset, multiple]);
  useEffect(() => {
    setValue(selected || (multiple ? [] : ""));
  }, [selected, multiple]);
  const handleChange = (event) => {
    setValue(event.target.value);
    onChange(event.target.value);
  };
  const handleOpen = (event) => {
    if (disabled) {
      event.preventDefault();
      return;
    }
    setOpen((previous) => {
      if (multiple && !(event.target instanceof HTMLElement)) {
        return true;
      }
      return !previous;
    });
  };
  const handleClose = () => {
    setOpen(false);
  };
  const handleDelete = (selectedValue) => () => {
    const newValue = value.filter((chip) => chip !== selectedValue);
    setValue(newValue);
    onChange(newValue);
  };
  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(FormControl, { className: classes.formControl }, /* @__PURE__ */ React.createElement(InputLabel, { className: classes.formLabel }, label), /* @__PURE__ */ React.createElement(
    Select,
    {
      "aria-label": label,
      value,
      native,
      disabled,
      "data-testid": "select",
      displayEmpty: true,
      multiple,
      margin,
      onChange: handleChange,
      open: isOpen,
      onOpen: handleOpen,
      onClose: handleClose,
      input: /* @__PURE__ */ React.createElement(BootstrapInput, null),
      label,
      className: classes.select,
      renderValue: (s) => multiple && value.length !== 0 ? /* @__PURE__ */ React.createElement(Box, { className: classes.chips }, s.map((selectedValue) => {
        const item = items.find((el) => el.value === selectedValue);
        return item ? /* @__PURE__ */ React.createElement(
          Chip,
          {
            key: item?.value,
            label: item?.label,
            clickable: true,
            onDelete: handleDelete(selectedValue),
            className: classes.chip
          }
        ) : false;
      })) : /* @__PURE__ */ React.createElement(Typography, null, value.length === 0 ? placeholder || "" : items.find((el) => el.value === s)?.label),
      IconComponent: () => !isOpen ? /* @__PURE__ */ React.createElement(ClosedDropdown, null) : /* @__PURE__ */ React.createElement(OpenedDropdown, null),
      MenuProps: {
        anchorOrigin: {
          vertical: "bottom",
          horizontal: "left"
        },
        transformOrigin: {
          vertical: "top",
          horizontal: "left"
        },
        getContentAnchorEl: null
      }
    },
    placeholder && !multiple && /* @__PURE__ */ React.createElement(MenuItem, { value: [] }, placeholder),
    native ? items && items.map((item) => /* @__PURE__ */ React.createElement("option", { value: item.value, key: item.value }, item.label)) : items && items.map((item) => /* @__PURE__ */ React.createElement(MenuItem, { key: item.value, value: item.value }, multiple && /* @__PURE__ */ React.createElement(
      Checkbox,
      {
        color: "primary",
        checked: value.includes(item.value) || false,
        className: classes.checkbox
      }
    ), item.label))
  )));
};

export { SelectComponent };
//# sourceMappingURL=Select.esm.js.map