UNPKG

@grafana/ui

Version:
1 lines 6.75 kB
{"version":3,"file":"TimePickerCalendar.mjs","sources":["../../../../../src/components/DateTimePickers/TimeRangePicker/TimePickerCalendar.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { useDialog } from '@react-aria/dialog';\nimport { FocusScope } from '@react-aria/focus';\nimport { OverlayContainer, useOverlay } from '@react-aria/overlays';\nimport { createRef, FormEvent, memo } from 'react';\n\nimport { DateTime, GrafanaTheme2, TimeZone } from '@grafana/data';\nimport { selectors } from '@grafana/e2e-selectors';\n\nimport { useStyles2, useTheme2 } from '../../../themes/ThemeContext';\nimport { getModalStyles } from '../../Modal/getModalStyles';\nimport { WeekStart } from '../WeekStartPicker';\n\nimport { Body } from './CalendarBody';\nimport { Footer } from './CalendarFooter';\nimport { Header } from './CalendarHeader';\n\nexport const getStyles = (theme: GrafanaTheme2, isReversed = false) => {\n return {\n container: css({\n top: 0,\n position: 'absolute',\n [`${isReversed ? 'left' : 'right'}`]: '546px', // lmao\n }),\n\n modalContainer: css({\n label: 'modalContainer',\n margin: '0 auto',\n }),\n\n calendar: css({\n display: 'flex',\n flexDirection: 'column',\n gap: theme.spacing(1),\n padding: theme.spacing(1),\n label: 'calendar',\n boxShadow: theme.shadows.z3,\n backgroundColor: theme.colors.background.elevated,\n border: `1px solid ${theme.colors.border.weak}`,\n borderRadius: theme.shape.radius.default,\n }),\n\n modal: css({\n label: 'modal',\n boxShadow: theme.shadows.z3,\n left: '50%',\n position: 'fixed',\n top: '50%',\n transform: 'translate(-50%, -50%)',\n zIndex: theme.zIndex.modal,\n }),\n };\n};\n\nexport interface TimePickerCalendarProps {\n isOpen: boolean;\n from: DateTime;\n to: DateTime;\n onClose: () => void;\n onApply: (e: FormEvent<HTMLButtonElement>) => void;\n onChange: (from: DateTime, to: DateTime) => void;\n weekStart?: WeekStart;\n\n /**\n * When true, the calendar is rendered as a floating \"tooltip\" next to the input.\n * When false, the calendar is rendered \"fullscreen\" in a modal. Yes. Don't ask.\n */\n isFullscreen: boolean;\n timeZone?: TimeZone;\n isReversed?: boolean;\n}\n\nfunction TimePickerCalendar(props: TimePickerCalendarProps) {\n const theme = useTheme2();\n const { modalBackdrop } = useStyles2(getModalStyles);\n const styles = getStyles(theme, props.isReversed);\n const { isOpen, isFullscreen: isFullscreenProp, onClose } = props;\n const ref = createRef<HTMLElement>();\n const { dialogProps } = useDialog(\n {\n 'aria-label': selectors.components.TimePicker.calendar.label,\n },\n ref\n );\n const { overlayProps } = useOverlay(\n {\n isDismissable: true,\n isOpen,\n onClose,\n },\n ref\n );\n\n // This prop is confusingly worded, so rename it to something more intuitive.\n const showInModal = !isFullscreenProp;\n\n if (!isOpen) {\n return null;\n }\n\n const calendar = (\n <section\n className={styles.calendar}\n ref={ref}\n {...overlayProps}\n {...dialogProps}\n data-testid={selectors.components.TimePicker.calendar.label}\n >\n <Header {...props} />\n <Body {...props} />\n {showInModal && <Footer {...props} />}\n </section>\n );\n\n if (!showInModal) {\n return (\n <FocusScope contain restoreFocus autoFocus>\n <div className={styles.container}>{calendar}</div>\n </FocusScope>\n );\n }\n\n return (\n <OverlayContainer>\n <div className={modalBackdrop} />\n\n <FocusScope contain autoFocus restoreFocus>\n <div className={styles.modal}>\n <div className={styles.modalContainer}>{calendar}</div>\n </div>\n </FocusScope>\n </OverlayContainer>\n );\n}\nexport default memo(TimePickerCalendar);\nTimePickerCalendar.displayName = 'TimePickerCalendar';\n"],"names":[],"mappings":"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"}