refactor: declare all props as interfaces (#6730)

* refactor: declare all props as interfaces

* fix

* fix...
This commit is contained in:
Joshua Chen 2022-02-21 11:52:11 +08:00 committed by GitHub
parent 5555290edc
commit c38200ba5b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 44 additions and 55 deletions

View file

@ -140,9 +140,9 @@ declare module '@docusaurus/Head' {
import type {HelmetProps} from 'react-helmet-async';
import type {ReactNode} from 'react';
export type HeadProps = HelmetProps & {children: ReactNode};
export type Props = HelmetProps & {children: ReactNode};
const Head: (props: HeadProps) => JSX.Element;
const Head: (props: Props) => JSX.Element;
export default Head;
}
@ -150,7 +150,7 @@ declare module '@docusaurus/Link' {
import type {CSSProperties, ComponentProps} from 'react';
type NavLinkProps = Partial<import('react-router-dom').NavLinkProps>;
export type LinkProps = NavLinkProps &
export type Props = NavLinkProps &
ComponentProps<'a'> & {
readonly className?: string;
readonly style?: CSSProperties;
@ -162,7 +162,7 @@ declare module '@docusaurus/Link' {
// escape hatch in case broken links check is annoying for a specific link
readonly 'data-noBrokenLinkCheck'?: boolean;
};
const Link: (props: LinkProps) => JSX.Element;
const Link: (props: Props) => JSX.Element;
export default Link;
}

View file

@ -66,8 +66,8 @@ declare module '@theme/IdealImage' {
images: SrcType[];
};
export type Props = ComponentProps<'img'> & {
img: {default: string} | {src: SrcImage; preSrc: string} | string;
};
export interface Props extends ComponentProps<'img'> {
readonly img: {default: string} | {src: SrcImage; preSrc: string} | string;
}
export default function IdealImage(props: Props): JSX.Element;
}

View file

@ -25,10 +25,10 @@ declare module '@docusaurus/plugin-pwa' {
}
declare module '@theme/PwaReloadPopup' {
export type PwaReloadPopupProps = {
export interface Props {
readonly onReload: () => void;
};
}
const PwaReloadPopup: (props: PwaReloadPopupProps) => JSX.Element;
const PwaReloadPopup: (props: Props) => JSX.Element;
export default PwaReloadPopup;
}

View file

@ -9,11 +9,11 @@ import React, {useState} from 'react';
import clsx from 'clsx';
import Translate, {translate} from '@docusaurus/Translate';
import type {PwaReloadPopupProps} from '@theme/PwaReloadPopup';
import type {Props} from '@theme/PwaReloadPopup';
import styles from './styles.module.css';
function PwaReloadPopup({onReload}: PwaReloadPopupProps): JSX.Element | false {
function PwaReloadPopup({onReload}: Props): JSX.Element | false {
const [isVisible, setIsVisible] = useState(true);
return (

View file

@ -208,9 +208,9 @@ declare module '@theme/DocSidebarItems' {
import type {Props as DocSidebarItemProps} from '@theme/DocSidebarItem';
import type {PropSidebarItem} from '@docusaurus/plugin-content-docs';
export type Props = Omit<DocSidebarItemProps, 'item' | 'index'> & {
export interface Props extends Omit<DocSidebarItemProps, 'item' | 'index'> {
readonly items: readonly PropSidebarItem[];
};
}
export default function DocSidebarItems(props: Props): JSX.Element;
}
@ -381,15 +381,15 @@ declare module '@theme/NavbarItem/DefaultNavbarItem' {
declare module '@theme/NavbarItem/NavbarNavLink' {
import type {ReactNode} from 'react';
import type {LinkProps} from '@docusaurus/Link';
import type {Props as LinkProps} from '@docusaurus/Link';
export type Props = LinkProps & {
export interface Props extends LinkProps {
readonly activeBasePath?: string;
readonly activeBaseRegex?: string;
readonly exact?: boolean;
readonly label?: ReactNode;
readonly prependBaseUrlToHref?: string;
};
}
export default function NavbarNavLink(props: Props): JSX.Element;
}
@ -605,67 +605,58 @@ declare module '@theme/Details' {
declare module '@theme/TOCItems' {
import type {TOCItem} from '@docusaurus/types';
export type TOCItemsProps = {
export interface Props {
readonly toc: readonly TOCItem[];
readonly minHeadingLevel?: number;
readonly maxHeadingLevel?: number;
readonly className?: string;
readonly linkClassName?: string | null;
readonly linkActiveClassName?: string;
};
}
export default function TOCItems(props: TOCItemsProps): JSX.Element;
export default function TOCItems(props: Props): JSX.Element;
}
declare module '@theme/TOC' {
import type {TOCItem} from '@docusaurus/types';
// minHeadingLevel only exists as a per-doc option,
// and won't have a default set by Joi. See TOC, TOCInline,
// TOCCollapsible for examples
export type TOCProps = {
// minHeadingLevel only exists as a per-doc option, and won't have a default
// set by Joi. See TOC, TOCInline, TOCCollapsible for examples
export interface Props {
readonly toc: readonly TOCItem[];
readonly minHeadingLevel?: number;
readonly maxHeadingLevel?: number;
readonly className?: string;
};
}
export type TOCHeadingsProps = {
readonly toc: readonly TOCItem[];
readonly minHeadingLevel?: number;
readonly maxHeadingLevel?: number;
};
export const TOCHeadings: (props: TOCHeadingsProps) => JSX.Element;
const TOC: (props: TOCProps) => JSX.Element;
const TOC: (props: Props) => JSX.Element;
export default TOC;
}
declare module '@theme/TOCInline' {
import type {TOCItem} from '@docusaurus/types';
export type TOCInlineProps = {
export interface Props {
readonly toc: readonly TOCItem[];
readonly minHeadingLevel?: number;
readonly maxHeadingLevel?: number;
};
}
const TOCInline: (props: TOCInlineProps) => JSX.Element;
const TOCInline: (props: Props) => JSX.Element;
export default TOCInline;
}
declare module '@theme/TOCCollapsible' {
import type {TOCItem} from '@docusaurus/types';
export type TOCCollapsibleProps = {
export interface Props {
readonly className?: string;
readonly minHeadingLevel?: number;
readonly maxHeadingLevel?: number;
readonly toc: readonly TOCItem[];
};
}
const TOCCollapsible: (props: TOCCollapsibleProps) => JSX.Element;
const TOCCollapsible: (props: Props) => JSX.Element;
export default TOCCollapsible;
}

View file

@ -7,7 +7,7 @@
import React from 'react';
import clsx from 'clsx';
import type {TOCProps} from '@theme/TOC';
import type {Props} from '@theme/TOC';
import TOCItems from '@theme/TOCItems';
import styles from './styles.module.css';
@ -16,7 +16,7 @@ import styles from './styles.module.css';
const LINK_CLASS_NAME = 'table-of-contents__link toc-highlight';
const LINK_ACTIVE_CLASS_NAME = 'table-of-contents__link--active';
function TOC({className, ...props}: TOCProps): JSX.Element {
function TOC({className, ...props}: Props): JSX.Element {
return (
<div className={clsx(styles.tableOfContents, 'thin-scrollbar', className)}>
<TOCItems

View file

@ -11,14 +11,14 @@ import Translate from '@docusaurus/Translate';
import {useCollapsible, Collapsible} from '@docusaurus/theme-common';
import styles from './styles.module.css';
import TOCItems from '@theme/TOCItems';
import type {TOCCollapsibleProps} from '@theme/TOCCollapsible';
import type {Props} from '@theme/TOCCollapsible';
export default function TOCCollapsible({
toc,
className,
minHeadingLevel,
maxHeadingLevel,
}: TOCCollapsibleProps): JSX.Element {
}: Props): JSX.Element {
const {collapsed, toggleCollapsed} = useCollapsible({
initialState: true,
});

View file

@ -6,7 +6,7 @@
*/
import React from 'react';
import type {TOCInlineProps} from '@theme/TOCInline';
import type {Props} from '@theme/TOCInline';
import styles from './styles.module.css';
import TOCItems from '@theme/TOCItems';
@ -14,7 +14,7 @@ function TOCInline({
toc,
minHeadingLevel,
maxHeadingLevel,
}: TOCInlineProps): JSX.Element {
}: Props): JSX.Element {
return (
<div className={styles.tableOfContentsInline}>
<TOCItems

View file

@ -6,7 +6,7 @@
*/
import React, {useMemo} from 'react';
import type {TOCItemsProps} from '@theme/TOCItems';
import type {Props} from '@theme/TOCItems';
import type {TOCItem} from '@docusaurus/types';
import {
type TOCHighlightConfig,
@ -62,7 +62,7 @@ export default function TOCItems({
minHeadingLevel: minHeadingLevelOption,
maxHeadingLevel: maxHeadingLevelOption,
...props
}: TOCItemsProps): JSX.Element | null {
}: Props): JSX.Element | null {
const themeConfig = useThemeConfig();
const minHeadingLevel =

View file

@ -7,9 +7,9 @@
import React from 'react';
import {Helmet} from 'react-helmet-async';
import type {HeadProps} from '@docusaurus/Head';
import type {Props} from '@docusaurus/Head';
function Head(props: HeadProps): JSX.Element {
function Head(props: Props): JSX.Element {
return <Helmet {...props} />;
}

View file

@ -20,7 +20,7 @@ import {useLinksCollector} from '../LinksCollector';
import {useBaseUrlUtils} from './useBaseUrl';
import {applyTrailingSlash} from '@docusaurus/utils-common';
import type {LinkProps} from '@docusaurus/Link';
import type {Props} from '@docusaurus/Link';
import type docusaurus from '../docusaurus';
declare global {
@ -46,7 +46,7 @@ function Link(
'data-noBrokenLinkCheck': noBrokenLinkCheck,
autoAddBaseUrl = true,
...props
}: LinkProps,
}: Props,
forwardedRef: React.ForwardedRef<HTMLAnchorElement>,
): JSX.Element {
const {
@ -98,9 +98,7 @@ function Link(
}
const preloaded = useRef(false);
const LinkComponent = (
isNavLink ? NavLink : RRLink
) as ComponentType<LinkProps>;
const LinkComponent = (isNavLink ? NavLink : RRLink) as ComponentType<Props>;
const IOSupported = ExecutionEnvironment.canUseIntersectionObserver;