ApiOperationBodySchemeSelector() — supabase Function Reference

Source Code

apps/docs/features/docs/Reference.ui.client.tsx lines 64–117

export function ApiOperationBodySchemeSelector({
  requestBody,
  className,
}: {
  requestBody: IApiEndPoint['requestBody']
  className?: string
}) {
  const availableSchemes = Object.keys(requestBody?.content || {}) as Array<
    'application/json' | 'application/x-www-form-urlencoded'
  >
  const [selectedScheme, setSelectedScheme] = useState(availableSchemes[0])

  const containerRef = useRef<HTMLDivElement>(null)
  const allSchemeDetails = useRef<HTMLUListElement[]>([])
  useEffect(() => {
    const elements = containerRef.current?.querySelectorAll(
      `[${API_REFERENCE_REQUEST_BODY_SCHEMA_DATA_ATTRIBUTES.KEY}]`
    )
    allSchemeDetails.current = elements ? (Array.from(elements) as HTMLUListElement[]) : []
  }, [])

  useEffect(() => {
    allSchemeDetails.current?.forEach((schemeDetails) => {
      schemeDetails.hidden =
        schemeDetails.getAttribute(API_REFERENCE_REQUEST_BODY_SCHEMA_DATA_ATTRIBUTES.KEY) !==
        selectedScheme
    })
  }, [selectedScheme])

  return (
    <div ref={containerRef} className={cn('flex items-center justify-between gap-2', className)}>
      <h3 className="text-base text-foreground">Body</h3>
      <Select_Shadcn_
        value={selectedScheme}
        onValueChange={(value) =>
          setSelectedScheme(value as 'application/json' | 'application/x-www-form-urlencoded')
        }
      >
        <SelectTrigger_Shadcn_ className="w-48 [&>span]:w-full [&>span]:truncate">
          <SelectValue_Shadcn_ />
        </SelectTrigger_Shadcn_>
        <SelectContent_Shadcn_>
          <SelectGroup_Shadcn_>
            {availableSchemes.map((scheme) => (
              <SelectItem_Shadcn_ key={scheme} value={scheme}>
                {scheme}
              </SelectItem_Shadcn_>
            ))}
          </SelectGroup_Shadcn_>
        </SelectContent_Shadcn_>
      </Select_Shadcn_>
    </div>
  )
}