react-led-digit 0.0.2 → 0.0.4

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 (8) hide show
  1. package/README.md +6 -2
  2. package/lib/BlinkingDigit/BlinkingDigit.d.ts +10 -1
  3. package/lib/BlinkingDigit/BlinkingDigit.js +19 -15
  4. package/lib/Digit/Digit.js +4 -4
  5. package/lib/Digit/charToSevenSegments.d.ts +1 -1
  6. package/lib/Digit/charToSevenSegments.js +2 -0
  7. package/lib/Digit/digit.css +16 -14
  8. package/package.json +5 -3
package/README.md CHANGED
@@ -1,12 +1,16 @@
1
+ <img src="images/react-led-digit.gif" width="576" alt="react led digit" />
2
+
1
3
  # React Seven-Segment Digit Component
2
4
 
3
- Intended to use in digital clock or calculator.
4
- Pure HTML and CSS
5
+ Intended to use in digital clock or calculator.
6
+ HTML and CSS only.
7
+ → [Codesandbox playground](https://codesandbox.io/p/sandbox/friendly-dewdney-7jvh5w)
5
8
 
6
9
  Use example:
7
10
 
8
11
  ```tsx
9
12
  import { Digit, BlinkingDigit } from 'react-led-digit';
13
+ import 'react-led-digit/lib/Digit/digit.css';
10
14
 
11
15
  <div className="digital-clock">
12
16
  <Digit value="0" />
package/lib/BlinkingDigit/BlinkingDigit.d.ts CHANGED
@@ -1,2 +1,11 @@
1
1
  import React from 'react';
2
- export declare const BlinkingDigit: React.MemoExoticComponent<({ blink, ...rest }: BlinkingDigit) => import("react/jsx-runtime").JSX.Element>;
2
+ import { Digit } from '../Digit';
3
+ import { Blinker } from '../Blinker';
4
+ type BlinkingDigit = Digit & {
5
+ blinkOptions?: {
6
+ period?: Blinker['period'];
7
+ ratio?: Blinker['ratio'];
8
+ };
9
+ };
10
+ export declare const BlinkingDigit: React.MemoExoticComponent<({ blinkOptions, className, ...rest }: BlinkingDigit) => import("react/jsx-runtime").JSX.Element>;
11
+ export {};
package/lib/BlinkingDigit/BlinkingDigit.js CHANGED
@@ -33,27 +33,31 @@ var __rest = (this && this.__rest) || function (s, e) {
33
33
  }
34
34
  return t;
35
35
  };
36
+ var __importDefault = (this && this.__importDefault) || function (mod) {
37
+ return (mod && mod.__esModule) ? mod : { "default": mod };
38
+ };
36
39
  Object.defineProperty(exports, "__esModule", { value: true });
37
40
  exports.BlinkingDigit = void 0;
38
41
  const jsx_runtime_1 = require("react/jsx-runtime");
39
42
  const react_1 = __importStar(require("react"));
43
+ const classnames_1 = __importDefault(require("classnames"));
40
44
  const Digit_1 = require("../Digit");
41
45
  const Blinker_1 = require("../Blinker");
42
- const digitBlinker = new Blinker_1.Blinker(); // singleton makes all BlinkingDigit's to blink synchronoulsy
46
+ const blinker = new Blinker_1.Blinker(); // singleton makes all BlinkingDigit's to blink synchronoulsy
43
47
  exports.BlinkingDigit = react_1.default.memo((_a) => {
44
- var { blink } = _a, rest = __rest(_a, ["blink"]);
45
- if ((blink === null || blink === void 0 ? void 0 : blink.period) === 0 ||
46
- (blink === null || blink === void 0 ? void 0 : blink.ratio) === 0 ||
47
- typeof (rest === null || rest === void 0 ? void 0 : rest.off) === 'boolean')
48
- return (0, jsx_runtime_1.jsx)(Digit_1.Digit, Object.assign({}, rest)); // no blinker required
49
- const [visible, setVisible] = (0, react_1.useState)(digitBlinker.visible);
48
+ var { blinkOptions, className } = _a, rest = __rest(_a, ["blinkOptions", "className"]);
49
+ const [visible, setVisible] = (0, react_1.useState)(blinker.visible);
50
50
  (0, react_1.useEffect)(() => {
51
- if (blink === null || blink === void 0 ? void 0 : blink.period)
52
- digitBlinker.period = blink.period;
53
- if (blink === null || blink === void 0 ? void 0 : blink.ratio)
54
- digitBlinker.ratio = blink.ratio;
55
- digitBlinker.subscribe(setVisible);
56
- return () => digitBlinker.unsubscribe(setVisible);
57
- }, [blink === null || blink === void 0 ? void 0 : blink.period, blink === null || blink === void 0 ? void 0 : blink.ratio]);
58
- return (0, jsx_runtime_1.jsx)(Digit_1.Digit, Object.assign({}, rest, { off: rest.off || !visible }));
51
+ if (blinkOptions === null || blinkOptions === void 0 ? void 0 : blinkOptions.period)
52
+ blinker.period = blinkOptions.period;
53
+ if (blinkOptions === null || blinkOptions === void 0 ? void 0 : blinkOptions.ratio)
54
+ blinker.ratio = blinkOptions.ratio;
55
+ blinker.subscribe(setVisible);
56
+ return () => blinker.unsubscribe(setVisible);
57
+ }, [blinkOptions === null || blinkOptions === void 0 ? void 0 : blinkOptions.period, blinkOptions === null || blinkOptions === void 0 ? void 0 : blinkOptions.ratio]);
58
+ if ((blinkOptions === null || blinkOptions === void 0 ? void 0 : blinkOptions.period) === 0 ||
59
+ (blinkOptions === null || blinkOptions === void 0 ? void 0 : blinkOptions.ratio) === 0 ||
60
+ typeof (rest === null || rest === void 0 ? void 0 : rest.off) === 'boolean')
61
+ return (0, jsx_runtime_1.jsx)(Digit_1.Digit, Object.assign({}, rest, { className: (0, classnames_1.default)('blinking', className) })); // no blinker required
62
+ return ((0, jsx_runtime_1.jsx)(Digit_1.Digit, Object.assign({}, rest, { className: (0, classnames_1.default)('blinking', className), off: rest.off || !visible })));
59
63
  });
package/lib/Digit/Digit.js CHANGED
@@ -38,19 +38,19 @@ const Digit = (_a) => {
38
38
  exports.Digit = Digit;
39
39
  const DigitSegments = (_a) => {
40
40
  var { className, off, shape = 'default', A, B, C, D, E, F, G } = _a, rest = __rest(_a, ["className", "off", "shape", "A", "B", "C", "D", "E", "F", "G"]);
41
- return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, classnames_1.default)('digit', shapeCx(shape), className) }, rest, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "opacity-wrapper off", children: [(0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)(onOffCx(A, off), 'segment A horizontal') }), (0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)(onOffCx(B, off), 'segment B vertical') }), (0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)(onOffCx(C, off), 'segment C vertical') }), (0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)(onOffCx(D, off), 'segment D horizontal') }), (0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)(onOffCx(E, off), 'segment E vertical') }), (0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)(onOffCx(F, off), 'segment F vertical') }), (0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)(onOffCx(G, off), 'segment G horizontal') })] }), (0, jsx_runtime_1.jsxs)("div", { className: "opacity-wrapper on", children: [(0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)(onOffCx(A, off), 'segment A horizontal') }), (0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)(onOffCx(B, off), 'segment B vertical') }), (0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)(onOffCx(C, off), 'segment C vertical') }), (0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)(onOffCx(D, off), 'segment D horizontal') }), (0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)(onOffCx(E, off), 'segment E vertical') }), (0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)(onOffCx(F, off), 'segment F vertical') }), (0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)(onOffCx(G, off), 'segment G horizontal') })] })] })));
41
+ return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, classnames_1.default)('digit', shapeCx(shape), className) }, rest, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "opacity-wrapper off", children: [(0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)('segment A horizontal', onOffCx(A, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)('segment B vertical', onOffCx(B, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)('segment C vertical', onOffCx(C, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)('segment D horizontal', onOffCx(D, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)('segment E vertical', onOffCx(E, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)('segment F vertical', onOffCx(F, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)('segment G horizontal', onOffCx(G, off)) })] }), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('opacity-wrapper on', off && 'off'), children: [(0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)('segment A horizontal', onOffCx(A, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)('segment B vertical', onOffCx(B, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)('segment C vertical', onOffCx(C, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)('segment D horizontal', onOffCx(D, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)('segment E vertical', onOffCx(E, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)('segment F vertical', onOffCx(F, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)('segment G horizontal', onOffCx(G, off)) })] })] })));
42
42
  };
43
43
  const AmpmSegments = (_a) => {
44
44
  var { className, off, shape = 'default', AM, PM } = _a, rest = __rest(_a, ["className", "off", "shape", "AM", "PM"]);
45
- return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, classnames_1.default)('digit ampm', shapeCx(shape), className) }, rest, { children: [(0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)('segment AM', onOffCx(AM, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)('segment PM', onOffCx(PM, off)) })] })));
45
+ return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, classnames_1.default)('digit ampm', shapeCx(shape), className) }, rest, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "opacity-wrapper off", children: [(0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)('segment AM', onOffCx(AM, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)('segment PM', onOffCx(PM, off)) })] }), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('opacity-wrapper on', off && 'off'), children: [(0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)('segment AM', onOffCx(AM, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)('segment PM', onOffCx(PM, off)) })] })] })));
46
46
  };
47
47
  const ColonSegments = (_a) => {
48
48
  var { className, off, shape = 'default', D1, D2 } = _a, rest = __rest(_a, ["className", "off", "shape", "D1", "D2"]);
49
- return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, classnames_1.default)('digit colon', shapeCx(shape), className) }, rest, { children: [(0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)('segment D1', onOffCx(D1, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)('segment D2', onOffCx(D2, off)) })] })));
49
+ return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, classnames_1.default)('digit colon', shapeCx(shape), className) }, rest, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "opacity-wrapper off", children: [(0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)('segment D1', onOffCx(D1, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)('segment D2', onOffCx(D2, off)) })] }), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('opacity-wrapper on', off && 'off'), children: [(0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)('segment D1', onOffCx(D1, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)('segment D2', onOffCx(D2, off)) })] })] })));
50
50
  };
51
51
  const DotSegments = (_a) => {
52
52
  var { className, off, shape = 'default', DP } = _a, rest = __rest(_a, ["className", "off", "shape", "DP"]);
53
- return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, classnames_1.default)('digit dot', shapeCx(shape), className) }, rest, { children: (0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)('segment DP', onOffCx(DP, off)) }) })));
53
+ return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, classnames_1.default)('digit dot', shapeCx(shape), className) }, rest, { children: [(0, jsx_runtime_1.jsx)("div", { className: "opacity-wrapper off", children: (0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)('segment DP', onOffCx(DP, off)) }) }), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('opacity-wrapper on', off && 'off'), children: (0, jsx_runtime_1.jsx)("i", { className: (0, classnames_1.default)('segment DP', onOffCx(DP, off)) }) })] })));
54
54
  };
55
55
  const charset = new Set(Object.keys(charToSevenSegments_1.charToSevenSegments));
56
56
  function valueToType(v) {
package/lib/Digit/charToSevenSegments.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  export type SevenSegmentsValue = DigitNumber | DigitSpecial | DigitLetter;
2
2
  type DigitNumber = '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';
3
3
  type DigitSpecial = '_' | '-';
4
- type DigitLetter = 'A' | 'C' | 'E' | 'F' | 'H' | 'J' | 'L' | 'O' | 'P' | 'S' | 'U' | 'Y' | 'c' | 'b' | 'd' | 'h' | 'n' | 'o' | 'r' | 'u';
4
+ type DigitLetter = 'A' | 'C' | 'E' | 'F' | 'G' | 'H' | 'J' | 'L' | 'O' | 'P' | 'S' | 'U' | 'Y' | 'c' | 'b' | 'd' | 'h' | 'n' | 'o' | 'r' | 't' | 'u';
5
5
  /**
6
6
  *
7
7
  * A
package/lib/Digit/charToSevenSegments.js CHANGED
@@ -27,6 +27,7 @@ exports.charToSevenSegments = {
27
27
  C: 'ADEF',
28
28
  E: 'ADEFG',
29
29
  F: 'AEFG',
30
+ G: 'ACDEF',
30
31
  H: 'BCEFG',
31
32
  J: 'BCDE',
32
33
  L: 'DEF',
@@ -42,5 +43,6 @@ exports.charToSevenSegments = {
42
43
  n: 'CEG',
43
44
  o: 'CDEG',
44
45
  r: 'EG',
46
+ t: 'DEFG',
45
47
  u: 'CDE',
46
48
  };
package/lib/Digit/digit.css CHANGED
@@ -14,8 +14,7 @@
14
14
  --thick: var(--segment-thickness, 0.25em); /* 4px */
15
15
  --length: var(--segment-length, 1em);
16
16
  --spacing: var(--segment-spacing, 0.0625em); /* 1px */
17
- --filament: var(--segment-filament, 0); /* vertical shift of A and D */
18
- --corner: var(--segment-corner, 0); /* vertical shift of A and D */
17
+ --filament: var(--segment-filament, 0); /* vertical shift of segments A,D */
19
18
  --opacity-on: var(--segment-opacity-on, 1);
20
19
  --opacity-off: var(--segment-opacity-off, 0.1);
21
20
  --transition-duration: var(--segment-transition-duration, 0.25s);
@@ -57,27 +56,30 @@
57
56
  height: 100%;
58
57
  }
59
58
 
59
+ & .opacity-wrapper,
60
+ & .opacity-wrapper .segment {
61
+ transition-property: background-color, border-color, opacity, visibility;
62
+ transition-duration: var(--transition-duration);
63
+ }
64
+
60
65
  & .opacity-wrapper.on .segment.off,
66
+ & .opacity-wrapper.off.on .segment.off,
61
67
  & .opacity-wrapper.off .segment.on {
62
- opacity: 0;
68
+ visibility: hidden;
63
69
  }
64
- & .opacity-wrapper.on .segment.on,
65
- & .opacity-wrapper.off .segment.off {
66
- opacity: 1;
70
+ & .opacity-wrapper.off .segment.off,
71
+ & .opacity-wrapper.on .segment.on {
72
+ visibility: visible;
67
73
  }
68
74
 
69
- & .opacity-wrapper.on,
70
- & .segment.on {
75
+ & .opacity-wrapper.on {
71
76
  opacity: var(--opacity-on);
72
77
  }
73
- & .opacity-wrapper.off,
74
- & .segment.off {
78
+ & .opacity-wrapper.off {
75
79
  opacity: var(--opacity-off);
76
80
  }
77
-
78
- & .segment {
79
- transition-property: opacity, background-color, border-color;
80
- transition-duration: var(--transition-duration);
81
+ & .opacity-wrapper.off.on {
82
+ opacity: 0;
81
83
  }
82
84
 
83
85
  /* segments */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-led-digit",
3
- "version": "0.0.2",
3
+ "version": "0.0.4",
4
4
  "description": "",
5
5
  "main": "./lib/index.js",
6
6
  "files": [
@@ -23,6 +23,7 @@
23
23
  "type": "git",
24
24
  "url": "git+https://github.com/yakunins/react-led-digit.git"
25
25
  },
26
+ "homepage": "https://github.com/yakunins/react-led-digit",
26
27
  "license": "MIT",
27
28
  "author": {
28
29
  "name": "Sergey Yakunin",
@@ -41,7 +42,9 @@
41
42
  "digital",
42
43
  "clock"
43
44
  ],
44
- "homepage": "https://github.com/yakunins/real-clock",
45
+ "dependencies": {
46
+ "classnames": "^2.5.1"
47
+ },
45
48
  "devDependencies": {
46
49
  "@chromatic-com/storybook": "^1.6.1",
47
50
  "@storybook/addon-essentials": "^8.2.4",
@@ -56,7 +59,6 @@
56
59
  "@types/node": "^18.19.41",
57
60
  "@typescript-eslint/eslint-plugin": "^7.16.1",
58
61
  "@typescript-eslint/parser": "^7.16.1",
59
- "classnames": "^2.5.1",
60
62
  "cpy-cli": "^5.0.0",
61
63
  "eslint": "^8.57.0",
62
64
  "eslint-config-prettier": "^9.1.0",