@grafana/ui/dist/cjs/components/Slider/Slider.cjs.map

Grafana Components Library

{"version":3,"file":"Slider.cjs","sources":["../../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import { cx } from '@emotion/css';\nimport { Global } from '@emotion/react';\nimport SliderComponent from '@rc-component/slider';\nimport { useState, useCallback, type ChangeEvent, type FocusEvent, useEffect } from 'react';\nimport { usePrevious } from 'react-use';\n\nimport { t } from '@grafana/i18n';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { Input } from '../Input/Input';\n\nimport { getStyles } from './styles';\nimport { type SliderProps } from './types';\n\nfunction stripAndParseNumber(raw: string): number {\n  const str = raw.replace(/^0+/, '');\n  let decimal = false;\n  let numericBody = '';\n  for (let i = 0; i < str.length; i += 1) {\n    const char = str.charAt(i);\n\n    // take digits\n    if (/\\d/.test(char)) {\n      numericBody += char;\n    }\n    // take the first period\n    if (char === '.' && !decimal) {\n      decimal = true;\n      numericBody += '.';\n    }\n    // take only a leading negative sign\n    if (char === '-' && numericBody.length === 0) {\n      numericBody = '-';\n    }\n\n    // anything else is thrown away\n  }\n  const value = Number(numericBody);\n  return value;\n}\n\n// gets rid of pesky things like 1.20000000000000002 and such, since this needs to be printed\n// nicely for people.\nfunction roundFloatingPointError(n: number) {\n  return parseFloat(n.toPrecision(12));\n}\n\nfunction clampToAllowedValue(min: number, max: number, step: number, n: number): number {\n  // default to min\n  if (Number.isNaN(n)) {\n    return min;\n  }\n\n  // clamp to max and min\n  if (n > max) {\n    return max;\n  }\n  if (n < min) {\n    return min;\n  }\n\n  // ensure the value is exactly one of the allowed steps\n  // find the closest step\n  const closestStep = roundFloatingPointError(Math.round((n - min) / step) * step + min);\n\n  // clamp the closest found step to min/max\n  // this should never be needed unless the step isn't divisible by max-min, but it's a\n  // quick and easy check to include.\n  return Math.min(max, Math.max(min, closestStep));\n}\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 = 1,\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\n  const [inputValue, setInputValue] = useState<string>((value ?? min).toString());\n  const numericValue = clampToAllowedValue(min, max, step, stripAndParseNumber(inputValue));\n\n  // State synchronization. This is a hack since we have to maintain our own source of truth for the text input\n  const previousValue = usePrevious(value);\n  const externalValueChanged = value !== previousValue && value !== numericValue;\n  useEffect(() => {\n    if (externalValueChanged && value !== undefined) {\n      // This only causes a re-render if the value is actually different, which should\n      // only happen if the value is externally changed\n      setInputValue(String(value));\n    }\n  }, [externalValueChanged, value]);\n\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 num = typeof v === 'number' ? v : v[0];\n      setInputValue(num.toString());\n      onChange?.(num);\n    },\n    [onChange]\n  );\n\n  const handleChangeComplete = useCallback(\n    (v: number | number[]) => {\n      const num = typeof v === 'number' ? v : v[0];\n      onAfterChange?.(num);\n    },\n    [onAfterChange]\n  );\n\n  const onTextInputChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      const raw = e.target.value;\n\n      // Update the raw input string to show what user typed, except the special case of `0-`, which\n      // should result in just `-` as a user convenience.\n      setInputValue(raw === '0-' ? '-' : raw);\n\n      // Parse and validate the number\n      const parsed = stripAndParseNumber(raw);\n      if (onChange && !Number.isNaN(parsed)) {\n        // Clamp the output value\n        onChange(clampToAllowedValue(min, max, step, parsed));\n      }\n    },\n    [onChange, min, max, step]\n  );\n\n  const onTextInputBlur = useCallback(\n    (e: FocusEvent<HTMLInputElement>) => {\n      const parsed = clampToAllowedValue(min, max, step, stripAndParseNumber(e.target.value));\n\n      // Update both numeric and string values with the clamped result\n      setInputValue(parsed.toString());\n      onChange?.(parsed);\n      onAfterChange?.(parsed);\n    },\n    [min, max, step, onChange, 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      <Global styles={styles.tooltip} />\n      <div className={cx(styles.sliderInput, ...sliderInputClassNames)}>\n        <SliderWithTooltip\n          min={min}\n          max={max}\n          step={step ?? 0.1}\n          value={numericValue}\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={inputValue}\n            onChange={onTextInputChange}\n            onBlur={onTextInputBlur}\n            min={min}\n            max={max}\n            id={inputId}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n\nSlider.displayName = 'Slider';\n"],"names":["styles","useStyles2","getStyles","SliderComponent","useState","usePrevious","useEffect","t","useCallback","jsxs","cx","jsx","Global","Input"],"mappings":"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"}