nezumi/onedrive-vercel-index
1
0
Fork 0
mirror of https://github.com/Nezumi-2711/onedrive-vercel-index.git synced 2026-09-22 13:38:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

hot keys support for opening search modal

Browse Source
This commit is contained in:
spencerwooo
2022-01-22 19:35:23 +08:00
parent c3daf370ec
commit 3d918fbd90
5 changed files with 72 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Navbar.tsx
+16 -1
View File
@@ -2,6 +2,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { IconName } from '@fortawesome/fontawesome-svg-core'
import { Dialog, Transition } from '@headlessui/react'
import toast, { Toaster } from 'react-hot-toast'
import { useHotkeys } from 'react-hotkeys-hook'
import Link from 'next/link'
import Image from 'next/image'
@@ -10,15 +11,20 @@ import { Fragment, useEffect, useState } from 'react'
import siteConfig from '../config/site.json'
import SearchModal from './SearchModal'
import useDeviceOS from '../utils/useDeviceOS'
const Navbar = () => {
const router = useRouter()
const os = useDeviceOS()
const [tokenPresent, setTokenPresent] = useState(false)
const [isOpen, setIsOpen] = useState(false)
const [searchOpen, setSearchOpen] = useState(false)
const openSearchBox = () => setSearchOpen(true)
useHotkeys(`${os === 'mac' ? 'cmd' : 'ctrl'}+k`, openSearchBox)
useEffect(() => {
const storedToken = () => {
for (const r of siteConfig.protectedRoutes) {
@@ -60,11 +66,20 @@ const Navbar = () => {
<div className="flex items-center flex-1 md:flex-initial space-x-4 text-gray-700">
<button
className="flex-1 flex items-center space-x-2 rounded-lg bg-gray-100 dark:bg-gray-800 md:w-40 px-2.5 py-1.5 dark:text-white hover:opacity-80"
className="flex-1 flex items-center justify-between rounded-lg bg-gray-100 dark:bg-gray-800 md:w-48 px-2.5 py-1.5 dark:text-white hover:opacity-80"
onClick={openSearchBox}
>
<div className="flex items-center space-x-2">
<FontAwesomeIcon icon="search" />
<span className="text-sm font-medium">Search ...</span>
</div>
<div className="flex items-center space-x-1">
<div className="px-2 py-1 rounded-lg bg-gray-100 dark:bg-gray-700 font-medium text-xs">
{os === 'mac' ? '⌘' : 'Ctrl'}
</div>
<div className="px-2 py-1 rounded-lg bg-gray-100 dark:bg-gray-700 font-medium text-xs">K</div>
</div>
</button>
{siteConfig.links.length !== 0 &&
components/SearchModal.tsx
+1 -3
View File
@@ -2,13 +2,11 @@ import axios from 'axios'
import AwesomeDebouncePromise from 'awesome-debounce-promise'
import { useAsync } from 'react-async-hook'
import useConstant from 'use-constant'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { Dispatch, FC, Fragment, SetStateAction, useState } from 'react'
import { Dialog, Transition } from '@headlessui/react'
import Link from 'next/link'
import Image from 'next/image'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { OdSearchResult } from '../types'
import { getFileIcon } from '../utils/getFileIcon'
package-lock.json
Generated
+31
View File
@@ -29,6 +29,7 @@
"react-copy-to-clipboard": "^5.0.3",
"react-dom": "^17.0.2",
"react-hot-toast": "^2.0.0",
"react-hotkeys-hook": "^3.4.4",
"react-markdown": "^6.0.2",
"react-player": "^2.9.0",
"react-reader": "^0.20.4",
@@ -3446,6 +3447,11 @@
"integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==",
"dev": true
},
"node_modules/hotkeys-js": {
"version": "3.8.7",
"resolved": "https://registry.npmjs.org/hotkeys-js/-/hotkeys-js-3.8.7.tgz",
"integrity": "sha512-ckAx3EkUr5XjDwjEHDorHxRO2Kb7z6Z2Sxul4MbBkN8Nho7XDslQsgMJT+CiJ5Z4TgRxxvKHEpuLE3imzqy4Lg=="
},
"node_modules/html-void-elements": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-2.0.0.tgz",
@@ -5803,6 +5809,18 @@
"react-dom": ">=16"
}
},
"node_modules/react-hotkeys-hook": {
"version": "3.4.4",
"resolved": "https://registry.npmjs.org/react-hotkeys-hook/-/react-hotkeys-hook-3.4.4.tgz",
"integrity": "sha512-vaORq07rWgmuF3owWRhgFV/3VL8/l2q9lz0WyVEddJnWTtKW+AOgU5YgYKuwN6h6h7bCcLG3MFsJIjCrM/5DvQ==",
"dependencies": {
"hotkeys-js": "3.8.7"
},
"peerDependencies": {
"react": ">=16.8.1",
"react-dom": ">=16.8.1"
}
},
"node_modules/react-is": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -10034,6 +10052,11 @@
"integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==",
"dev": true
},
"hotkeys-js": {
"version": "3.8.7",
"resolved": "https://registry.npmjs.org/hotkeys-js/-/hotkeys-js-3.8.7.tgz",
"integrity": "sha512-ckAx3EkUr5XjDwjEHDorHxRO2Kb7z6Z2Sxul4MbBkN8Nho7XDslQsgMJT+CiJ5Z4TgRxxvKHEpuLE3imzqy4Lg=="
},
"html-void-elements": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-2.0.0.tgz",
@@ -11761,6 +11784,14 @@
"goober": "^2.0.35"
}
},
"react-hotkeys-hook": {
"version": "3.4.4",
"resolved": "https://registry.npmjs.org/react-hotkeys-hook/-/react-hotkeys-hook-3.4.4.tgz",
"integrity": "sha512-vaORq07rWgmuF3owWRhgFV/3VL8/l2q9lz0WyVEddJnWTtKW+AOgU5YgYKuwN6h6h7bCcLG3MFsJIjCrM/5DvQ==",
"requires": {
"hotkeys-js": "3.8.7"
}
},
"react-is": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
package.json
+1
View File
@@ -30,6 +30,7 @@
"react-copy-to-clipboard": "^5.0.3",
"react-dom": "^17.0.2",
"react-hot-toast": "^2.0.0",
"react-hotkeys-hook": "^3.4.4",
"react-markdown": "^6.0.2",
"react-player": "^2.9.0",
"react-reader": "^0.20.4",
utils/useDeviceOS.ts
+21
View File
@@ -0,0 +1,21 @@
import { useEffect, useState } from 'react'
export default function useDeviceOS(): string {
const [os, setOS] = useState('')
useEffect(() => {
const userAgent = window.navigator.userAgent
if (userAgent.indexOf('Windows') > -1) {
setOS('windows')
} else if (userAgent.indexOf('Mac OS') > -1) {
setOS('mac')
} else if (userAgent.indexOf('Linux') > -1) {
setOS('linux')
} else {
setOS('other')
}
}, [])
return os
}