@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';
const DevalueSlider = _ref => {
  let {
    backgroundColor = 'red',
    devalueBackgroundColor = 'green',
    devalueTime,
    isDisabled,
    label = 'EINLÖSEN',
    onDevalue,
    onChange,
    onComplete
  } = _ref;
  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(Timer, {
      color: devalueBackgroundColor,
      devalueTime: timerDevalueTime
    });
  }
  return /*#__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