Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2025-03-11 13:23:06 +01:00
Code Issues Packages Projects Releases Wiki Activity

wrap kbd stuff with browseronly (#1229)

Browse Source
This commit is contained in:
Mike Sawka 2024-11-07 14:42:52 -08:00 committed by GitHub
parent 9491b0ab81
commit d5cadbd41f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 21 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
docs/src/components/kbd.tsx
View File

@ -1,3 +1,4 @@
import BrowserOnly from "@docusaurus/BrowserOnly";
import { useContext } from "react"; import { useContext } from "react";
import "./kbd.css"; import "./kbd.css";
import type { Platform } from "./platformcontext"; import type { Platform } from "./platformcontext";
@ -39,7 +40,7 @@ function convertKey(platform: Platform, key: string): [any, string, boolean] {
} }
// Custom KBD component // Custom KBD component
export const Kbd = ({ k }) => { const KbdInternal = ({ k }: { k: string }) => {
const { platform } = useContext(PlatformContext); const { platform } = useContext(PlatformContext);
const keys = k.split(":"); const keys = k.split(":");
const keyElems = keys.map((key, i) => { const keyElems = keys.map((key, i) => {
@ -51,9 +52,8 @@ export const Kbd = ({ k }) => {
); );
}); });
return <div className="kbd-group">{keyElems}</div>; return <div className="kbd-group">{keyElems}</div>;
};
// const { platform } = useContext(PlatformContext);
// const keyLabel = platform === "mac" && k === "Cmd" ? "Cmd" : k === "Cmd" ? "Alt" : k; export const Kbd = ({ k }: { k: string }) => {
return <BrowserOnly fallback={<kbd>{k}</kbd>}>{() => <KbdInternal k={k} />}</BrowserOnly>;
// return <kbd>{k}</kbd>;
}; };

17
docs/src/components/platformcontext.tsx
View File

@ -1,3 +1,4 @@
import BrowserOnly from "@docusaurus/BrowserOnly";
import { createContext, ReactNode, useContext, useState } from "react"; import { createContext, ReactNode, useContext, useState } from "react";
import "./platformcontext.css"; import "./platformcontext.css";
@ -19,7 +20,7 @@ const detectPlatform = (): Platform => {
return /Mac|iPhone|iPad|iPod/.test(navigator.userAgent) ? "mac" : "linux"; return /Mac|iPhone|iPad|iPod/.test(navigator.userAgent) ? "mac" : "linux";
}; };
export const PlatformProvider = ({ children }: { children: ReactNode }) => { const PlatformProviderInternal = ({ children }: { children: ReactNode }) => {
const [platform, setPlatform] = useState<Platform>(detectPlatform()); const [platform, setPlatform] = useState<Platform>(detectPlatform());
const togglePlatform = () => { const togglePlatform = () => {
@ -31,6 +32,14 @@ export const PlatformProvider = ({ children }: { children: ReactNode }) => {
return <PlatformContext.Provider value={{ platform, togglePlatform }}>{children}</PlatformContext.Provider>; return <PlatformContext.Provider value={{ platform, togglePlatform }}>{children}</PlatformContext.Provider>;
}; };
export const PlatformProvider: React.FC = ({ children }: { children: ReactNode }) => {
return (
<BrowserOnly fallback={<div />}>
{() => <PlatformProviderInternal>{children}</PlatformProviderInternal>}
</BrowserOnly>
);
};
export const usePlatform = (): PlatformContextProps => { export const usePlatform = (): PlatformContextProps => {
const context = useContext(PlatformContext); const context = useContext(PlatformContext);
if (!context) { if (!context) {
@ -39,7 +48,7 @@ export const usePlatform = (): PlatformContextProps => {
return context; return context;
}; };
export const PlatformToggleButton: React.FC = () => { const PlatformToggleButtonInternal: React.FC = () => {
const { platform, togglePlatform } = usePlatform(); const { platform, togglePlatform } = usePlatform();
return ( return (
@ -59,3 +68,7 @@ export const PlatformToggleButton: React.FC = () => {
</div> </div>
); );
}; };
export const PlatformToggleButton: React.FC = () => {
return <BrowserOnly fallback={<div />}>{() => <PlatformToggleButtonInternal />}</BrowserOnly>;
};