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

Grafana Components Library

'use strict';

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

var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var react = require('@floating-ui/react');
var focus = require('@react-aria/focus');
var React = require('react');
var data = require('@grafana/data');
var e2eSelectors = require('@grafana/e2e-selectors');
var ThemeContext = require('../../themes/ThemeContext.cjs');
var Icon = require('../Icon/Icon.cjs');
var Input = require('../Input/Input.cjs');
var TimePickerContent = require('./TimeRangePicker/TimePickerContent.cjs');
var TimeRangeLabel = require('./TimeRangePicker/TimeRangeLabel.cjs');
var options = require('./options.cjs');
var utils = require('./utils.cjs');

"use strict";
const noop = () => {
};
const TimeRangeInput = ({
  value,
  onChange,
  onChangeTimeZone = noop,
  clearable,
  weekStart,
  hideTimeZone = true,
  timeZone = "browser",
  placeholder = "Select time range",
  isReversed = true,
  hideQuickRanges = false,
  disabled = false,
  showIcon = false
}) => {
  const [isOpen, setIsOpen] = React.useState(false);
  const styles = ThemeContext.useStyles2(getStyles, disabled);
  const onOpen = (event) => {
    event.stopPropagation();
    event.preventDefault();
    if (disabled) {
      return;
    }
    setIsOpen(!isOpen);
  };
  const onClose = () => {
    setIsOpen(false);
  };
  const onRangeChange = (timeRange) => {
    onClose();
    onChange(timeRange);
  };
  const onRangeClear = (event) => {
    event.stopPropagation();
    const from = data.dateTime(null);
    const to = data.dateTime(null);
    onChange({ from, to, raw: { from, to } });
  };
  const { refs, floatingStyles, context } = react.useFloating({
    open: isOpen,
    onOpenChange: setIsOpen,
    placement: "bottom-start",
    strategy: "fixed"
  });
  const dismiss = react.useDismiss(context, {
    bubbles: {
      outsidePress: false
    }
  });
  const { getReferenceProps, getFloatingProps } = react.useInteractions([dismiss]);
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.container, children: [
    /* @__PURE__ */ jsxRuntime.jsxs(
      "button",
      {
        type: "button",
        className: styles.pickerInput,
        "data-testid": e2eSelectors.selectors.components.TimePicker.openButton,
        onClick: onOpen,
        ref: refs.setReference,
        ...getReferenceProps(),
        children: [
          showIcon && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "clock-nine", size: "sm", className: styles.icon }),
          /* @__PURE__ */ jsxRuntime.jsx(TimeRangeLabel.TimeRangeLabel, { value, timeZone, placeholder }),
          !disabled && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles.caretIcon, children: [
            utils.isValidTimeRange(value) && clearable && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { className: styles.clearIcon, name: "times", size: "lg", onClick: onRangeClear }),
            /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: isOpen ? "angle-up" : "angle-down", size: "lg" })
          ] })
        ]
      }
    ),
    isOpen && /* @__PURE__ */ jsxRuntime.jsx(focus.FocusScope, { contain: true, autoFocus: true, restoreFocus: true, children: /* @__PURE__ */ jsxRuntime.jsx("section", { className: styles.content, ref: refs.setFloating, style: floatingStyles, ...getFloatingProps(), children: /* @__PURE__ */ jsxRuntime.jsx(
      TimePickerContent.TimePickerContent,
      {
        timeZone,
        value: utils.isValidTimeRange(value) ? value : data.getDefaultTimeRange(),
        onChange: onRangeChange,
        quickOptions: options.getQuickOptions(),
        onChangeTimeZone,
        className: styles.content,
        hideTimeZone,
        isReversed,
        hideQuickRanges,
        weekStart
      }
    ) }) })
  ] });
};
const getStyles = (theme, disabled = false) => {
  const inputStyles = Input.getInputStyles({ theme, invalid: false });
  return {
    container: css.css({
      display: "flex",
      position: "relative"
    }),
    content: css.css({
      marginLeft: 0,
      position: "absolute",
      top: "116%",
      zIndex: theme.zIndex.modal
    }),
    pickerInput: css.cx(
      inputStyles.input,
      disabled && inputStyles.inputDisabled,
      inputStyles.wrapper,
      css.css({
        display: "flex",
        alignItems: "center",
        justifyContent: "space-between",
        cursor: "pointer",
        paddingRight: 0,
        lineHeight: `${theme.spacing.gridSize * 4 - 2}px`
      })
    ),
    caretIcon: css.cx(
      inputStyles.suffix,
      css.css({
        position: "relative",
        top: "-1px",
        marginLeft: theme.spacing(0.5)
      })
    ),
    clearIcon: css.css({
      marginRight: theme.spacing(0.5),
      "&:hover": {
        color: theme.colors.text.maxContrast
      }
    }),
    placeholder: css.css({
      color: theme.colors.text.disabled,
      opacity: 1
    }),
    icon: css.css({
      marginRight: theme.spacing(0.5)
    })
  };
};

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