@grafana/ui/dist/esm/components/DateTimePickers/TimeRangePicker/TimeRangeList.mjs.map

Grafana Components Library

{"version":3,"file":"TimeRangeList.mjs","sources":["../../../../../src/components/DateTimePickers/TimeRangePicker/TimeRangeList.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { useRef, ReactNode } from 'react';\n\nimport { GrafanaTheme2, TimeOption } from '@grafana/data';\nimport { t } from '@grafana/i18n';\n\nimport { useStyles2 } from '../../../themes/ThemeContext';\n\nimport { TimePickerTitle } from './TimePickerTitle';\nimport { TimeRangeOption } from './TimeRangeOption';\nimport { useListFocus } from './hooks';\n\ninterface Props {\n  title?: string;\n  options: TimeOption[];\n  value?: TimeOption;\n  onChange: (option: TimeOption) => void;\n  placeholderEmpty?: ReactNode;\n}\n\nexport const TimeRangeList = (props: Props) => {\n  const styles = useStyles2(getStyles);\n  const { title, options, placeholderEmpty } = props;\n\n  if (typeof placeholderEmpty !== 'undefined' && options.length <= 0) {\n    return <>{placeholderEmpty}</>;\n  }\n\n  if (!title) {\n    return <Options {...props} />;\n  }\n\n  return (\n    <section aria-label={title}>\n      <fieldset>\n        <div className={styles.title}>\n          <TimePickerTitle>{title}</TimePickerTitle>\n        </div>\n        <Options {...props} />\n      </fieldset>\n    </section>\n  );\n};\n\nconst Options = ({ options, value, onChange, title }: Props) => {\n  const styles = useStyles2(getOptionsStyles);\n\n  const localRef = useRef<HTMLUListElement>(null);\n  const [handleKeys] = useListFocus({ localRef, options });\n\n  return (\n    <>\n      <ul\n        role=\"presentation\"\n        onKeyDown={handleKeys}\n        ref={localRef}\n        aria-roledescription={t('time-picker.time-range.aria-role', 'Time range selection')}\n        className={styles.list}\n      >\n        {options.map((option, index) => (\n          <TimeRangeOption\n            key={keyForOption(option, index)}\n            value={option}\n            selected={isEqual(option, value)}\n            onSelect={onChange}\n            name={title ?? t('time-picker.time-range.default-title', 'Time ranges')}\n          />\n        ))}\n      </ul>\n    </>\n  );\n};\n\nfunction keyForOption(option: TimeOption, index: number): string {\n  return `${option.from}-${option.to}-${index}`;\n}\n\nfunction isEqual(x: TimeOption, y?: TimeOption): boolean {\n  if (!y || !x) {\n    return false;\n  }\n  return y.from === x.from && y.to === x.to;\n}\n\nconst getStyles = () => ({\n  title: css({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    padding: '8px 16px 5px 9px',\n  }),\n});\n\nconst getOptionsStyles = (theme: GrafanaTheme2) => ({\n  list: css({\n    padding: theme.spacing(0.5),\n  }),\n});\n"],"names":[],"mappings":"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"}