@chayns-components/devalue-slider/lib/esm/components/timer/Timer.js

A slider to devalue something.

import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { getLanguage, vibrate } from 'chayns-api';
import { Container, Time } from './Timer.styles';
import { differenceInHours, differenceInMinutes, getTimeTillNow, intervalToDuration } from '../../utils/date';
import textStrings from '../../constants/textStrings';
import { Textstring, ttsToITextString } from '@chayns-components/textstring';
const Timer = ({
  devalueTime,
  color,
  textColor = 'white'
}) => {
  const {
    active: language
  } = getLanguage();
  const refDate = useRef(new Date());
  const [distance, setDistance] = useState(intervalToDuration({
    start: devalueTime,
    end: new Date()
  }));
  const minutesShowValue = useMemo(() => Math.max(distance.minutes ?? 0, 0).toString(), [distance.minutes]);
  const secondsShowValue = useMemo(() => Math.max(distance.seconds ?? 0, 0).toString(), [distance.seconds]);
  useEffect(() => {
    refDate.current = new Date();
    const interval = setInterval(() => {
      refDate.current = new Date();
      setDistance(intervalToDuration({
        start: devalueTime,
        end: refDate.current
      }));
    }, 500);
    return () => clearInterval(interval);
  }, [devalueTime]);
  const handlePointerDownCapture = useCallback(() => {
    void vibrate({
      pattern: [50],
      iOSFeedbackVibration: 7
    });
  }, []);
  const label = useMemo(() => {
    let text = textStrings.components.timer.devalued;
    if (differenceInHours(refDate.current, devalueTime) > 0) {
      text = textStrings.components.timer.future;
    } else if (differenceInMinutes(refDate.current, devalueTime) > 0) {
      text = textStrings.components.timer.devaluedWithMinutes;
    }
    const formatTime = (date, formatString) => {
      const hours = date.getHours().toString().padStart(2, '0');
      const minutes = date.getMinutes().toString().padStart(2, '0');
      if (formatString === 'HH:mm') {
        return `${hours}:${minutes}`;
      }
      return '';
    };
    const distanceLabel = getTimeTillNow({
      date: new Date(),
      currentDate: devalueTime,
      language
    });
    return /*#__PURE__*/React.createElement(Textstring, {
      textstring: ttsToITextString(text),
      replacements: {
        '##MINUTES##': minutesShowValue,
        '##SECONDS##': secondsShowValue,
        '##TIME##': formatTime(devalueTime, 'HH:mm'),
        '##DISTANCE##': distanceLabel
      }
    });
  }, [devalueTime, minutesShowValue, secondsShowValue, language]);
  return /*#__PURE__*/React.createElement(Container, {
    $baseFontSize: 17,
    $borderSize: 2,
    $height: 50,
    $color: color,
    $textColor: textColor,
    $backgroundColor: color,
    onPointerDownCapture: handlePointerDownCapture
  }, /*#__PURE__*/React.createElement(Time, null, label));
};
export default Timer;
//# sourceMappingURL=Timer.js.map