new: Support for Page Options - Hide Inherited [#150] (#151)

* feat - Base option. * fix - styling options. * Small fixes * on sidebar.
milesj · Sep 1, 2024 · 19c8bff · 19c8bff
1 parent 528be41
commit 19c8bff
Show file tree

Hide file tree

Showing 5 changed files with 137 additions and 44 deletions.
diff --git a/packages/plugin/src/components/ApiItem.tsx b/packages/plugin/src/components/ApiItem.tsx
@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { createContext, useMemo, useState } from 'react';
 import { PageMetadata } from '@docusaurus/theme-common';
 import type { Props as DocItemProps } from '@theme/DocItem';
 import { useReflection, useRequiredReflection } from '../hooks/useReflection';
@@ -12,15 +12,20 @@ import { Flags } from './Flags';
 import { Reflection } from './Reflection';
 import { TypeParametersGeneric } from './TypeParametersGeneric';
 
-function extractTOC(item: TSDDeclarationReflection, map: TSDDeclarationReflectionMap): TOCItem[] {
+function extractTOC(
+	item: TSDDeclarationReflection,
+	map: TSDDeclarationReflectionMap,
+	hideInherited: boolean,
+): TOCItem[] {
 	const toc: TOCItem[] = [];
 	const mapped = new Set<string>();
 
 	item.groups?.forEach((group) => {
 		group.children?.forEach((childId) => {
 			const child = map[childId];
+			const shouldShow = child.inheritedFrom ? !hideInherited : true;
 
-			if (mapped.has(child.name)) {
+			if (!shouldShow || mapped.has(child.name)) {
 				return;
 			}
 
@@ -48,10 +53,21 @@ export interface ApiItemProps extends Pick<DocItemProps, 'route'> {
 	readme?: React.ComponentType;
 }
 
+export const ApiOptionsContext = createContext({
+	hideInherited: false,
+	setHideInherited: (hideInherited: boolean) => {}
+});
+
 export default function ApiItem({ readme: Readme, route }: ApiItemProps) {
+	const [hideInherited, setHideInherited] = useState(false);
+	const apiOptions = useMemo(() => ({
+		hideInherited,
+		setHideInherited,
+	}), [hideInherited, setHideInherited]);
+
 	const item = useRequiredReflection((route as unknown as { id: number }).id);
 	const reflections = useReflectionMap();
-	const toc = useMemo(() => extractTOC(item, reflections), [item, reflections]);
+	const toc = useMemo(() => extractTOC(item, reflections, hideInherited), [item, reflections, hideInherited]);
 
 	// Pagination
 	const prevItem = useReflection(item.previousId);
@@ -60,47 +76,49 @@ export default function ApiItem({ readme: Readme, route }: ApiItemProps) {
 		() => ({
 			next: nextItem
 				? {
-						permalink: nextItem.permalink,
-						title: escapeMdx(nextItem.name),
-					}
+					permalink: nextItem.permalink,
+					title: escapeMdx(nextItem.name),
+				}
 				: undefined,
 			previous: prevItem
 				? {
-						permalink: prevItem.permalink,
-						title: escapeMdx(prevItem.name),
-					}
+					permalink: prevItem.permalink,
+					title: escapeMdx(prevItem.name),
+				}
 				: undefined,
 		}),
 		[nextItem, prevItem],
 	);
 
 	return (
-		<ApiItemLayout
-			heading={
-				<>
-					<span className="tsd-header-flags">
-						<Flags flags={item.flags} />
-					</span>
-					{escapeMdx(item.name)} <TypeParametersGeneric params={item.typeParameters} />
-				</>
-			}
-			pageMetadata={
-				<PageMetadata
-					description={item.comment?.summary ? displayPartsToMarkdown(item.comment.summary) : ''}
-					title={`${item.name} | API`}
-				/>
-			}
-			pagingMetadata={pagingMetadata}
-			route={route}
-			toc={toc}
-		>
-			{Readme && (
-				<section className="tsd-readme">
-					<Readme />
-				</section>
-			)}
+		<ApiOptionsContext.Provider value={apiOptions}>
+			<ApiItemLayout
+				heading={
+					<>
+						<span className="tsd-header-flags">
+							<Flags flags={item.flags} />
+						</span>
+						{escapeMdx(item.name)} <TypeParametersGeneric params={item.typeParameters} />
+					</>
+				}
+				pageMetadata={
+					<PageMetadata
+						description={item.comment?.summary ? displayPartsToMarkdown(item.comment.summary) : ''}
+						title={`${item.name} | API`}
+					/>
+				}
+				pagingMetadata={pagingMetadata}
+				route={route}
+				toc={toc}
+			>
+				{Readme && (
+					<section className="tsd-readme">
+						<Readme />
+					</section>
+				)}
 
-			<Reflection reflection={item} />
-		</ApiItemLayout>
+				<Reflection reflection={item}  />
+			</ApiItemLayout>
+		</ApiOptionsContext.Provider>
 	);
 }
diff --git a/packages/plugin/src/components/ApiItemLayout.tsx b/packages/plugin/src/components/ApiItemLayout.tsx
@@ -14,6 +14,7 @@ import TOC from '@theme/TOC';
 import TOCCollapsible from '@theme/TOCCollapsible';
 import { useBreadcrumbs } from '../hooks/useBreadcrumbs';
 import type { TOCItem } from '../types';
+import ApiOptionsLayout from './ApiOptionsLayout'
 import { Footer } from './Footer';
 import { VersionBanner } from './VersionBanner';
 
@@ -54,12 +55,15 @@ export default function ApiItemLayout({
 							<DocVersionBadge />
 
 							{canRenderTOC && (
-								<TOCCollapsible
-									className={`${ThemeClassNames.docs.docTocMobile ?? ''} apiTocMobile`}
-									maxHeadingLevel={6}
-									minHeadingLevel={1}
-									toc={toc}
-								/>
+								<>
+									{!renderTocDesktop && <ApiOptionsLayout className="tsd-api-options-mobile" />}
+									<TOCCollapsible
+										className={`${ThemeClassNames.docs.docTocMobile ?? ''} apiTocMobile`}
+										maxHeadingLevel={6}
+										minHeadingLevel={1}
+										toc={toc}
+									/>
+								</>
 							)}
 
 							<div className={`${ThemeClassNames.docs.docMarkdown ?? ''} markdown`}>
@@ -79,6 +83,7 @@ export default function ApiItemLayout({
 
 				{renderTocDesktop && (
 					<div className="col col--3">
+						<ApiOptionsLayout className="tsd-api-options" />
 						<TOC
 							className={ThemeClassNames.docs.docTocDesktop}
 							maxHeadingLevel={6}

diff --git a/packages/plugin/src/components/ApiOptionsLayout.tsx b/packages/plugin/src/components/ApiOptionsLayout.tsx
@@ -0,0 +1,22 @@
+import { useCallback, useContext } from 'react';
+import { ApiOptionsContext } from './ApiItem';
+
+export default function ApiOptionsLayout({ className }: { className: string }) {
+  const { hideInherited, setHideInherited } = useContext(ApiOptionsContext);
+  const handleHideInherited = useCallback(() => {
+    setHideInherited(!hideInherited);
+  }, [hideInherited, setHideInherited]);
+
+  return (
+    <>
+      <div className={className}>
+        <div><b>Page Options</b></div>
+        <label>
+          <input checked={hideInherited} type="checkbox" onChange={handleHideInherited} />
+          <span>Hide Inherited</span>
+        </label>
+        <div />
+      </div>
+    </>
+  );
+}
diff --git a/packages/plugin/src/components/Member.tsx b/packages/plugin/src/components/Member.tsx
@@ -1,12 +1,13 @@
 // https://github.com/TypeStrong/typedoc-default-themes/blob/master/src/default/partials/members.hbs
 
-import { Fragment } from 'react';
+import { Fragment, useContext } from 'react';
 import type { JSONOutput } from 'typedoc';
 import { useRequiredReflection } from '../hooks/useReflection';
 import { useReflectionMap } from '../hooks/useReflectionMap';
 import { escapeMdx } from '../utils/helpers';
 import { hasOwnDocument } from '../utils/visibility';
 import { AnchorLink } from './AnchorLink';
+import { ApiOptionsContext } from './ApiItem';
 import { CommentBadges, isCommentWithModifiers } from './CommentBadges';
 import { Flags } from './Flags';
 import { MemberDeclaration } from './MemberDeclaration';
@@ -25,6 +26,9 @@ export function Member({ id }: MemberProps) {
 	const { comment } = reflection;
 	let content: React.ReactNode = null;
 
+	const apiOptions = useContext(ApiOptionsContext);
+	const shouldHideInherited = reflection.inheritedFrom ? apiOptions.hideInherited : false;
+
 	if (reflection.signatures) {
 		content = <MemberSignatures inPanel sigs={reflection.signatures} />;
 	} else if (reflection.getSignature || reflection.setSignature) {
@@ -42,7 +46,7 @@ export function Member({ id }: MemberProps) {
 	}
 
 	return (
-		<section className="tsd-panel tsd-member">
+		!shouldHideInherited && <section className="tsd-panel tsd-member">
 			<h3 className="tsd-panel-header">
 				<AnchorLink id={reflection.name} />
 				<SourceLink sources={reflection.sources} />

diff --git a/packages/plugin/src/components/styles.css b/packages/plugin/src/components/styles.css
@@ -6,6 +6,50 @@
 	--tsd-spacing-horizontal: 1rem;
 }
 
+.tsd-api-options {
+	border-left: 1px solid var(--ifm-toc-border-color);
+	font-size: var(--tsd-font-small);
+	padding-left: var(--ifm-toc-padding-horizontal);
+}
+.tsd-api-options > div:first-child {
+	margin: var(--ifm-toc-padding-vertical) var(--ifm-toc-padding-horizontal);
+}
+.tsd-api-options > label {
+	margin: var(--ifm-toc-padding-vertical) var(--ifm-toc-padding-horizontal);
+}
+.tsd-api-options > label > input {
+	margin: 0 5px 0 0;
+	vertical-align: middle;
+}
+.tsd-api-options > label > span {
+	vertical-align: middle;
+}
+.tsd-api-options > div:last-child {
+	border-bottom: 1px solid var(--ifm-toc-border-color);
+	margin-top: 1rem;
+}
+
+.tsd-api-options-mobile {
+	font-size: var(--tsd-font-small);
+}
+.tsd-api-options-mobile > div:first-child {
+	margin: var(--ifm-toc-padding-vertical) var(--ifm-toc-padding-horizontal);
+}
+.tsd-api-options-mobile > label {
+	margin: var(--ifm-toc-padding-vertical) var(--ifm-toc-padding-horizontal);
+}
+.tsd-api-options-mobile > label > input {
+	margin: 0 5px 0 0;
+	vertical-align: middle;
+}
+.tsd-api-options-mobile > label > span {
+	vertical-align: middle;
+}
+.tsd-api-options-mobile > div:last-child {
+	border-bottom: 1px solid var(--ifm-toc-border-color);
+	margin-top: 1rem;
+}
+
 .tsd-panel {
 	border: 1px solid var(--ifm-card-background-color);
 	border-radius: var(--ifm-global-radius);