@grafana/ui
Version:
Grafana Components Library
103 lines (99 loc) • 3.61 kB
JavaScript
'use strict';
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 e2eSelectors = require('@grafana/e2e-selectors');
var ThemeContext = require('../../../themes/ThemeContext.cjs');
var getModalStyles = require('../../Modal/getModalStyles.cjs');
var CalendarBody = require('./CalendarBody.cjs');
var CalendarFooter = require('./CalendarFooter.cjs');
var CalendarHeader = require('./CalendarHeader.cjs');
"use strict";
const getStyles = (theme, isReversed = false) => {
return {
container: css.css({
top: 0,
position: "absolute",
[`${isReversed ? "left" : "right"}`]: "546px"
// lmao
}),
modalContainer: css.css({
label: "modalContainer",
margin: "0 auto"
}),
calendar: css.css({
display: "flex",
flexDirection: "column",
gap: theme.spacing(1),
padding: theme.spacing(1),
label: "calendar",
boxShadow: theme.shadows.z3,
backgroundColor: theme.colors.background.elevated,
border: `1px solid ${theme.colors.border.weak}`,
borderRadius: theme.shape.radius.lg
}),
modal: css.css({
label: "modal",
boxShadow: theme.shadows.z3,
left: "50%",
position: "fixed",
top: "50%",
transform: "translate(-50%, -50%)",
zIndex: theme.zIndex.modal
})
};
};
function TimePickerCalendar(props) {
const theme = ThemeContext.useTheme2();
const { modalBackdrop } = ThemeContext.useStyles2(getModalStyles.getModalStyles);
const styles = getStyles(theme, props.isReversed);
const { isOpen, isFullscreen: isFullscreenProp, onClose } = props;
const ref = React.createRef();
const { dialogProps } = dialog.useDialog(
{
"aria-label": e2eSelectors.selectors.components.TimePicker.calendar.label
},
ref
);
const { overlayProps } = overlays.useOverlay(
{
isDismissable: true,
isOpen,
onClose
},
ref
);
const showInModal = !isFullscreenProp;
if (!isOpen) {
return null;
}
const calendar = /* @__PURE__ */ jsxRuntime.jsxs(
"section",
{
className: styles.calendar,
ref,
...overlayProps,
...dialogProps,
"data-testid": e2eSelectors.selectors.components.TimePicker.calendar.label,
children: [
/* @__PURE__ */ jsxRuntime.jsx(CalendarHeader.Header, { ...props }),
/* @__PURE__ */ jsxRuntime.jsx(CalendarBody.Body, { ...props }),
showInModal && /* @__PURE__ */ jsxRuntime.jsx(CalendarFooter.Footer, { ...props })
]
}
);
if (!showInModal) {
return /* @__PURE__ */ jsxRuntime.jsx(focus.FocusScope, { contain: true, restoreFocus: true, autoFocus: true, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.container, children: calendar }) });
}
return /* @__PURE__ */ jsxRuntime.jsxs(overlays.OverlayContainer, { children: [
/* @__PURE__ */ jsxRuntime.jsx("div", { className: modalBackdrop }),
/* @__PURE__ */ jsxRuntime.jsx(focus.FocusScope, { contain: true, autoFocus: true, restoreFocus: true, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.modal, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.modalContainer, children: calendar }) }) })
] });
}
var TimePickerCalendar$1 = React.memo(TimePickerCalendar);
TimePickerCalendar.displayName = "TimePickerCalendar";
module.exports = TimePickerCalendar$1;
//# sourceMappingURL=TimePickerCalendar.cjs.map