multi-range-timer v1.0.2
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.