Improve <details> component (#238)

Co-authored-by: Gregory Schier <gschier1990@gmail.com>
This commit is contained in:
Song
2025-07-19 05:28:24 +08:00
committed by GitHub
parent 4a2fb6ed48
commit 0d4b7bb5e2
6 changed files with 95 additions and 65 deletions

View File

@@ -5,8 +5,8 @@ import { connections } from '../lib/data/connections';
import { encodings } from '../lib/data/encodings';
import { headerNames } from '../lib/data/headerNames';
import { mimeTypes } from '../lib/data/mimetypes';
import { Banner } from './core/Banner';
import { CountBadge } from './core/CountBadge';
import { DetailsBanner } from './core/DetailsBanner';
import type { GenericCompletionConfig } from './core/Editor/genericCompletion';
import type { InputProps } from './core/Input';
import type { Pair, PairEditorProps } from './core/PairEditor';
@@ -35,35 +35,36 @@ export function HeadersEditor({
return (
<div className="@container w-full h-full grid grid-rows-[auto_minmax(0,1fr)]">
{validInheritedHeaders.length > 0 ? (
<Banner className="!py-0 mb-1.5 border-dashed" color="secondary">
<details>
<summary className="py-1.5 text-sm !cursor-default !select-none opacity-70 hover:opacity-100">
<HStack>
Inherited <CountBadge count={validInheritedHeaders.length} />
</HStack>
</summary>
<div className="pb-2">
{validInheritedHeaders?.map((pair, i) => (
<PairEditorRow
key={pair.id + '.' + i}
index={i}
disabled
disableDrag
className="py-1"
onChange={() => {}}
onEnd={() => {}}
onMove={() => {}}
pair={ensurePairId(pair)}
stateKey={null}
nameAutocompleteFunctions
nameAutocompleteVariables
valueAutocompleteFunctions
valueAutocompleteVariables
/>
))}
</div>
</details>
</Banner>
<DetailsBanner
color="secondary"
className="text-sm mb-1.5"
summary={
<HStack>
Inherited <CountBadge count={validInheritedHeaders.length} />
</HStack>
}
>
<div className="pb-2">
{validInheritedHeaders?.map((pair, i) => (
<PairEditorRow
key={pair.id + '.' + i}
index={i}
disabled
disableDrag
className="py-1"
onChange={() => {}}
onEnd={() => {}}
onMove={() => {}}
pair={ensurePairId(pair)}
stateKey={null}
nameAutocompleteFunctions
nameAutocompleteVariables
valueAutocompleteFunctions
valueAutocompleteVariables
/>
))}
</div>
</DetailsBanner>
) : (
<span />
)}