@parkassist/pa-ui-library/dist/components/HorizontalSteps/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 Palette from "../../constants/Palette";
import { FormLabel } from "../Input";
import ArrowRightIcon from '@mui/icons-material/ArrowRight';
const Wrapper = styled.div(({
  width
}) => ({
  width,
  backgroundColor: "white",
  border: `1px solid ${Palette.DIM_GREY}`,
  borderRadius: 3,
  fontFamily: "Poppins",
  fontSize: 11,
  overflow: "hidden"
}));
const ArrowRight = styled(ArrowRightIcon)(() => ({
  position: "absolute",
  right: "-1.05rem",
  zIndex: 10,
  fontSize: "2rem !important"
}));
const Option = styled(Column)(({
  width,
  backgroundColor,
  borderBottom = true,
  borderLeft = true
}) => ({
  width,
  height: 28,
  backgroundColor,
  borderBottom: borderBottom && `1px solid ${Palette.VERY_LIGHT_GREY_NEW}`,
  userSelect: "none",
  justifyContent: "center",
  textTransform: "capitalize",
  alignItems: "center",
  transition: "all 0.2s",
  textAlign: "center",
  position: "relative"
}));
function renderOptionText(option) {
  if (typeof option === "string") {
    return option;
  }
  return option.label;
}
const HorizontalSteps = ({
  options,
  width = 100,
  selected,
  rows = 1,
  label = null,
  onSelect = () => null,
  multi = false,
  accentColor = Palette.WARNING_YELLOW,
  className = null
}) => {
  const bem = 'pa-horizontal-selector';
  const isSelected = option => {
    if (!multi) {
      return JSON.stringify(selected) === JSON.stringify(option);
    }
    return (selected || []).some(o => JSON.stringify(o) === JSON.stringify(option));
  };
  const innerSelection = options.find(o => isSelected(o));
  const currentIndex = options.indexOf(innerSelection);
  const optionRenderer = (length, secondLine) => (o, i) => _jsxs(Option, {
    borderBottom: rows > 1 && !secondLine,
    borderLeft: i !== length - 1,
    backgroundColor: isSelected(o) || i <= currentIndex ? accentColor : "transparent",
    className: isSelected(o) ? `${bem}__option--selected` : null,
    width: width / length * rows,
    children: [renderOptionText(o), i < options.length - 1 && _jsx(ArrowRight, {})]
  }, i);
  const oneLine = options.map(optionRenderer(options.length));
  const firstLine = options.slice(0, Math.ceil(options.length / 2)).map(optionRenderer(options.length / 2));
  const secondLine = options.slice(Math.ceil(options.length / 2), options.length).map(optionRenderer(options.length - options.length / 2, true));
  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, {
          width: width,
          children: oneLine
        }), rows === 2 && _jsxs(Column, {
          children: [_jsx(Row, {
            width: width,
            children: firstLine
          }), _jsx(Row, {
            width: width,
            children: secondLine
          })]
        })]
      })
    })]
  });
};
export default HorizontalSteps;