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

INX Platform elements

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import styled from "styled-components";
import { Row, Column } from "../Layout/Flex";
import Palette from "../../constants/Palette";
import Theme from "../../constants/Theme";
import Measures from "../../constants/Measures";
import Font from "../../constants/Font";
import FontStyles from "../../constants/FontStyles";
export const Options = styled(Column)(({
  overflowY = "auto"
}) => ({
  width: "100%",
  height: "100%",
  maxHeight: 415,
  overflowY,
  alignItems: "center"
}));
const getOptionBackground = (marked, highlighted) => {
  if (highlighted) {
    return Palette.WARNING_YELLOW;
  } else {
    return marked ? Palette.WARNING_YELLOW : "transparent";
  }
};
export const InternalContainer = styled.div(() => ({
  paddingLeft: 10
}));
export const Option = styled(Row)(({
  selected,
  marked,
  opacity = 1,
  disabled = false,
  highlighted = false
}) => ({
  width: "100%",
  height: Measures.rowHeight,
  opacity: opacity,
  backgroundColor: getOptionBackground(marked, highlighted),
  color: selected ? Theme.FORECOLOR : Palette.DARK_GREY,
  borderBottom: `1px solid ${Palette.WHITE_SMOKE}`,
  cursor: disabled ? "unset" : "pointer",
  alignItems: "center",
  paddingLeft: 15,
  "&:hover": {
    color: disabled ? Palette.DARK_GREY : Theme.FORECOLOR
  }
}));
const Area = styled.div(({
  size,
  extraMargin,
  mainArea
}) => ({
  width: size.width,
  height: size.height,
  backgroundColor: Theme.BACKGROUND_COLOR,
  marginTop: extraMargin ? 15 : 0,
  marginBottom: Measures.minMargin,
  borderRadius: 10,
  borderTopLeftRadius: extraMargin ? 6 : 0
}));
export const Title = styled.div(() => Object.assign({
  borderBottom: `1px solid ${Theme.FORECOLOR}`,
  marginLeft: 3,
  paddingBottom: 2,
  font: FontStyles.BODY1_FONT,
  width: "fit-content"
}, Font));
const defaultSize = {
  width: "100%",
  height: "fit-content"
};
const Menu = ({
  title,
  options,
  selected,
  style = {},
  size = defaultSize,
  onChange = () => null
}) => _jsxs(Column, {
  style: Object.assign(Object.assign({}, style), Font),
  children: [_jsx(Row, {
    children: _jsx(Title, {
      children: title
    })
  }), _jsx(Row, {
    style: {
      width: "100%"
    },
    children: _jsx(Area, {
      size: size,
      extraMargin: !title,
      children: _jsx(Options, {
        children: options.map(option => _jsx(Option, {
          onClick: () => onChange(option),
          marked: option === selected,
          selected: option === selected,
          children: option
        }))
      })
    })
  })]
});
export default Menu;