{"ast":null,"code":"var __jsx = React.createElement;\nimport React, { useCallback, useEffect, useState } from 'react';\nimport { em, textLightColor } from '~/utils/style';\nimport RangeSlider from '~/components/RangeSlider';\nimport styled from 'styled-components';\nimport { useTranslation } from '~/utils/i18n';\nvar Label = styled.div.withConfig({\n  displayName: \"StepSlider__Label\",\n  componentId: \"u5jksn-0\"\n})([\"color:\", \";font-size:\", \";margin-bottom:\", \";\"], textLightColor, em(12), em(5));\nvar FullWidthRangeSlider = styled(RangeSlider).withConfig({\n  displayName: \"StepSlider__FullWidthRangeSlider\",\n  componentId: \"u5jksn-1\"\n})([\"width:100%;\"]);\n\nvar StepSlider = function StepSlider(_ref) {\n  var _steps$step;\n\n  var onChange = _ref.onChange,\n      onChangeComplete = _ref.onChangeComplete,\n      value = _ref.value,\n      steps = _ref.steps;\n\n  var _useTranslation = useTranslation('samples'),\n      t = _useTranslation.t;\n\n  var _useState = useState(value),\n      step = _useState[0],\n      setStep = _useState[1];\n\n  useEffect(function () {\n    return setStep(value);\n  }, [value]);\n  var changeStep = useCallback(function (num) {\n    setStep(num);\n    onChange === null || onChange === void 0 ? void 0 : onChange(num);\n  }, [onChange]);\n  return __jsx(React.Fragment, null, __jsx(Label, null, \"\".concat(t('step'), \": \").concat((_steps$step = steps[step]) !== null && _steps$step !== void 0 ? _steps$step : '...')), __jsx(FullWidthRangeSlider, {\n    min: 0,\n    max: steps.length ? steps.length - 1 : 0,\n    step: 1,\n    value: step,\n    onChange: changeStep,\n    onChangeComplete: onChangeComplete\n  }));\n};\n\nexport default StepSlider;","map":null,"metadata":{},"sourceType":"module"}