@grafana/ui/dist/esm/components/DateTimePickers/TimeRangeInput.mjs.map

Grafana Components Library

{"version":3,"file":"TimeRangeInput.mjs","sources":["../../../../src/components/DateTimePickers/TimeRangeInput.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { useDismiss, useFloating, useInteractions } from '@floating-ui/react';\nimport { FocusScope } from '@react-aria/focus';\nimport { FormEvent, MouseEvent, useState } from 'react';\n\nimport { dateTime, getDefaultTimeRange, GrafanaTheme2, TimeRange, TimeZone } from '@grafana/data';\nimport { selectors } from '@grafana/e2e-selectors';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { Icon } from '../Icon/Icon';\nimport { getInputStyles } from '../Input/Input';\n\nimport { TimePickerContent } from './TimeRangePicker/TimePickerContent';\nimport { TimeRangeLabel } from './TimeRangePicker/TimeRangeLabel';\nimport { WeekStart } from './WeekStartPicker';\nimport { getQuickOptions } from './options';\nimport { isValidTimeRange } from './utils';\n\nexport interface TimeRangeInputProps {\n  value: TimeRange;\n  timeZone?: TimeZone;\n  onChange: (timeRange: TimeRange) => void;\n  onChangeTimeZone?: (timeZone: TimeZone) => void;\n  hideTimeZone?: boolean;\n  placeholder?: string;\n  clearable?: boolean;\n  /** Controls horizontal alignment of the picker menu */\n  isReversed?: boolean;\n  /** Controls visibility of the preset time ranges (e.g. **Last 5 minutes**) in the picker menu */\n  hideQuickRanges?: boolean;\n  disabled?: boolean;\n  showIcon?: boolean;\n  /** Which day of the week the calendar should start on. Possible values: \"saturday\", \"sunday\" or \"monday\" */\n  weekStart?: WeekStart;\n}\n\nconst noop = () => {};\n\n/**\n * A variant of TimeRangePicker for use in forms.\n *\n * https://developers.grafana.com/ui/latest/index.html?path=/docs/date-time-pickers-timerangeinput--docs\n */\nexport const TimeRangeInput = ({\n  value,\n  onChange,\n  onChangeTimeZone = noop,\n  clearable,\n  weekStart,\n  hideTimeZone = true,\n  timeZone = 'browser',\n  placeholder = 'Select time range',\n  isReversed = true,\n  hideQuickRanges = false,\n  disabled = false,\n  showIcon = false,\n}: TimeRangeInputProps) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const styles = useStyles2(getStyles, disabled);\n\n  const onOpen = (event: FormEvent<HTMLButtonElement>) => {\n    event.stopPropagation();\n    event.preventDefault();\n    if (disabled) {\n      return;\n    }\n    setIsOpen(!isOpen);\n  };\n\n  const onClose = () => {\n    setIsOpen(false);\n  };\n\n  const onRangeChange = (timeRange: TimeRange) => {\n    onClose();\n    onChange(timeRange);\n  };\n\n  const onRangeClear = (event: MouseEvent<SVGElement>) => {\n    event.stopPropagation();\n    const from = dateTime(null);\n    const to = dateTime(null);\n    onChange({ from, to, raw: { from, to } });\n  };\n\n  const { refs, floatingStyles, context } = useFloating({\n    open: isOpen,\n    onOpenChange: setIsOpen,\n    placement: 'bottom-start',\n    strategy: 'fixed',\n  });\n\n  const dismiss = useDismiss(context, {\n    bubbles: {\n      outsidePress: false,\n    },\n  });\n\n  const { getReferenceProps, getFloatingProps } = useInteractions([dismiss]);\n\n  return (\n    <div className={styles.container}>\n      <button\n        type=\"button\"\n        className={styles.pickerInput}\n        data-testid={selectors.components.TimePicker.openButton}\n        onClick={onOpen}\n        ref={refs.setReference}\n        {...getReferenceProps()}\n      >\n        {showIcon && <Icon name=\"clock-nine\" size={'sm'} className={styles.icon} />}\n\n        <TimeRangeLabel value={value} timeZone={timeZone} placeholder={placeholder} />\n\n        {!disabled && (\n          <span className={styles.caretIcon}>\n            {isValidTimeRange(value) && clearable && (\n              <Icon className={styles.clearIcon} name=\"times\" size=\"lg\" onClick={onRangeClear} />\n            )}\n            <Icon name={isOpen ? 'angle-up' : 'angle-down'} size=\"lg\" />\n          </span>\n        )}\n      </button>\n      {isOpen && (\n        <FocusScope contain autoFocus restoreFocus>\n          <section className={styles.content} ref={refs.setFloating} style={floatingStyles} {...getFloatingProps()}>\n            <TimePickerContent\n              timeZone={timeZone}\n              value={isValidTimeRange(value) ? value : getDefaultTimeRange()}\n              onChange={onRangeChange}\n              quickOptions={getQuickOptions()}\n              onChangeTimeZone={onChangeTimeZone}\n              className={styles.content}\n              hideTimeZone={hideTimeZone}\n              isReversed={isReversed}\n              hideQuickRanges={hideQuickRanges}\n              weekStart={weekStart}\n            />\n          </section>\n        </FocusScope>\n      )}\n    </div>\n  );\n};\n\nconst getStyles = (theme: GrafanaTheme2, disabled = false) => {\n  const inputStyles = getInputStyles({ theme, invalid: false });\n  return {\n    container: css({\n      display: 'flex',\n      position: 'relative',\n    }),\n    content: css({\n      marginLeft: 0,\n      position: 'absolute',\n      top: '116%',\n      zIndex: theme.zIndex.modal,\n    }),\n    pickerInput: cx(\n      inputStyles.input,\n      disabled && inputStyles.inputDisabled,\n      inputStyles.wrapper,\n      css({\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'space-between',\n        cursor: 'pointer',\n        paddingRight: 0,\n        lineHeight: `${theme.spacing.gridSize * 4 - 2}px`,\n      })\n    ),\n    caretIcon: cx(\n      inputStyles.suffix,\n      css({\n        position: 'relative',\n        top: '-1px',\n        marginLeft: theme.spacing(0.5),\n      })\n    ),\n    clearIcon: css({\n      marginRight: theme.spacing(0.5),\n      '&:hover': {\n        color: theme.colors.text.maxContrast,\n      },\n    }),\n    placeholder: css({\n      color: theme.colors.text.disabled,\n      opacity: 1,\n    }),\n    icon: css({\n      marginRight: theme.spacing(0.5),\n    }),\n  };\n};\n"],"names":[],"mappings":"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"}