Merge pull request #3 from through-space/char-map-param

Added charMap property in Digit. Added Story for additional character…

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 dist
-*storybook.log
+*storybook.log
+.idea

package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-7-segment-display",
-    "version": "1.1.2",
+    "version": "1.1.3.1",
     "description": "A react component that simulates a 7-segment display",
     "main": "dist/cjs/index.js",
     "module": "dist/esm/index.js",

src/components/Digit.tsx

@@ -1,22 +1,27 @@
 import Segment from "./Segment";
 import React, { useEffect, useState } from "react";
 
-import charToDigit from "../utils/charToDigit";
+import charToDigit, { CharToDigit } from "../utils/charToDigit";
 
 const letters = ["A", "B", "C", "D", "E", "F", "G"] as const;
 
+const DEFAULT_CHAR = "-";
+
 type DigitType = {
     char: string;
     color: string;
     height: number;
     skew: boolean;
+    charMap?: CharToDigit;
 };
 
+
 export const Digit = ({
-    char = "-",
+    char = DEFAULT_CHAR,
     color = "red",
     height = 250,
     skew = false,
+    charMap = charToDigit,
 }: DigitType) => {
     const style = {
         height: `${height}px`,
@@ -27,11 +32,11 @@ export const Digit = ({
     } as React.CSSProperties;
 
     const [activeArray, setActiveArray] = useState(
-        char ? charToDigit[char] : charToDigit["-"],
+        char && char in charMap ? charMap[char] : charMap[DEFAULT_CHAR],
     );
 
     useEffect(() => {
-        setActiveArray(char ? charToDigit[char] : charToDigit["-"]);
+        setActiveArray(char && char in charMap ? charMap[char] : charMap[DEFAULT_CHAR]);
     }, [char]);
 
     return (

src/components/Display.tsx

@@ -1,3 +1,4 @@
+import defaultCharMap, { CharToDigit } from "../utils/charToDigit";
 import { Digit } from "./Digit";
 import React, { useEffect, useState } from "react";
 
@@ -8,6 +9,7 @@ type DisplayType = {
     color: string;
     backgroundColor?: string;
     skew: boolean;
+    charMap?: CharToDigit;
 };
 
 export const Display = ({
@@ -17,6 +19,7 @@ export const Display = ({
     color = "red",
     backgroundColor,
     skew = false,
+    charMap = defaultCharMap,
 }: DisplayType) => {
     const [digits, setDigits] = useState([]);
 
@@ -70,6 +73,7 @@ export const Display = ({
                                   height={height}
                                   color={color}
                                   skew={skew}
+                                  charMap={charMap}
                               />
                           );
                       })

src/stories/Digit.stories.tsx

@@ -1,6 +1,7 @@
 import { Meta, StoryObj } from "@storybook/react";
 
 import { Digit } from "../components/Digit";
+import CharToDigit from "../utils/charToDigit";
 
 const meta = {
     title: "Example/Digit",
@@ -44,3 +45,22 @@ export const Default: Story = {
         skew: false,
     },
 };
+
+export const WithCharMap: Story = {
+    args: {
+        color: "red",
+        height: 250,
+        char: "_",
+        skew: false,
+        charMap: {"_": [0,0,0,1,0,0,0], ...CharToDigit}
+    },
+};
+
+export const IllegalChar: Story = {
+    args: {
+        color: "red",
+        height: 250,
+        char: "^",
+        skew: false
+    },
+};

src/stories/Display.stories.tsx

@@ -1,6 +1,7 @@
 import { Meta, StoryObj } from "@storybook/react";
 
 import { Display } from "../components/Display";
+import CharToDigit from "../utils/charToDigit";
 
 const meta = {
     title: "Example/Display",
@@ -33,3 +34,18 @@ export const Default: Story = {
         skew: false,
     },
 };
+
+export const WithCharMap: Story = {
+    args: {
+        color: "red",
+        height: 250,
+        value: "_- _",
+        count: 4,
+        backgroundColor: "black",
+        skew: false,
+        charMap: {
+            "_": [0,0,0,1,0,0,0],
+            " ": [0,0,0,0,0,0,0],
+            ...CharToDigit}
+    },
+};

src/utils/charToDigit.ts

@@ -1,4 +1,6 @@
-const charToDigit = {
+export type CharToDigit = Record<string, [number, number, number, number, number, number, number]>;
+
+const defaultCharMap: CharToDigit = {
     "0": [1, 1, 1, 1, 1, 1, 0],
     "1": [0, 1, 1, 0, 0, 0, 0],
     "2": [1, 1, 0, 1, 1, 0, 1],
@@ -17,6 +19,6 @@ const charToDigit = {
     e: [1, 0, 0, 1, 1, 1, 1],
     f: [1, 0, 0, 0, 1, 1, 1],
     "-": [0, 0, 0, 0, 0, 0, 1],
-} as { [key: string]: number[] };
+} as CharToDigit;
 
-export default charToDigit;
+export default defaultCharMap;