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

INX Platform elements

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import Select, { components } from "react-select";
import { Column, Row } from "../Layout/Flex";
import Palette from "../../constants/Palette";
import styled from "styled-components";
import * as Icons from "../Icons";
import FontStyles from "../../constants/FontStyles";
const Title = styled.div(() => ({
  display: "flex",
  flexDirection: "column",
  font: FontStyles.LABEL_FONT,
  marginBottom: 2
}));
const DropdownIndicator = props => {
  return components.DropdownIndicator && _jsx(components.DropdownIndicator, Object.assign({}, props, {
    children: _jsx(Icons.OpenArrowIcon, {})
  }));
};
const getIcon = name => {
  return null;
};
const RichLabel = props => _jsxs(Row, {
  children: [props.data.name && _jsx(Column, {
    children: getIcon(props.data.name)
  }), _jsx(Column, {
    children: props.data.label
  })]
});
const SingleValue = props => {
  return components.SingleValue && _jsx(components.SingleValue, Object.assign({}, props, {
    children: _jsx(RichLabel, Object.assign({}, props))
  }));
};
const Option = props => {
  return components.Option && _jsx(components.Option, Object.assign({}, props, {
    children: _jsx(RichLabel, Object.assign({}, props))
  }));
};
const styles = (width, color, menuHeight = 165, showBorder = true, big = false) => ({
  control: (base, state) => Object.assign(Object.assign({}, base), {
    border: showBorder ? `1px solid ${Palette.DARK_GREY}` : `1px solid transparent`,
    textAlign: "left",
    backgroundColor: Palette.WHITE,
    color: Palette.BLACK,
    borderRadius: 3,
    zIndex: 0,
    width: width + 10,
    height: "32px",
    minHeight: "32px",
    font: big ? FontStyles.BODY1_FONT : FontStyles.BODY2_FONT,
    boxShadow: state.isFocused ? 0 : 0,
    borderColor: state.isFocused && showBorder ? Palette.BLACK : `transparent`,
    "&:hover": {
      backgroundColor: showBorder ? Palette.WHITE : '#fcfcfc',
      borderColor: showBorder ? Palette.BLACK : `transparent`
    }
  }),
  indicatorSeparator: base => Object.assign(Object.assign({}, base), {
    display: "none"
  }),
  singleValue: base => Object.assign(Object.assign({}, base), {
    marginLeft: 6,
    color: Palette.BLACK
  }),
  valueContainer: base => Object.assign(Object.assign({}, base), {
    color: Palette.BLACK,
    paddingLeft: 10,
    paddingTop: 0,
    paddingRight: 10,
    paddingBottom: 0,
    overflow: "hidden",
    zIndex: 2
  }),
  dropdownIndicator: base => Object.assign(Object.assign({}, base), {
    padding: 0,
    paddingRight: 8
  }),
  option: base => Object.assign(Object.assign({}, base), {
    textAlign: "left",
    height: "100%",
    backgroundColor: Palette.WHITE,
    whiteSpace: "nowrap",
    overflow: "hidden",
    textOverflow: "ellipsis",
    color: Palette.DARK_GREY,
    "&:hover": {
      backgroundColor: Palette.WHITE_SMOKE,
      color: Palette.BLACK
    }
  }),
  menuList: base => Object.assign(Object.assign({}, base), {
    marginTop: -10,
    border: "none",
    padding: 0,
    borderRadius: 1,
    maxHeight: menuHeight,
    zIndex: 100,
    backgroundColor: color
  }),
  menu: base => Object.assign(Object.assign({}, base), {
    backgroundColor: color,
    paddingTop: 10,
    border: "none",
    overflow: "hidden",
    maxHeight: menuHeight,
    zIndex: 100
  })
});
const Selector = ({
  options,
  value,
  onChange,
  width = 100,
  color = Palette.WHITE,
  showBorder = false,
  big,
  defaultValue,
  menuHeight,
  label,
  sort = false,
  isSearchable = false,
  disable = false,
  placeholder
}) => _jsxs(Column, {
  children: [label && _jsx(Title, {
    children: label
  }), _jsx(Row, {
    style: {
      font: FontStyles.BODY2_FONT
    },
    children: _jsx(Select, {
      components: {
        DropdownIndicator,
        SingleValue,
        Option
      },
      isSearchable: isSearchable,
      styles: styles(width, color, menuHeight, showBorder, big),
      onChange: onChange,
      options: sort ? options.sort((a, b) => a.label.localeCompare(b.label)) : options,
      defaultValue: defaultValue,
      value: value,
      isMulti: false,
      isDisabled: disable,
      isClearable: false,
      placeholder: placeholder
    })
  })]
});
export default Selector;