refactor: modify usePermission for compatible with TypeScript 4.5

streamich · Mar 1, 2024 · 7b01217 · 7b01217
1 parent ade8d39
commit 7b01217
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 32 deletions.
diff --git a/docs/usePermission.md b/docs/usePermission.md
@@ -8,7 +8,8 @@ React side-effect hook to query permission status of browser APIs.
 import {usePermission} from 'react-use';
 
 const Demo = () => {
-  const state = usePermission({ name: 'microphone' });
+  // type PermissionName = "geolocation" | "notifications" | "persistent-storage" | "push" | "screen-wake-lock" | "xr-spatial-tracking";
+  const state = usePermission({ name: 'notifications' });
 
   return (
     <pre>

diff --git a/src/usePermission.ts b/src/usePermission.ts
@@ -1,32 +1,10 @@
-import { useEffect, useState } from 'react';
-import { noop, off, on } from './misc/util';
+import { useEffect, useState } from "react";
+import { noop, off, on } from "./misc/util";
 
-export type IState = PermissionState | '';
+export type IState = PermissionState | "";
 
-interface IPushPermissionDescriptor extends PermissionDescriptor {
-  name: 'push';
-  userVisibleOnly?: boolean;
-}
-
-interface IMidiPermissionDescriptor extends PermissionDescriptor {
-  name: 'midi';
-  sysex?: boolean;
-}
-
-interface IDevicePermissionDescriptor extends PermissionDescriptor {
-  name: 'camera' | 'microphone' | 'speaker';
-  deviceId?: string;
-}
-
-export type IPermissionDescriptor =
-  | PermissionDescriptor
-  | IPushPermissionDescriptor
-  | IMidiPermissionDescriptor
-  | IDevicePermissionDescriptor;
-
-// const usePermission = <T extends PermissionDescriptor>(permissionDesc: T): IState => {
-const usePermission = (permissionDesc: IPermissionDescriptor): IState => {
-  const [state, setState] = useState<IState>('');
+const usePermission = (permissionDesc: PermissionDescriptor): IState => {
+  const [state, setState] = useState<IState>("");
 
   useEffect(() => {
     let mounted = true;
@@ -36,20 +14,20 @@ const usePermission = (permissionDesc: IPermissionDescriptor): IState => {
       if (!mounted) {
         return;
       }
-      setState(() => permissionStatus?.state ?? '');
+      setState(() => permissionStatus?.state ?? "");
     };
 
     navigator.permissions
       .query(permissionDesc)
       .then((status) => {
         permissionStatus = status;
-        on(permissionStatus, 'change', onChange);
+        on(permissionStatus, "change", onChange);
         onChange();
       })
       .catch(noop);
 
     return () => {
-      permissionStatus && off(permissionStatus, 'change', onChange);
+      permissionStatus && off(permissionStatus, "change", onChange);
       mounted = false;
       permissionStatus = null;
     };

diff --git a/stories/usePermission.story.tsx b/stories/usePermission.story.tsx
@@ -4,7 +4,8 @@ import { usePermission } from '../src';
 import ShowDocs from './util/ShowDocs';
 
 const Demo = () => {
-  const state = usePermission({ name: 'microphone' });
+  // type PermissionName = "geolocation" | "notifications" | "persistent-storage" | "push" | "screen-wake-lock" | "xr-spatial-tracking";
+  const state = usePermission({ name: 'notifications' });
 
   return <pre>{JSON.stringify(state, null, 2)}</pre>;
 };