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

INX Platform elements

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useRef, useState } from "react";
import Popover from "react-awesome-popover";
import { Column, Row } from "../Layout/Flex";
import styled from "styled-components";
import Palette from "../../constants/Palette";
import { SiteTitle } from "./SiteTitle";
import FontStyles from "../../constants/FontStyles";
const ListWrapper = styled(Column)(({
  backgroundColor,
  width
}) => ({
  position: "absolute",
  maxHeight: 300,
  width,
  zIndex: 1002,
  marginTop: -3,
  backgroundColor,
  transition: "all 0.1s",
  padding: 0,
  paddingBottom: 5,
  borderRadius: 5,
  borderTopLeftRadius: 0,
  borderTopRightRadius: 0,
  minHeight: 80,
  border: `2px solid ${Palette.NIGHT_RIDER}`,
  boxShadow: `15px 0px 10px -15px ${Palette.DIM_GREY}`
}));
const formatSite = site => Object.assign(Object.assign({}, site), {
  label: site.name,
  name: site.id
});
const SiteOption = styled(Row)(() => ({
  marginTop: 4,
  minHeight: 16,
  font: FontStyles.BODY1_FONT,
  padding: 4,
  paddingLeft: 8,
  whiteSpace: "nowrap",
  cursor: "pointer",
  color: Palette.DARK_GREY,
  transition: "all 0.1s",
  "&:hover": {
    backgroundColor: Palette.LIGHT_BLACK,
    color: Palette.WHITE
  }
}));
const Scrollable = styled(Column)(() => ({
  overflowY: "auto",
  overflowX: "hidden"
}));
const SearchInput = styled.input(() => ({
  backgroundColor: Palette.LIGHT_BLACK,
  width: "100%",
  font: FontStyles.BODY1_FONT,
  height: 24,
  padding: 4,
  paddingLeft: 8,
  color: Palette.WHITE,
  border: "none",
  outline: "none",
  borderBottom: `1px solid ${Palette.VERY_LIGHT_GREY_NEW}`
}));
const MultiSite = ({
  sites,
  currentSite,
  onChange = () => null,
  backgroundColor = Palette.WHITE,
  configMode,
  language
}) => {
  var _a;
  const [open, setOpen] = useState(false);
  const [currentSearch, setCurrentSearch] = useState("");
  const titleRef = useRef();
  const sitesToShow = sites.filter(s => s.label.toUpperCase().includes(currentSearch.toUpperCase()) && s.label !== currentSite.label).sort((s1, s2) => s1.label.toUpperCase().localeCompare(s2.label.toUpperCase()));
  const toogle = () => {
    (sites === null || sites === void 0 ? void 0 : sites.length) > 1 && setOpen(!open);
  };
  const handleSiteChange = site => {
    onChange(site);
    setOpen(false);
  };
  return _jsxs(Popover, {
    overlayColor: "transparent",
    open: open,
    placement: "bottom-start",
    arrow: false,
    children: [_jsx(SiteTitle, {
      onClick: toogle,
      timeFormat: currentSite.timeFormat,
      titleRef: titleRef,
      timezone: currentSite.timezone,
      configMode: configMode,
      language: language,
      children: currentSite.label
    }), _jsxs(ListWrapper, {
      width: (_a = titleRef === null || titleRef === void 0 ? void 0 : titleRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth,
      backgroundColor: backgroundColor,
      visible: open,
      children: [_jsx(Row, {
        style: {
          minHeight: 40
        },
        children: _jsx(SearchInput, {
          placeholder: "Search a site",
          type: "text",
          value: currentSearch,
          onChange: e => setCurrentSearch(e.target.value)
        })
      }), _jsx(Scrollable, {
        children: sitesToShow.length > 0 ? sitesToShow.map((site, i) => _jsx(SiteOption, {
          onClick: () => handleSiteChange(site),
          children: site.label
        }, i)) : _jsx(Row, {
          justifyContent: "center",
          alignItems: "center",
          style: {
            height: 50,
            font: FontStyles.BODY1_FONT,
            padding: 8,
            color: Palette.DIM_GREY
          },
          children: "No sites found. Check your search."
        })
      })]
    })]
  });
};
const SiteSelector = ({
  backgroundColor,
  configMode,
  currentSite,
  onChange = () => null,
  sites,
  language
}) => {
  if (sites.length === 0) {
    return null;
  }
  const presentSites = sites.sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase())).map(s => formatSite(s));
  if (presentSites.length === 1) {
    return _jsx(SiteTitle, {
      onClick: () => null,
      timeFormat: presentSites[0].timeFormat,
      singleSite: true,
      timezone: currentSite.timezone,
      configMode: configMode,
      language: language,
      children: currentSite.name
    });
  }
  return _jsx(MultiSite, {
    sites: presentSites,
    currentSite: formatSite(currentSite),
    onChange: onChange,
    backgroundColor: backgroundColor,
    configMode: configMode,
    language: language
  }, currentSite.name);
};
export default SiteSelector;