Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | 1x 1x 1x 1x 1x 1x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x | import { VSCodeCheckbox, VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
import { useState } from "react"
import { useDebouncedInput } from "../utils/useDebouncedInput"
/**
* Props for the BaseUrlField component
*/
interface BaseUrlFieldProps {
initialValue: string | undefined
onChange: (value: string) => void
defaultValue?: string
label?: string
placeholder?: string
disabled?: boolean
showLockIcon?: boolean
}
/**
* A reusable component for toggling and entering custom base URLs
*/
export const BaseUrlField = ({
initialValue,
onChange,
label = "Use custom base URL",
placeholder = "Default: https://api.example.com",
disabled = false,
showLockIcon = false,
}: BaseUrlFieldProps) => {
const [isEnabled, setIsEnabled] = useState(!!initialValue)
const [localValue, setLocalValue] = useDebouncedInput(initialValue || "", onChange)
const handleToggle = (e: any) => {
const checked = e.target.checked === true
setIsEnabled(checked)
if (!checked) {
setLocalValue("")
}
}
return (
<div>
<div className="flex items-center gap-2">
<VSCodeCheckbox checked={isEnabled} disabled={disabled} onChange={handleToggle}>
{label}
</VSCodeCheckbox>
{showLockIcon && <i className="codicon codicon-lock text-[var(--vscode-descriptionForeground)] text-sm" />}
</div>
{isEnabled && (
<VSCodeTextField
disabled={disabled}
onInput={(e: any) => setLocalValue(e.target.value.trim())}
placeholder={placeholder}
style={{ width: "100%", marginTop: 3 }}
type="text"
value={localValue}
/>
)}
</div>
)
}
|