diff --git a/src/keyboard/Key.tsx b/src/keyboard/Key.tsx index 893a0cf..8944e00 100644 --- a/src/keyboard/Key.tsx +++ b/src/keyboard/Key.tsx @@ -1,4 +1,5 @@ import { PropsWithChildren } from "react"; +import BehaviorShortNames from "./behavior-short-names.json"; interface KeyProps { selected?: boolean; @@ -9,6 +10,30 @@ interface KeyProps { onClick?: () => void; } +interface BehaviorShortName { + short?: string; +} + +const MAX_HEADER_LENGTH = 9; +const shortNames: Record = BehaviorShortNames; + +const shortenHeader = (header: string | undefined) => { + if(typeof header === "undefined"){ + return ""; + } + // Empty string is a valid header for behaviors where we don't want to see a header, which is falsy + // So we use an undefined check here + if(typeof shortNames[header]?.short !== "undefined"){ + return shortNames[header].short; + } else if(header.length > MAX_HEADER_LENGTH){ + const words = header.split(/[\s,-]+/); + const lettersPerWord = Math.trunc(MAX_HEADER_LENGTH / words.length); + return words.map((word) => (word.substring(0,lettersPerWord))).join(""); + } else { + return header; + } +} + export const Key = ({ selected = false, width, @@ -31,7 +56,7 @@ export const Key = ({ }} onClick={onClick} > -
{header}
+
{shortenHeader(header)}
{children} ); diff --git a/src/keyboard/behavior-short-names.json b/src/keyboard/behavior-short-names.json new file mode 100644 index 0000000..2f702ed --- /dev/null +++ b/src/keyboard/behavior-short-names.json @@ -0,0 +1,14 @@ +{ + "Key Press": {"short": ""}, + "Bootloader": {"short": "Bootloadr"}, + "External Power": {"short": "Ext Pwr"}, + "Grave/Escape": {"short": "Grv/Esc"}, + "Key Repeat": {"short": "Key Rept"}, + "Key Toggle": {"short": "Key Togg"}, + "Momentary Layer": {"short": "MLayer"}, + "Output Selection": {"short": "OutputSel"}, + "Sticky Key": {"short": "Stcky Key"}, + "Studio Unlock": {"short": "Unlock"}, + "Toggle Layer": {"short": "Togg Layr"}, + "Transparent": {"short": "Transprnt"} +} \ No newline at end of file