starred/yaak-mountain-loop
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-04-24 01:28:35 +02:00
Code Issues 8 Packages Projects Releases 10 Wiki Activity

Docs explorer tweaks

Browse Source
This commit is contained in:
Gregory Schier
2025-07-10 06:35:52 -07:00
parent f0bafb21cc
commit 9cd430b3de
1 changed files with 14 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src-web/components/GraphQLDocsExplorer.tsx
View File

@@ -24,9 +24,9 @@ import {
import type { CSSProperties, HTMLAttributes, KeyboardEvent, ReactNode } from 'react'; import type { CSSProperties, HTMLAttributes, KeyboardEvent, ReactNode } from 'react';
import { Fragment, memo, useCallback, useMemo, useRef, useState } from 'react'; import { Fragment, memo, useCallback, useMemo, useRef, useState } from 'react';
import { showGraphQLDocExplorerAtom } from '../atoms/graphqlSchemaAtom'; import { showGraphQLDocExplorerAtom } from '../atoms/graphqlSchemaAtom';
import { useClickOutside } from '../hooks/useClickOutside';
import { useContainerSize } from '../hooks/useContainerQuery'; import { useContainerSize } from '../hooks/useContainerQuery';
import { useDebouncedValue } from '../hooks/useDebouncedValue'; import { useDebouncedValue } from '../hooks/useDebouncedValue';
import { useRandomKey } from '../hooks/useRandomKey';
import { useStateWithDeps } from '../hooks/useStateWithDeps'; import { useStateWithDeps } from '../hooks/useStateWithDeps';
import { jotaiStore } from '../lib/jotai'; import { jotaiStore } from '../lib/jotai';
import { CountBadge } from './core/CountBadge'; import { CountBadge } from './core/CountBadge';
@@ -165,6 +165,7 @@ function GraphQLExplorerHeader({
})} })}
</div> </div>
<GqlSchemaSearch <GqlSchemaSearch
key={item?.type.toString()} // Force reset when changing items
maxHeight={containerHeight} maxHeight={containerHeight}
currentItem={item} currentItem={item}
schema={schema} schema={schema}
@@ -629,10 +630,10 @@ function GqlSchemaSearch({
const [activeResult, setActiveResult] = useStateWithDeps<SearchResult | null>(null, [ const [activeResult, setActiveResult] = useStateWithDeps<SearchResult | null>(null, [
currentItem, currentItem,
]); ]);
const [forceRefreshKey, regenerateForceRefreshKey] = useRandomKey(); const [focused, setOpen] = useState<boolean>(false);
const [focused, setFocused] = useState<boolean>(false);
const [value, setValue] = useState<string>(''); const [value, setValue] = useState<string>('');
const debouncedValue = useDebouncedValue(value, 300); const debouncedValue = useDebouncedValue(value, 300);
const menuRef = useRef<HTMLDivElement>(null);
const canSearch = const canSearch =
currentItem == null || currentItem == null ||
(isNamedType(currentItem.type) && (isNamedType(currentItem.type) &&
@@ -681,7 +682,7 @@ function GqlSchemaSearch({
} }
} }
}); });
return results.slice(0, 40); return results.slice(0, 100);
}, [currentItem, schema, debouncedValue, value]); }, [currentItem, schema, debouncedValue, value]);
const activeIndex = useMemo(() => { const activeIndex = useMemo(() => {
@@ -690,6 +691,7 @@ function GqlSchemaSearch({
}, [activeResult, results]); }, [activeResult, results]);
const inputRef = useRef<HTMLInputElement>(null); const inputRef = useRef<HTMLInputElement>(null);
useClickOutside(menuRef, () => setOpen(false));
const handleKeyDown = useCallback( const handleKeyDown = useCallback(
(e: KeyboardEvent<HTMLInputElement>) => { (e: KeyboardEvent<HTMLInputElement>) => {
@@ -732,7 +734,6 @@ function GqlSchemaSearch({
hideLabel hideLabel
defaultValue={value} defaultValue={value}
placeholder={focused ? 'Search ' + (currentItem?.type.toString() ?? 'Schema') : 'Search'} placeholder={focused ? 'Search ' + (currentItem?.type.toString() ?? 'Schema') : 'Search'}
forceUpdateKey={forceRefreshKey}
leftSlot={ leftSlot={
<div className="w-10 flex justify-center items-center"> <div className="w-10 flex justify-center items-center">
<Icon size="sm" icon="search" color="secondary" /> <Icon size="sm" icon="search" color="secondary" />
@@ -740,17 +741,13 @@ function GqlSchemaSearch({
} }
onChange={setValue} onChange={setValue}
onKeyDownCapture={handleKeyDown} onKeyDownCapture={handleKeyDown}
onFocus={() => setFocused(true)} onFocus={() => {
onBlur={() => { setOpen(true);
setValue('');
regenerateForceRefreshKey();
setTimeout(() => {
setFocused(false);
}, 100);
}} }}
/> />
<div <div
style={{ maxHeight: maxHeight - 60}} ref={menuRef}
style={{ maxHeight: maxHeight - 60 }}
className={classNames( className={classNames(
'x-theme-menu absolute z-10 mt-0.5 p-1.5 top-full right-0 bg-surface', 'x-theme-menu absolute z-10 mt-0.5 p-1.5 top-full right-0 bg-surface',
'border border-border rounded-lg overflow-y-auto w-full shadow-lg', 'border border-border rounded-lg overflow-y-auto w-full shadow-lg',
@@ -768,7 +765,10 @@ function GqlSchemaSearch({
return ( return (
<SearchResult <SearchResult
key={`${i}::${r.type.name}`} key={`${i}::${r.type.name}`}
onClick={() => setItem(item)} onMouseDown={() => {
setItem(item);
setOpen(false);
}}
onMouseEnter={() => setActiveResult(r)} onMouseEnter={() => setActiveResult(r)}
isActive={i === activeIndex} isActive={i === activeIndex}
> >