@grafana/ui/dist/esm/components/Slider/RangeSlider.mjs.map

Grafana Components Library

{"version":3,"file":"RangeSlider.mjs","sources":["../../../../src/components/Slider/RangeSlider.tsx"],"sourcesContent":["import { cx } from '@emotion/css';\nimport { Global } from '@emotion/react';\nimport Slider, { SliderProps } from 'rc-slider';\nimport { useCallback } from 'react';\n\nimport { t } from '@grafana/i18n';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\n\nimport HandleTooltip from './HandleTooltip';\nimport { getStyles } from './styles';\nimport { RangeSliderProps } from './types';\n\n/**\n * @public\n *\n * RichHistoryQueriesTab uses this Range Component\n *\n * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-rangeslider--docs\n */\nexport const RangeSlider = ({\n  min,\n  max,\n  onChange,\n  onAfterChange,\n  orientation = 'horizontal',\n  reverse,\n  step,\n  formatTooltipResult,\n  value,\n  tooltipAlwaysVisible = true,\n}: RangeSliderProps) => {\n  const handleChange = useCallback(\n    (v: number | number[]) => {\n      const value = typeof v === 'number' ? [v, v] : v;\n      onChange?.(value);\n    },\n    [onChange]\n  );\n\n  const handleChangeComplete = useCallback(\n    (v: number | number[]) => {\n      const value = typeof v === 'number' ? [v, v] : v;\n      onAfterChange?.(value);\n    },\n    [onAfterChange]\n  );\n\n  const isHorizontal = orientation === 'horizontal';\n  const styles = useStyles2(getStyles, isHorizontal);\n  const dragHandleAriaLabel = t('grafana-ui.range-slider.drag-handle-aria-label', 'Use arrow keys to change the value');\n\n  const tipHandleRender: SliderProps['handleRender'] = (node, handleProps) => {\n    return (\n      <HandleTooltip\n        value={handleProps.value}\n        visible={tooltipAlwaysVisible || handleProps.dragging}\n        tipFormatter={formatTooltipResult ? () => formatTooltipResult(handleProps.value) : undefined}\n        placement={isHorizontal ? 'top' : 'right'}\n      >\n        {node}\n      </HandleTooltip>\n    );\n  };\n\n  return (\n    <div className={cx(styles.container, styles.slider)}>\n      {/** Slider tooltip's parent component is body and therefore we need Global component to do css overrides for it. */}\n      <Global styles={styles.tooltip} />\n      <Slider\n        min={min}\n        max={max}\n        step={step}\n        defaultValue={value}\n        range={true}\n        onChange={handleChange}\n        onChangeComplete={handleChangeComplete}\n        vertical={!isHorizontal}\n        reverse={reverse}\n        handleRender={tipHandleRender}\n        ariaLabelForHandle={dragHandleAriaLabel}\n      />\n    </div>\n  );\n};\n\nRangeSlider.displayName = 'RangeSlider';\n"],"names":["value","Slider"],"mappings":";;;;;;;;;;;AAoBO,MAAM,cAAc,CAAC;AAAA,EAC1B,GAAA;AAAA,EACA,GAAA;AAAA,EACA,QAAA;AAAA,EACA,aAAA;AAAA,EACA,WAAA,GAAc,YAAA;AAAA,EACd,OAAA;AAAA,EACA,IAAA;AAAA,EACA,mBAAA;AAAA,EACA,KAAA;AAAA,EACA,oBAAA,GAAuB;AACzB,CAAA,KAAwB;AACtB,EAAA,MAAM,YAAA,GAAe,WAAA;AAAA,IACnB,CAAC,CAAA,KAAyB;AACxB,MAAA,MAAMA,SAAQ,OAAO,CAAA,KAAM,WAAW,CAAC,CAAA,EAAG,CAAC,CAAA,GAAI,CAAA;AAC/C,MAAA,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAWA,MAAAA,CAAAA;AAAA,IACb,CAAA;AAAA,IACA,CAAC,QAAQ;AAAA,GACX;AAEA,EAAA,MAAM,oBAAA,GAAuB,WAAA;AAAA,IAC3B,CAAC,CAAA,KAAyB;AACxB,MAAA,MAAMA,SAAQ,OAAO,CAAA,KAAM,WAAW,CAAC,CAAA,EAAG,CAAC,CAAA,GAAI,CAAA;AAC/C,MAAA,aAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,aAAA,CAAgBA,MAAAA,CAAAA;AAAA,IAClB,CAAA;AAAA,IACA,CAAC,aAAa;AAAA,GAChB;AAEA,EAAA,MAAM,eAAe,WAAA,KAAgB,YAAA;AACrC,EAAA,MAAM,MAAA,GAAS,UAAA,CAAW,SAAA,EAAW,YAAY,CAAA;AACjD,EAAA,MAAM,mBAAA,GAAsB,CAAA,CAAE,gDAAA,EAAkD,oCAAoC,CAAA;AAEpH,EAAA,MAAM,eAAA,GAA+C,CAAC,IAAA,EAAM,WAAA,KAAgB;AAC1E,IAAA,uBACE,GAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACC,OAAO,WAAA,CAAY,KAAA;AAAA,QACnB,OAAA,EAAS,wBAAwB,WAAA,CAAY,QAAA;AAAA,QAC7C,cAAc,mBAAA,GAAsB,MAAM,mBAAA,CAAoB,WAAA,CAAY,KAAK,CAAA,GAAI,KAAA,CAAA;AAAA,QACnF,SAAA,EAAW,eAAe,KAAA,GAAQ,OAAA;AAAA,QAEjC,QAAA,EAAA;AAAA;AAAA,KACH;AAAA,EAEJ,CAAA;AAEA,EAAA,uBACE,IAAA,CAAC,SAAI,SAAA,EAAW,EAAA,CAAG,OAAO,SAAA,EAAW,MAAA,CAAO,MAAM,CAAA,EAEhD,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,MAAA,EAAA,EAAO,MAAA,EAAQ,MAAA,CAAO,OAAA,EAAS,CAAA;AAAA,oBAChC,GAAA;AAAA,MAACC,eAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,GAAA;AAAA,QACA,IAAA;AAAA,QACA,YAAA,EAAc,KAAA;AAAA,QACd,KAAA,EAAO,IAAA;AAAA,QACP,QAAA,EAAU,YAAA;AAAA,QACV,gBAAA,EAAkB,oBAAA;AAAA,QAClB,UAAU,CAAC,YAAA;AAAA,QACX,OAAA;AAAA,QACA,YAAA,EAAc,eAAA;AAAA,QACd,kBAAA,EAAoB;AAAA;AAAA;AACtB,GAAA,EACF,CAAA;AAEJ;AAEA,WAAA,CAAY,WAAA,GAAc,aAAA;;;;"}