react-led-digit 0.0.16 → 0.0.17

package/lib/Blinker/Blinker.d.ts

@@ -1,5 +1,5 @@
 /**
- * Switches intrnal state periodically (visible), calling subscribers each time.
+ * Switches internal state periodically (visible), calling subscribers each time.
  */
 type BlinkerSubscriber = (state: BlinkerState['visible']) => void;
 type BlinkerState = {

package/lib/Blinker/Blinker.js

@@ -1,6 +1,6 @@
 "use strict";
 /**
- * Switches intrnal state periodically (visible), calling subscribers each time.
+ * Switches internal state periodically (visible), calling subscribers each time.
  */
 var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
     if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
@@ -81,7 +81,7 @@ class Blinker {
     }
     start(visible = __classPrivateFieldGet(this, _Blinker_state, "f").visible) {
         if (__classPrivateFieldGet(this, _Blinker_state, "f").timeout)
-            return; // already runnning
+            this.stop(); // restart with new params
         visible ? __classPrivateFieldGet(this, _Blinker_instances, "m", _Blinker_on).call(this) : __classPrivateFieldGet(this, _Blinker_instances, "m", _Blinker_off).call(this); // start blinking
     }
     stop() {
@@ -97,6 +97,8 @@ class Blinker {
     }
     unsubscribe(fn) {
         __classPrivateFieldGet(this, _Blinker_state, "f").subscribers = __classPrivateFieldGet(this, _Blinker_state, "f").subscribers.filter(i => i !== fn);
+        if (__classPrivateFieldGet(this, _Blinker_state, "f").subscribers.length === 0)
+            this.stop();
     }
 }
 exports.Blinker = Blinker;

package/lib/Digit/Digit.js

@@ -24,7 +24,7 @@ const Digit = (_a) => {
     const scopeAttribute = (0, useStyleInjector_1.default)(digit_css_generated_js_1.default.content, [], {
         scopeID: digit_css_generated_js_1.default.hash,
     });
-    if (Object.entries(scopeAttribute)[0].includes(true))
+    if (Object.values(scopeAttribute).some(v => v === true))
         return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, scopeAttribute, { style: { display: 'contents' }, children: (0, jsx_runtime_1.jsx)(UnstyledDigit_1.Digit, Object.assign({}, rest)) })));
     return (0, jsx_runtime_1.jsx)(UnstyledDigit_1.Digit, Object.assign({}, rest));
 };

package/lib/Digit/Digit.stories.js

@@ -61,13 +61,14 @@ const charset = new Set(Object.keys(_1.charToSevenSegments));
 function setCharAt(str, index, chr) {
     if (index > str.length - 1)
         return str;
-    return str.substr(0, index) + chr + str.substr(index + 1);
+    return str.substring(0, index) + chr + str.substring(index + 1);
 }
 const BlinkingDigitTest = () => {
     const input = (0, react_1.useRef)(null);
     const [dgts, setDgts] = (0, react_1.useState)('');
     const addDigit = () => {
-        if (input.current.value) {
+        var _a;
+        if ((_a = input.current) === null || _a === void 0 ? void 0 : _a.value) {
             setDgts(prev => prev + input.current.value);
         }
     };
@@ -76,7 +77,7 @@ const BlinkingDigitTest = () => {
         setDgts(next);
     };
     const handleChange = () => {
-        if (!charset.has(input.current.value)) {
+        if (input.current && !charset.has(input.current.value)) {
             input.current.value = '';
         }
     };
@@ -142,11 +143,11 @@ const Display = (_a) => {
 const getTime = () => new Date().toLocaleTimeString();
 const SimpleClock = () => {
     const [time, setTime] = (0, react_1.useState)(getTime());
-    const blinker = new __1.Blinker();
-    blinker.period = 2000;
-    blinker.ratio = 1;
-    const handleBlinkerChange = () => setTime(getTime());
     (0, react_1.useEffect)(() => {
+        const blinker = new __1.Blinker();
+        blinker.period = 2000;
+        blinker.ratio = 1;
+        const handleBlinkerChange = () => setTime(getTime());
         blinker.subscribe(handleBlinkerChange);
         return () => blinker.unsubscribe(handleBlinkerChange);
     }, []);

package/lib/Digit/UnstyledDigit.js

@@ -33,7 +33,7 @@ const Digit = (_a) => {
         return (0, jsx_runtime_1.jsx)(components_1.AmpmSegments, Object.assign({ "aria-label": v }, rest, segments, { style: sx }));
     if (type === 'dot')
         return (0, jsx_runtime_1.jsx)(components_1.DotSegments, Object.assign({ "aria-label": v }, rest, segments, { style: sx }));
-    console.warn(`(at Digit.tsx) incompatible value: ${value.toString()}`);
+    console.warn(`(at UnstyledDigit.tsx) incompatible value: ${value.toString()}`);
     return ((0, jsx_runtime_1.jsx)("div", Object.assign({ "aria-label": v }, rest, { className: (0, clsx_1.default)('digit unknown', rest.className) })));
 };
 exports.Digit = Digit;
@@ -51,7 +51,8 @@ function valueToType(v) {
     return undefined;
 }
 function valueToSegments(v) {
-    const str = v === null || v === void 0 ? void 0 : v.toString();
+    var _a;
+    const str = (_a = v === null || v === void 0 ? void 0 : v.toString()) !== null && _a !== void 0 ? _a : '';
     if (str.toLowerCase() === 'am')
         return { AM: true };
     if (str.toLowerCase() === 'pm')

package/lib/Digit/useStyleInjector.js

@@ -41,7 +41,7 @@ class StyleInjector {
         return StyleInjector.instance; // singleton
     }
     increase(s) {
-        if (this.count(s) === 0)
+        if (this.count(s) === 0 && typeof document !== 'undefined')
             document.head.appendChild(createStyleElement(s));
         if (this.count(s) >= 0)
             __classPrivateFieldGet(this, _StyleInjector_styles, "f").set(s.id, this.count(s) + 1);
@@ -50,7 +50,7 @@ class StyleInjector {
         var _a;
         if (this.count(s) > 0)
             __classPrivateFieldGet(this, _StyleInjector_styles, "f").set(s.id, this.count(s) - 1);
-        if (this.count(s) === 0)
+        if (this.count(s) === 0 && typeof document !== 'undefined')
             (_a = document.head.querySelector(`#${s.id}`)) === null || _a === void 0 ? void 0 : _a.remove();
     }
     count(s) {
@@ -69,16 +69,10 @@ const createStyleElement = (style) => {
     return el;
 };
 const wrapWithScope = (css, scopeAttribute) => {
-    const scoped = // unused bc @scope at-rule does not work in Firefox
-     `@scope ([${scopeAttribute}]) {` +
-        `:scope { display: contents; }` +
-        `${css}` +
-        `}`;
-    const isolated = `[${scopeAttribute}] { display: contents; }` +
+    return (`[${scopeAttribute}] { display: contents; }` +
         `[${scopeAttribute}] {` +
         `${css}` +
-        `}`;
-    return isolated;
+        `}`);
 };
 // https://stackoverflow.com/questions/7616461/generate-a-hash-from-string-in-javascript
 const cyrb53string = (str, seed = 0) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-led-digit",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "description": "react component for 7-segment display (digit), includes dot, colon and am-pm digits",
   "main": "./lib/index.js",
   "files": [
@@ -36,6 +36,10 @@
   "engines": {
     "node": ">=12.0"
   },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
   "dependencies": {
     "clsx": "^2.1.1"
   },