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

Grafana Components Library

{"version":3,"file":"Slider.mjs","sources":["../../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import { cx } from '@emotion/css';\nimport { Global } from '@emotion/react';\nimport SliderComponent from 'rc-slider';\nimport { useState, useCallback, ChangeEvent, FocusEvent } from 'react';\n\nimport { t } from '@grafana/i18n';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { Input } from '../Input/Input';\n\nimport { getStyles } from './styles';\nimport { SliderProps } from './types';\n\n/**\n * @public\n *\n * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-slider--docs\n */\nexport const Slider = ({\n  min,\n  max,\n  onChange,\n  onAfterChange,\n  orientation = 'horizontal',\n  reverse,\n  step,\n  value,\n  ariaLabelForHandle,\n  marks,\n  included,\n  inputId,\n  showInput = true,\n}: SliderProps) => {\n  const isHorizontal = orientation === 'horizontal';\n  const styles = useStyles2(getStyles, isHorizontal, Boolean(marks));\n  const SliderWithTooltip = SliderComponent;\n  const [sliderValue, setSliderValue] = useState<number>(value ?? min);\n  const dragHandleAriaLabel =\n    ariaLabelForHandle ?? t('grafana-ui.slider.drag-handle-aria-label', 'Use arrow keys to change the value');\n\n  const onSliderChange = useCallback(\n    (v: number | number[]) => {\n      const value = typeof v === 'number' ? v : v[0];\n\n      setSliderValue(value);\n      onChange?.(value);\n    },\n    [setSliderValue, onChange]\n  );\n\n  const onSliderInputChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      let v = +e.target.value;\n\n      if (Number.isNaN(v)) {\n        v = 0;\n      }\n\n      setSliderValue(v);\n\n      if (onChange) {\n        onChange(v);\n      }\n\n      if (onAfterChange) {\n        onAfterChange(v);\n      }\n    },\n    [onChange, onAfterChange]\n  );\n\n  // Check for min/max on input blur so user is able to enter\n  // custom values that might seem above/below min/max on first keystroke\n  const onSliderInputBlur = useCallback(\n    (e: FocusEvent<HTMLInputElement>) => {\n      const v = +e.target.value;\n\n      if (v > max) {\n        setSliderValue(max);\n      } else if (v < min) {\n        setSliderValue(min);\n      }\n    },\n    [max, min]\n  );\n\n  const handleChangeComplete = useCallback(\n    (v: number | number[]) => {\n      const value = typeof v === 'number' ? v : v[0];\n      onAfterChange?.(value);\n    },\n    [onAfterChange]\n  );\n\n  const sliderInputClassNames = !isHorizontal ? [styles.sliderInputVertical] : [];\n  const sliderInputFieldClassNames = !isHorizontal ? [styles.sliderInputFieldVertical] : [];\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      <div className={cx(styles.sliderInput, ...sliderInputClassNames)}>\n        <SliderWithTooltip\n          min={min}\n          max={max}\n          step={step}\n          defaultValue={value}\n          value={sliderValue}\n          onChange={onSliderChange}\n          onChangeComplete={handleChangeComplete}\n          vertical={!isHorizontal}\n          reverse={reverse}\n          ariaLabelForHandle={dragHandleAriaLabel}\n          marks={marks}\n          included={included}\n        />\n\n        {showInput && (\n          <Input\n            type=\"text\"\n            width={7.5}\n            className={cx(styles.sliderInputField, ...sliderInputFieldClassNames)}\n            value={sliderValue}\n            onChange={onSliderInputChange}\n            onBlur={onSliderInputBlur}\n            min={min}\n            max={max}\n            id={inputId}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n\nSlider.displayName = 'Slider';\n"],"names":["value"],"mappings":"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"}