fix: fixed how the listener to keypress works

ItayLisaey · Apr 21, 2022 · 2e83e96 · 2e83e96
1 parent 300e885
commit 2e83e96
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/src/App.tsx b/src/App.tsx
@@ -0,0 +1,16 @@
+import classes from './app.module.css';
+import SafeView from './lib';
+
+function App() {
+  return (
+    <div className={classes.container}>
+      <SafeView accessKey='so'>
+        <div className={classes.box}>
+          <h1 data-safe>Hello World</h1>
+        </div>
+      </SafeView>
+    </div>
+  );
+}
+
+export default App;
diff --git a/src/app.module.css b/src/app.module.css
@@ -0,0 +1,6 @@
+.box {
+    background-color: lightblue;
+    padding: 1rem;
+    display: flex;
+    justify-content: center;
+}
diff --git a/src/lib/SafeView/SafeView.tsx b/src/lib/SafeView/SafeView.tsx
@@ -1,8 +1,8 @@
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import classes from './safe-view.module.css';
 
 export interface SafeViewProps {
-  accessKey?: React.HTMLAttributes<HTMLButtonElement>['accessKey'];
+  accessKey?: string;
   className?: string;
   children?: React.ReactNode;
 }
@@ -18,14 +18,22 @@ export const SafeView: React.FC<SafeViewProps> = ({
     if (safeMode) return [classes['safe-mode'], className];
     return [className];
   }, [safeMode]);
+
+  const handleKeyPress = (e: KeyboardEvent) => {
+    const access = accessKey ? accessKey.toLowerCase()[0] : 's';
+    if (e.shiftKey && e.key.toLowerCase() === access) setSafeMode(!safeMode);
+  };
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleKeyPress);
+    return () => {
+      document.removeEventListener('keydown', handleKeyPress);
+    };
+  }, [handleKeyPress]);
+
   return (
     <>
       <div className={classNames.join(' ')}>{children}</div>
-      <button
-        accessKey={accessKey ?? 's'}
-        hidden
-        onClick={() => setSafeMode(!safeMode)}
-      ></button>
     </>
   );
 };
diff --git a/src/main.tsx b/src/main.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);