@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 { quickOptions } 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\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={quickOptions}\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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"}