({
searchParameters = {
hitsPerPage: 5,
},
}: SearchProps)
| 92 | } |
| 93 | let DocSearchModal: any = null |
| 94 | export function Search({ |
| 95 | searchParameters = { |
| 96 | hitsPerPage: 5, |
| 97 | }, |
| 98 | }: SearchProps) { |
| 99 | const [isShowing, setIsShowing] = React.useState(false) |
| 100 | |
| 101 | const importDocSearchModalIfNeeded = React.useCallback(function importDocSearchModalIfNeeded() { |
| 102 | if (DocSearchModal) { |
| 103 | return Promise.resolve() |
| 104 | } |
| 105 | |
| 106 | // @ts-ignore |
| 107 | return import('@docsearch/react/modal').then(({ DocSearchModal: Modal }) => { |
| 108 | DocSearchModal = Modal |
| 109 | }) |
| 110 | }, []) |
| 111 | |
| 112 | const onOpen = React.useCallback( |
| 113 | function onOpen() { |
| 114 | importDocSearchModalIfNeeded().then(() => { |
| 115 | setIsShowing(true) |
| 116 | }) |
| 117 | }, |
| 118 | [importDocSearchModalIfNeeded, setIsShowing], |
| 119 | ) |
| 120 | |
| 121 | const onClose = React.useCallback( |
| 122 | function onClose() { |
| 123 | setIsShowing(false) |
| 124 | }, |
| 125 | [setIsShowing], |
| 126 | ) |
| 127 | |
| 128 | useDocSearchKeyboardEvents({ isOpen: isShowing, onOpen, onClose }) |
| 129 | const { t } = useTranslation() |
| 130 | return ( |
| 131 | <> |
| 132 | <Head> |
| 133 | <link rel="preconnect" href={`https://${options.appId}-dsn.algolia.net`} /> |
| 134 | </Head> |
| 135 | |
| 136 | <button |
| 137 | aria-label={t('docs.search') ?? 'Search'} |
| 138 | type="button" |
| 139 | tw="ml-4 inline-flex items-center p-1 text-lg md:hidden lg:ml-6" |
| 140 | onClick={onOpen} |
| 141 | > |
| 142 | <IconSearch tw="align-middle" /> |
| 143 | </button> |
| 144 | |
| 145 | <button |
| 146 | type="button" |
| 147 | tw="bg-secondary-button dark:bg-gray-80 cursor-pointer text-gray-30 relative hidden h-10 w-full items-center rounded-lg py-1 pl-4 pr-0.5 text-left align-middle text-sm shadow-inner outline-none focus:outline-none focus:ring md:flex betterhover:hover:bg-opacity-80" |
| 148 | onClick={onOpen} |
| 149 | > |
| 150 | <IconSearch tw="text-gray-30 hover:text-gray-70 mr-3 shrink-0 align-middle" /> |
| 151 | {t('docs.search')} |
nothing calls this directly
no test coverage detected
searching dependent graphs…