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

Grafana Components Library

'use strict';

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

var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var data = require('@grafana/data');
var e2eSelectors = require('@grafana/e2e-selectors');
var ThemeContext = require('../../../themes/ThemeContext.cjs');
var Icon = require('../../Icon/Icon.cjs');
var TimeZoneDescription = require('./TimeZoneDescription.cjs');
var TimeZoneOffset = require('./TimeZoneOffset.cjs');
var TimeZoneTitle = require('./TimeZoneTitle.cjs');

"use strict";
const offsetClassName = "tz-utc-offset";
const WideTimeZoneOption = (props) => {
  const { children, innerProps, innerRef, data: data$1, isSelected, isFocused } = props;
  const styles = ThemeContext.useStyles2(getStyles);
  const timestamp = Date.now();
  const containerStyles = css.cx(styles.container, isFocused && styles.containerFocused);
  if (typeof data$1.value !== "string") {
    return null;
  }
  const timeZoneInfo = data.getTimeZoneInfo(data$1.value, timestamp);
  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerStyles, ...innerProps, ref: innerRef, "data-testid": e2eSelectors.selectors.components.Select.option, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: css.cx(styles.leftColumn, styles.row), children: [
    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: css.cx(styles.leftColumn, styles.wideRow), children: [
      /* @__PURE__ */ jsxRuntime.jsx(TimeZoneTitle.TimeZoneTitle, { title: children }),
      /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.spacer }),
      /* @__PURE__ */ jsxRuntime.jsx(TimeZoneDescription.TimeZoneDescription, { info: timeZoneInfo })
    ] }),
    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.rightColumn, children: [
      /* @__PURE__ */ jsxRuntime.jsx(
        TimeZoneOffset.TimeZoneOffset,
        {
          timeZone: (timeZoneInfo == null ? void 0 : timeZoneInfo.ianaName) || data$1.value,
          timestamp,
          className: offsetClassName
        }
      ),
      isSelected && /* @__PURE__ */ jsxRuntime.jsx("span", { children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "check" }) })
    ] })
  ] }) });
};
const CompactTimeZoneOption = (props) => {
  const { children, innerProps, innerRef, data: data$1, isSelected, isFocused } = props;
  const styles = ThemeContext.useStyles2(getStyles);
  const timestamp = Date.now();
  const containerStyles = css.cx(styles.container, isFocused && styles.containerFocused);
  if (typeof data$1.value !== "string") {
    return null;
  }
  const timeZoneInfo = data.getTimeZoneInfo(data$1.value, timestamp);
  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerStyles, ...innerProps, ref: innerRef, "data-testid": e2eSelectors.selectors.components.Select.option, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.body, children: [
    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.row, children: [
      /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.leftColumn, children: /* @__PURE__ */ jsxRuntime.jsx(TimeZoneTitle.TimeZoneTitle, { title: children }) }),
      /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.rightColumn, children: isSelected && /* @__PURE__ */ jsxRuntime.jsx("span", { children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "check" }) }) })
    ] }),
    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.row, children: [
      /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.leftColumn, children: /* @__PURE__ */ jsxRuntime.jsx(TimeZoneDescription.TimeZoneDescription, { info: timeZoneInfo }) }),
      /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.rightColumn, children: /* @__PURE__ */ jsxRuntime.jsx(
        TimeZoneOffset.TimeZoneOffset,
        {
          timestamp,
          timeZone: (timeZoneInfo == null ? void 0 : timeZoneInfo.ianaName) || data$1.value,
          className: offsetClassName
        }
      ) })
    ] })
  ] }) });
};
const getStyles = (theme) => ({
  container: css.css({
    display: "flex",
    alignItems: "center",
    flexDirection: "row",
    flexShrink: 0,
    whiteSpace: "nowrap",
    cursor: "pointer",
    padding: theme.spacing(0.75, 1, 0.5),
    borderRadius: theme.shape.radius.default,
    "&:hover": {
      background: theme.colors.action.hover
    }
  }),
  containerFocused: css.css({
    background: theme.colors.action.hover
  }),
  body: css.css({
    display: "flex",
    fontWeight: theme.typography.fontWeightMedium,
    flexDirection: "column",
    flexGrow: 1
  }),
  row: css.css({
    display: "flex",
    flexDirection: "row"
  }),
  leftColumn: css.css({
    flexGrow: 1,
    textOverflow: "ellipsis"
  }),
  rightColumn: css.css({
    justifyContent: "flex-end",
    alignItems: "center"
  }),
  wideRow: css.css({
    display: "flex",
    flexDirection: "row",
    alignItems: "baseline"
  }),
  spacer: css.css({
    marginLeft: "6px"
  })
});

exports.CompactTimeZoneOption = CompactTimeZoneOption;
exports.WideTimeZoneOption = WideTimeZoneOption;
//# sourceMappingURL=TimeZoneOption.cjs.map