@grafana/ui
Version:
Grafana Components Library
211 lines (206 loc) • 7.52 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
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 Button = require('../../Button/Button.cjs');
var Combobox = require('../../Combobox/Combobox.cjs');
var Field = require('../../Forms/Field.cjs');
var Tab = require('../../Tabs/Tab.cjs');
var TabContent = require('../../Tabs/TabContent.cjs');
var TabsBar = require('../../Tabs/TabsBar.cjs');
var TimeZonePicker = require('../TimeZonePicker.cjs');
var TimeZoneDescription = require('../TimeZonePicker/TimeZoneDescription.cjs');
var TimeZoneOffset = require('../TimeZonePicker/TimeZoneOffset.cjs');
var TimeZoneTitle = require('../TimeZonePicker/TimeZoneTitle.cjs');
var options = require('../options.cjs');
"use strict";
const TimePickerFooter = (props) => {
const {
timeZone,
fiscalYearStartMonth,
timestamp = Date.now(),
onChangeTimeZone,
onChangeFiscalYearStartMonth
} = props;
const [isEditing, setEditing] = React.useState(false);
const [editMode, setEditMode] = React.useState("tz");
const timeSettingsId = React.useId();
const timeZoneSettingsId = React.useId();
const fiscalYearSettingsId = React.useId();
const fiscalYearStartMonthId = React.useId();
const onToggleChangeTimeSettings = React.useCallback(
(event) => {
if (event) {
event.stopPropagation();
}
setEditing(!isEditing);
},
[isEditing, setEditing]
);
const style = ThemeContext.useStyles2(getStyle);
if (typeof timeZone !== "string") {
return null;
}
const info = data.getTimeZoneInfo(timeZone, timestamp);
if (!info) {
return null;
}
return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntime.jsxs(
"section",
{
"aria-label": i18n.t("time-picker.footer.time-zone-selection", "Time zone selection"),
className: style.container,
children: [
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: style.timeZoneContainer, children: [
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: style.timeZone, children: [
/* @__PURE__ */ jsxRuntime.jsx(TimeZoneTitle.TimeZoneTitle, { title: TimeZoneTitle.getTimeZoneTitle(info) }),
/* @__PURE__ */ jsxRuntime.jsx("div", { className: style.spacer }),
/* @__PURE__ */ jsxRuntime.jsx(TimeZoneDescription.TimeZoneDescription, { info })
] }),
/* @__PURE__ */ jsxRuntime.jsx(TimeZoneOffset.TimeZoneOffset, { timeZone, timestamp })
] }),
/* @__PURE__ */ jsxRuntime.jsx("div", { className: style.spacer }),
/* @__PURE__ */ jsxRuntime.jsx(
Button.Button,
{
"data-testid": e2eSelectors.selectors.components.TimeZonePicker.changeTimeSettingsButton,
variant: "secondary",
onClick: onToggleChangeTimeSettings,
size: "sm",
"aria-expanded": isEditing,
"aria-controls": timeSettingsId,
icon: isEditing ? "angle-up" : "angle-down",
children: /* @__PURE__ */ jsxRuntime.jsx(i18n.Trans, { i18nKey: "time-picker.footer.change-settings-button", children: "Change time settings" })
}
)
]
}
),
isEditing ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: style.editContainer, id: timeSettingsId, children: [
/* @__PURE__ */ jsxRuntime.jsxs(TabsBar.TabsBar, { children: [
/* @__PURE__ */ jsxRuntime.jsx(
Tab.Tab,
{
label: i18n.t("time-picker.footer.time-zone-option", "Time zone"),
active: editMode === "tz",
onChangeTab: () => {
setEditMode("tz");
},
"aria-controls": timeZoneSettingsId
}
),
/* @__PURE__ */ jsxRuntime.jsx(
Tab.Tab,
{
label: i18n.t("time-picker.footer.fiscal-year-option", "Fiscal year"),
active: editMode === "fy",
onChangeTab: () => {
setEditMode("fy");
},
"aria-controls": fiscalYearSettingsId
}
)
] }),
/* @__PURE__ */ jsxRuntime.jsx(TabContent.TabContent, { className: style.noBackground, children: editMode === "tz" ? /* @__PURE__ */ jsxRuntime.jsx(
"section",
{
role: "tabpanel",
"data-testid": e2eSelectors.selectors.components.TimeZonePicker.containerV2,
id: timeZoneSettingsId,
className: css.cx(style.timeZoneContainer, style.timeSettingContainer),
children: /* @__PURE__ */ jsxRuntime.jsx(
TimeZonePicker.TimeZonePicker,
{
includeInternal: true,
onChange: (timeZone2) => {
if (typeof timeZone2 === "string") {
onChangeTimeZone(timeZone2);
}
},
menuShouldPortal: false
}
)
}
) : /* @__PURE__ */ jsxRuntime.jsx(
"section",
{
role: "tabpanel",
"data-testid": e2eSelectors.selectors.components.TimeZonePicker.containerV2,
id: fiscalYearSettingsId,
className: css.cx(style.timeZoneContainer, style.timeSettingContainer),
children: /* @__PURE__ */ jsxRuntime.jsx(
Field.Field,
{
className: style.fiscalYearField,
label: i18n.t("time-picker.footer.fiscal-year-start", "Fiscal year start month"),
children: /* @__PURE__ */ jsxRuntime.jsx(
Combobox.Combobox,
{
id: fiscalYearStartMonthId,
value: fiscalYearStartMonth != null ? fiscalYearStartMonth : null,
options: options.getMonthOptions(),
onChange: (value) => {
var _a;
if (onChangeFiscalYearStartMonth) {
onChangeFiscalYearStartMonth((_a = value == null ? void 0 : value.value) != null ? _a : 0);
}
}
}
)
}
)
}
) })
] }) : null
] });
};
const getStyle = (theme) => ({
container: css.css({
borderTop: `1px solid ${theme.colors.border.weak}`,
padding: theme.spacing(1.5),
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center"
}),
editContainer: css.css({
borderTop: `1px solid ${theme.colors.border.weak}`,
padding: theme.spacing(1.5),
paddingTop: 0,
justifyContent: "space-between",
alignItems: "center"
}),
spacer: css.css({
marginLeft: "7px"
}),
timeSettingContainer: css.css({
paddingTop: theme.spacing(1)
}),
noBackground: css.css({
background: "inherit"
}),
fiscalYearField: css.css({
marginBottom: 0
}),
timeZoneContainer: css.css({
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
flexGrow: 1
}),
timeZone: css.css({
display: "flex",
flexDirection: "row",
alignItems: "baseline",
flexGrow: 1
})
});
exports.TimePickerFooter = TimePickerFooter;
//# sourceMappingURL=TimePickerFooter.cjs.map