@elastic/eui/es/components/date_picker/super_date_picker/date_popover/timezone_display.js

Elastic UI Component Library

var _excluded = ["timeZone", "customRender", "date"];
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
/*
 * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
 * or more contributor license agreements. Licensed under the Elastic License
 * 2.0 and the Server Side Public License, v 1; you may not use this file except
 * in compliance with, at your election, the Elastic License 2.0 or the Server
 * Side Public License, v 1.
 */

import React from 'react';
import { euiTimeZoneDisplayStyles } from './timezone_display.styles';
import { useEuiMemoizedStyles } from '../../../../services';
import { EuiFlexGroup } from '../../../flex';
import { EuiIcon } from '../../../icon';
import { EuiText } from '../../../text';

/**
 * Available elements to render passed to the
 * `customRender` render function.
 */
import { jsx as ___EmotionJSX } from "@emotion/react";
/**
 * Display time zone information.
 */
export var EuiTimeZoneDisplay = function EuiTimeZoneDisplay(_ref) {
  var timeZone = _ref.timeZone,
    customRender = _ref.customRender,
    date = _ref.date,
    rest = _objectWithoutProperties(_ref, _excluded);
  var color = 'subdued';
  var styles = useEuiMemoizedStyles(euiTimeZoneDisplayStyles);
  var referenceDate = date ? date.toDate() : undefined;
  var _useEuiUTCOffsetDispl = useEuiUTCOffsetDisplay(timeZone !== null && timeZone !== void 0 ? timeZone : 'Browser', referenceDate),
    utc = _useEuiUTCOffsetDispl.utc,
    name = _useEuiUTCOffsetDispl.name,
    isInvalid = _useEuiUTCOffsetDispl.isInvalid;
  if (!timeZone || isInvalid) return null;
  var label = !name ? utc : "".concat(utc, " (").concat(name, ")");
  var nameDisplay = ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiIcon, {
    type: "globe",
    color: color
  }), ___EmotionJSX(EuiText, {
    component: "span",
    color: color,
    size: "s"
  }, label));
  return ___EmotionJSX(EuiFlexGroup, _extends({
    css: styles.euiTimeZoneDisplay,
    alignItems: "center",
    gutterSize: "xs",
    "data-test-subj": "euiTimeZoneDisplay",
    "aria-label": label
  }, rest), typeof customRender === 'function' ? customRender({
    nameDisplay: nameDisplay,
    utcOffset: utc,
    timeZoneName: name
  }) : nameDisplay);
};

/**
 * Get the UTC offset display in hours e.g. "UTC+2" from time zone name.
 *
 * @param timeZoneName IANA time zone name
 * @param [date] Reference date to get offset with Intl.DateTimeFormat
 */
export function useEuiUTCOffsetDisplay(timeZoneName, date) {
  try {
    var _formattedParts$find;
    if (timeZoneName === 'UTC') {
      return {
        utc: 'UTC',
        name: '',
        isInvalid: false
      };
    }
    var ianaName = timeZoneName === 'Browser' ? new Intl.DateTimeFormat().resolvedOptions().timeZone : timeZoneName;
    var formatter = new Intl.DateTimeFormat(undefined, {
      timeZone: ianaName,
      timeZoneName: 'shortOffset'
    });
    var formattedParts = formatter.formatToParts(date !== null && date !== void 0 ? date : new Date());
    var timeZoneNamePart = ((_formattedParts$find = formattedParts.find(function (part) {
      return part.type === 'timeZoneName';
    })) === null || _formattedParts$find === void 0 ? void 0 : _formattedParts$find.value) || '';
    return {
      utc: timeZoneNamePart.replace('GMT', 'UTC'),
      name: ianaName,
      isInvalid: false
    };
  } catch (err) {
    return {
      utc: '',
      name: timeZoneName,
      isInvalid: true
    };
  }
}