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

INX Platform elements

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import styled from "@emotion/styled";
import { Column, Row } from "../Layout/Flex";
import React from "react";
import { Measures, OverflowingText } from "../../index";
import Palette from "../../constants/Palette";
import { FormLabel } from "../Input";
import CustomTooltip from "../Tooltip";
const Wrapper = styled.div(({
  width
}) => ({
  width: width || "auto",
  backgroundColor: "white",
  fontFamily: "Poppins",
  overflow: "hidden"
}));
function calculateColor(selected, disabled) {
  if (disabled) {
    return Palette.GREY_SMOKE;
  }
  if (selected) {
    return Palette.BLACK;
  }
  return Palette.DIM_GREY;
}
const Option = styled(Column)(({
  selected,
  width,
  backgroundColor,
  disabled,
  borderBottom = true,
  height
}) => ({
  paddingLeft: 8,
  paddingRight: 8,
  backgroundColor,
  maxWidth: width,
  borderBottom: borderBottom,
  height: height || `calc(${Measures.rowHeight} - 2px)`,
  userSelect: "none",
  color: calculateColor(selected, disabled),
  justifyContent: "center",
  transition: "all 0.2s",
  cursor: !disabled && "pointer"
}));
function renderOptionText(option) {
  if (typeof option === "string") {
    return option;
  }
  return option.label;
}
const HorizontalSelector = ({
  options,
  width = "auto",
  selected,
  rows = 1,
  label = null,
  onSelect = () => null,
  multi = false,
  className = null,
  tooltipContent = '',
  tooltipProps = {},
  withSeparator = true,
  fontSize = 11,
  height = null,
  uniqueField = 'value'
}) => {
  const bem = 'pa-horizontal-selector';
  const isEqual = (option1, option2) => {
    if (typeof option1 === "string") {
      return option1 === option2;
    } else {
      return (option1 === null || option1 === void 0 ? void 0 : option1[uniqueField]) === (option2 === null || option2 === void 0 ? void 0 : option2[uniqueField]);
    }
  };
  const isSelected = option => {
    if (!multi) {
      return isEqual(option, selected);
    }
    return (selected || []).some(o => isEqual(o, option));
  };
  const handleClick = option => {
    if (!multi) {
      onSelect(option);
    } else {
      if (isSelected(option)) {
        onSelect(selected.filter(o => !isEqual(o, option)));
      } else {
        onSelect((selected || []).concat(option));
      }
    }
  };
  const optionRenderer = length => (o, i) => _jsx(CustomTooltip, Object.assign({
    content: o.disabled && tooltipContent
  }, tooltipProps, {
    children: _jsx(Option, {
      "data-testid": "option-" + i,
      height: height,
      borderLeft: i !== length - 1,
      borderBottom: `4px solid ${isSelected(o) ? Palette.BLACK : 'transparent'}`,
      className: isSelected(o) ? `${bem}__option--selected` : null,
      onClick: () => !o.disabled && handleClick(o),
      disabled: o.disabled,
      maxWidth: width / options.length,
      selected: isSelected(o),
      withSeparator: withSeparator,
      children: !o.Label ? _jsx(OverflowingText, {
        text: renderOptionText(o),
        tooltipText: renderOptionText(o),
        textStyle: {
          fontSize: fontSize
        }
      }) : o.Label
    }, i)
  }));
  const evenOptions = optionsCount => {
    return optionsCount % 2 === 0;
  };
  const oneLine = options.map(optionRenderer(options.length));
  const firstLine = options.slice(0, Math.ceil(options.length / 2)).map(optionRenderer(evenOptions(options.length) ? options.length / 2 : (options.length + 1) / 2));
  const secondLine = options.slice(Math.ceil(options.length / 2), options.length).map(optionRenderer(evenOptions(options.length) ? options.length / 2 : (options.length + 1) / 2));
  const rowStyle = {
    borderBottom: withSeparator && `2px solid ${Palette.GREY_SMOKE}`,
    width: "100%",
    overflowX: "auto"
  };
  return _jsxs(Column, {
    className: `${bem} ${className}`,
    children: [label && _jsx(Row, {
      style: {
        marginTop: 5
      },
      className: `${bem}__label`,
      children: _jsx(FormLabel, {
        border: false,
        children: label
      })
    }), _jsx(Row, {
      children: _jsxs(Wrapper, {
        width: width,
        children: [rows === 1 && _jsx(Row, {
          style: rowStyle,
          children: oneLine
        }), rows === 2 && _jsxs(Column, {
          style: {
            width: "100%"
          },
          children: [_jsx(Row, {
            style: rowStyle,
            children: firstLine
          }), _jsx(Row, {
            style: rowStyle,
            children: secondLine
          })]
        })]
      })
    })]
  });
};
export default HorizontalSelector;