@w3ux/react-odometer 2.2.1 → 2.2.3

package/index.cjs

@@ -214,4 +214,3 @@ var index_default = Odometer;
 });
 /* @license Copyright 2024 w3ux authors & contributors
 SPDX-License-Identifier: GPL-3.0-only */
-//# sourceMappingURL=index.cjs.map

package/index.css

@@ -8,22 +8,26 @@ SPDX-License-Identifier: GPL-3.0-only */
   height: inherit;
   line-height: inherit;
   width: fit-content;
-  > .odometer-inner {
-    display: inline-block;
-    vertical-align: bottom;
-    .odometer-digit {
-      display: inline-block;
-      position: relative;
-      vertical-align: bottom;
-      z-index: 3;
-      &.odometer-child {
-        display: flex;
-        align-items: flex-end;
-        position: relative;
-        left: 0;
-      }
-    }
-  }
+}
+
+.odometer-inner {
+  display: inline-block;
+  vertical-align: bottom;
+  position: relative;
+}
+
+.odometer-digit {
+  display: inline-block;
+  position: relative;
+  vertical-align: bottom;
+  z-index: 3;
+}
+
+.odometer-child {
+  display: flex;
+  align-items: flex-end;
+  position: relative;
+  left: 0;
 }
 
 /* NOTE: Stylelint does not like inline scss variables to generate these. */

package/index.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../src/index.css"],"names":[],"mappings":"AAAA;AAAA;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;IACE;IACA;IAEA;MACE;MACA;MACA;MACA;MAEA;QACE;QACA;QACA;QACA;;;;;;AAMR;AAEA;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE","file":"index.css"}
+{"version":3,"sourceRoot":"","sources":["../src/index.css"],"names":[],"mappings":"AAAA;AAAA;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAGF;AAEA;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE","file":"index.css"}

package/index.js

@@ -189,4 +189,3 @@ export {
 };
 /* @license Copyright 2024 w3ux authors & contributors
 SPDX-License-Identifier: GPL-3.0-only */
-//# sourceMappingURL=index.js.map

package/package.json

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

package/index.cjs.map

@@ -1 +0,0 @@
-{"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 type { Digit, DigitRef, Direction, Props, Status } from './types'\n\nexport const Odometer = ({\n  value,\n  spaceBefore = 0,\n  spaceAfter = '0.25rem',\n  wholeColor = 'var(--text-color-primary)',\n  decimalColor = 'var(--text-color-secondary)',\n  zeroDecimals = 0,\n}: Props) => {\n  // Store all possible digits.\n  const [allDigits] = useState<Digit[]>([\n    'comma',\n    'dot',\n    '0',\n    '1',\n    '2',\n    '3',\n    '4',\n    '5',\n    '6',\n    '7',\n    '8',\n    '9',\n  ])\n\n  // Store the digits of the current value.\n  const [digits, setDigits] = useState<Digit[]>([])\n\n  // Store digits of the previous value.\n  const [prevDigits, setPrevDigits] = useState<Digit[]>([])\n\n  // Store the status of the odometer (transitioning or stable).\n  const [status, setStatus] = useState<Status>('inactive')\n\n  // Store whether component has iniiialized.\n  const [initialized, setInitialized] = useState<boolean>(false)\n\n  // Store ref of the odometer.\n  const [odometerRef] = useState(createRef<HTMLSpanElement>())\n\n  // Store refs of each digit.\n  const [digitRefs, setDigitRefs] = useState<DigitRef[]>([])\n\n  // Store refs of each `all` digit.\n  const [allDigitRefs, setAllDigitRefs] = useState<\n    Record<string, RefObject<HTMLSpanElement | null>>\n  >({})\n\n  // Keep track of active transitions.\n  const activeTransitionCounter = useRef<number>(0)\n\n  // Transition duration.\n  const DURATION_MS = 750\n  const DURATION_SECS = `${DURATION_MS / 1000}s`\n\n  // Phase 0: populate `allDigitRefs`.\n  useEffect(() => {\n    const all: Record<\n      string,\n      RefObject<HTMLSpanElement | null>\n    > = Object.fromEntries(\n      Object.values(allDigits).map((v) => [`d_${v}`, createRef()])\n    )\n\n    setAllDigitRefs(all)\n  }, [])\n\n  // Phase 1: new digits and refs are added to the odometer.\n  useEffect(() => {\n    if (Object.keys(allDigitRefs)) {\n      value =\n        String(value) === '0' ? Number(value).toFixed(zeroDecimals) : value\n\n      const newDigits = value\n        .toString()\n        .split('')\n        .map((v) => (v === '.' ? 'dot' : v))\n        .map((v) => (v === ',' ? 'comma' : v)) as Digit[]\n\n      setDigits(newDigits)\n\n      if (!initialized) {\n        setInitialized(true)\n      } else {\n        setStatus('new')\n        setPrevDigits(digits)\n      }\n      setDigitRefs(Array(newDigits.length).fill(createRef()))\n    }\n  }, [value])\n\n  // Phase 2: set up digit transition.\n  useEffect(() => {\n    if (status === 'new' && !digitRefs.find((d) => d.current === null)) {\n      setStatus('transition')\n      activeTransitionCounter.current++\n\n      setTimeout(() => {\n        activeTransitionCounter.current--\n        if (activeTransitionCounter.current === 0) {\n          setStatus('inactive')\n        }\n      }, DURATION_MS)\n    }\n  }, [status, digitRefs])\n\n  const odometerCurrent: HTMLSpanElement | null = odometerRef.current\n  let lineHeight = odometerCurrent\n    ? window.getComputedStyle(odometerCurrent).lineHeight\n    : 'inherit'\n\n  // Fallback line height to `1.1rem` if `normal`.\n  lineHeight = lineHeight === 'normal' ? '1.1rem' : lineHeight\n\n  // Track whether decimal point has been found.\n  let foundDecimal = false\n\n  return (\n    <>\n      {allDigits.map((d, i) => (\n        <span\n          key={`odometer_template_digit_${i}`}\n          ref={allDigitRefs[`d_${d}`]}\n          style={{\n            opacity: 0,\n            position: 'fixed',\n            top: '-999%',\n            left: '-999%',\n            userSelect: 'none',\n          }}\n        >\n          {d === 'dot' ? '.' : d === 'comma' ? ',' : d}\n        </span>\n      ))}\n      <span className=\"odometer\">\n        <span className=\"odometer-inner\" ref={odometerRef}>\n          {spaceBefore ? <span style={{ paddingLeft: spaceBefore }} /> : null}\n          {digits.map((d, i) => {\n            if (d === 'dot') {\n              foundDecimal = true\n            }\n\n            // If transitioning, get digits needed to animate.\n            let childDigits = null\n            if (status === 'transition') {\n              const digitsToAnimate = []\n              const digitIndex = allDigits.indexOf(digits[i])\n              const prevDigitIndex = allDigits.indexOf(prevDigits[i])\n              const difference = Math.abs(digitIndex - prevDigitIndex)\n              const delay = `${0.01 * (digits.length - i - 1)}s`\n              const direction: Direction =\n                digitIndex === prevDigitIndex ? 'none' : 'down'\n              const animClass = `slide-${direction}-${difference} `\n\n              // Push current prev digit to stop of stack.\n              digitsToAnimate.push(prevDigits[i])\n\n              // If transitioning between two digits, animate all digits in between.\n              if (digitIndex < prevDigitIndex) {\n                digitsToAnimate.push(\n                  ...Array.from(\n                    { length: difference },\n                    (_, k) => allDigits[prevDigitIndex - k - 1]\n                  )\n                )\n              } else {\n                digitsToAnimate.push(\n                  ...Array.from(\n                    { length: difference },\n                    (_, k) => allDigits[k + prevDigitIndex + 1]\n                  )\n                )\n              }\n\n              childDigits = (\n                <span\n                  style={{\n                    position: 'absolute',\n                    top: 0,\n                    left: 0,\n                    animationName: direction === 'none' ? undefined : animClass,\n                    animationDuration:\n                      direction === 'none' ? undefined : DURATION_SECS,\n                    animationFillMode: 'forwards',\n                    animationTimingFunction: 'cubic-bezier(0.1, 1, 0.2, 1)',\n                    animationDelay: delay,\n                    color: foundDecimal ? decimalColor : wholeColor,\n                    userSelect: 'none',\n                  }}\n                >\n                  {digitsToAnimate.map((c, j) => (\n                    <span\n                      key={`child_digit_${j}`}\n                      className=\"odometer-digit odometer-child\"\n                      style={{\n                        top: j === 0 ? 0 : `${100 * j}%`,\n                        height: lineHeight,\n                        lineHeight,\n                      }}\n                    >\n                      {c === 'dot' ? '.' : c === 'comma' ? ',' : c}\n                    </span>\n                  ))}\n                </span>\n              )\n            }\n\n            return (\n              <span\n                key={`digit_${i}`}\n                ref={digitRefs[i]}\n                className=\"odometer-digit\"\n                style={{\n                  color: foundDecimal ? decimalColor : wholeColor,\n                  height: lineHeight,\n                  lineHeight,\n                  paddingRight:\n                    status === 'transition'\n                      ? `${allDigitRefs[`d_${d}`]?.current?.offsetWidth}px`\n                      : '0',\n                }}\n              >\n                {status === 'inactive' && (\n                  <span\n                    className=\"odometer-digit odometer-child\"\n                    style={{\n                      top: 0,\n                      height: lineHeight,\n                      lineHeight,\n                      width: `${\n                        allDigitRefs[`d_${d}`]?.current?.offsetWidth\n                      }px`,\n                    }}\n                  >\n                    {d === 'dot' ? '.' : d === 'comma' ? ',' : d}\n                  </span>\n                )}\n                {status === 'transition' && childDigits}\n              </span>\n            )\n          })}\n          {spaceAfter ? <span style={{ paddingRight: spaceAfter }} /> : null}\n        </span>\n      </span>\n    </>\n  )\n}\n\nexport default Odometer\n"],"mappings":"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","names":[]}

package/index.js.map

@@ -1 +0,0 @@
-{"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 type { Digit, DigitRef, Direction, Props, Status } from './types'\n\nexport const Odometer = ({\n  value,\n  spaceBefore = 0,\n  spaceAfter = '0.25rem',\n  wholeColor = 'var(--text-color-primary)',\n  decimalColor = 'var(--text-color-secondary)',\n  zeroDecimals = 0,\n}: Props) => {\n  // Store all possible digits.\n  const [allDigits] = useState<Digit[]>([\n    'comma',\n    'dot',\n    '0',\n    '1',\n    '2',\n    '3',\n    '4',\n    '5',\n    '6',\n    '7',\n    '8',\n    '9',\n  ])\n\n  // Store the digits of the current value.\n  const [digits, setDigits] = useState<Digit[]>([])\n\n  // Store digits of the previous value.\n  const [prevDigits, setPrevDigits] = useState<Digit[]>([])\n\n  // Store the status of the odometer (transitioning or stable).\n  const [status, setStatus] = useState<Status>('inactive')\n\n  // Store whether component has iniiialized.\n  const [initialized, setInitialized] = useState<boolean>(false)\n\n  // Store ref of the odometer.\n  const [odometerRef] = useState(createRef<HTMLSpanElement>())\n\n  // Store refs of each digit.\n  const [digitRefs, setDigitRefs] = useState<DigitRef[]>([])\n\n  // Store refs of each `all` digit.\n  const [allDigitRefs, setAllDigitRefs] = useState<\n    Record<string, RefObject<HTMLSpanElement | null>>\n  >({})\n\n  // Keep track of active transitions.\n  const activeTransitionCounter = useRef<number>(0)\n\n  // Transition duration.\n  const DURATION_MS = 750\n  const DURATION_SECS = `${DURATION_MS / 1000}s`\n\n  // Phase 0: populate `allDigitRefs`.\n  useEffect(() => {\n    const all: Record<\n      string,\n      RefObject<HTMLSpanElement | null>\n    > = Object.fromEntries(\n      Object.values(allDigits).map((v) => [`d_${v}`, createRef()])\n    )\n\n    setAllDigitRefs(all)\n  }, [])\n\n  // Phase 1: new digits and refs are added to the odometer.\n  useEffect(() => {\n    if (Object.keys(allDigitRefs)) {\n      value =\n        String(value) === '0' ? Number(value).toFixed(zeroDecimals) : value\n\n      const newDigits = value\n        .toString()\n        .split('')\n        .map((v) => (v === '.' ? 'dot' : v))\n        .map((v) => (v === ',' ? 'comma' : v)) as Digit[]\n\n      setDigits(newDigits)\n\n      if (!initialized) {\n        setInitialized(true)\n      } else {\n        setStatus('new')\n        setPrevDigits(digits)\n      }\n      setDigitRefs(Array(newDigits.length).fill(createRef()))\n    }\n  }, [value])\n\n  // Phase 2: set up digit transition.\n  useEffect(() => {\n    if (status === 'new' && !digitRefs.find((d) => d.current === null)) {\n      setStatus('transition')\n      activeTransitionCounter.current++\n\n      setTimeout(() => {\n        activeTransitionCounter.current--\n        if (activeTransitionCounter.current === 0) {\n          setStatus('inactive')\n        }\n      }, DURATION_MS)\n    }\n  }, [status, digitRefs])\n\n  const odometerCurrent: HTMLSpanElement | null = odometerRef.current\n  let lineHeight = odometerCurrent\n    ? window.getComputedStyle(odometerCurrent).lineHeight\n    : 'inherit'\n\n  // Fallback line height to `1.1rem` if `normal`.\n  lineHeight = lineHeight === 'normal' ? '1.1rem' : lineHeight\n\n  // Track whether decimal point has been found.\n  let foundDecimal = false\n\n  return (\n    <>\n      {allDigits.map((d, i) => (\n        <span\n          key={`odometer_template_digit_${i}`}\n          ref={allDigitRefs[`d_${d}`]}\n          style={{\n            opacity: 0,\n            position: 'fixed',\n            top: '-999%',\n            left: '-999%',\n            userSelect: 'none',\n          }}\n        >\n          {d === 'dot' ? '.' : d === 'comma' ? ',' : d}\n        </span>\n      ))}\n      <span className=\"odometer\">\n        <span className=\"odometer-inner\" ref={odometerRef}>\n          {spaceBefore ? <span style={{ paddingLeft: spaceBefore }} /> : null}\n          {digits.map((d, i) => {\n            if (d === 'dot') {\n              foundDecimal = true\n            }\n\n            // If transitioning, get digits needed to animate.\n            let childDigits = null\n            if (status === 'transition') {\n              const digitsToAnimate = []\n              const digitIndex = allDigits.indexOf(digits[i])\n              const prevDigitIndex = allDigits.indexOf(prevDigits[i])\n              const difference = Math.abs(digitIndex - prevDigitIndex)\n              const delay = `${0.01 * (digits.length - i - 1)}s`\n              const direction: Direction =\n                digitIndex === prevDigitIndex ? 'none' : 'down'\n              const animClass = `slide-${direction}-${difference} `\n\n              // Push current prev digit to stop of stack.\n              digitsToAnimate.push(prevDigits[i])\n\n              // If transitioning between two digits, animate all digits in between.\n              if (digitIndex < prevDigitIndex) {\n                digitsToAnimate.push(\n                  ...Array.from(\n                    { length: difference },\n                    (_, k) => allDigits[prevDigitIndex - k - 1]\n                  )\n                )\n              } else {\n                digitsToAnimate.push(\n                  ...Array.from(\n                    { length: difference },\n                    (_, k) => allDigits[k + prevDigitIndex + 1]\n                  )\n                )\n              }\n\n              childDigits = (\n                <span\n                  style={{\n                    position: 'absolute',\n                    top: 0,\n                    left: 0,\n                    animationName: direction === 'none' ? undefined : animClass,\n                    animationDuration:\n                      direction === 'none' ? undefined : DURATION_SECS,\n                    animationFillMode: 'forwards',\n                    animationTimingFunction: 'cubic-bezier(0.1, 1, 0.2, 1)',\n                    animationDelay: delay,\n                    color: foundDecimal ? decimalColor : wholeColor,\n                    userSelect: 'none',\n                  }}\n                >\n                  {digitsToAnimate.map((c, j) => (\n                    <span\n                      key={`child_digit_${j}`}\n                      className=\"odometer-digit odometer-child\"\n                      style={{\n                        top: j === 0 ? 0 : `${100 * j}%`,\n                        height: lineHeight,\n                        lineHeight,\n                      }}\n                    >\n                      {c === 'dot' ? '.' : c === 'comma' ? ',' : c}\n                    </span>\n                  ))}\n                </span>\n              )\n            }\n\n            return (\n              <span\n                key={`digit_${i}`}\n                ref={digitRefs[i]}\n                className=\"odometer-digit\"\n                style={{\n                  color: foundDecimal ? decimalColor : wholeColor,\n                  height: lineHeight,\n                  lineHeight,\n                  paddingRight:\n                    status === 'transition'\n                      ? `${allDigitRefs[`d_${d}`]?.current?.offsetWidth}px`\n                      : '0',\n                }}\n              >\n                {status === 'inactive' && (\n                  <span\n                    className=\"odometer-digit odometer-child\"\n                    style={{\n                      top: 0,\n                      height: lineHeight,\n                      lineHeight,\n                      width: `${\n                        allDigitRefs[`d_${d}`]?.current?.offsetWidth\n                      }px`,\n                    }}\n                  >\n                    {d === 'dot' ? '.' : d === 'comma' ? ',' : d}\n                  </span>\n                )}\n                {status === 'transition' && childDigits}\n              </span>\n            )\n          })}\n          {spaceAfter ? <span style={{ paddingRight: spaceAfter }} /> : null}\n        </span>\n      </span>\n    </>\n  )\n}\n\nexport default Odometer\n"],"mappings":"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","names":[]}