multi-range-timer

Multi-range timer with subscribe to events

Позволяет задать массив диапазонов работы таймера и получать события обновления оставшегося времени по каждому.

Решает бизнес-задачу: последовательное предоставление различных акционных предложений на сайте в рамках определенного периода с выводом оставшегося времени до окончания.

Установка

The package can be installed via npm:

npm install multi-range-timer --save

Использование

1. Импортируем класс MultiTimer.
2. Создаем экземпляр с указанием диапазонов.
3. Подписываемся на события.
4. Запускаем таймер.

Пример на React:

import React, { useEffect, useState } from "react";
import MultiTimer from "multi-range-timer";

const Banner = () => {
  const [timerFace, setTimerFace] = useState("");
  const [hasTimer, setHasTimer] = useState(false);
  
  useEffect(() => {
    const ranges = [
      {
        start: new Date(2022, 1, 1),
        end: new Date(2022, 1, 7)
      }, {
        start: new Date(2022, 1, 10),
        end: new Date(2022, 1, 13)
      }
    ];
    const timer = new MultiTimer(ranges);
    timer.subscribe(e => {     
      switch (e.type) {
        case "tick": 
          setTimerFace(`
            ${e.data.withCases.days} 
            ${e.data.withZero.hours}:${e.data.withZero.minutes}:${e.data.withZero.seconds}
          `);
          break;
        case "start":
          setHasTimer(true);
          break;       
        case "stop":       
          setHasTimer(false);
          break;
        default:
          break;
      }
    });

    timer.start();
    return () => timer.stop();
  }, [])
  
  return hasTimer ? timerFace : null;
}

Параметры для конструктора

Принимает массив диапазонов - объект, у которого должно быть два обязательных свойства:

Prop	Type	Description
start	Date | Number(unixtime ms)	Старт таймера
end	Date | Number(unixtime ms)	Время окончания

• Для более удобного использования можно добавить уникальный id, но это необязательно.
• Порядок неважен, так как массив будет отсортирован по возрастанию даты старта.
• Диапазоны отрабатывают по очереди.
• Если между концом последнего активного и началом следующего есть зазор во времени, отработает событие «stop» со статусом «pending».

Методы и свойства

Экземпляр класса MultiTimer содержит:

Name	Description
start	Запускает таймер и генерирует событие «start»
stop	Останавливает таймер и генерирует событие «stop»
subscribe	В качестве параметров передать функцию обработчик событий, которая будет принимать event
unsubscribe	Нужно передать тот же обработчик, что был указан для subscribe
----	----
status	Статус таймера, возможны значения «worked» - работает, «stopped» - отстановлен, «pending» - остановлен, но запустится как только текущее время будет соответствовать времени старта ближайшего диапазона
range	Активный диапазон из переданных при инициализации конструктора, у остановленного таймера не передается

События

Функция обработчик принимает один аргумент event - это объект с двумя свойствами: type и data.

Type может иметь следующие значения:

Type	Data	Description
start	State	Срабатывает сразу после запуска
stop	State	Сигнализирует об остановке таймера
tick	Time	Срабатывает каждый раз при обновлении времени (раз в секунду)

State - содержит статус таймера и активный диапазон. Time - объект, который содержит удобно представленные данные об оставшемся времени из активного диапазона.

Пример:

// State
{
  status: "worked",
  range: {
    id: 2,
    start: Date,
    end: Date
  }
}

// Time
{
  seconds: 1,
  minutes: 22,
  hours: 5,
  days: 1,
  months: 0,
  withZero: {
    seconds: "01",
    minutes: "22",
    hours: "05",
    days: "01",
    months: "00"
  },
  withCases: {
    seconds: "1 секунда",
    minutes: "22 минуты",
    hours: "5 часов",
    days: "1 день",
    months: "0 месяцев"
  }
}

License

The MIT License.