@chayns-components/devalue-slider/lib/esm/components/DevalueSlider.js

A slider to devalue something.

import React, { useCallback, useEffect, useRef, useState } from 'react';
import Slider from './slider/Slider';
import Timer from './timer/Timer';
import { TextstringProvider } from '@chayns-components/textstring';
const DevalueSlider = ({
  backgroundColor = 'red',
  devalueBackgroundColor = 'green',
  devalueTime,
  isDisabled,
  label,
  onDevalue,
  onChange,
  onComplete
}) => {
  const [timerDevalueTime, setTimerDevalueTime] = useState(devalueTime);
  const sliderRef = useRef(null);
  useEffect(() => {
    setTimerDevalueTime(devalueTime);
  }, [devalueTime]);
  const handleCompleted = useCallback(() => {
    setTimerDevalueTime(new Date());
    onComplete?.();
  }, [onComplete]);
  useEffect(() => {
    if (isDisabled) {
      sliderRef.current?.disable();
      return;
    }
    sliderRef.current?.enable();
  }, [isDisabled]);
  if (timerDevalueTime) {
    return /*#__PURE__*/React.createElement(TextstringProvider, {
      libraryName: "@chayns-component-devalue-slider"
    }, /*#__PURE__*/React.createElement(Timer, {
      color: devalueBackgroundColor,
      devalueTime: timerDevalueTime
    }));
  }
  return /*#__PURE__*/React.createElement(TextstringProvider, {
    libraryName: "@chayns-component-devalue-slider"
  }, /*#__PURE__*/React.createElement(Slider, {
    ref: sliderRef,
    onDevalue: onDevalue,
    color: backgroundColor,
    devalueColor: devalueBackgroundColor,
    onComplete: handleCompleted,
    onChange: onChange,
    trackText: label
  }));
};
export default DevalueSlider;
//# sourceMappingURL=DevalueSlider.js.map