@purpurds/countdown 0.0.1

package/src/counter.tsx

@@ -0,0 +1,67 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { Paragraph } from "@purpurds/paragraph";
+import c from "classnames/bind";
+
+import { type CounterLabels } from "./countdown.types";
+import styles from "./counter.module.scss";
+import { getDiffs, getNext, inMs } from "./utils";
+
+const cx = c.bind(styles);
+
+const rootClassName = "purpur-countdown-counter";
+
+interface CounterProps {
+  end: number;
+  size: "md" | "lg";
+  tag: "days" | "hours" | "minutes" | "seconds";
+  counterLabels: CounterLabels;
+}
+
+const intervals: Map<string, ReturnType<typeof setInterval>> = new Map();
+
+export const Counter = ({ tag, size, end, counterLabels }: CounterProps) => {
+  const ref = useRef<HTMLHeadingElement>(null);
+  const id = `${tag}-interval`;
+
+  const [currentTime, setCurrentTime] = useState(getDiffs(end)[tag]);
+  const [nextTime, setNextTime] = useState(getNext(currentTime, tag));
+  const [animationKey, setAnimationKey] = useState(0);
+
+  const checktime = useCallback(() => {
+    const diffs = getDiffs(end);
+    const next = getNext(diffs[tag], tag);
+
+    setNextTime(next);
+    setCurrentTime(diffs[tag]);
+  }, [end, tag]);
+
+  useEffect(() => {
+    intervals.set(id, setInterval(checktime, inMs.second));
+    return () => clearInterval(intervals.get(id)!);
+  }, [checktime, id]);
+
+  useEffect(() => {
+    setAnimationKey((prev) => prev + 1);
+  }, [currentTime]);
+
+  const counterTag = counterLabels[tag];
+
+  return (
+    <div
+      className={cx(rootClassName)}
+      role="group"
+      aria-hidden="true"
+      data-testid={`counter-${tag}`}
+    >
+      <Paragraph
+        className={cx(`${rootClassName}__number`, `${rootClassName}--size-${size}`)}
+        ref={ref}
+        data-tick={nextTime}
+        key={animationKey}
+      >
+        {currentTime}
+      </Paragraph>
+      <Paragraph className={cx(`${rootClassName}__label`)}>{counterTag}</Paragraph>
+    </div>
+  );
+};

package/src/global.d.ts

@@ -0,0 +1,4 @@
+declare module "*.scss" {
+  const styles: { [className: string]: string };
+  export default styles;
+}

package/src/utils.ts

@@ -0,0 +1,45 @@
+export function getDiffs(endtime: number) {
+  const now = new Date().getTime();
+  const diffInMs = Math.abs(endtime - now);
+
+  let seconds = 0,
+    minutes = 0,
+    hours = 0,
+    days = 0;
+
+  if (diffInMs >= inMs.day) {
+    days = Math.floor(diffInMs / inMs.day);
+  }
+  if (diffInMs >= inMs.hour) {
+    hours = Math.floor((diffInMs % inMs.day) / inMs.hour);
+  }
+  if (diffInMs >= inMs.minute) {
+    minutes = Math.floor((diffInMs % inMs.hour) / inMs.minute);
+  }
+  if (diffInMs >= inMs.second) {
+    seconds = Math.floor((diffInMs % inMs.minute) / inMs.second);
+  }
+
+  return {
+    seconds,
+    minutes,
+    hours,
+    days,
+  };
+}
+
+export function getNext(time: number, tag: string) {
+  let r = 0;
+  if (tag === "seconds") r = time - 1 >= 0 ? time - 1 : 59;
+  if (tag === "minutes") r = time - 1 >= 0 ? time - 1 : 59;
+  if (tag === "hours") r = time - 1 >= 0 ? time - 1 : 23;
+  if (tag === "days") r = time - 1 >= 0 ? time - 1 : 0;
+  return r;
+}
+
+export const inMs = {
+  day: 24 * 60 * 60 * 1000,
+  hour: 60 * 60 * 1000,
+  minute: 60 * 1000,
+  second: 1000,
+};