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

INX Platform elements

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import MaterialInput from "../MaterialInput";
import ChipItem from "../Chip";
export function ChipInput(props) {
  const {
    elements = [],
    onChangeElements = () => null
  } = props;
  const [text, setText] = React.useState("");
  const handleEnterNewElement = key => {
    if (key.code === "Enter" && text.length > 0) {
      onChangeElements(elements.concat(text));
      setText("");
    }
  };
  const handleDeleteElementById = index => {
    onChangeElements(elements.filter((e, i) => i !== index));
  };
  const chips = elements && _jsxs("div", {
    style: {
      width: "100%"
    },
    children: [elements.map((e, index) => _jsx("span", {
      style: {
        marginRight: 8,
        marginBottom: 8
      },
      children: _jsx(ChipItem, {
        size: "small",
        label: e,
        style: {
          marginBottom: 1,
          marginTop: 1,
          fontSize: 14
        },
        onDelete: () => handleDeleteElementById(index)
      }, index)
    })), _jsx("span", {
      style: {
        marginBottom: 0
      },
      children: _jsx("input", {
        style: {
          border: "none",
          height: 20,
          width: elements.length > 0 ? "50%" : "100%",
          fontSize: 14,
          paddingLeft: 5,
          outline: "none",
          fontFamily: "Poppins"
        },
        placeholder: props.placeholder,
        value: text,
        onChange: e => setText(e.target.value),
        onKeyDown: key => handleEnterNewElement(key)
      })
    })]
  });
  return _jsx(MaterialInput, Object.assign({}, props, {
    style: Object.assign(Object.assign({}, props.style), {
      '.MuiInputBase-input': {
        display: 'none'
      }
    }),
    multiline: true,
    value: text,
    InputProps: {
      startAdornment: chips
    }
  }));
}