From bc2d55d732e9c5705bead6898ce18bfd81423ed9 Mon Sep 17 00:00:00 2001 From: LoneWeeb <73281112+Tharki-God@users.noreply.github.com> Date: Fri, 7 Jul 2023 03:52:50 +0530 Subject: [PATCH 1/9] added keybind component --- .../modules/components/KeybindItem.tsx | 277 ++++++++++++++++++ 1 file changed, 277 insertions(+) create mode 100644 src/renderer/modules/components/KeybindItem.tsx diff --git a/src/renderer/modules/components/KeybindItem.tsx b/src/renderer/modules/components/KeybindItem.tsx new file mode 100644 index 000000000..c0c38e508 --- /dev/null +++ b/src/renderer/modules/components/KeybindItem.tsx @@ -0,0 +1,277 @@ +import { React } from "@common"; + +import { FormItem, Text } from "."; +import { KeyboardEvent } from "electron"; +import "./KeybindItem.css"; + +type ValueArray = Array<{ + altKey: boolean | undefined; + code: string | undefined; + ctrlKey: boolean | undefined; + key: string | undefined; + keyCode: number | undefined; + metaKey: boolean | undefined; + shiftKey: boolean | undefined; +}>; + +interface ButtonsProps { + isRecording: boolean; + toggleRecording: () => void; + recordedKeybind: ValueArray; + clearKeybind: () => void; +} + +interface KeybindProps { + title?: string; + children?: string; + note?: string; + value: ValueArray; + placeholder?: string; + onChange: (newValue: ValueArray) => void; +} +interface KeybindState { + recordedKeybind: ValueArray; + currentlyPressed: number[]; + isRecording: boolean; + isEditing: boolean; + timer: null | NodeJS.Timer; +} + +interface ExtendedKeyboardEvent extends KeyboardEvent { + code: string | undefined; + key: string | undefined; + keyCode: number | undefined; +} +export type KeybindType = React.ComponentClass; + +const Buttons: React.FC = (props) => { + if (!props.recordedKeybind.length && !props.isRecording) { + return ( +
+
{ + event.stopPropagation(); + props.toggleRecording(); + }}> + + + + Record Keybind +
+
+ ); + } + + if (props.isRecording) { + return ( +
+
{ + event.stopPropagation(); + props.toggleRecording(); + }}> + + + + Stop Recordingw +
+
+ ); + } + + return ( +
+
{ + event.stopPropagation(); + props.toggleRecording(); + }}> + + + + Edit Keybind +
+
{ + event.stopPropagation(); + props.clearKeybind(); + }}> + + + + Clear Keybind +
+
+ ); +}; + +export default class KeybindRecorder extends React.Component { + public constructor(props: KeybindProps) { + super(props); + this.state = { + recordedKeybind: props.value ?? [], + currentlyPressed: [], + isRecording: false, + isEditing: false, + timer: null, + }; + } + + public resetTimer(): void { + clearTimeout(this.state.timer!); + } + + public stopRecording(): void { + this.setState({ + isRecording: false, + currentlyPressed: [], + }); + this.props.onChange(this.state.recordedKeybind); + } + + public startRecording(): void { + this.setState({ + isRecording: true, + recordedKeybind: [], + currentlyPressed: [], + timer: setTimeout(() => { + this.stopRecording(); + }, 3000), + }); + } + + public editRecording(): void { + this.setState({ + isRecording: true, + isEditing: true, + currentlyPressed: [], + timer: setTimeout(() => { + this.stopRecording(); + }, 3000), + }); + } + + public clearKeybind(): void { + this.setState({ + recordedKeybind: [], + currentlyPressed: [], + }); + this.props.onChange([]); + } + + public toggleRecording(): void { + if (this.state.isRecording) { + this.stopRecording(); + } else if (this.state.recordedKeybind.length) { + this.editRecording(); + } else { + this.startRecording(); + } + } + + public handleKeyDown(event: ExtendedKeyboardEvent): void { + this.resetTimer(); + const { isRecording, recordedKeybind, isEditing } = this.state; + if ( + isRecording && + event?.keyCode && + (!recordedKeybind.some((ck) => ck?.keyCode === event?.keyCode) || isEditing) + ) { + this.setState((prevState) => ({ + recordedKeybind: isEditing + ? [{ altKey: event.altKey, code: event.code, ctrlKey: event.ctrlKey, key: event.key, keyCode: event.keyCode, metaKey: event.metaKey, shiftKey: event.shiftKey }] + : [ + ...prevState.recordedKeybind, + { altKey: event.altKey, code: event.code, ctrlKey: event.ctrlKey, key: event.key, keyCode: event.keyCode, metaKey: event.metaKey, shiftKey: event.shiftKey }, + ], + currentlyPressed: [...prevState.currentlyPressed, event.keyCode!], + })); + if (isEditing) { + this.setState({ + isEditing: false, + }); + } + } + } + + public handleKeyUp(event: ExtendedKeyboardEvent): void { + const { isRecording } = this.state; + if (isRecording) { + this.setState((prevState) => ({ + currentlyPressed: prevState.currentlyPressed.filter((ps) => ps === event.keyCode), + })); + } + } + + public componentDidMount(): void { + document.addEventListener("keydown", this.handleKeyDown.bind(this)); + document.addEventListener("keyup", this.handleKeyUp.bind(this)); + } + + public componentWillUnmount(): void { + document.removeEventListener("keydown", this.handleKeyDown.bind(this)); + document.removeEventListener("keyup", this.handleKeyUp.bind(this)); + } + + public componentDidUpdate(_prevProps: KeybindProps, prevState: KeybindState): void { + const { isRecording, currentlyPressed } = this.state; + if (isRecording && currentlyPressed.length === 0 && prevState.currentlyPressed.length !== 0) { + this.stopRecording(); + } + } + + public render(): React.ReactNode { + const { recordedKeybind, isRecording } = this.state; + + return ( + +
+ + {recordedKeybind?.length + ? recordedKeybind + ?.map((rk) => + rk?.code?.toLowerCase()?.includes("right") + ? `RIGHT ${rk?.key?.toUpperCase()}` + : rk?.key?.toUpperCase(), + ) + .join(" + ") + : this.props.placeholder ?? "No Keybind Set"} + + +
+ + ); + } +} From 544f1f44756f6ffe19fe2f3e71cca239177ae050 Mon Sep 17 00:00:00 2001 From: LoneWeeb <73281112+Tharki-God@users.noreply.github.com> Date: Fri, 7 Jul 2023 03:54:30 +0530 Subject: [PATCH 2/9] component css --- .../modules/components/KeybindItem.css | 90 +++++++++++++++++++ 1 file changed, 90 insertions(+) create mode 100644 src/renderer/modules/components/KeybindItem.css diff --git a/src/renderer/modules/components/KeybindItem.css b/src/renderer/modules/components/KeybindItem.css new file mode 100644 index 000000000..689984f92 --- /dev/null +++ b/src/renderer/modules/components/KeybindItem.css @@ -0,0 +1,90 @@ +.rp-keybind-container { + padding: 10px; + display: flex; + align-items: center; +} + +.rp-keybind-container:not(.recording) { + box-shadow: 0px 0px 2.5px #161616; +} + +.rp-keybind-container:hover:not(.recording) { + border: 0.0px solid #ffffff; + box-shadow: 0px 0px 2.5px #ffffff; +} + +.rp-keybind-container.recording>* { + border-color: #e73434; + box-shadow: 0px 0px 0.25px #e73434; +} + +.rp-keybind-container .text { + margin-right: 10px; +} + +.rp-keybind-container .text-truncate { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 1; + max-height: 2em; +} + +.rp-keybind-container>.buttons { + display: flex; + justify-content: flex-end; + flex-grow: 1; +} + +.rp-keybind-container>.buttons .button { + height: 25px; + position: relative; + display: flex; + align-items: center; + justify-content: center; + margin-right: 10px; + padding: 5px 10px; + border-radius: 5px; + opacity: 0.75; + cursor: pointer; +} + +.rp-keybind-container>.buttons .button.recording:hover { + background-color: #e7343414; +} + +.rp-keybind-container>.buttons .button:hover { + background-color: var(--background-secondary-alt); +} + +.rp-keybind-container>.buttons .button .icon { + display: inline-block; + margin-right: 5px; +} + +.rp-keybind-container>.buttons .button .button-text { + display: none; +} + +.rp-keybind-container>.buttons .button:hover .icon { + display: none; +} + +.rp-keybind-container>.buttons .button:hover .button-text { + display: inline-block; +} + +.rp-keybind-container.recording .text, +.rp-keybind-container.recording .button-text { + color: #e73434 !important; +} + +.rp-keybind-container>.buttons .button { + transition: padding 0.2s ease; +} + +.rp-keybind-container>.buttons .button:hover { + padding: 5px 15px; +} From 1d83f6c520b57db26e867137750be75002cae867 Mon Sep 17 00:00:00 2001 From: LoneWeeb <73281112+Tharki-God@users.noreply.github.com> Date: Fri, 7 Jul 2023 03:55:06 +0530 Subject: [PATCH 3/9] export it --- src/renderer/modules/components/index.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/renderer/modules/components/index.ts b/src/renderer/modules/components/index.ts index 2dd176d30..956a0f0af 100644 --- a/src/renderer/modules/components/index.ts +++ b/src/renderer/modules/components/index.ts @@ -158,6 +158,11 @@ export type { NoticeType }; export let Notice: NoticeType; importTimeout("Notice", import("./Notice"), (mod) => (Notice = mod.default)); +import type { KeybindType } from "./KeybindItem"; +export type { KeybindType }; +export let KeybindItem: KeybindType; +importTimeout("KeybindItem", import("./KeybindItem"), (mod) => (KeybindItem = mod.default)); + /** * @internal * @hidden From d502144068618135b8cdc1f6edcc70f5afb0729b Mon Sep 17 00:00:00 2001 From: LoneWeeb <73281112+Tharki-God@users.noreply.github.com> Date: Fri, 7 Jul 2023 03:56:06 +0530 Subject: [PATCH 4/9] added keybind to cspell wordlist --- cspell.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cspell.json b/cspell.json index d07002b60..3d2e31b47 100644 --- a/cspell.json +++ b/cspell.json @@ -33,11 +33,11 @@ "installdir", "Jsonifiable", "konami", + "keybind", "lezer", "LOCALAPPDATA", "logname", "Millis", - "notif", "notrack", "outfile", "popout", From 3e5aaaa35ad853fc32d82a80ee51aba7c4cf883b Mon Sep 17 00:00:00 2001 From: Tharki-God Date: Fri, 7 Jul 2023 04:06:00 +0530 Subject: [PATCH 5/9] prettier fix maybe?? --- .../modules/components/KeybindItem.css | 2 +- .../modules/components/KeybindItem.tsx | 18 +++++++++--------- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/renderer/modules/components/KeybindItem.css b/src/renderer/modules/components/KeybindItem.css index 689984f92..43666e853 100644 --- a/src/renderer/modules/components/KeybindItem.css +++ b/src/renderer/modules/components/KeybindItem.css @@ -87,4 +87,4 @@ .rp-keybind-container>.buttons .button:hover { padding: 5px 15px; -} +} \ No newline at end of file diff --git a/src/renderer/modules/components/KeybindItem.tsx b/src/renderer/modules/components/KeybindItem.tsx index c0c38e508..1f1d375f2 100644 --- a/src/renderer/modules/components/KeybindItem.tsx +++ b/src/renderer/modules/components/KeybindItem.tsx @@ -201,9 +201,9 @@ export default class KeybindRecorder extends React.Component {recordedKeybind?.length ? recordedKeybind - ?.map((rk) => - rk?.code?.toLowerCase()?.includes("right") - ? `RIGHT ${rk?.key?.toUpperCase()}` - : rk?.key?.toUpperCase(), - ) - .join(" + ") + ?.map((rk) => + rk?.code?.toLowerCase()?.includes("right") + ? `RIGHT ${rk?.key?.toUpperCase()}` + : rk?.key?.toUpperCase(), + ) + .join(" + ") : this.props.placeholder ?? "No Keybind Set"} Date: Fri, 7 Jul 2023 04:08:57 +0530 Subject: [PATCH 6/9] fix now? --- .../modules/components/KeybindItem.css | 26 ++++++------- .../modules/components/KeybindItem.tsx | 38 ++++++++++++++----- 2 files changed, 41 insertions(+), 23 deletions(-) diff --git a/src/renderer/modules/components/KeybindItem.css b/src/renderer/modules/components/KeybindItem.css index 43666e853..10bccfc02 100644 --- a/src/renderer/modules/components/KeybindItem.css +++ b/src/renderer/modules/components/KeybindItem.css @@ -9,11 +9,11 @@ } .rp-keybind-container:hover:not(.recording) { - border: 0.0px solid #ffffff; + border: 0px solid #ffffff; box-shadow: 0px 0px 2.5px #ffffff; } -.rp-keybind-container.recording>* { +.rp-keybind-container.recording > * { border-color: #e73434; box-shadow: 0px 0px 0.25px #e73434; } @@ -32,13 +32,13 @@ max-height: 2em; } -.rp-keybind-container>.buttons { +.rp-keybind-container > .buttons { display: flex; justify-content: flex-end; flex-grow: 1; } -.rp-keybind-container>.buttons .button { +.rp-keybind-container > .buttons .button { height: 25px; position: relative; display: flex; @@ -51,28 +51,28 @@ cursor: pointer; } -.rp-keybind-container>.buttons .button.recording:hover { +.rp-keybind-container > .buttons .button.recording:hover { background-color: #e7343414; } -.rp-keybind-container>.buttons .button:hover { +.rp-keybind-container > .buttons .button:hover { background-color: var(--background-secondary-alt); } -.rp-keybind-container>.buttons .button .icon { +.rp-keybind-container > .buttons .button .icon { display: inline-block; margin-right: 5px; } -.rp-keybind-container>.buttons .button .button-text { +.rp-keybind-container > .buttons .button .button-text { display: none; } -.rp-keybind-container>.buttons .button:hover .icon { +.rp-keybind-container > .buttons .button:hover .icon { display: none; } -.rp-keybind-container>.buttons .button:hover .button-text { +.rp-keybind-container > .buttons .button:hover .button-text { display: inline-block; } @@ -81,10 +81,10 @@ color: #e73434 !important; } -.rp-keybind-container>.buttons .button { +.rp-keybind-container > .buttons .button { transition: padding 0.2s ease; } -.rp-keybind-container>.buttons .button:hover { +.rp-keybind-container > .buttons .button:hover { padding: 5px 15px; -} \ No newline at end of file +} diff --git a/src/renderer/modules/components/KeybindItem.tsx b/src/renderer/modules/components/KeybindItem.tsx index 1f1d375f2..4fad7a92e 100644 --- a/src/renderer/modules/components/KeybindItem.tsx +++ b/src/renderer/modules/components/KeybindItem.tsx @@ -199,11 +199,29 @@ export default class KeybindRecorder extends React.Component ({ recordedKeybind: isEditing - ? [{ altKey: event.altKey, code: event.code, ctrlKey: event.ctrlKey, key: event.key, keyCode: event.keyCode, metaKey: event.metaKey, shiftKey: event.shiftKey }] + ? [ + { + altKey: event.altKey, + code: event.code, + ctrlKey: event.ctrlKey, + key: event.key, + keyCode: event.keyCode, + metaKey: event.metaKey, + shiftKey: event.shiftKey, + }, + ] : [ - ...prevState.recordedKeybind, - { altKey: event.altKey, code: event.code, ctrlKey: event.ctrlKey, key: event.key, keyCode: event.keyCode, metaKey: event.metaKey, shiftKey: event.shiftKey }, - ], + ...prevState.recordedKeybind, + { + altKey: event.altKey, + code: event.code, + ctrlKey: event.ctrlKey, + key: event.key, + keyCode: event.keyCode, + metaKey: event.metaKey, + shiftKey: event.shiftKey, + }, + ], currentlyPressed: [...prevState.currentlyPressed, event.keyCode!], })); if (isEditing) { @@ -256,12 +274,12 @@ export default class KeybindRecorder extends React.Component {recordedKeybind?.length ? recordedKeybind - ?.map((rk) => - rk?.code?.toLowerCase()?.includes("right") - ? `RIGHT ${rk?.key?.toUpperCase()}` - : rk?.key?.toUpperCase(), - ) - .join(" + ") + ?.map((rk) => + rk?.code?.toLowerCase()?.includes("right") + ? `RIGHT ${rk?.key?.toUpperCase()}` + : rk?.key?.toUpperCase(), + ) + .join(" + ") : this.props.placeholder ?? "No Keybind Set"} Date: Fri, 7 Jul 2023 04:18:51 +0530 Subject: [PATCH 7/9] should be fixed now --- cspell.json | 1 + 1 file changed, 1 insertion(+) diff --git a/cspell.json b/cspell.json index 3d2e31b47..c17c3f4a8 100644 --- a/cspell.json +++ b/cspell.json @@ -38,6 +38,7 @@ "LOCALAPPDATA", "logname", "Millis", + "notif", "notrack", "outfile", "popout", From 5d1fd4139b1213554c51a85358205b4ed3be5b10 Mon Sep 17 00:00:00 2001 From: LoneWeeb <73281112+Tharki-God@users.noreply.github.com> Date: Fri, 7 Jul 2023 05:19:13 +0530 Subject: [PATCH 8/9] idk why that was here --- src/renderer/modules/components/KeybindItem.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/renderer/modules/components/KeybindItem.tsx b/src/renderer/modules/components/KeybindItem.tsx index 4fad7a92e..be7791a3c 100644 --- a/src/renderer/modules/components/KeybindItem.tsx +++ b/src/renderer/modules/components/KeybindItem.tsx @@ -83,7 +83,7 @@ const Buttons: React.FC = (props) => { style={{ width: "24px", height: "24px" }}> - Stop Recordingw + Stop Recording ); From 46fce46606adf5dce1a8fd45673be097b94bf787 Mon Sep 17 00:00:00 2001 From: LoneWeeb <73281112+Tharki-God@users.noreply.github.com> Date: Fri, 7 Jul 2023 08:36:40 +0530 Subject: [PATCH 9/9] previous way was giving errors --- src/renderer/modules/components/KeybindItem.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/renderer/modules/components/KeybindItem.tsx b/src/renderer/modules/components/KeybindItem.tsx index be7791a3c..129263b9c 100644 --- a/src/renderer/modules/components/KeybindItem.tsx +++ b/src/renderer/modules/components/KeybindItem.tsx @@ -1,4 +1,4 @@ -import { React } from "@common"; +import React from "@common/react"; import { FormItem, Text } from "."; import { KeyboardEvent } from "electron";