Skip to content

Commit

Permalink
fix: fixed several issues with the keypicker and migrated to TS
Browse files Browse the repository at this point in the history 
Signed-off-by: Alejandro Parcet <alexpargon@gmail.com>
  • Loading branch information
@alexpargon
alexpargon committed Oct 18, 2024
1 parent e5c0425 commit 5775e60
Show file tree
Hide file tree
Showing 20 changed files with 231 additions and 426 deletions.
56 changes: 2 additions & 54 deletions src/renderer/modules/KeyPickerKeyboard/DualFunctionPicker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,6 @@ import React, { useMemo } from "react";

// Local components
import Heading from "@Renderer/components/atoms/Heading";
import { i18n } from "@Renderer/i18n";
import { Button } from "@Renderer/components/atoms/Button";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectFixedValue } from "@Renderer/components/atoms/Select";
import OSKey from "@Renderer/components/molecules/KeyTags/OSKey";

Expand All @@ -20,7 +18,7 @@ interface ModKey {
}

const DualFunctionPicker = (props: DualFunctionPickerProps) => {
const { keyCode, onKeySelect, activeTab, isStandardView } = props;
const { keyCode, onKeySelect, activeTab } = props;
const modKey: ModKey[] = useMemo(
() => [
{ name: "None ", keynum: 0 },
Expand Down Expand Up @@ -145,57 +143,7 @@ const DualFunctionPicker = (props: DualFunctionPickerProps) => {
</div>
);

const layersStdView = (
<div className="dualFuntionWrapper flex flex-wrap gap-6">
<div className="layersButtons">
<Heading headingLevel={5} renderAs="h5" className="text-ssm">
{i18n.general.layer}
</Heading>
<div className="p-1 inline-flex flex-nowrap gap-1 mt-2 w-auto rounded-md bg-white dark:bg-gray-900/20">
{layerKey.map((item: any, index: number) => (
<Button
variant="config"
size="sm"
// eslint-disable-next-line
key={`itemDualFunctionLayerSelectStd-${index}`}
onClick={() => onKeySelect(item.keynum + keyCode.base)}
selected={!!(keyCode.modified > 0 && item.keynum === keyCode.modified)}
disabled={disabled || activeTab === "super"}
className={`w-[40px] ${index === 0 ? "hidden" : ""}`}
>
{item.nameStd ? item.nameStd : item.keynum}
</Button>
))}
</div>
</div>
<div className="modButtons">
<Heading headingLevel={5} renderAs="h5" className="text-ssm">
{i18n.general.modifier}
</Heading>
<div className="p-1 inline-flex flex-nowrap gap-1 mt-2 w-auto rounded-md bg-white dark:bg-gray-900/20">
{modKey.map((item, index) => (
<Button
variant="config"
size="sm"
// eslint-disable-next-line
key={`itemDualFunctionModifierSelectStd-${index}`}
onClick={() => onKeySelect(item.keynum + keyCode.base)}
selected={!!(keyCode.modified > 0 && item.keynum === keyCode.modified)}
disabled={disabled || activeTab === "super"}
className={`w-[60px] ${index === 0 ? "hidden" : ""}`}
>
<OSKey
renderKey={item.nameStd ? item.nameStd : "shift"}
size={item.nameStd === "control" || item.nameStd === "altGr" ? "sm" : "md"}
/>
</Button>
))}
</div>
</div>
</div>
);

return <div>{isStandardView ? layersStdView : layers}</div>;
return <div>{layers}</div>;
};

export default DualFunctionPicker;
15 changes: 4 additions & 11 deletions src/renderer/modules/KeyPickerKeyboard/Key.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
/* eslint-disable eqeqeq */
/* eslint-disable react/jsx-filename-extension */
// @ts-nocheck
import React from "react";
import Styled, { withTheme } from "styled-components";
import { SegmentedKeyType } from "@Renderer/types/layout";
import { SelectGenericKeys } from "@Renderer/components/molecules/CustomSelect";
import OSKey from "@Renderer/components/molecules/KeyTags/OSKey";

const Style = Styled.g`
.keycap {
Expand Down Expand Up @@ -364,9 +362,10 @@ interface KeyProps {
third: string;
fourth: string;
};
idArray: string;
idArray: string | number[];
disabled: boolean;
platform: string;
theme?: any;
}

interface KeyLabelProps {
Expand Down Expand Up @@ -495,12 +494,9 @@ function Key(props: KeyProps) {
>
<div xmlns="http://www.w3.org/1999/xhtml">
<SelectGenericKeys
x={x + ksl[content.type].outb.dx}
y={y + ksl[content.type].outb.dy}
onSelect={onKeyPress}
selected={selected}
value={id}
listElements={idArray}
listElements={idArray as number[]}
content={content}
keyCode={keyCode}
label="F13+"
Expand All @@ -520,12 +516,9 @@ function Key(props: KeyProps) {
>
<div xmlns="http://www.w3.org/1999/xhtml">
<SelectGenericKeys
x={x + ksl[content.type].outb.dx}
y={y + ksl[content.type].outb.dy}
onSelect={onKeyPress}
selected={selected}
value={id}
listElements={idArray}
listElements={idArray as number[]}
content={content}
keyCode={keyCode}
label={content.first}
Expand Down
169 changes: 73 additions & 96 deletions ...er/modules/KeyPickerKeyboard/KeyPicker.js → ...r/modules/KeyPickerKeyboard/KeyPicker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,15 +35,14 @@ import {
AiOutlineBackward,
AiOutlineForward,
} from "react-icons/ai";
import { MdKeyboardReturn, MdSpaceBar, MdKeyboardCapslock, MdInfoOutline, MdEject } from "react-icons/md";

import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@Renderer/components/atoms/Tooltip";
import { MdKeyboardReturn, MdSpaceBar, MdKeyboardCapslock, MdEject } from "react-icons/md";

import Key from "@Renderer/modules/KeyPickerKeyboard/Key";
import getLanguage from "@Renderer/modules/KeyPickerKeyboard/KeyPickerLanguage";
import getLanguage, { LangOptions } from "@Renderer/modules/KeyPickerKeyboard/KeyPickerLanguage";
import OSKey from "@Renderer/components/molecules/KeyTags/OSKey";

import { getKeyboardLayout } from "@Renderer/utils/getKeyboardLayout";
import { SegmentedKeyType } from "@Renderer/types/layout";

const Style = Styled.div`
width: 100%;
Expand Down Expand Up @@ -265,51 +264,39 @@ const IconColor = Styled.span`
color: ${props => props.color};
`;

class KeyPicker extends Component {
constructor(props) {
super(props);
type Props = {
onKeySelect: (value: number) => void;
code: SegmentedKeyType;
disableMods: boolean;
disableMove: boolean;
disableAll: boolean;
selectedlanguage: string;
theme: any;
};

this.state = { customModal: false };
class KeyPicker extends Component<Props> {
constructor(props: Props) {
super(props);
this.onKeyPress = this.onKeyPress.bind(this);
}

toggleModal = () => {
const { customModal: cModal } = this.state;
this.setState({ customModal: !cModal });
};

onKeyPress = keycode => {
onKeyPress = (keycode: number) => {
const { onKeySelect } = this.props;
onKeySelect(keycode);
};

renderTooltip(tooltips) {
return (
<>
{tooltips.map((tip, i) => (
<React.Fragment key={`Tip-${i}`}>
{i % 2 === 1 || !Number.isNaN(tip[0]) || tip[0] === "-" ? (
<p className="ttip-p">{tip}</p>
) : (
<>
{i === 0 ? "" : <br />}
<h5 className="ttip-h">{tip}</h5>
</>
)}
</React.Fragment>
))}
</>
);
}

render() {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { code, disableMods, disableMove, disableAll, selectedlanguage, theme } = this.props;

const Lang = getLanguage(selectedlanguage);
const Lang = getLanguage(selectedlanguage as LangOptions);
const keyboardLayout = getKeyboardLayout(selectedlanguage);

const os = process.platform;
const iconlist = {
type IconListType = {
[index: string]: JSX.Element;
};
const iconlist: IconListType = {
Backspace: <BsBackspace />,
Enter: <MdKeyboardReturn />,
Space: <MdSpaceBar />,
Expand Down Expand Up @@ -400,67 +387,57 @@ class KeyPicker extends Component {
</>
),
};
const keyboard = Lang.map((key, id) => {
if (key.tooltip) {
return (
<foreignObject key={`id-${key.content.first}-${id}`} x={key.x} y={key.y} width={25} height={25}>
<TooltipProvider delayDuration={100}>
<Tooltip>
<TooltipTrigger className="[&_svg]:text-purple-100 [&_svg]:dark:text-purple-200">
<MdInfoOutline className="info" />
</TooltipTrigger>
<TooltipContent>{this.renderTooltip(key.tooltip)}</TooltipContent>
</Tooltip>
</TooltipProvider>
</foreignObject>
);
}
return (
<Key
key={`id-${key.content.first}-${id}`}
id={id}
x={key.x}
y={key.y}
selected={
code === null
? false
: Array.isArray(key.idArray)
? key.idArray.some(key => key === code.base + code.modified || (key === code.base && key >= 104 && key <= 115))
: code.base === key.id &&
(code.base + code.modified < 53267 || code.base + code.modified > 60000) &&
(code.base + code.modified < 17450 || code.base + code.modified > 17501) &&
(code.base + code.modified < 49153 || code.base + code.modified > 49168)
? true
: !!(code.modified > 0 && code.base + code.modified === key.id)
}
clicked={() => {
key.mod === disableMods || key.move === disableMove ? () => {} : this.onKeyPress(key.id);
}}
onKeyPress={this.onKeyPress}
centered={key.centered}
content={key.content}
iconpresent={key.icon}
icon={
<IconColor
color={
key.mod === disableMods || key.move === disableMove
? theme.keyboardPicker.keyTextDisabledColor
: theme.keyboardPicker.keyIconColor
}
>
{iconlist[key.iconname]}
</IconColor>
}
iconx={key.iconx}
icony={key.icony}
iconsize={key.iconsize}
disabled={key.mod === disableMods || key.move === disableMove || disableAll}
idArray={key.idArray}
keyCode={code}
platform={process.platform}
/>
);
});

const returnData = (key: any) => {
const KeyIsKey =
code.base === key.id &&
(code.base + code.modified < 53267 || code.base + code.modified > 60000) &&
(code.base + code.modified < 17450 || code.base + code.modified > 17501) &&
(code.base + code.modified < 49153 || code.base + code.modified > 49168)
? true
: !!(code.modified > 0 && code.base + code.modified === key.id);
const keyArray = Array.isArray(key.idArray)
? key.idArray.some(
(Lkey: any) => Lkey === code.base + code.modified || (Lkey === code.base && Lkey >= 104 && Lkey <= 115),
)
: KeyIsKey;
return keyArray;
};

const keyboard = Lang.map((key, id) => (
<Key
key={`id-${key.content.first}-${String(id)}`}
id={id}
x={key.x}
y={key.y}
selected={code === null ? false : returnData(key)}
clicked={() => {
if (!(key.mod === true && key.mod === disableMods)) this.onKeyPress(key.id);
}}
onKeyPress={this.onKeyPress}
centered={key.centered}
content={key.content}
iconpresent={key.icon}
icon={
<IconColor
color={
key.mod === true && key.mod === disableMods
? theme.keyboardPicker.keyTextDisabledColor
: theme.keyboardPicker.keyIconColor
}
>
{iconlist[key.iconname]}
</IconColor>
}
iconx={key.iconx}
icony={key.icony}
iconsize={key.iconsize}
disabled={key.mod === disableMods || disableAll}
idArray={key.idArray}
keyCode={code}
platform={process.platform}
/>
));

return (
<Style>
Expand Down
Loading

0 comments on commit 5775e60

Please sign in to comment.