npm - @w3ux/react-odometer - Versions diffs - 2.3.8 → 2.3.10 - Mend

@w3ux/react-odometer 2.3.8 → 2.3.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/index.cjs CHANGED Viewed

@@ -55,7 +55,7 @@ var Odometer = ({
   const [initialized, setInitialized] = (0, import_react.useState)(false);
   const [odometerRef] = (0, import_react.useState)((0, import_react.createRef)());
   const [digitRefs, setDigitRefs] = (0, import_react.useState)([]);
-  const [allDigitRefs, setAllDigitRefs] = (0, import_react.useState)({});
+  const digitWidths = (0, import_react.useRef)({});
   const activeTransitionCounter = (0, import_react.useRef)(0);
   const DURATION_MS = 750;
   const DURATION_SECS = `${DURATION_MS / 1e3}s`;
@@ -74,16 +74,26 @@ var Odometer = ({
     );
   };
   (0, import_react.useEffect)(() => {
-    const all = Object.fromEntries(
-      Object.values(allDigits).map((v) => [`d_${v}`, (0, import_react.createRef)()])
-    );
-    setAllDigitRefs(all);
     handleValueDigitRefs(value);
   }, []);
-  (0, import_hooks.useEffectIgnoreInitial)(() => {
-    if (Object.keys(allDigitRefs)) {
-      handleValueDigitRefs(value);
+  (0, import_react.useEffect)(() => {
+    if (digitRefs.length > 0 && !digitRefs.find((d) => d.current === null)) {
+      digitRefs.forEach((ref, i) => {
+        if (ref.current) {
+          const childSpan = ref.current.querySelector(
+            ".odometer-child"
+          );
+          const width = childSpan?.offsetWidth;
+          const digit = digits[i];
+          if (width && !digitWidths.current[digit]) {
+            digitWidths.current[digit] = width;
+          }
+        }
+      });
     }
+  }, [digitRefs, digits]);
+  (0, import_hooks.useEffectIgnoreInitial)(() => {
+    handleValueDigitRefs(value);
   }, [value]);
   (0, import_react.useEffect)(() => {
     if (status === "new" && !digitRefs.find((d) => d.current === null)) {
@@ -101,120 +111,104 @@ var Odometer = ({
   let lineHeight = odometerCurrent ? window.getComputedStyle(odometerCurrent).lineHeight : "inherit";
   lineHeight = lineHeight === "normal" ? "1.1rem" : lineHeight;
   let foundDecimal = false;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    allDigits.map((d, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "span",
-      {
-        ref: allDigitRefs[`d_${d}`],
-        style: {
-          opacity: 0,
-          position: "fixed",
-          top: "-999%",
-          left: "-999%",
-          userSelect: "none"
-        },
-        children: d === "dot" ? "." : d === "comma" ? "," : d
-      },
-      `odometer_template_digit_${i}`
-    )),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "odometer", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "odometer-inner", ref: odometerRef, children: [
-      spaceBefore ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { paddingLeft: spaceBefore } }) : null,
-      digits.map((d, i) => {
-        if (d === "dot") {
-          foundDecimal = true;
-        }
-        let childDigits = null;
-        if (status === "transition") {
-          const digitsToAnimate = [];
-          const digitIndex = allDigits.indexOf(digits[i]);
-          const prevDigitIndex = allDigits.indexOf(prevDigits[i]);
-          const difference = Math.abs(digitIndex - prevDigitIndex);
-          const delay = `${0.01 * (digits.length - i - 1)}s`;
-          const direction = digitIndex === prevDigitIndex ? "none" : "down";
-          const animClass = `slide-${direction}-${difference} `;
-          digitsToAnimate.push(prevDigits[i]);
-          if (digitIndex < prevDigitIndex) {
-            digitsToAnimate.push(
-              ...Array.from(
-                { length: difference },
-                (_, k) => allDigits[prevDigitIndex - k - 1]
-              )
-            );
-          } else {
-            digitsToAnimate.push(
-              ...Array.from(
-                { length: difference },
-                (_, k) => allDigits[k + prevDigitIndex + 1]
-              )
-            );
-          }
-          childDigits = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "span",
-            {
-              style: {
-                position: "absolute",
-                top: 0,
-                left: 0,
-                animationName: direction === "none" ? void 0 : animClass,
-                animationDuration: direction === "none" ? void 0 : DURATION_SECS,
-                animationFillMode: "forwards",
-                animationTimingFunction: "cubic-bezier(0.1, 1, 0.2, 1)",
-                animationDelay: delay,
-                color: foundDecimal ? decimalColor : wholeColor,
-                userSelect: "none"
-              },
-              children: digitsToAnimate.map((c, j) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                "span",
-                {
-                  className: "odometer-digit odometer-child",
-                  style: {
-                    top: j === 0 ? 0 : `${100 * j}%`,
-                    height: lineHeight,
-                    lineHeight
-                  },
-                  children: c === "dot" ? "." : c === "comma" ? "," : c
-                },
-                `child_digit_${j}`
-              ))
-            }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "odometer", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "odometer-inner", ref: odometerRef, children: [
+    spaceBefore ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { paddingLeft: spaceBefore } }) : null,
+    digits.map((d, i) => {
+      if (d === "dot") {
+        foundDecimal = true;
+      }
+      let childDigits = null;
+      if (status === "transition") {
+        const digitsToAnimate = [];
+        const digitIndex = allDigits.indexOf(digits[i]);
+        const prevDigitIndex = allDigits.indexOf(prevDigits[i]);
+        const difference = Math.abs(digitIndex - prevDigitIndex);
+        const delay = `${0.01 * (digits.length - i - 1)}s`;
+        const direction = digitIndex === prevDigitIndex ? "none" : "down";
+        const animClass = `slide-${direction}-${difference} `;
+        digitsToAnimate.push(prevDigits[i]);
+        if (digitIndex < prevDigitIndex) {
+          digitsToAnimate.push(
+            ...Array.from(
+              { length: difference },
+              (_, k) => allDigits[prevDigitIndex - k - 1]
+            )
+          );
+        } else {
+          digitsToAnimate.push(
+            ...Array.from(
+              { length: difference },
+              (_, k) => allDigits[k + prevDigitIndex + 1]
+            )
           );
         }
-        const offsetWidth = allDigitRefs[`d_${d}`]?.current?.offsetWidth;
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        childDigits = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "span",
           {
-            ref: digitRefs[i],
-            className: "odometer-digit",
             style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              animationName: direction === "none" ? void 0 : animClass,
+              animationDuration: direction === "none" ? void 0 : DURATION_SECS,
+              animationFillMode: "forwards",
+              animationTimingFunction: "cubic-bezier(0.1, 1, 0.2, 1)",
+              animationDelay: delay,
               color: foundDecimal ? decimalColor : wholeColor,
-              height: lineHeight,
-              lineHeight,
-              minWidth: offsetWidth ? `${offsetWidth}px` : void 0
+              userSelect: "none"
             },
-            children: [
-              status === "inactive" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                "span",
-                {
-                  className: "odometer-digit odometer-child",
-                  style: {
-                    position: offsetWidth ? "absolute" : void 0,
-                    top: offsetWidth ? 0 : void 0,
-                    left: offsetWidth ? 0 : void 0,
-                    height: lineHeight,
-                    lineHeight
-                  },
-                  children: d === "dot" ? "." : d === "comma" ? "," : d
-                }
-              ),
-              status === "transition" && childDigits
-            ]
-          },
-          `digit_${i}`
+            children: digitsToAnimate.map((c, j) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "span",
+              {
+                className: "odometer-digit odometer-child",
+                style: {
+                  top: j === 0 ? 0 : `${100 * j}%`,
+                  height: lineHeight,
+                  lineHeight
+                },
+                children: c === "dot" ? "." : c === "comma" ? "," : c
+              },
+              `child_digit_${j}`
+            ))
+          }
         );
-      }),
-      spaceAfter ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { paddingRight: spaceAfter } }) : null
-    ] }) })
-  ] });
+      }
+      const offsetWidth = digitWidths.current[d];
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "span",
+        {
+          ref: digitRefs[i],
+          className: "odometer-digit",
+          style: {
+            color: foundDecimal ? decimalColor : wholeColor,
+            height: lineHeight,
+            lineHeight,
+            minWidth: offsetWidth ? `${offsetWidth}px` : void 0
+          },
+          children: [
+            status === "inactive" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "span",
+              {
+                className: "odometer-digit odometer-child",
+                style: {
+                  position: offsetWidth ? "absolute" : "relative",
+                  top: offsetWidth ? 0 : void 0,
+                  left: offsetWidth ? 0 : void 0,
+                  height: lineHeight,
+                  lineHeight,
+                  width: offsetWidth ? `${offsetWidth}px` : "auto"
+                },
+                children: d === "dot" ? "." : d === "comma" ? "," : d
+              }
+            ),
+            status === "transition" && childDigits
+          ]
+        },
+        `digit_${i}`
+      );
+    }),
+    spaceAfter ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { paddingRight: spaceAfter } }) : null
+  ] }) });
 };
 var index_default = Odometer;
 // Annotate the CommonJS export names for ESM import in node:

package/index.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/index.tsx"],"sourcesContent":["/* @license Copyright 2024 w3ux authors & contributors\nSPDX-License-Identifier: GPL-3.0-only /\n\nimport type { RefObject } from 'react'\nimport { createRef, useEffect, useRef, useState } from 'react'\nimport './index.css'\nimport { useEffectIgnoreInitial } from '@w3ux/hooks'\nimport type { Digit, DigitRef, Direction, Props, Status } from './types'\n\nexport const Odometer = ({\n\tvalue,\n\tspaceBefore = 0,\n\tspaceAfter = '0.25rem',\n\twholeColor = 'var(--text-color-primary)',\n\tdecimalColor = 'var(--text-color-secondary)',\n\tzeroDecimals = 0,\n}: Props) => {\n\t// Store all possible digits.\n\tconst [allDigits] = useState<Digit[]>([\n\t\t'comma',\n\t\t'dot',\n\t\t'0',\n\t\t'1',\n\t\t'2',\n\t\t'3',\n\t\t'4',\n\t\t'5',\n\t\t'6',\n\t\t'7',\n\t\t'8',\n\t\t'9',\n\t])\n\n\t// Store the digits of the current value.\n\tconst [digits, setDigits] = useState<Digit[]>([])\n\n\t// Store digits of the previous value.\n\tconst [prevDigits, setPrevDigits] = useState<Digit[]>([])\n\n\t// Store the status of the odometer (transitioning or stable).\n\tconst [status, setStatus] = useState<Status>('inactive')\n\n\t// Store whether component has initialized.\n\tconst [initialized, setInitialized] = useState<boolean>(false)\n\n\t// Store ref of the odometer.\n\tconst [odometerRef] = useState(createRef<HTMLSpanElement>())\n\n\t// Store refs of each digit.\n\tconst [digitRefs, setDigitRefs] = useState<DigitRef[]>([])\n\n\t// Store refs of each `all` digit.\n\tconst [allDigitRefs, setAllDigitRefs] = useState<\n\t\tRecord<string, RefObject<HTMLSpanElement \| null>>\n\t>({})\n\n\t// Keep track of active transitions.\n\tconst activeTransitionCounter = useRef<number>(0)\n\n\t// Transition duration.\n\tconst DURATION_MS = 750\n\tconst DURATION_SECS = `${DURATION_MS / 1000}s`\n\n\t// Set digit refs for a value.\n\tconst handleValueDigitRefs = (v: string \| number) => {\n\t\tv = String(v) === '0' ? Number(v).toFixed(zeroDecimals) : v\n\n\t\tconst newDigits = v\n\t\t\t.toString()\n\t\t\t.split('')\n\t\t\t.map((v) => (v === '.' ? 'dot' : v))\n\t\t\t.map((v) => (v === ',' ? 'comma' : v)) as Digit[]\n\n\t\tsetDigits(newDigits)\n\n\t\tif (!initialized) {\n\t\t\tsetInitialized(true)\n\t\t} else {\n\t\t\tsetStatus('new')\n\t\t\tsetPrevDigits(digits)\n\t\t}\n\t\tsetDigitRefs(\n\t\t\tArray.from({ length: newDigits.length }, () => createRef() as DigitRef),\n\t\t)\n\t}\n\n\t// Phase 0: populate `allDigitRefs`.\n\tuseEffect(() => {\n\t\tconst all: Record<\n\t\t\tstring,\n\t\t\tRefObject<HTMLSpanElement \| null>\n\t\t> = Object.fromEntries(\n\t\t\tObject.values(allDigits).map((v) => [`d_${v}`, createRef()]),\n\t\t)\n\n\t\tsetAllDigitRefs(all)\n\t\thandleValueDigitRefs(value)\n\t}, [])\n\n\t// Phase 1: new digits and refs are added to the odometer.\n\tuseEffectIgnoreInitial(() => {\n\t\tif (Object.keys(allDigitRefs)) {\n\t\t\thandleValueDigitRefs(value)\n\t\t}\n\t}, [value])\n\n\t// Phase 2: set up digit transition.\n\tuseEffect(() => {\n\t\tif (status === 'new' && !digitRefs.find((d) => d.current === null)) {\n\t\t\tsetStatus('transition')\n\t\t\tactiveTransitionCounter.current++\n\n\t\t\tsetTimeout(() => {\n\t\t\t\tactiveTransitionCounter.current--\n\t\t\t\tif (activeTransitionCounter.current === 0) {\n\t\t\t\t\tsetStatus('inactive')\n\t\t\t\t}\n\t\t\t}, DURATION_MS)\n\t\t}\n\t}, [status, digitRefs])\n\n\tconst odometerCurrent: HTMLSpanElement \| null = odometerRef.current\n\tlet lineHeight = odometerCurrent\n\t\t? window.getComputedStyle(odometerCurrent).lineHeight\n\t\t: 'inherit'\n\n\t// Fallback line height to `1.1rem` if `normal`.\n\tlineHeight = lineHeight === 'normal' ? '1.1rem' : lineHeight\n\n\t// Track whether decimal point has been found.\n\tlet foundDecimal = false\n\n\treturn (\n\t\t<>\n\t\t\t{allDigits.map((d, i) => (\n\t\t\t\t<span\n\t\t\t\t\tkey={`odometer_template_digit_${i}`}\n\t\t\t\t\tref={allDigitRefs[`d_${d}`]}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\topacity: 0,\n\t\t\t\t\t\tposition: 'fixed',\n\t\t\t\t\t\ttop: '-999%',\n\t\t\t\t\t\tleft: '-999%',\n\t\t\t\t\t\tuserSelect: 'none',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{d === 'dot' ? '.' : d === 'comma' ? ',' : d}\n\t\t\t\t</span>\n\t\t\t))}\n\t\t\t<span className=\"odometer\">\n\t\t\t\t<span className=\"odometer-inner\" ref={odometerRef}>\n\t\t\t\t\t{spaceBefore ? <span style={{ paddingLeft: spaceBefore }} /> : null}\n\t\t\t\t\t{digits.map((d, i) => {\n\t\t\t\t\t\tif (d === 'dot') {\n\t\t\t\t\t\t\tfoundDecimal = true\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t// If transitioning, get digits needed to animate.\n\t\t\t\t\t\tlet childDigits = null\n\t\t\t\t\t\tif (status === 'transition') {\n\t\t\t\t\t\t\tconst digitsToAnimate = []\n\t\t\t\t\t\t\tconst digitIndex = allDigits.indexOf(digits[i])\n\t\t\t\t\t\t\tconst prevDigitIndex = allDigits.indexOf(prevDigits[i])\n\t\t\t\t\t\t\tconst difference = Math.abs(digitIndex - prevDigitIndex)\n\t\t\t\t\t\t\tconst delay = `${0.01 (digits.length - i - 1)}s`\n\t\t\t\t\t\t\tconst direction: Direction =\n\t\t\t\t\t\t\t\tdigitIndex === prevDigitIndex ? 'none' : 'down'\n\t\t\t\t\t\t\tconst animClass = `slide-${direction}-${difference} `\n\n\t\t\t\t\t\t\t// Push current prev digit to stop of stack.\n\t\t\t\t\t\t\tdigitsToAnimate.push(prevDigits[i])\n\n\t\t\t\t\t\t\t// If transitioning between two digits, animate all digits in between.\n\t\t\t\t\t\t\tif (digitIndex < prevDigitIndex) {\n\t\t\t\t\t\t\t\tdigitsToAnimate.push(\n\t\t\t\t\t\t\t\t\t...Array.from(\n\t\t\t\t\t\t\t\t\t\t{ length: difference },\n\t\t\t\t\t\t\t\t\t\t(_, k) => allDigits[prevDigitIndex - k - 1],\n\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tdigitsToAnimate.push(\n\t\t\t\t\t\t\t\t\t...Array.from(\n\t\t\t\t\t\t\t\t\t\t{ length: difference },\n\t\t\t\t\t\t\t\t\t\t(_, k) => allDigits[k + prevDigitIndex + 1],\n\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tchildDigits = (\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\t\t\t\t\ttop: 0,\n\t\t\t\t\t\t\t\t\t\tleft: 0,\n\t\t\t\t\t\t\t\t\t\tanimationName: direction === 'none' ? undefined : animClass,\n\t\t\t\t\t\t\t\t\t\tanimationDuration:\n\t\t\t\t\t\t\t\t\t\t\tdirection === 'none' ? undefined : DURATION_SECS,\n\t\t\t\t\t\t\t\t\t\tanimationFillMode: 'forwards',\n\t\t\t\t\t\t\t\t\t\tanimationTimingFunction: 'cubic-bezier(0.1, 1, 0.2, 1)',\n\t\t\t\t\t\t\t\t\t\tanimationDelay: delay,\n\t\t\t\t\t\t\t\t\t\tcolor: foundDecimal ? decimalColor : wholeColor,\n\t\t\t\t\t\t\t\t\t\tuserSelect: 'none',\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{digitsToAnimate.map((c, j) => (\n\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\tkey={`child_digit_${j}`}\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"odometer-digit odometer-child\"\n\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\ttop: j === 0 ? 0 : `${100 * j}%`,\n\t\t\t\t\t\t\t\t\t\t\t\theight: lineHeight,\n\t\t\t\t\t\t\t\t\t\t\t\tlineHeight,\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{c === 'dot' ? '.' : c === 'comma' ? ',' : c}\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tconst offsetWidth = allDigitRefs[`d_${d}`]?.current?.offsetWidth\n\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tkey={`digit_${i}`}\n\t\t\t\t\t\t\t\tref={digitRefs[i]}\n\t\t\t\t\t\t\t\tclassName=\"odometer-digit\"\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tcolor: foundDecimal ? decimalColor : wholeColor,\n\t\t\t\t\t\t\t\t\theight: lineHeight,\n\t\t\t\t\t\t\t\t\tlineHeight,\n\t\t\t\t\t\t\t\t\tminWidth: offsetWidth ? `${offsetWidth}px` : undefined,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{status === 'inactive' && (\n\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\tclassName=\"odometer-digit odometer-child\"\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\tposition: offsetWidth ? 'absolute' : undefined,\n\t\t\t\t\t\t\t\t\t\t\ttop: offsetWidth ? 0 : undefined,\n\t\t\t\t\t\t\t\t\t\t\tleft: offsetWidth ? 0 : undefined,\n\t\t\t\t\t\t\t\t\t\t\theight: lineHeight,\n\t\t\t\t\t\t\t\t\t\t\tlineHeight,\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{d === 'dot' ? '.' : d === 'comma' ? ',' : d}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t{status === 'transition' && childDigits}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t)\n\t\t\t\t\t})}\n\t\t\t\t\t{spaceAfter ? <span style={{ paddingRight: spaceAfter }} /> : null}\n\t\t\t\t</span>\n\t\t\t</span>\n\t\t</>\n\t)\n}\n\nexport default Odometer\n"],"mappings":"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","names":["v"]}
1	+ {"version":3,"sources":["../src/index.tsx"],"sourcesContent":["/* @license Copyright 2024 w3ux authors & contributors\nSPDX-License-Identifier: GPL-3.0-only /\n\nimport { createRef, useEffect, useRef, useState } from 'react'\nimport './index.css'\nimport { useEffectIgnoreInitial } from '@w3ux/hooks'\nimport type { Digit, DigitRef, Direction, Props, Status } from './types'\n\nexport const Odometer = ({\n\tvalue,\n\tspaceBefore = 0,\n\tspaceAfter = '0.25rem',\n\twholeColor = 'var(--text-color-primary)',\n\tdecimalColor = 'var(--text-color-secondary)',\n\tzeroDecimals = 0,\n}: Props) => {\n\t// Store all possible digits.\n\tconst [allDigits] = useState<Digit[]>([\n\t\t'comma',\n\t\t'dot',\n\t\t'0',\n\t\t'1',\n\t\t'2',\n\t\t'3',\n\t\t'4',\n\t\t'5',\n\t\t'6',\n\t\t'7',\n\t\t'8',\n\t\t'9',\n\t])\n\n\t// Store the digits of the current value.\n\tconst [digits, setDigits] = useState<Digit[]>([])\n\n\t// Store digits of the previous value.\n\tconst [prevDigits, setPrevDigits] = useState<Digit[]>([])\n\n\t// Store the status of the odometer (transitioning or stable).\n\tconst [status, setStatus] = useState<Status>('inactive')\n\n\t// Store whether component has initialized.\n\tconst [initialized, setInitialized] = useState<boolean>(false)\n\n\t// Store ref of the odometer.\n\tconst [odometerRef] = useState(createRef<HTMLSpanElement>())\n\n\t// Store refs of each digit.\n\tconst [digitRefs, setDigitRefs] = useState<DigitRef[]>([])\n\n\t// Store measured widths for each digit character.\n\tconst digitWidths = useRef<Record<string, number>>({})\n\n\t// Keep track of active transitions.\n\tconst activeTransitionCounter = useRef<number>(0)\n\n\t// Transition duration.\n\tconst DURATION_MS = 750\n\tconst DURATION_SECS = `${DURATION_MS / 1000}s`\n\n\t// Set digit refs for a value.\n\tconst handleValueDigitRefs = (v: string \| number) => {\n\t\tv = String(v) === '0' ? Number(v).toFixed(zeroDecimals) : v\n\n\t\tconst newDigits = v\n\t\t\t.toString()\n\t\t\t.split('')\n\t\t\t.map((v) => (v === '.' ? 'dot' : v))\n\t\t\t.map((v) => (v === ',' ? 'comma' : v)) as Digit[]\n\n\t\tsetDigits(newDigits)\n\n\t\tif (!initialized) {\n\t\t\tsetInitialized(true)\n\t\t} else {\n\t\t\tsetStatus('new')\n\t\t\tsetPrevDigits(digits)\n\t\t}\n\t\tsetDigitRefs(\n\t\t\tArray.from({ length: newDigits.length }, () => createRef() as DigitRef),\n\t\t)\n\t}\n\n\t// Phase 0: initialize with first value.\n\tuseEffect(() => {\n\t\thandleValueDigitRefs(value)\n\t}, [])\n\n\t// Phase 1: measure digit widths after refs are attached.\n\tuseEffect(() => {\n\t\tif (digitRefs.length > 0 && !digitRefs.find((d) => d.current === null)) {\n\t\t\tdigitRefs.forEach((ref, i) => {\n\t\t\t\tif (ref.current) {\n\t\t\t\t\t// Measure the child span's width\n\t\t\t\t\tconst childSpan = ref.current.querySelector(\n\t\t\t\t\t\t'.odometer-child',\n\t\t\t\t\t) as HTMLSpanElement\n\t\t\t\t\tconst width = childSpan?.offsetWidth\n\t\t\t\t\tconst digit = digits[i]\n\t\t\t\t\tif (width && !digitWidths.current[digit]) {\n\t\t\t\t\t\tdigitWidths.current[digit] = width\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t})\n\t\t}\n\t}, [digitRefs, digits])\n\n\t// Phase 2: new digits and refs are added to the odometer.\n\tuseEffectIgnoreInitial(() => {\n\t\thandleValueDigitRefs(value)\n\t}, [value])\n\n\t// Phase 3: set up digit transition.\n\tuseEffect(() => {\n\t\tif (status === 'new' && !digitRefs.find((d) => d.current === null)) {\n\t\t\tsetStatus('transition')\n\t\t\tactiveTransitionCounter.current++\n\n\t\t\tsetTimeout(() => {\n\t\t\t\tactiveTransitionCounter.current--\n\t\t\t\tif (activeTransitionCounter.current === 0) {\n\t\t\t\t\tsetStatus('inactive')\n\t\t\t\t}\n\t\t\t}, DURATION_MS)\n\t\t}\n\t}, [status, digitRefs])\n\n\tconst odometerCurrent: HTMLSpanElement \| null = odometerRef.current\n\tlet lineHeight = odometerCurrent\n\t\t? window.getComputedStyle(odometerCurrent).lineHeight\n\t\t: 'inherit'\n\n\t// Fallback line height to `1.1rem` if `normal`.\n\tlineHeight = lineHeight === 'normal' ? '1.1rem' : lineHeight\n\n\t// Track whether decimal point has been found.\n\tlet foundDecimal = false\n\n\treturn (\n\t\t<span className=\"odometer\">\n\t\t\t<span className=\"odometer-inner\" ref={odometerRef}>\n\t\t\t\t{spaceBefore ? <span style={{ paddingLeft: spaceBefore }} /> : null}\n\t\t\t\t{digits.map((d, i) => {\n\t\t\t\t\tif (d === 'dot') {\n\t\t\t\t\t\tfoundDecimal = true\n\t\t\t\t\t}\n\n\t\t\t\t\t// If transitioning, get digits needed to animate.\n\t\t\t\t\tlet childDigits = null\n\t\t\t\t\tif (status === 'transition') {\n\t\t\t\t\t\tconst digitsToAnimate = []\n\t\t\t\t\t\tconst digitIndex = allDigits.indexOf(digits[i])\n\t\t\t\t\t\tconst prevDigitIndex = allDigits.indexOf(prevDigits[i])\n\t\t\t\t\t\tconst difference = Math.abs(digitIndex - prevDigitIndex)\n\t\t\t\t\t\tconst delay = `${0.01 (digits.length - i - 1)}s`\n\t\t\t\t\t\tconst direction: Direction =\n\t\t\t\t\t\t\tdigitIndex === prevDigitIndex ? 'none' : 'down'\n\t\t\t\t\t\tconst animClass = `slide-${direction}-${difference} `\n\n\t\t\t\t\t\t// Push current prev digit to stop of stack.\n\t\t\t\t\t\tdigitsToAnimate.push(prevDigits[i])\n\n\t\t\t\t\t\t// If transitioning between two digits, animate all digits in between.\n\t\t\t\t\t\tif (digitIndex < prevDigitIndex) {\n\t\t\t\t\t\t\tdigitsToAnimate.push(\n\t\t\t\t\t\t\t\t...Array.from(\n\t\t\t\t\t\t\t\t\t{ length: difference },\n\t\t\t\t\t\t\t\t\t(_, k) => allDigits[prevDigitIndex - k - 1],\n\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tdigitsToAnimate.push(\n\t\t\t\t\t\t\t\t...Array.from(\n\t\t\t\t\t\t\t\t\t{ length: difference },\n\t\t\t\t\t\t\t\t\t(_, k) => allDigits[k + prevDigitIndex + 1],\n\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tchildDigits = (\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\t\t\t\ttop: 0,\n\t\t\t\t\t\t\t\t\tleft: 0,\n\t\t\t\t\t\t\t\t\tanimationName: direction === 'none' ? undefined : animClass,\n\t\t\t\t\t\t\t\t\tanimationDuration:\n\t\t\t\t\t\t\t\t\t\tdirection === 'none' ? undefined : DURATION_SECS,\n\t\t\t\t\t\t\t\t\tanimationFillMode: 'forwards',\n\t\t\t\t\t\t\t\t\tanimationTimingFunction: 'cubic-bezier(0.1, 1, 0.2, 1)',\n\t\t\t\t\t\t\t\t\tanimationDelay: delay,\n\t\t\t\t\t\t\t\t\tcolor: foundDecimal ? decimalColor : wholeColor,\n\t\t\t\t\t\t\t\t\tuserSelect: 'none',\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{digitsToAnimate.map((c, j) => (\n\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\tkey={`child_digit_${j}`}\n\t\t\t\t\t\t\t\t\t\tclassName=\"odometer-digit odometer-child\"\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\ttop: j === 0 ? 0 : `${100 * j}%`,\n\t\t\t\t\t\t\t\t\t\t\theight: lineHeight,\n\t\t\t\t\t\t\t\t\t\t\tlineHeight,\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{c === 'dot' ? '.' : c === 'comma' ? ',' : c}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t)\n\t\t\t\t\t}\n\n\t\t\t\t\tconst offsetWidth = digitWidths.current[d]\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\tkey={`digit_${i}`}\n\t\t\t\t\t\t\tref={digitRefs[i]}\n\t\t\t\t\t\t\tclassName=\"odometer-digit\"\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tcolor: foundDecimal ? decimalColor : wholeColor,\n\t\t\t\t\t\t\t\theight: lineHeight,\n\t\t\t\t\t\t\t\tlineHeight,\n\t\t\t\t\t\t\t\tminWidth: offsetWidth ? `${offsetWidth}px` : undefined,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{status === 'inactive' && (\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tclassName=\"odometer-digit odometer-child\"\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tposition: offsetWidth ? 'absolute' : 'relative',\n\t\t\t\t\t\t\t\t\t\ttop: offsetWidth ? 0 : undefined,\n\t\t\t\t\t\t\t\t\t\tleft: offsetWidth ? 0 : undefined,\n\t\t\t\t\t\t\t\t\t\theight: lineHeight,\n\t\t\t\t\t\t\t\t\t\tlineHeight,\n\t\t\t\t\t\t\t\t\t\twidth: offsetWidth ? `${offsetWidth}px` : 'auto',\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{d === 'dot' ? '.' : d === 'comma' ? ',' : d}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{status === 'transition' && childDigits}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t)\n\t\t\t\t})}\n\t\t\t\t{spaceAfter ? <span style={{ paddingRight: spaceAfter }} /> : null}\n\t\t\t</span>\n\t\t</span>\n\t)\n}\n\nexport default Odometer\n"],"mappings":"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","names":["v"]}

package/index.js CHANGED Viewed

@@ -1,7 +1,7 @@
 // src/index.tsx
 import { createRef, useEffect, useRef, useState } from "react";
 import { useEffectIgnoreInitial } from "@w3ux/hooks";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 var Odometer = ({
   value,
   spaceBefore = 0,
@@ -30,7 +30,7 @@ var Odometer = ({
   const [initialized, setInitialized] = useState(false);
   const [odometerRef] = useState(createRef());
   const [digitRefs, setDigitRefs] = useState([]);
-  const [allDigitRefs, setAllDigitRefs] = useState({});
+  const digitWidths = useRef({});
   const activeTransitionCounter = useRef(0);
   const DURATION_MS = 750;
   const DURATION_SECS = `${DURATION_MS / 1e3}s`;
@@ -49,16 +49,26 @@ var Odometer = ({
     );
   };
   useEffect(() => {
-    const all = Object.fromEntries(
-      Object.values(allDigits).map((v) => [`d_${v}`, createRef()])
-    );
-    setAllDigitRefs(all);
     handleValueDigitRefs(value);
   }, []);
-  useEffectIgnoreInitial(() => {
-    if (Object.keys(allDigitRefs)) {
-      handleValueDigitRefs(value);
+  useEffect(() => {
+    if (digitRefs.length > 0 && !digitRefs.find((d) => d.current === null)) {
+      digitRefs.forEach((ref, i) => {
+        if (ref.current) {
+          const childSpan = ref.current.querySelector(
+            ".odometer-child"
+          );
+          const width = childSpan?.offsetWidth;
+          const digit = digits[i];
+          if (width && !digitWidths.current[digit]) {
+            digitWidths.current[digit] = width;
+          }
+        }
+      });
     }
+  }, [digitRefs, digits]);
+  useEffectIgnoreInitial(() => {
+    handleValueDigitRefs(value);
   }, [value]);
   useEffect(() => {
     if (status === "new" && !digitRefs.find((d) => d.current === null)) {
@@ -76,120 +86,104 @@ var Odometer = ({
   let lineHeight = odometerCurrent ? window.getComputedStyle(odometerCurrent).lineHeight : "inherit";
   lineHeight = lineHeight === "normal" ? "1.1rem" : lineHeight;
   let foundDecimal = false;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    allDigits.map((d, i) => /* @__PURE__ */ jsx(
-      "span",
-      {
-        ref: allDigitRefs[`d_${d}`],
-        style: {
-          opacity: 0,
-          position: "fixed",
-          top: "-999%",
-          left: "-999%",
-          userSelect: "none"
-        },
-        children: d === "dot" ? "." : d === "comma" ? "," : d
-      },
-      `odometer_template_digit_${i}`
-    )),
-    /* @__PURE__ */ jsx("span", { className: "odometer", children: /* @__PURE__ */ jsxs("span", { className: "odometer-inner", ref: odometerRef, children: [
-      spaceBefore ? /* @__PURE__ */ jsx("span", { style: { paddingLeft: spaceBefore } }) : null,
-      digits.map((d, i) => {
-        if (d === "dot") {
-          foundDecimal = true;
-        }
-        let childDigits = null;
-        if (status === "transition") {
-          const digitsToAnimate = [];
-          const digitIndex = allDigits.indexOf(digits[i]);
-          const prevDigitIndex = allDigits.indexOf(prevDigits[i]);
-          const difference = Math.abs(digitIndex - prevDigitIndex);
-          const delay = `${0.01 * (digits.length - i - 1)}s`;
-          const direction = digitIndex === prevDigitIndex ? "none" : "down";
-          const animClass = `slide-${direction}-${difference} `;
-          digitsToAnimate.push(prevDigits[i]);
-          if (digitIndex < prevDigitIndex) {
-            digitsToAnimate.push(
-              ...Array.from(
-                { length: difference },
-                (_, k) => allDigits[prevDigitIndex - k - 1]
-              )
-            );
-          } else {
-            digitsToAnimate.push(
-              ...Array.from(
-                { length: difference },
-                (_, k) => allDigits[k + prevDigitIndex + 1]
-              )
-            );
-          }
-          childDigits = /* @__PURE__ */ jsx(
-            "span",
-            {
-              style: {
-                position: "absolute",
-                top: 0,
-                left: 0,
-                animationName: direction === "none" ? void 0 : animClass,
-                animationDuration: direction === "none" ? void 0 : DURATION_SECS,
-                animationFillMode: "forwards",
-                animationTimingFunction: "cubic-bezier(0.1, 1, 0.2, 1)",
-                animationDelay: delay,
-                color: foundDecimal ? decimalColor : wholeColor,
-                userSelect: "none"
-              },
-              children: digitsToAnimate.map((c, j) => /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: "odometer-digit odometer-child",
-                  style: {
-                    top: j === 0 ? 0 : `${100 * j}%`,
-                    height: lineHeight,
-                    lineHeight
-                  },
-                  children: c === "dot" ? "." : c === "comma" ? "," : c
-                },
-                `child_digit_${j}`
-              ))
-            }
+  return /* @__PURE__ */ jsx("span", { className: "odometer", children: /* @__PURE__ */ jsxs("span", { className: "odometer-inner", ref: odometerRef, children: [
+    spaceBefore ? /* @__PURE__ */ jsx("span", { style: { paddingLeft: spaceBefore } }) : null,
+    digits.map((d, i) => {
+      if (d === "dot") {
+        foundDecimal = true;
+      }
+      let childDigits = null;
+      if (status === "transition") {
+        const digitsToAnimate = [];
+        const digitIndex = allDigits.indexOf(digits[i]);
+        const prevDigitIndex = allDigits.indexOf(prevDigits[i]);
+        const difference = Math.abs(digitIndex - prevDigitIndex);
+        const delay = `${0.01 * (digits.length - i - 1)}s`;
+        const direction = digitIndex === prevDigitIndex ? "none" : "down";
+        const animClass = `slide-${direction}-${difference} `;
+        digitsToAnimate.push(prevDigits[i]);
+        if (digitIndex < prevDigitIndex) {
+          digitsToAnimate.push(
+            ...Array.from(
+              { length: difference },
+              (_, k) => allDigits[prevDigitIndex - k - 1]
+            )
+          );
+        } else {
+          digitsToAnimate.push(
+            ...Array.from(
+              { length: difference },
+              (_, k) => allDigits[k + prevDigitIndex + 1]
+            )
           );
         }
-        const offsetWidth = allDigitRefs[`d_${d}`]?.current?.offsetWidth;
-        return /* @__PURE__ */ jsxs(
+        childDigits = /* @__PURE__ */ jsx(
           "span",
           {
-            ref: digitRefs[i],
-            className: "odometer-digit",
             style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              animationName: direction === "none" ? void 0 : animClass,
+              animationDuration: direction === "none" ? void 0 : DURATION_SECS,
+              animationFillMode: "forwards",
+              animationTimingFunction: "cubic-bezier(0.1, 1, 0.2, 1)",
+              animationDelay: delay,
               color: foundDecimal ? decimalColor : wholeColor,
-              height: lineHeight,
-              lineHeight,
-              minWidth: offsetWidth ? `${offsetWidth}px` : void 0
+              userSelect: "none"
             },
-            children: [
-              status === "inactive" && /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: "odometer-digit odometer-child",
-                  style: {
-                    position: offsetWidth ? "absolute" : void 0,
-                    top: offsetWidth ? 0 : void 0,
-                    left: offsetWidth ? 0 : void 0,
-                    height: lineHeight,
-                    lineHeight
-                  },
-                  children: d === "dot" ? "." : d === "comma" ? "," : d
-                }
-              ),
-              status === "transition" && childDigits
-            ]
-          },
-          `digit_${i}`
+            children: digitsToAnimate.map((c, j) => /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "odometer-digit odometer-child",
+                style: {
+                  top: j === 0 ? 0 : `${100 * j}%`,
+                  height: lineHeight,
+                  lineHeight
+                },
+                children: c === "dot" ? "." : c === "comma" ? "," : c
+              },
+              `child_digit_${j}`
+            ))
+          }
         );
-      }),
-      spaceAfter ? /* @__PURE__ */ jsx("span", { style: { paddingRight: spaceAfter } }) : null
-    ] }) })
-  ] });
+      }
+      const offsetWidth = digitWidths.current[d];
+      return /* @__PURE__ */ jsxs(
+        "span",
+        {
+          ref: digitRefs[i],
+          className: "odometer-digit",
+          style: {
+            color: foundDecimal ? decimalColor : wholeColor,
+            height: lineHeight,
+            lineHeight,
+            minWidth: offsetWidth ? `${offsetWidth}px` : void 0
+          },
+          children: [
+            status === "inactive" && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "odometer-digit odometer-child",
+                style: {
+                  position: offsetWidth ? "absolute" : "relative",
+                  top: offsetWidth ? 0 : void 0,
+                  left: offsetWidth ? 0 : void 0,
+                  height: lineHeight,
+                  lineHeight,
+                  width: offsetWidth ? `${offsetWidth}px` : "auto"
+                },
+                children: d === "dot" ? "." : d === "comma" ? "," : d
+              }
+            ),
+            status === "transition" && childDigits
+          ]
+        },
+        `digit_${i}`
+      );
+    }),
+    spaceAfter ? /* @__PURE__ */ jsx("span", { style: { paddingRight: spaceAfter } }) : null
+  ] }) });
 };
 var index_default = Odometer;
 export {

package/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/index.tsx"],"sourcesContent":["/* @license Copyright 2024 w3ux authors & contributors\nSPDX-License-Identifier: GPL-3.0-only /\n\nimport type { RefObject } from 'react'\nimport { createRef, useEffect, useRef, useState } from 'react'\nimport './index.css'\nimport { useEffectIgnoreInitial } from '@w3ux/hooks'\nimport type { Digit, DigitRef, Direction, Props, Status } from './types'\n\nexport const Odometer = ({\n\tvalue,\n\tspaceBefore = 0,\n\tspaceAfter = '0.25rem',\n\twholeColor = 'var(--text-color-primary)',\n\tdecimalColor = 'var(--text-color-secondary)',\n\tzeroDecimals = 0,\n}: Props) => {\n\t// Store all possible digits.\n\tconst [allDigits] = useState<Digit[]>([\n\t\t'comma',\n\t\t'dot',\n\t\t'0',\n\t\t'1',\n\t\t'2',\n\t\t'3',\n\t\t'4',\n\t\t'5',\n\t\t'6',\n\t\t'7',\n\t\t'8',\n\t\t'9',\n\t])\n\n\t// Store the digits of the current value.\n\tconst [digits, setDigits] = useState<Digit[]>([])\n\n\t// Store digits of the previous value.\n\tconst [prevDigits, setPrevDigits] = useState<Digit[]>([])\n\n\t// Store the status of the odometer (transitioning or stable).\n\tconst [status, setStatus] = useState<Status>('inactive')\n\n\t// Store whether component has initialized.\n\tconst [initialized, setInitialized] = useState<boolean>(false)\n\n\t// Store ref of the odometer.\n\tconst [odometerRef] = useState(createRef<HTMLSpanElement>())\n\n\t// Store refs of each digit.\n\tconst [digitRefs, setDigitRefs] = useState<DigitRef[]>([])\n\n\t// Store refs of each `all` digit.\n\tconst [allDigitRefs, setAllDigitRefs] = useState<\n\t\tRecord<string, RefObject<HTMLSpanElement \| null>>\n\t>({})\n\n\t// Keep track of active transitions.\n\tconst activeTransitionCounter = useRef<number>(0)\n\n\t// Transition duration.\n\tconst DURATION_MS = 750\n\tconst DURATION_SECS = `${DURATION_MS / 1000}s`\n\n\t// Set digit refs for a value.\n\tconst handleValueDigitRefs = (v: string \| number) => {\n\t\tv = String(v) === '0' ? Number(v).toFixed(zeroDecimals) : v\n\n\t\tconst newDigits = v\n\t\t\t.toString()\n\t\t\t.split('')\n\t\t\t.map((v) => (v === '.' ? 'dot' : v))\n\t\t\t.map((v) => (v === ',' ? 'comma' : v)) as Digit[]\n\n\t\tsetDigits(newDigits)\n\n\t\tif (!initialized) {\n\t\t\tsetInitialized(true)\n\t\t} else {\n\t\t\tsetStatus('new')\n\t\t\tsetPrevDigits(digits)\n\t\t}\n\t\tsetDigitRefs(\n\t\t\tArray.from({ length: newDigits.length }, () => createRef() as DigitRef),\n\t\t)\n\t}\n\n\t// Phase 0: populate `allDigitRefs`.\n\tuseEffect(() => {\n\t\tconst all: Record<\n\t\t\tstring,\n\t\t\tRefObject<HTMLSpanElement \| null>\n\t\t> = Object.fromEntries(\n\t\t\tObject.values(allDigits).map((v) => [`d_${v}`, createRef()]),\n\t\t)\n\n\t\tsetAllDigitRefs(all)\n\t\thandleValueDigitRefs(value)\n\t}, [])\n\n\t// Phase 1: new digits and refs are added to the odometer.\n\tuseEffectIgnoreInitial(() => {\n\t\tif (Object.keys(allDigitRefs)) {\n\t\t\thandleValueDigitRefs(value)\n\t\t}\n\t}, [value])\n\n\t// Phase 2: set up digit transition.\n\tuseEffect(() => {\n\t\tif (status === 'new' && !digitRefs.find((d) => d.current === null)) {\n\t\t\tsetStatus('transition')\n\t\t\tactiveTransitionCounter.current++\n\n\t\t\tsetTimeout(() => {\n\t\t\t\tactiveTransitionCounter.current--\n\t\t\t\tif (activeTransitionCounter.current === 0) {\n\t\t\t\t\tsetStatus('inactive')\n\t\t\t\t}\n\t\t\t}, DURATION_MS)\n\t\t}\n\t}, [status, digitRefs])\n\n\tconst odometerCurrent: HTMLSpanElement \| null = odometerRef.current\n\tlet lineHeight = odometerCurrent\n\t\t? window.getComputedStyle(odometerCurrent).lineHeight\n\t\t: 'inherit'\n\n\t// Fallback line height to `1.1rem` if `normal`.\n\tlineHeight = lineHeight === 'normal' ? '1.1rem' : lineHeight\n\n\t// Track whether decimal point has been found.\n\tlet foundDecimal = false\n\n\treturn (\n\t\t<>\n\t\t\t{allDigits.map((d, i) => (\n\t\t\t\t<span\n\t\t\t\t\tkey={`odometer_template_digit_${i}`}\n\t\t\t\t\tref={allDigitRefs[`d_${d}`]}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\topacity: 0,\n\t\t\t\t\t\tposition: 'fixed',\n\t\t\t\t\t\ttop: '-999%',\n\t\t\t\t\t\tleft: '-999%',\n\t\t\t\t\t\tuserSelect: 'none',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{d === 'dot' ? '.' : d === 'comma' ? ',' : d}\n\t\t\t\t</span>\n\t\t\t))}\n\t\t\t<span className=\"odometer\">\n\t\t\t\t<span className=\"odometer-inner\" ref={odometerRef}>\n\t\t\t\t\t{spaceBefore ? <span style={{ paddingLeft: spaceBefore }} /> : null}\n\t\t\t\t\t{digits.map((d, i) => {\n\t\t\t\t\t\tif (d === 'dot') {\n\t\t\t\t\t\t\tfoundDecimal = true\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t// If transitioning, get digits needed to animate.\n\t\t\t\t\t\tlet childDigits = null\n\t\t\t\t\t\tif (status === 'transition') {\n\t\t\t\t\t\t\tconst digitsToAnimate = []\n\t\t\t\t\t\t\tconst digitIndex = allDigits.indexOf(digits[i])\n\t\t\t\t\t\t\tconst prevDigitIndex = allDigits.indexOf(prevDigits[i])\n\t\t\t\t\t\t\tconst difference = Math.abs(digitIndex - prevDigitIndex)\n\t\t\t\t\t\t\tconst delay = `${0.01 (digits.length - i - 1)}s`\n\t\t\t\t\t\t\tconst direction: Direction =\n\t\t\t\t\t\t\t\tdigitIndex === prevDigitIndex ? 'none' : 'down'\n\t\t\t\t\t\t\tconst animClass = `slide-${direction}-${difference} `\n\n\t\t\t\t\t\t\t// Push current prev digit to stop of stack.\n\t\t\t\t\t\t\tdigitsToAnimate.push(prevDigits[i])\n\n\t\t\t\t\t\t\t// If transitioning between two digits, animate all digits in between.\n\t\t\t\t\t\t\tif (digitIndex < prevDigitIndex) {\n\t\t\t\t\t\t\t\tdigitsToAnimate.push(\n\t\t\t\t\t\t\t\t\t...Array.from(\n\t\t\t\t\t\t\t\t\t\t{ length: difference },\n\t\t\t\t\t\t\t\t\t\t(_, k) => allDigits[prevDigitIndex - k - 1],\n\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tdigitsToAnimate.push(\n\t\t\t\t\t\t\t\t\t...Array.from(\n\t\t\t\t\t\t\t\t\t\t{ length: difference },\n\t\t\t\t\t\t\t\t\t\t(_, k) => allDigits[k + prevDigitIndex + 1],\n\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tchildDigits = (\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\t\t\t\t\ttop: 0,\n\t\t\t\t\t\t\t\t\t\tleft: 0,\n\t\t\t\t\t\t\t\t\t\tanimationName: direction === 'none' ? undefined : animClass,\n\t\t\t\t\t\t\t\t\t\tanimationDuration:\n\t\t\t\t\t\t\t\t\t\t\tdirection === 'none' ? undefined : DURATION_SECS,\n\t\t\t\t\t\t\t\t\t\tanimationFillMode: 'forwards',\n\t\t\t\t\t\t\t\t\t\tanimationTimingFunction: 'cubic-bezier(0.1, 1, 0.2, 1)',\n\t\t\t\t\t\t\t\t\t\tanimationDelay: delay,\n\t\t\t\t\t\t\t\t\t\tcolor: foundDecimal ? decimalColor : wholeColor,\n\t\t\t\t\t\t\t\t\t\tuserSelect: 'none',\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{digitsToAnimate.map((c, j) => (\n\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\tkey={`child_digit_${j}`}\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"odometer-digit odometer-child\"\n\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\ttop: j === 0 ? 0 : `${100 * j}%`,\n\t\t\t\t\t\t\t\t\t\t\t\theight: lineHeight,\n\t\t\t\t\t\t\t\t\t\t\t\tlineHeight,\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{c === 'dot' ? '.' : c === 'comma' ? ',' : c}\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tconst offsetWidth = allDigitRefs[`d_${d}`]?.current?.offsetWidth\n\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tkey={`digit_${i}`}\n\t\t\t\t\t\t\t\tref={digitRefs[i]}\n\t\t\t\t\t\t\t\tclassName=\"odometer-digit\"\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tcolor: foundDecimal ? decimalColor : wholeColor,\n\t\t\t\t\t\t\t\t\theight: lineHeight,\n\t\t\t\t\t\t\t\t\tlineHeight,\n\t\t\t\t\t\t\t\t\tminWidth: offsetWidth ? `${offsetWidth}px` : undefined,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{status === 'inactive' && (\n\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\tclassName=\"odometer-digit odometer-child\"\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\tposition: offsetWidth ? 'absolute' : undefined,\n\t\t\t\t\t\t\t\t\t\t\ttop: offsetWidth ? 0 : undefined,\n\t\t\t\t\t\t\t\t\t\t\tleft: offsetWidth ? 0 : undefined,\n\t\t\t\t\t\t\t\t\t\t\theight: lineHeight,\n\t\t\t\t\t\t\t\t\t\t\tlineHeight,\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{d === 'dot' ? '.' : d === 'comma' ? ',' : d}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t{status === 'transition' && childDigits}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t)\n\t\t\t\t\t})}\n\t\t\t\t\t{spaceAfter ? <span style={{ paddingRight: spaceAfter }} /> : null}\n\t\t\t\t</span>\n\t\t\t</span>\n\t\t</>\n\t)\n}\n\nexport default Odometer\n"],"mappings":"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","names":["v"]}
1	+ {"version":3,"sources":["../src/index.tsx"],"sourcesContent":["/* @license Copyright 2024 w3ux authors & contributors\nSPDX-License-Identifier: GPL-3.0-only /\n\nimport { createRef, useEffect, useRef, useState } from 'react'\nimport './index.css'\nimport { useEffectIgnoreInitial } from '@w3ux/hooks'\nimport type { Digit, DigitRef, Direction, Props, Status } from './types'\n\nexport const Odometer = ({\n\tvalue,\n\tspaceBefore = 0,\n\tspaceAfter = '0.25rem',\n\twholeColor = 'var(--text-color-primary)',\n\tdecimalColor = 'var(--text-color-secondary)',\n\tzeroDecimals = 0,\n}: Props) => {\n\t// Store all possible digits.\n\tconst [allDigits] = useState<Digit[]>([\n\t\t'comma',\n\t\t'dot',\n\t\t'0',\n\t\t'1',\n\t\t'2',\n\t\t'3',\n\t\t'4',\n\t\t'5',\n\t\t'6',\n\t\t'7',\n\t\t'8',\n\t\t'9',\n\t])\n\n\t// Store the digits of the current value.\n\tconst [digits, setDigits] = useState<Digit[]>([])\n\n\t// Store digits of the previous value.\n\tconst [prevDigits, setPrevDigits] = useState<Digit[]>([])\n\n\t// Store the status of the odometer (transitioning or stable).\n\tconst [status, setStatus] = useState<Status>('inactive')\n\n\t// Store whether component has initialized.\n\tconst [initialized, setInitialized] = useState<boolean>(false)\n\n\t// Store ref of the odometer.\n\tconst [odometerRef] = useState(createRef<HTMLSpanElement>())\n\n\t// Store refs of each digit.\n\tconst [digitRefs, setDigitRefs] = useState<DigitRef[]>([])\n\n\t// Store measured widths for each digit character.\n\tconst digitWidths = useRef<Record<string, number>>({})\n\n\t// Keep track of active transitions.\n\tconst activeTransitionCounter = useRef<number>(0)\n\n\t// Transition duration.\n\tconst DURATION_MS = 750\n\tconst DURATION_SECS = `${DURATION_MS / 1000}s`\n\n\t// Set digit refs for a value.\n\tconst handleValueDigitRefs = (v: string \| number) => {\n\t\tv = String(v) === '0' ? Number(v).toFixed(zeroDecimals) : v\n\n\t\tconst newDigits = v\n\t\t\t.toString()\n\t\t\t.split('')\n\t\t\t.map((v) => (v === '.' ? 'dot' : v))\n\t\t\t.map((v) => (v === ',' ? 'comma' : v)) as Digit[]\n\n\t\tsetDigits(newDigits)\n\n\t\tif (!initialized) {\n\t\t\tsetInitialized(true)\n\t\t} else {\n\t\t\tsetStatus('new')\n\t\t\tsetPrevDigits(digits)\n\t\t}\n\t\tsetDigitRefs(\n\t\t\tArray.from({ length: newDigits.length }, () => createRef() as DigitRef),\n\t\t)\n\t}\n\n\t// Phase 0: initialize with first value.\n\tuseEffect(() => {\n\t\thandleValueDigitRefs(value)\n\t}, [])\n\n\t// Phase 1: measure digit widths after refs are attached.\n\tuseEffect(() => {\n\t\tif (digitRefs.length > 0 && !digitRefs.find((d) => d.current === null)) {\n\t\t\tdigitRefs.forEach((ref, i) => {\n\t\t\t\tif (ref.current) {\n\t\t\t\t\t// Measure the child span's width\n\t\t\t\t\tconst childSpan = ref.current.querySelector(\n\t\t\t\t\t\t'.odometer-child',\n\t\t\t\t\t) as HTMLSpanElement\n\t\t\t\t\tconst width = childSpan?.offsetWidth\n\t\t\t\t\tconst digit = digits[i]\n\t\t\t\t\tif (width && !digitWidths.current[digit]) {\n\t\t\t\t\t\tdigitWidths.current[digit] = width\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t})\n\t\t}\n\t}, [digitRefs, digits])\n\n\t// Phase 2: new digits and refs are added to the odometer.\n\tuseEffectIgnoreInitial(() => {\n\t\thandleValueDigitRefs(value)\n\t}, [value])\n\n\t// Phase 3: set up digit transition.\n\tuseEffect(() => {\n\t\tif (status === 'new' && !digitRefs.find((d) => d.current === null)) {\n\t\t\tsetStatus('transition')\n\t\t\tactiveTransitionCounter.current++\n\n\t\t\tsetTimeout(() => {\n\t\t\t\tactiveTransitionCounter.current--\n\t\t\t\tif (activeTransitionCounter.current === 0) {\n\t\t\t\t\tsetStatus('inactive')\n\t\t\t\t}\n\t\t\t}, DURATION_MS)\n\t\t}\n\t}, [status, digitRefs])\n\n\tconst odometerCurrent: HTMLSpanElement \| null = odometerRef.current\n\tlet lineHeight = odometerCurrent\n\t\t? window.getComputedStyle(odometerCurrent).lineHeight\n\t\t: 'inherit'\n\n\t// Fallback line height to `1.1rem` if `normal`.\n\tlineHeight = lineHeight === 'normal' ? '1.1rem' : lineHeight\n\n\t// Track whether decimal point has been found.\n\tlet foundDecimal = false\n\n\treturn (\n\t\t<span className=\"odometer\">\n\t\t\t<span className=\"odometer-inner\" ref={odometerRef}>\n\t\t\t\t{spaceBefore ? <span style={{ paddingLeft: spaceBefore }} /> : null}\n\t\t\t\t{digits.map((d, i) => {\n\t\t\t\t\tif (d === 'dot') {\n\t\t\t\t\t\tfoundDecimal = true\n\t\t\t\t\t}\n\n\t\t\t\t\t// If transitioning, get digits needed to animate.\n\t\t\t\t\tlet childDigits = null\n\t\t\t\t\tif (status === 'transition') {\n\t\t\t\t\t\tconst digitsToAnimate = []\n\t\t\t\t\t\tconst digitIndex = allDigits.indexOf(digits[i])\n\t\t\t\t\t\tconst prevDigitIndex = allDigits.indexOf(prevDigits[i])\n\t\t\t\t\t\tconst difference = Math.abs(digitIndex - prevDigitIndex)\n\t\t\t\t\t\tconst delay = `${0.01 (digits.length - i - 1)}s`\n\t\t\t\t\t\tconst direction: Direction =\n\t\t\t\t\t\t\tdigitIndex === prevDigitIndex ? 'none' : 'down'\n\t\t\t\t\t\tconst animClass = `slide-${direction}-${difference} `\n\n\t\t\t\t\t\t// Push current prev digit to stop of stack.\n\t\t\t\t\t\tdigitsToAnimate.push(prevDigits[i])\n\n\t\t\t\t\t\t// If transitioning between two digits, animate all digits in between.\n\t\t\t\t\t\tif (digitIndex < prevDigitIndex) {\n\t\t\t\t\t\t\tdigitsToAnimate.push(\n\t\t\t\t\t\t\t\t...Array.from(\n\t\t\t\t\t\t\t\t\t{ length: difference },\n\t\t\t\t\t\t\t\t\t(_, k) => allDigits[prevDigitIndex - k - 1],\n\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tdigitsToAnimate.push(\n\t\t\t\t\t\t\t\t...Array.from(\n\t\t\t\t\t\t\t\t\t{ length: difference },\n\t\t\t\t\t\t\t\t\t(_, k) => allDigits[k + prevDigitIndex + 1],\n\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tchildDigits = (\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\t\t\t\ttop: 0,\n\t\t\t\t\t\t\t\t\tleft: 0,\n\t\t\t\t\t\t\t\t\tanimationName: direction === 'none' ? undefined : animClass,\n\t\t\t\t\t\t\t\t\tanimationDuration:\n\t\t\t\t\t\t\t\t\t\tdirection === 'none' ? undefined : DURATION_SECS,\n\t\t\t\t\t\t\t\t\tanimationFillMode: 'forwards',\n\t\t\t\t\t\t\t\t\tanimationTimingFunction: 'cubic-bezier(0.1, 1, 0.2, 1)',\n\t\t\t\t\t\t\t\t\tanimationDelay: delay,\n\t\t\t\t\t\t\t\t\tcolor: foundDecimal ? decimalColor : wholeColor,\n\t\t\t\t\t\t\t\t\tuserSelect: 'none',\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{digitsToAnimate.map((c, j) => (\n\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\tkey={`child_digit_${j}`}\n\t\t\t\t\t\t\t\t\t\tclassName=\"odometer-digit odometer-child\"\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\ttop: j === 0 ? 0 : `${100 * j}%`,\n\t\t\t\t\t\t\t\t\t\t\theight: lineHeight,\n\t\t\t\t\t\t\t\t\t\t\tlineHeight,\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{c === 'dot' ? '.' : c === 'comma' ? ',' : c}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t)\n\t\t\t\t\t}\n\n\t\t\t\t\tconst offsetWidth = digitWidths.current[d]\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\tkey={`digit_${i}`}\n\t\t\t\t\t\t\tref={digitRefs[i]}\n\t\t\t\t\t\t\tclassName=\"odometer-digit\"\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tcolor: foundDecimal ? decimalColor : wholeColor,\n\t\t\t\t\t\t\t\theight: lineHeight,\n\t\t\t\t\t\t\t\tlineHeight,\n\t\t\t\t\t\t\t\tminWidth: offsetWidth ? `${offsetWidth}px` : undefined,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{status === 'inactive' && (\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tclassName=\"odometer-digit odometer-child\"\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tposition: offsetWidth ? 'absolute' : 'relative',\n\t\t\t\t\t\t\t\t\t\ttop: offsetWidth ? 0 : undefined,\n\t\t\t\t\t\t\t\t\t\tleft: offsetWidth ? 0 : undefined,\n\t\t\t\t\t\t\t\t\t\theight: lineHeight,\n\t\t\t\t\t\t\t\t\t\tlineHeight,\n\t\t\t\t\t\t\t\t\t\twidth: offsetWidth ? `${offsetWidth}px` : 'auto',\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{d === 'dot' ? '.' : d === 'comma' ? ',' : d}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{status === 'transition' && childDigits}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t)\n\t\t\t\t})}\n\t\t\t\t{spaceAfter ? <span style={{ paddingRight: spaceAfter }} /> : null}\n\t\t\t</span>\n\t\t</span>\n\t)\n}\n\nexport default Odometer\n"],"mappings":"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","names":["v"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@w3ux/react-odometer",
-  "version": "2.3.8",
+  "version": "2.3.10",
   "license": "GPL-3.0-only",
   "type": "module",
   "description": "An odometer effect used for number and balance transitions",