@grafana/ui/dist/cjs/components/DateTimePickers/TimeRangePicker/CalendarBody.cjs.map

Grafana Components Library

{"version":3,"file":"CalendarBody.cjs","sources":["../../../../../src/components/DateTimePickers/TimeRangePicker/CalendarBody.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { useCallback } from 'react';\nimport Calendar, { type CalendarType } from 'react-calendar';\n\nimport { type GrafanaTheme2, dateTimeParse, type DateTime, type TimeZone } from '@grafana/data';\nimport { t } from '@grafana/i18n';\n\nimport { useStyles2 } from '../../../themes/ThemeContext';\nimport { Icon } from '../../Icon/Icon';\nimport { getWeekStart, type WeekStart } from '../WeekStartPicker';\nimport { adjustDateForReactCalendar } from '../utils/adjustDateForReactCalendar';\n\nimport { type TimePickerCalendarProps } from './TimePickerCalendar';\n\nconst weekStartMap: Record<WeekStart, CalendarType> = {\n  saturday: 'islamic',\n  sunday: 'gregory',\n  monday: 'iso8601',\n};\n\nexport function Body({ onChange, from, to, timeZone, weekStart }: TimePickerCalendarProps) {\n  const value = inputToValue(from, to, new Date(), timeZone);\n  const onCalendarChange = useOnCalendarChange(onChange, timeZone);\n  const styles = useStyles2(getBodyStyles);\n  const weekStartValue = getWeekStart(weekStart);\n\n  return (\n    <Calendar\n      selectRange={true}\n      next2Label={null}\n      prev2Label={null}\n      className={styles.body}\n      tileClassName={styles.title}\n      value={value}\n      nextLabel={<Icon name=\"angle-right\" />}\n      nextAriaLabel={t('time-picker.calendar.next-month', 'Next month')}\n      prevLabel={<Icon name=\"angle-left\" />}\n      prevAriaLabel={t('time-picker.calendar.previous-month', 'Previous month')}\n      onChange={onCalendarChange}\n      locale=\"en\"\n      calendarType={weekStartMap[weekStartValue]}\n    />\n  );\n}\n\nBody.displayName = 'Body';\n\nexport function inputToValue(\n  from: DateTime,\n  to: DateTime,\n  invalidDateDefault: Date = new Date(),\n  timezone?: string\n): [Date, Date] {\n  let fromAsDate = from.isValid() ? from.toDate() : invalidDateDefault;\n  let toAsDate = to.isValid() ? to.toDate() : invalidDateDefault;\n\n  if (timezone) {\n    fromAsDate = adjustDateForReactCalendar(fromAsDate, timezone);\n    toAsDate = adjustDateForReactCalendar(toAsDate, timezone);\n  }\n\n  if (fromAsDate > toAsDate) {\n    return [toAsDate, fromAsDate];\n  }\n\n  return [fromAsDate, toAsDate];\n}\n\nfunction useOnCalendarChange(onChange: (from: DateTime, to: DateTime) => void, timeZone?: TimeZone) {\n  return useCallback<NonNullable<React.ComponentProps<typeof Calendar>['onChange']>>(\n    (value) => {\n      if (!Array.isArray(value)) {\n        return console.error('onCalendarChange: should be run in selectRange={true}');\n      }\n\n      if (value[0] && value[1]) {\n        const from = dateTimeParse(dateInfo(value[0]), { timeZone });\n        const to = dateTimeParse(dateInfo(value[1]), { timeZone });\n\n        onChange(from, to);\n      }\n    },\n    [onChange, timeZone]\n  );\n}\n\nfunction dateInfo(date: Date): number[] {\n  return [date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds()];\n}\n\nexport const getBodyStyles = (theme: GrafanaTheme2) => {\n  // If a time range is part of only 1 day but does not encompass the whole day,\n  // the class that react-calendar uses is '--hasActive' by itself (without being part of a '--range')\n  const hasActiveSelector = `.react-calendar__tile--hasActive:not(.react-calendar__tile--range)`;\n\n  return {\n    title: css({\n      color: theme.colors.text.primary,\n      backgroundColor: theme.colors.background.primary,\n      fontSize: theme.typography.size.md,\n      border: '1px solid transparent',\n\n      '&:hover, &:focus': {\n        position: 'relative',\n      },\n\n      '&:disabled': {\n        color: theme.colors.action.disabledText,\n        cursor: 'not-allowed',\n      },\n    }),\n    body: css({\n      zIndex: theme.zIndex.modal,\n      backgroundColor: theme.colors.background.elevated,\n      width: '268px',\n\n      '.react-calendar__navigation': {\n        display: 'flex',\n      },\n\n      '.react-calendar__navigation__label, .react-calendar__navigation__arrow, .react-calendar__navigation': {\n        paddingTop: '4px',\n        backgroundColor: 'inherit',\n        color: theme.colors.text.primary,\n        border: 0,\n        fontWeight: theme.typography.fontWeightMedium,\n      },\n\n      '.react-calendar__month-view__weekdays': {\n        backgroundColor: 'inherit',\n        textAlign: 'center',\n        color: theme.colors.primary.text,\n\n        abbr: {\n          border: 0,\n          textDecoration: 'none',\n          cursor: 'default',\n          display: 'block',\n          padding: '4px 0 4px 0',\n        },\n      },\n\n      '.react-calendar__month-view__days': {\n        backgroundColor: 'inherit',\n      },\n\n      '.react-calendar__tile, .react-calendar__tile--now': {\n        marginBottom: '4px',\n        backgroundColor: 'inherit',\n        height: '26px',\n      },\n\n      '.react-calendar__navigation__label, .react-calendar__navigation > button:focus, .time-picker-calendar-tile:focus':\n        {\n          outline: 0,\n        },\n\n      // The --hover modifier is active when the user is selecting a range and hovering over a tile - it shows the pending range.\n      // It is applied to all dates between the clicked date and the hovered date.\n      // The *clicked* date should have primary bg, while *pending* range dates should have hover bg.\n      '.react-calendar__tile--hover': {\n        backgroundColor: theme.colors.action.hover,\n        // eslint-disable-next-line @grafana/no-border-radius-literal\n        borderRadius: 0,\n      },\n\n      '.react-calendar__tile--hoverStart': {\n        borderTopLeftRadius: theme.shape.radius.pill,\n        borderBottomLeftRadius: theme.shape.radius.pill,\n      },\n\n      '.react-calendar__tile--hoverEnd': {\n        borderTopRightRadius: theme.shape.radius.pill,\n        borderBottomRightRadius: theme.shape.radius.pill,\n      },\n\n      // Addiitonally, when hovering a date before clicking any, it should show the hover bg.\n      '.react-calendar__tile:hover:not(.react-calendar__tile--hover):not(.react-calendar__tile--active):not(.react-calendar__tile--hasActive)':\n        {\n          backgroundColor: theme.colors.action.hover,\n          borderRadius: theme.shape.radius.pill,\n        },\n\n      // When the user is selecting a range (they've clicked one date, tiles have --hover), both --rangeStart and --rangeEnd are on the tile.\n      // The --hover classes above  handle the rounding of the tiles so they're contigious with the range\n      [`${hasActiveSelector}, .react-calendar__tile--rangeStart:not(.react-calendar__tile--hover)`]: {\n        borderTopLeftRadius: theme.shape.radius.pill,\n        borderBottomLeftRadius: theme.shape.radius.pill,\n      },\n\n      [`${hasActiveSelector}, .react-calendar__tile--rangeEnd:not(.react-calendar__tile--hover)`]: {\n        borderTopRightRadius: theme.shape.radius.pill,\n        borderBottomRightRadius: theme.shape.radius.pill,\n      },\n\n      [`${hasActiveSelector}, .react-calendar__tile--active, .react-calendar__tile--rangeEnd, .react-calendar__tile--rangeStart`]:\n        {\n          color: theme.colors.accent.contrastText,\n          fontWeight: theme.typography.fontWeightMedium,\n          background: theme.colors.accent.main,\n          border: '0px',\n        },\n    }),\n  };\n};\n"],"names":["useStyles2","getWeekStart","jsx","Calendar","Icon","t","adjustDateForReactCalendar","useCallback","dateTimeParse","css"],"mappings":"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"}