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

INX Platform elements

import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import React, { useState } from "react";
import styled from "styled-components";
import { LongSearchableSelector, Palette, SidePanel, Column, Row } from "../../index";
import * as Icons from "../Icons";
const FakeSelector = styled.div(({
  widthToUse = 80,
  backgroundColor = Palette.WHITE
}) => ({
  width: widthToUse,
  maxWidth: widthToUse,
  minWidth: widthToUse,
  display: "flex",
  paddingLeft: 12,
  paddingRight: 12,
  alignItems: "center",
  backgroundColor,
  borderRadius: 3,
  color: Palette.BLACK,
  height: 32,
  "&:hover": {
    backgroundColor: '#fcfcfc'
  }
}));
const MultiSelector = props => {
  const {
    noun = "Item",
    width = 100,
    selection = []
  } = props;
  const [showSidePanel, setShowSidePanel] = useState(false);
  return _jsxs(_Fragment, {
    children: [_jsx(SidePanel, {
      title: "Select " + noun + "s",
      visible: showSidePanel,
      onClose: () => setShowSidePanel(false),
      children: _jsx(LongSearchableSelector, Object.assign({}, props, {
        width: 270
      }))
    }), _jsx(FakeSelector, {
      widthToUse: width,
      onClick: () => setShowSidePanel(!showSidePanel),
      children: _jsxs(Row, {
        style: {
          width: "100%",
          justifyContent: "space-between"
        },
        children: [_jsxs(Column, {
          children: [selection.length, " ", noun, "s"]
        }), _jsx(Column, {
          style: {
            justifyContent: "center"
          },
          children: _jsx(Icons.OpenArrowIcon, {})
        })]
      })
    })]
  });
};
export default MultiSelector;