Nomchy/discord.js
1
0
Fork 0
mirror of https://github.com/discordjs/discord.js.git synced 2026-03-16 11:33:30 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(website): use dropdowns for overloads (#8630)

Browse Source 
Co-authored-by: Almeida <almeidx@pm.me>
Co-authored-by: iCrawl <buechler.noel@outlook.com>
This commit is contained in:
Suneet Tipirneni
2022-09-17 08:09:54 -04:00
committed by GitHub
parent 0785353efe
commit 678ceaa014
8 changed files with 152 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
packages/website/src/components/MethodItem.tsx
View File

@@ -1,6 +1,8 @@
import type { ApiMethodJSON, ApiMethodSignatureJSON } from '@discordjs/api-extractor-utils';
import { useCallback, useMemo } from 'react';
import { Menu, MenuButton, MenuItem, useMenuState } from 'ariakit';
import { useCallback, useMemo, useState } from 'react';
import { FiLink } from 'react-icons/fi';
import { VscChevronDown, VscVersions } from 'react-icons/vsc';
import { HyperlinkedText } from './HyperlinkedText';
import { InheritanceText } from './InheritanceText';
import { ParameterTable } from './ParameterTable';
@@ -8,6 +10,10 @@ import { TSDoc } from './tsdoc/TSDoc';
export function MethodItem({ data }: { data: ApiMethodJSON | ApiMethodSignatureJSON }) {
const method = data as ApiMethodJSON;
const [overloadIndex, setOverloadIndex] = useState(1);
const overloadedData = method.mergedSiblings[overloadIndex - 1]!;
const menu = useMenuState({ gutter: 8, sameWidth: true, fitViewport: true });
const key = useMemo(
() => `${data.name}${data.overloadIndex && data.overloadIndex > 1 ? `:${data.overloadIndex}` : ''}`,
[data.name, data.overloadIndex],
@@ -54,7 +60,7 @@ export function MethodItem({ data }: { data: ApiMethodJSON | ApiMethodSignatureJ
</div>
) : null}
<div className="flex flex-row flex-wrap gap-1">
<h4 className="break-all font-mono text-lg font-bold">{getShorthandName(data)}</h4>
<h4 className="break-all font-mono text-lg font-bold">{getShorthandName(overloadedData)}</h4>
<h4 className="font-mono text-lg font-bold">:</h4>
<h4 className="break-all font-mono text-lg font-bold">
<HyperlinkedText tokens={data.returnTypeTokens} />
@@ -62,13 +68,45 @@ export function MethodItem({ data }: { data: ApiMethodJSON | ApiMethodSignatureJ
</div>
</div>
</div>
{data.mergedSiblings.length > 1 ? (
<div className="flex flex-row place-items-center gap-2">
<MenuButton
state={menu}
className="bg-light-600 hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 rounded p-3"
>
<div className="flex flex-row place-content-between place-items-center gap-2">
<VscVersions size={20} />
<div>
<span className="font-semibold">{`Overload ${overloadIndex}`}</span>
{` of ${data.mergedSiblings.length}`}
</div>
<VscChevronDown
className={`transform transition duration-150 ease-in-out ${menu.open ? 'rotate-180' : 'rotate-0'}`}
size={20}
/>
</div>
</MenuButton>
<Menu
state={menu}
className="dark:bg-dark-600 border-light-800 dark:border-dark-100 z-20 flex flex-col rounded border bg-white p-1"
>
{data.mergedSiblings.map((_, idx) => (
<MenuItem
key={idx}
className="hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 cursor-pointer rounded bg-white p-3 text-sm"
onClick={() => setOverloadIndex(idx + 1)}
>{`Overload ${idx + 1}`}</MenuItem>
))}
</Menu>
</div>
) : null}
{data.summary || data.parameters.length ? (
<div className="mb-4 flex flex-col gap-4">
{data.deprecated ? <TSDoc node={data.deprecated} /> : null}
{data.summary ? <TSDoc node={data.summary} /> : null}
{data.remarks ? <TSDoc node={data.remarks} /> : null}
{data.comment ? <TSDoc node={data.comment} /> : null}
{data.parameters.length ? <ParameterTable data={data.parameters} /> : null}
{overloadedData.deprecated ? <TSDoc node={overloadedData.deprecated} /> : null}
{overloadedData.summary ?? data.summary ? <TSDoc node={overloadedData.summary ?? data.summary!} /> : null}
{overloadedData.remarks ? <TSDoc node={overloadedData.remarks} /> : null}
{overloadedData.comment ? <TSDoc node={overloadedData.comment} /> : null}
{overloadedData.parameters.length ? <ParameterTable data={overloadedData.parameters} /> : null}
{data.inheritanceData ? <InheritanceText data={data.inheritanceData} /> : null}
</div>
) : null}