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

INX Platform elements

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useEffect, useRef, useState } from 'react';
import { ChipItem, FontStyles, Palette } from "../../index";
import * as Icons from "../Icons";
import { makeStyles } from "@mui/styles";
const useStyles = makeStyles(() => ({
  chipContainer: {
    padding: '2px'
  },
  action: {
    lineHeight: '100%',
    width: '35px',
    flexShrink: 0,
    color: Palette.LIGHT_BLACK
  },
  input: {
    width: props => props.width,
    cursor: props => props.folded && 'pointer',
    minHeight: props => props.height,
    padding: '0 12px',
    border: `1px solid`,
    borderColor: props => props.active ? Palette.DIM_GREY : Palette.VERY_LIGHT_GREY_NEW,
    display: 'flex',
    alignItems: 'center',
    position: 'relative',
    borderRadius: '4px',
    font: FontStyles.INPUT_FONT,
    color: Palette.DIM_GREY,
    '&:hover': {
      borderColor: Palette.DIM_GREY
    }
  },
  container: {
    lineHeight: 1,
    display: 'flex',
    flexWrap: 'wrap'
  }
}));
const FoldingInput = /*#__PURE__*/React.forwardRef(({
  active,
  height,
  width,
  folded,
  items,
  hidden,
  visibleItems,
  chipProps,
  onClick = () => {},
  onDelete = () => {},
  onFoldedChange = () => {},
  placeholder = ''
}, ref) => {
  const classes = useStyles({
    active,
    height,
    width,
    folded
  });
  const chipsList = hidden || !folded ? items : items.slice(0, visibleItems || -1);
  const hiddenChipsNumber = items.slice(visibleItems === 0 ? 0 : visibleItems - 1, -1).length;
  const handleInputClick = () => {
    folded && chipsList.length > 0 && visibleItems !== items.length && onFoldedChange(false);
    chipsList.length === 0 && onClick();
  };
  return _jsx("div", {
    style: {
      position: hidden && 'absolute',
      overflow: hidden && 'hidden'
    },
    children: _jsxs("div", {
      ref: ref,
      className: classes.input,
      onClick: handleInputClick,
      style: {
        visibility: hidden && 'hidden',
        height: hidden && 0
      },
      children: [_jsxs("div", {
        className: classes.container,
        children: [chipsList.map(item => _jsx("div", {
          className: classes.chipContainer,
          children: _jsx(ChipItem, Object.assign({
            label: item.label
          }, chipProps, {
            onDelete: () => onDelete(item)
          }))
        })), chipsList.length === 0 && placeholder]
      }), hiddenChipsNumber > 0 && (folded || hidden) && _jsxs("div", {
        className: classes.action,
        children: ["+", hiddenChipsNumber]
      }), chipsList.length > 0 && !hidden && !folded && _jsx("div", {
        className: classes.action,
        children: _jsx(Icons.CloseIcon, {
          onClick: () => {
            onFoldedChange(true);
          },
          style: {
            cursor: 'pointer'
          }
        })
      })]
    })
  });
});
function FoldableInputWithChips({
  active,
  height = 'auto',
  width = 'auto',
  items = [],
  chipProps = {},
  placeholder,
  onClick = () => {},
  onDelete = () => {}
}) {
  const [visibleItems, setVisibleItems] = useState(0);
  const [folded, setFolded] = useState(true);
  const ref = useRef(null);
  useEffect(() => {
    let sum = 0;
    let counter = 0;
    items.forEach((item, index) => {
      var _a, _b;
      sum += (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.children[0].children[index].clientWidth;
      if (sum < ((_b = ref === null || ref === void 0 ? void 0 : ref.current) === null || _b === void 0 ? void 0 : _b.clientWidth) - 35 - 24 - 2) {
        counter += 1;
      }
    });
    setVisibleItems(counter === 0 ? 1 : counter);
  }, [items]);
  return _jsxs("div", {
    style: {
      position: 'relative',
      width
    },
    children: [_jsx(FoldingInput, {
      ref: ref,
      chipProps: chipProps,
      folded: folded,
      hidden: true,
      items: items,
      visibleItems: visibleItems,
      width: '100%'
    }), _jsx(FoldingInput, {
      active: active,
      chipProps: chipProps,
      folded: folded,
      height: height,
      items: items,
      visibleItems: visibleItems,
      onClick: onClick,
      onFoldedChange: setFolded,
      onDelete: onDelete,
      placeholder: placeholder,
      width: '100%'
    })]
  });
}
export default FoldableInputWithChips;