@grafana/ui
Version:
Grafana Components Library
273 lines (268 loc) • 10.4 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var dialog = require('@react-aria/dialog');
var focus = require('@react-aria/focus');
var overlays = require('@react-aria/overlays');
var React = require('react');
var data = require('@grafana/data');
var e2eSelectors = require('@grafana/e2e-selectors');
var i18n = require('@grafana/i18n');
var ThemeContext = require('../../themes/ThemeContext.cjs');
var ButtonGroup = require('../Button/ButtonGroup.cjs');
var Stack = require('../Layout/Stack/Stack.cjs');
var getModalStyles = require('../Modal/getModalStyles.cjs');
var Portal = require('../Portal/Portal.cjs');
var ToolbarButton = require('../ToolbarButton/ToolbarButton.cjs');
var Tooltip = require('../Tooltip/Tooltip.cjs');
var TimePickerContent = require('./TimeRangePicker/TimePickerContent.cjs');
var TimeZoneDescription = require('./TimeZonePicker/TimeZoneDescription.cjs');
var TimeZoneTitle = require('./TimeZonePicker/TimeZoneTitle.cjs');
var options = require('./options.cjs');
var useTimeSync = require('./utils/useTimeSync.cjs');
"use strict";
function TimeRangePicker(props) {
var _a;
const [isOpen, setOpen] = React.useState(false);
const {
value,
onMoveBackward,
onMoveForward,
moveForwardTooltip,
moveBackwardTooltip,
onZoom,
onError,
timeZone,
fiscalYearStartMonth,
history,
onChangeTimeZone,
onChangeFiscalYearStartMonth,
quickRanges,
hideQuickRanges,
widthOverride,
isOnCanvas,
onToolbarTimePickerClick,
weekStart,
initialIsSynced
} = props;
const { onChangeWithSync, isSynced, timeSyncButton } = useTimeSync.useTimeSync({
initialIsSynced,
value,
onChangeProp: props.onChange,
isSyncedProp: props.isSynced,
timeSyncButtonProp: props.timeSyncButton
});
const onChange = (timeRange) => {
onChangeWithSync(timeRange);
setOpen(false);
};
React.useEffect(() => {
if (isOpen && onToolbarTimePickerClick) {
onToolbarTimePickerClick();
}
}, [isOpen, onToolbarTimePickerClick]);
const onToolbarButtonSwitch = () => {
setOpen((prevState) => !prevState);
};
const onClose = () => {
setOpen(false);
};
const overlayRef = React.createRef();
const buttonRef = React.createRef();
const { overlayProps, underlayProps } = overlays.useOverlay(
{
onClose,
isDismissable: true,
isOpen,
shouldCloseOnInteractOutside: (element) => {
var _a2;
const portalContainer = Portal.getPortalContainer();
return !((_a2 = buttonRef.current) == null ? void 0 : _a2.contains(element)) && !portalContainer.contains(element);
}
},
overlayRef
);
const { dialogProps } = dialog.useDialog({}, overlayRef);
const styles = ThemeContext.useStyles2(getStyles);
const { modalBackdrop } = ThemeContext.useStyles2(getModalStyles.getModalStyles);
const variant = isSynced ? "active" : isOnCanvas ? "canvas" : "default";
const isFromAfterTo = (_a = value == null ? void 0 : value.to) == null ? void 0 : _a.isBefore(value.from);
const timePickerIcon = isFromAfterTo ? "exclamation-triangle" : "clock-nine";
const currentTimeRange = formattedRange(value, timeZone, quickRanges);
return /* @__PURE__ */ jsxRuntime.jsxs(ButtonGroup.ButtonGroup, { className: styles.container, children: [
/* @__PURE__ */ jsxRuntime.jsx(
ToolbarButton.ToolbarButton,
{
variant,
onClick: onMoveBackward,
icon: "angle-double-left",
type: "button",
iconSize: "xl",
"data-testid": e2eSelectors.selectors.components.TimePicker.moveBackwardButton,
tooltip: moveBackwardTooltip != null ? moveBackwardTooltip : i18n.t("time-picker.range-picker.backwards-time-aria-label", "Move time range backwards"),
narrow: true
}
),
/* @__PURE__ */ jsxRuntime.jsx(
Tooltip.Tooltip,
{
ref: buttonRef,
content: /* @__PURE__ */ jsxRuntime.jsx(TimePickerTooltip, { timeRange: value, timeZone }),
placement: "bottom",
interactive: true,
children: /* @__PURE__ */ jsxRuntime.jsx(
ToolbarButton.ToolbarButton,
{
"data-testid": e2eSelectors.selectors.components.TimePicker.openButton,
"aria-label": i18n.t("time-picker.range-picker.current-time-selected", "Time range selected: {{currentTimeRange}}", {
currentTimeRange
}),
"aria-controls": "TimePickerContent",
onClick: onToolbarButtonSwitch,
icon: timePickerIcon,
isOpen,
type: "button",
variant,
children: /* @__PURE__ */ jsxRuntime.jsx(TimePickerButtonLabel, { ...props })
}
)
}
),
isOpen && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-testid": e2eSelectors.selectors.components.TimePicker.overlayContent, children: [
/* @__PURE__ */ jsxRuntime.jsx("div", { role: "presentation", className: css.cx(modalBackdrop, styles.backdrop), ...underlayProps }),
/* @__PURE__ */ jsxRuntime.jsx(focus.FocusScope, { contain: true, autoFocus: true, restoreFocus: true, children: /* @__PURE__ */ jsxRuntime.jsx("section", { className: styles.content, ref: overlayRef, ...overlayProps, ...dialogProps, children: /* @__PURE__ */ jsxRuntime.jsx(
TimePickerContent.TimePickerContent,
{
timeZone,
fiscalYearStartMonth,
value,
onChange,
quickOptions: quickRanges || options.getQuickOptions(),
history,
showHistory: true,
widthOverride,
onChangeTimeZone,
onChangeFiscalYearStartMonth,
hideQuickRanges,
onError,
weekStart
}
) }) })
] }),
timeSyncButton,
/* @__PURE__ */ jsxRuntime.jsx(
ToolbarButton.ToolbarButton,
{
onClick: onMoveForward,
icon: "angle-double-right",
type: "button",
variant,
iconSize: "xl",
"data-testid": e2eSelectors.selectors.components.TimePicker.moveForwardButton,
tooltip: moveForwardTooltip != null ? moveForwardTooltip : i18n.t("time-picker.range-picker.forwards-time-aria-label", "Move time range forwards"),
narrow: true
}
),
/* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, { content: ZoomOutTooltip, placement: "bottom", children: /* @__PURE__ */ jsxRuntime.jsx(
ToolbarButton.ToolbarButton,
{
"aria-label": i18n.t("time-picker.range-picker.zoom-out-button", "Zoom out time range"),
onClick: onZoom,
icon: "search-minus",
type: "button",
"data-testid": e2eSelectors.selectors.components.TimePicker.zoomOut,
variant
}
) })
] });
}
TimeRangePicker.displayName = "TimeRangePicker";
const ZoomOutTooltip = () => {
return /* @__PURE__ */ jsxRuntime.jsxs(i18n.Trans, { i18nKey: "time-picker.range-picker.zoom-out-tooltip-new", children: [
"Time range zoom out ",
/* @__PURE__ */ jsxRuntime.jsx("br", {}),
" t -"
] });
};
const TimePickerTooltip = ({ timeRange, timeZone }) => {
const styles = ThemeContext.useStyles2(getLabelStyles);
const now = Date.now();
const timeZoneInfo = timeZone ? data.getTimeZoneInfo(timeZone, now) : void 0;
return /* @__PURE__ */ jsxRuntime.jsxs(Stack.Stack, { alignItems: "center", direction: "column", gap: 0, children: [
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
data.dateTimeFormat(timeRange.from, { timeZone }),
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center", children: /* @__PURE__ */ jsxRuntime.jsx(i18n.Trans, { i18nKey: "time-picker.range-picker.to", children: "to" }) }),
data.dateTimeFormat(timeRange.to, { timeZone })
] }),
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.container, children: [
/* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.utc, children: timeZoneInfo ? TimeZoneTitle.getTimeZoneTitle(timeZoneInfo) : "" }),
/* @__PURE__ */ jsxRuntime.jsx(TimeZoneDescription.TimeZoneDescription, { info: timeZoneInfo })
] })
] });
};
const TimePickerButtonLabel = React.memo(({ hideText, value, timeZone, quickRanges }) => {
const styles = ThemeContext.useStyles2(getLabelStyles);
if (hideText) {
return null;
}
return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles.container, "aria-live": "polite", "aria-atomic": "true", children: [
/* @__PURE__ */ jsxRuntime.jsx("span", { children: formattedRange(value, timeZone, quickRanges) }),
/* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.utc, children: data.rangeUtil.describeTimeRangeAbbreviation(value, timeZone) })
] });
});
TimePickerButtonLabel.displayName = "TimePickerButtonLabel";
const formattedRange = (value, timeZone, quickRanges) => {
const adjustedTimeRange = {
to: data.dateMath.isMathString(value.raw.to) ? value.raw.to : value.to,
from: data.dateMath.isMathString(value.raw.from) ? value.raw.from : value.from
};
return data.rangeUtil.describeTimeRange(adjustedTimeRange, timeZone, quickRanges);
};
const getStyles = (theme) => {
return {
container: css.css({
position: "relative",
display: "flex",
verticalAlign: "middle"
}),
backdrop: css.css({
display: "none",
[theme.breakpoints.down("sm")]: {
display: "block"
}
}),
content: css.css({
position: "absolute",
right: 0,
top: "116%",
zIndex: theme.zIndex.dropdown,
[theme.breakpoints.down("sm")]: {
position: "fixed",
right: "50%",
top: "50%",
transform: "translate(50%, -50%)",
zIndex: theme.zIndex.modal
}
})
};
};
const getLabelStyles = (theme) => {
return {
container: css.css({
display: "flex",
alignItems: "baseline",
whiteSpace: "nowrap",
columnGap: theme.spacing(0.75)
}),
utc: css.css({
color: theme.colors.warning.text,
fontSize: theme.typography.bodySmall.fontSize,
fontWeight: theme.typography.fontWeightMedium
})
};
};
exports.TimePickerButtonLabel = TimePickerButtonLabel;
exports.TimePickerTooltip = TimePickerTooltip;
exports.TimeRangePicker = TimeRangePicker;
//# sourceMappingURL=TimeRangePicker.cjs.map