@grafana/ui/dist/cjs/components/DateTimePickers/TimeZonePicker.cjs

Grafana Components Library

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var jsxRuntime = require('react/jsx-runtime');
var React = require('react');
var data = require('@grafana/data');
var i18n = require('@grafana/i18n');
var Select = require('../Select/Select.cjs');
var TimeZoneGroup = require('./TimeZonePicker/TimeZoneGroup.cjs');
var TimeZoneOffset = require('./TimeZonePicker/TimeZoneOffset.cjs');
var TimeZoneOption = require('./TimeZonePicker/TimeZoneOption.cjs');
var TimeZoneTitle = require('./TimeZonePicker/TimeZoneTitle.cjs');

"use strict";
const TimeZonePicker = (props) => {
  const {
    onChange,
    width,
    autoFocus = false,
    onBlur,
    value,
    includeInternal = false,
    disabled = false,
    inputId,
    menuShouldPortal = true,
    openMenuOnFocus = false
  } = props;
  const groupedTimeZones = useTimeZones(includeInternal);
  const selected = useSelectedTimeZone(groupedTimeZones, value);
  const filterBySearchIndex = useFilterBySearchIndex();
  const TimeZoneOption$1 = width && width <= 45 ? TimeZoneOption.CompactTimeZoneOption : TimeZoneOption.WideTimeZoneOption;
  const onChangeTz = React.useCallback(
    (selectable) => {
      if (!selectable || typeof selectable.value !== "string") {
        return onChange(value);
      }
      onChange(selectable.value);
    },
    [onChange, value]
  );
  return /* @__PURE__ */ jsxRuntime.jsx(
    Select.Select,
    {
      inputId,
      value: selected,
      placeholder: i18n.t("time-picker.zone.select-search-input", "Type to search (country, city, abbreviation)"),
      autoFocus,
      menuShouldPortal,
      openMenuOnFocus,
      width,
      filterOption: filterBySearchIndex,
      options: groupedTimeZones,
      onChange: onChangeTz,
      onBlur,
      components: { Option: TimeZoneOption$1, Group: TimeZoneGroup.TimeZoneGroup },
      disabled,
      "aria-label": i18n.t("time-picker.zone.select-aria-label", "Time zone picker")
    }
  );
};
const useTimeZones = (includeInternal) => {
  const now = Date.now();
  const timeZoneGroups = React.useMemo(() => {
    return data.getTimeZoneGroups(includeInternal).map((group) => {
      const options = group.zones.reduce((options2, zone) => {
        const info = data.getTimeZoneInfo(zone, now);
        if (!info) {
          return options2;
        }
        const name = TimeZoneTitle.getTimeZoneTitle(info);
        options2.push({
          label: name,
          value: info.zone,
          searchIndex: getSearchIndex(name, info, now)
        });
        return options2;
      }, []);
      return {
        label: group.name,
        options
      };
    });
  }, [includeInternal, now]);
  return timeZoneGroups;
};
const useSelectedTimeZone = (groups, timeZone) => {
  return React.useMemo(() => {
    var _a;
    if (timeZone === void 0) {
      return void 0;
    }
    const tz = (_a = timeZone == null ? void 0 : timeZone.toLowerCase()) != null ? _a : "";
    const group = groups.find((group2) => {
      if (!group2.label) {
        return isInternal(tz);
      }
      return tz.startsWith(group2.label.toLowerCase());
    });
    return group == null ? void 0 : group.options.find((option) => {
      var _a2;
      if (tz === "") {
        return option.value === data.InternalTimeZones.default;
      }
      return ((_a2 = option.value) == null ? void 0 : _a2.toLowerCase()) === tz;
    });
  }, [groups, timeZone]);
};
const isInternal = (timeZone) => {
  switch (timeZone) {
    case data.InternalTimeZones.default:
    case data.InternalTimeZones.localBrowserTime:
    case data.InternalTimeZones.utc:
      return true;
    default:
      return false;
  }
};
const useFilterBySearchIndex = () => {
  return React.useCallback((option, searchQuery) => {
    if (!searchQuery || !option.data || !option.data.searchIndex) {
      return true;
    }
    return option.data.searchIndex.indexOf(searchQuery.toLowerCase()) > -1;
  }, []);
};
const getSearchIndex = (label, info, timestamp) => {
  const parts = [
    info.zone.toLowerCase(),
    info.abbreviation.toLowerCase(),
    TimeZoneOffset.formatUtcOffset(timestamp, info.zone).toLowerCase()
  ];
  if (label !== info.zone) {
    parts.push(label.toLowerCase());
  }
  for (const country of info.countries) {
    parts.push(country.name.toLowerCase());
    parts.push(country.code.toLowerCase());
  }
  return parts.join("|");
};

exports.TimeZonePicker = TimeZonePicker;
//# sourceMappingURL=TimeZonePicker.cjs.map