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

INX Platform elements

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import Palette from "../../constants/Palette";
import styled from "styled-components";
import { Column, Row } from "../Layout/Flex";
const Option = styled.div`
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px !important;
    margin: ${props => props.border ? 4 : 1}px;
    padding: 2px;
    border: ${props => props.border ? Palette.WHITE_SMOKE : Palette.WHITE} 1px solid ;
    border-radius: 3px;
    background-color: ${props => props.selected ? Palette.WHITE_SMOKE : Palette.WHITE} ;
    width: ${props => props.width}px;
    height: ${props => props.height || 90}px;
    &:hover{
        border: 1px solid ${Palette.VERY_LIGHT_GREY_NEW};
    }
`;
const IconBasedHorizontalSelector = ({
  options,
  width = 100,
  selected = [],
  label = null,
  onSelect = () => null,
  multiRow = false,
  multi = false,
  buttonWidth = 90,
  buttonHeight = 90,
  border = true
}) => {
  const handleClick = option => {
    if (multi) {
      const isSelected = selected === null || selected === void 0 ? void 0 : selected.some(o => o.name === option.name);
      if (isSelected) {
        onSelect(selected.filter(o => o.name !== option.name));
        return;
      }
      onSelect(selected.concat(option));
    } else {
      onSelect(option);
    }
  };
  const optionWidth = multiRow ? buttonWidth : width / options.length - 8 * options.length;
  return _jsxs(Column, {
    style: {
      fontSize: 11
    },
    children: [label && _jsx(Row, {
      children: label
    }), _jsx(Row, {
      children: _jsx("div", {
        style: {
          float: "left",
          maxWidth: width
        },
        children: options.map(option => {
          const {
            icon,
            label
          } = option;
          let isSelected;
          if (multi) {
            isSelected = selected === null || selected === void 0 ? void 0 : selected.some(o => o.name === option.name);
          } else {
            isSelected = (selected === null || selected === void 0 ? void 0 : selected.name) === option.name;
          }
          return _jsx(Option, {
            height: buttonHeight,
            width: optionWidth,
            selected: isSelected,
            border: border,
            onClick: () => handleClick(option),
            children: _jsxs(Column, {
              "data-testid": "selector-" + label.toLowerCase().replaceAll(" ", "-"),
              style: {
                width: "100%",
                height: "100%",
                justifyContent: "space-evenly"
              },
              children: [_jsx(Row, {
                style: {
                  justifyContent: "center",
                  alignItems: "center",
                  height: 32
                },
                children: icon
              }), _jsx(Row, {
                style: {
                  justifyContent: "center",
                  alignItems: "center",
                  textAlign: "center"
                },
                children: label
              })]
            })
          }, label);
        })
      })
    })]
  });
};
export default IconBasedHorizontalSelector;