mimir-ui-kit 1.8.1 → 1.9.0

package/dist/assets/Timer.css

@@ -0,0 +1 @@
+._timer_llwad_3{color:var(--black-60);font-size:var(--size-text-l)}@media (max-width: 600px){._timer_llwad_3{font-size:var(--size-text-m)}}

package/dist/components/Timer/Timer.d.ts

@@ -0,0 +1,24 @@
+type TProps = {
+    /**
+     *  число, которое представляет собой временную метку, указывающую время, когда истекает таймер.
+     * const timer = new Date().getTime() + 60000; => таймер на 1 минуту
+     */
+    expiryTimestamp: number;
+    /**
+     * необязательное свойство типа boolean, которое указывает, должен ли таймер начинаться автоматически при создании компонента.
+     */
+    autoStart?: boolean;
+    /**
+     * необязательная функция, которая вызывается, когда таймер истекает.
+     */
+    onTimerEnd?: () => void;
+    /**
+     * Дополнительный класс.
+     */
+    className?: string;
+};
+/**
+ *  Компонент Timer отображает таймер с отсчетом времени в минутах и секундах.
+ */
+export declare const Timer: ({ expiryTimestamp, autoStart, onTimerEnd, className }: TProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Timer/Timer.js

@@ -0,0 +1,29 @@
+import { jsxs } from "react/jsx-runtime";
+import { c as classNames } from "../../index-CweZ_OcN.js";
+import { useTimer } from "../../hooks/useTimer/index.js";
+import '../../assets/Timer.css';const timer = "_timer_llwad_3";
+const cls = {
+  timer
+};
+const Timer = ({
+  expiryTimestamp,
+  autoStart = false,
+  onTimerEnd,
+  className
+}) => {
+  const { minutes, seconds } = useTimer({
+    expiryTimestamp,
+    onExpire: onTimerEnd,
+    autoStart
+  });
+  const formattedMinutes = String(minutes).padStart(2, "0");
+  const formattedSeconds = String(seconds).padStart(2, "0");
+  return /* @__PURE__ */ jsxs("div", { className: classNames(cls.timer, className), children: [
+    formattedMinutes,
+    ":",
+    formattedSeconds
+  ] });
+};
+export {
+  Timer
+};

package/dist/components/Timer/index.d.ts

@@ -0,0 +1 @@
+export { Timer } from './Timer';

package/dist/components/Timer/index.js

@@ -0,0 +1,4 @@
+import { Timer } from "./Timer.js";
+export {
+  Timer
+};

package/dist/components/index.d.ts

@@ -23,3 +23,4 @@ export { SelectSearch, ESelectSearchSize } from './SelectSearch';
 export type { TSelectSearchItem, TSelectSearchProps } from './SelectSearch';
 export { Switch } from './Switch';
 export type { TSwitchProps } from './Switch';
+export { Timer } from './Timer';

package/dist/components/index.js

@@ -22,6 +22,7 @@ import { EVoteSize } from "./Vote/constants.js";
 import { SelectSearch } from "./SelectSearch/SelectSearch.js";
 import { ESelectSearchSize } from "./SelectSearch/constants.js";
 import { Switch } from "./Switch/Switch.js";
+import { Timer } from "./Timer/Timer.js";
 export {
   Button,
   DatePicker,
@@ -51,6 +52,7 @@ export {
   Slider,
   Steps,
   Switch,
+  Timer,
   Vote,
   getMaskedInputPhoneValue,
   getUnmaskedInputValue

package/dist/hooks/index.d.ts

@@ -1,2 +1,4 @@
 export { useMediaQuery, EMediaQuery } from './useMediaQuery';
 export { useLockBodyScroll } from './useLockBodyScroll';
+export { useInterval } from './useInterval';
+export { useTimer } from './useTimer';

package/dist/hooks/index.js

@@ -1,8 +1,12 @@
 import { useMediaQuery } from "./useMediaQuery/useMediaQuery.js";
 import { EMediaQuery } from "./useMediaQuery/constants.js";
 import { useLockBodyScroll } from "./useLockBodyScroll/useLockBodyScroll.js";
+import { useInterval } from "./useInterval/useInterval.js";
+import { useTimer } from "./useTimer/index.js";
 export {
   EMediaQuery,
+  useInterval,
   useLockBodyScroll,
-  useMediaQuery
+  useMediaQuery,
+  useTimer
 };

package/dist/hooks/useInterval/index.d.ts

@@ -0,0 +1 @@
+export { useInterval } from './useInterval';

package/dist/hooks/useInterval/index.js

@@ -0,0 +1,4 @@
+import { useInterval } from "./useInterval.js";
+export {
+  useInterval
+};

package/dist/hooks/useInterval/useInterval.d.ts

@@ -0,0 +1 @@
+export declare function useInterval(callback: VoidFunction, delay: number | null): void;

package/dist/hooks/useInterval/useInterval.js

@@ -0,0 +1,17 @@
+import { useRef, useEffect } from "react";
+function useInterval(callback, delay) {
+  const callbackRef = useRef();
+  callbackRef.current = callback;
+  useEffect(() => {
+    if (!delay) {
+      return;
+    }
+    const interval = setInterval(() => {
+      callbackRef.current && callbackRef.current();
+    }, delay);
+    return () => clearInterval(interval);
+  }, [delay]);
+}
+export {
+  useInterval
+};

package/dist/hooks/useTimer/index.d.ts

@@ -0,0 +1,18 @@
+export type TUserTimer = ReturnType<typeof useTimer>;
+export type TUseTimerProps = {
+    expiryTimestamp?: number;
+    onExpire?: VoidFunction;
+    autoStart?: boolean;
+};
+export declare function useTimer({ expiryTimestamp: expiry, onExpire, autoStart }: TUseTimerProps): {
+    start: () => void;
+    pause: () => void;
+    resume: () => void;
+    restart: (newExpiryTimestamp: number, newAutoStart?: boolean) => void;
+    isRunning: boolean;
+    totalSeconds: number;
+    days: number;
+    hours: number;
+    minutes: number;
+    seconds: number;
+};

package/dist/hooks/useTimer/index.js

@@ -0,0 +1,83 @@
+import { useState, useCallback } from "react";
+import { Time, Validate } from "./utils.js";
+import { useInterval } from "../useInterval/useInterval.js";
+const DEFAULT_DELAY = 1e3;
+function getDelayFromExpiryTimestamp(expiryTimestamp) {
+  if (!Validate.expiryTimestamp(expiryTimestamp)) {
+    return null;
+  }
+  const seconds = Time.getSecondsFromExpiry(expiryTimestamp);
+  const extraMilliSeconds = Math.floor((seconds - Math.floor(seconds)) * 1e3);
+  return extraMilliSeconds > 0 ? extraMilliSeconds : DEFAULT_DELAY;
+}
+function useTimer({
+  expiryTimestamp: expiry,
+  onExpire,
+  autoStart = false
+}) {
+  const [expiryTimestamp, setExpiryTimestamp] = useState(expiry);
+  const [seconds, setSeconds] = useState(
+    Time.getSecondsFromExpiry(expiry ?? 0)
+  );
+  const [isRunning, setIsRunning] = useState(autoStart);
+  const [didStart, setDidStart] = useState(autoStart);
+  const [delay, setDelay] = useState(getDelayFromExpiryTimestamp(expiry ?? 0));
+  const handleExpire = useCallback(() => {
+    Validate.onExpire(onExpire) && (onExpire == null ? void 0 : onExpire());
+    setIsRunning(false);
+    setDelay(null);
+  }, [onExpire]);
+  const pause = useCallback(() => {
+    setIsRunning(false);
+  }, []);
+  const restart = useCallback(
+    (newExpiryTimestamp, newAutoStart = true) => {
+      setDelay(getDelayFromExpiryTimestamp(newExpiryTimestamp));
+      setDidStart(newAutoStart);
+      setIsRunning(newAutoStart);
+      setExpiryTimestamp(newExpiryTimestamp);
+      setSeconds(Time.getSecondsFromExpiry(newExpiryTimestamp));
+    },
+    []
+  );
+  const resume = useCallback(() => {
+    const time = /* @__PURE__ */ new Date();
+    time.setMilliseconds(time.getMilliseconds() + seconds * 1e3);
+    restart(time.getTime(), true);
+  }, [seconds, restart]);
+  const start = useCallback(() => {
+    if (didStart) {
+      setSeconds(Time.getSecondsFromExpiry(expiryTimestamp ?? 0, false));
+      setIsRunning(true);
+    } else {
+      resume();
+    }
+  }, [expiryTimestamp, didStart, resume]);
+  useInterval(
+    () => {
+      if (delay !== DEFAULT_DELAY) {
+        setDelay(DEFAULT_DELAY);
+      }
+      const secondsValue = Time.getSecondsFromExpiry(
+        expiryTimestamp ?? 0,
+        false
+      );
+      setSeconds(secondsValue);
+      if (secondsValue <= 0) {
+        handleExpire();
+      }
+    },
+    isRunning ? delay : null
+  );
+  return {
+    ...Time.getTimeFromSeconds(seconds),
+    start,
+    pause,
+    resume,
+    restart,
+    isRunning
+  };
+}
+export {
+  useTimer
+};

package/dist/hooks/useTimer/useTimer.d.ts

@@ -0,0 +1,18 @@
+export type TUserTimer = ReturnType<typeof useTimer>;
+export type TUseTimerProps = {
+    expiryTimestamp?: number;
+    onExpire?: VoidFunction;
+    autoStart?: boolean;
+};
+export declare function useTimer({ expiryTimestamp: expiry, onExpire, autoStart }: TUseTimerProps): {
+    start: () => void;
+    pause: () => void;
+    resume: () => void;
+    restart: (newExpiryTimestamp: number, newAutoStart?: boolean) => void;
+    isRunning: boolean;
+    totalSeconds: number;
+    days: number;
+    hours: number;
+    minutes: number;
+    seconds: number;
+};

package/dist/hooks/useTimer/useTimer.js

@@ -0,0 +1,83 @@
+import { useState, useCallback } from "react";
+import { Time, Validate } from "./utils.js";
+import { useInterval } from "../useInterval/useInterval.js";
+const DEFAULT_DELAY = 1e3;
+function getDelayFromExpiryTimestamp(expiryTimestamp) {
+  if (!Validate.expiryTimestamp(expiryTimestamp)) {
+    return null;
+  }
+  const seconds = Time.getSecondsFromExpiry(expiryTimestamp);
+  const extraMilliSeconds = Math.floor((seconds - Math.floor(seconds)) * 1e3);
+  return extraMilliSeconds > 0 ? extraMilliSeconds : DEFAULT_DELAY;
+}
+function useTimer({
+  expiryTimestamp: expiry,
+  onExpire,
+  autoStart = true
+}) {
+  const [expiryTimestamp, setExpiryTimestamp] = useState(expiry);
+  const [seconds, setSeconds] = useState(
+    Time.getSecondsFromExpiry(expiry ?? 0)
+  );
+  const [isRunning, setIsRunning] = useState(autoStart);
+  const [didStart, setDidStart] = useState(autoStart);
+  const [delay, setDelay] = useState(getDelayFromExpiryTimestamp(expiry ?? 0));
+  const handleExpire = useCallback(() => {
+    Validate.onExpire(onExpire) && (onExpire == null ? void 0 : onExpire());
+    setIsRunning(false);
+    setDelay(null);
+  }, [onExpire]);
+  const pause = useCallback(() => {
+    setIsRunning(false);
+  }, []);
+  const restart = useCallback(
+    (newExpiryTimestamp, newAutoStart = true) => {
+      setDelay(getDelayFromExpiryTimestamp(newExpiryTimestamp));
+      setDidStart(newAutoStart);
+      setIsRunning(newAutoStart);
+      setExpiryTimestamp(newExpiryTimestamp);
+      setSeconds(Time.getSecondsFromExpiry(newExpiryTimestamp));
+    },
+    []
+  );
+  const resume = useCallback(() => {
+    const time = /* @__PURE__ */ new Date();
+    time.setMilliseconds(time.getMilliseconds() + seconds * 1e3);
+    restart(time.getTime(), true);
+  }, [seconds, restart]);
+  const start = useCallback(() => {
+    if (didStart) {
+      setSeconds(Time.getSecondsFromExpiry(expiryTimestamp ?? 0, false));
+      setIsRunning(true);
+    } else {
+      resume();
+    }
+  }, [expiryTimestamp, didStart, resume]);
+  useInterval(
+    () => {
+      if (delay !== DEFAULT_DELAY) {
+        setDelay(DEFAULT_DELAY);
+      }
+      const secondsValue = Time.getSecondsFromExpiry(
+        expiryTimestamp ?? 0,
+        false
+      );
+      setSeconds(secondsValue);
+      if (secondsValue <= 0) {
+        handleExpire();
+      }
+    },
+    isRunning ? delay : null
+  );
+  return {
+    ...Time.getTimeFromSeconds(seconds),
+    start,
+    pause,
+    resume,
+    restart,
+    isRunning
+  };
+}
+export {
+  useTimer
+};

package/dist/hooks/useTimer/utils.d.ts

@@ -0,0 +1,20 @@
+type TTimeObject = {
+    totalSeconds: number;
+    days: number;
+    hours: number;
+    minutes: number;
+    seconds: number;
+};
+type TFormattedTime = Omit<TTimeObject, 'totalSeconds' | 'days'>;
+export declare class Time {
+    static getTimeFromSeconds(secs: number): TTimeObject;
+    static getSecondsFromExpiry(expiry: number, shouldRound?: boolean): number;
+    static getSecondsFromPrevTime(prevTime: number, shouldRound: boolean): number;
+    static getSecondsFromTimeNow(): number;
+    static getFormattedTimeFromSeconds(totalSeconds: number): TFormattedTime;
+}
+export declare class Validate {
+    static expiryTimestamp(expiryTimestamp: number): boolean;
+    static onExpire(onExpire?: VoidFunction | null): boolean | null | undefined;
+}
+export {};

package/dist/hooks/useTimer/utils.js

@@ -0,0 +1,78 @@
+class Time {
+  static getTimeFromSeconds(secs) {
+    const totalSeconds = Math.ceil(secs);
+    const days = Math.floor(totalSeconds / (60 * 60 * 24));
+    const hours = Math.floor(totalSeconds % (60 * 60 * 24) / (60 * 60));
+    const minutes = Math.floor(totalSeconds % (60 * 60) / 60);
+    const seconds = Math.floor(totalSeconds % 60);
+    return {
+      totalSeconds,
+      seconds,
+      minutes,
+      hours,
+      days
+    };
+  }
+  static getSecondsFromExpiry(expiry, shouldRound) {
+    const now = (/* @__PURE__ */ new Date()).getTime();
+    const milliSecondsDistance = expiry - now;
+    if (milliSecondsDistance > 0) {
+      const val = milliSecondsDistance / 1e3;
+      return shouldRound ? Math.round(val) : val;
+    }
+    return 0;
+  }
+  static getSecondsFromPrevTime(prevTime, shouldRound) {
+    const now = (/* @__PURE__ */ new Date()).getTime();
+    const milliSecondsDistance = now - prevTime;
+    if (milliSecondsDistance > 0) {
+      const val = milliSecondsDistance / 1e3;
+      return shouldRound ? Math.round(val) : val;
+    }
+    return 0;
+  }
+  static getSecondsFromTimeNow() {
+    const now = /* @__PURE__ */ new Date();
+    const currentTimestamp = now.getTime();
+    const offset = now.getTimezoneOffset() * 60;
+    return currentTimestamp / 1e3 - offset;
+  }
+  static getFormattedTimeFromSeconds(totalSeconds) {
+    const {
+      seconds: secondsValue,
+      minutes,
+      hours
+    } = Time.getTimeFromSeconds(totalSeconds);
+    return {
+      seconds: secondsValue,
+      minutes,
+      hours
+    };
+  }
+}
+class Validate {
+  static expiryTimestamp(expiryTimestamp) {
+    const isValid = new Date(expiryTimestamp).getTime() > 0;
+    if (!isValid) {
+      console.warn(
+        "{ useTimer } Invalid expiryTimestamp settings",
+        expiryTimestamp
+      );
+    }
+    return isValid;
+  }
+  static onExpire(onExpire) {
+    const isValid = onExpire && typeof onExpire === "function";
+    if (onExpire && !isValid) {
+      console.warn(
+        " { useTimer } Invalid onExpire settings function",
+        onExpire
+      );
+    }
+    return isValid;
+  }
+}
+export {
+  Time,
+  Validate
+};

package/dist/index.js

@@ -22,9 +22,12 @@ import { EVoteSize } from "./components/Vote/constants.js";
 import { SelectSearch } from "./components/SelectSearch/SelectSearch.js";
 import { ESelectSearchSize } from "./components/SelectSearch/constants.js";
 import { Switch } from "./components/Switch/Switch.js";
+import { Timer } from "./components/Timer/Timer.js";
 import { useMediaQuery } from "./hooks/useMediaQuery/useMediaQuery.js";
 import { EMediaQuery } from "./hooks/useMediaQuery/constants.js";
 import { useLockBodyScroll } from "./hooks/useLockBodyScroll/useLockBodyScroll.js";
+import { useInterval } from "./hooks/useInterval/useInterval.js";
+import { useTimer } from "./hooks/useTimer/index.js";
 import { Icon } from "./icons/Icon.js";
 import { formating } from "./utils/index.js";
 import './assets/index.css';export {
@@ -58,10 +61,13 @@ import './assets/index.css';export {
   Slider,
   Steps,
   Switch,
+  Timer,
   Vote,
   formating,
   getMaskedInputPhoneValue,
   getUnmaskedInputValue,
+  useInterval,
   useLockBodyScroll,
-  useMediaQuery
+  useMediaQuery,
+  useTimer
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mimir-ui-kit",
   "private": false,
-  "version": "1.8.1",
+  "version": "1.9.0",
   "type": "module",
   "exports": {
     ".": {