feat(Kbd): improve condition when shortcuts should be hidden (#107)

sodenn · Nov 13, 2021 · 712b284 · 712b284
1 parent db7ea07
commit 712b284
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 5 deletions.
diff --git a/src/components/Kbd.tsx b/src/components/Kbd.tsx
@@ -1,6 +1,6 @@
 import { styled } from "@mui/material";
 import React from "react";
-import { usePlatform } from "../utils/platform";
+import { usePlatform, useTouchScreen } from "../utils/platform";
 
 export const StyledKbd = styled("kbd")`
   padding: 0 0.4em;
@@ -12,9 +12,10 @@ export const StyledKbd = styled("kbd")`
 `;
 
 const Kbd: React.FC = ({ children }) => {
+  const hasTouchScreen = useTouchScreen();
   const platform = usePlatform();
 
-  if (platform !== "web" && platform !== "electron") {
+  if (hasTouchScreen || platform === "ios" || platform === "android") {
     return null;
   }
 

diff --git a/src/utils/platform.ts b/src/utils/platform.ts
@@ -3,3 +3,25 @@ import { Capacitor } from "@capacitor/core";
 export function usePlatform() {
   return Capacitor.getPlatform();
 }
+
+export function useTouchScreen() {
+  if ("maxTouchPoints" in navigator) {
+    return navigator.maxTouchPoints > 0;
+  } else if ("msMaxTouchPoints" in navigator) {
+    return (navigator as any).msMaxTouchPoints > 0;
+  } else {
+    const mediaQueryList = matchMedia("(pointer:coarse)");
+    if (mediaQueryList && mediaQueryList.media === "(pointer:coarse)") {
+      return mediaQueryList.matches;
+    } else if ("orientation" in window) {
+      return true; // deprecated, but good fallback
+    } else {
+      // Only as a last resort, fall back to user agent sniffing
+      const userAgent = navigator.userAgent;
+      return (
+        /\b(BlackBerry|webOS|iPhone|IEMobile)\b/i.test(userAgent) ||
+        /\b(Android|Windows Phone|iPad|iPod)\b/i.test(userAgent)
+      );
+    }
+  }
+}
diff --git a/src/utils/testing.tsx b/src/utils/testing.tsx
@@ -13,6 +13,11 @@ import AppTheme from "../components/AppTheme";
 import { AppContextProvider } from "../data/AppContext";
 import { TaskProvider } from "../data/TaskContext";
 
+jest.mock("../utils/platform", () => ({
+  ...jest.requireActual("../utils/platform"),
+  useTouchScreen: jest.fn(),
+}));
+
 interface TestContextProps {
   text?: string;
 }
@@ -23,7 +28,7 @@ i18n.use(initReactI18next).init({
   resources: { en: { translations: {} } },
 });
 
-const setupMock = {
+const mocks = {
   Filesystem: {
     readFile: (result?: ReadFileResult) => {
       Filesystem.readFile = jest
@@ -48,7 +53,7 @@ export const TestContext = (props: TestContextProps) => {
   const { text } = props;
 
   if (text) {
-    setupMock.Filesystem.readFile({ data: text });
+    mocks.Filesystem.readFile({ data: text });
   }
 
   return (
@@ -74,7 +79,7 @@ export const EmptyTestContext = (
   const { text, children } = props;
 
   if (text) {
-    setupMock.Filesystem.readFile({ data: text });
+    mocks.Filesystem.readFile({ data: text });
   }
 
   return (