From 371c10c01f4fcaa48313471a06272823eaf8d5fc Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Sun, 4 Feb 2024 17:08:39 +0800 Subject: [PATCH] site: update dumi type (#47326) * site: update dumi type * fix: fix * fix: fix * fix: fix * fix: fix --- .../builtins/Previewer/DesignPreviewer.tsx | 28 ++++++++------- .dumi/theme/builtins/Previewer/index.tsx | 13 ++++--- .dumi/theme/common/BrowserFrame.tsx | 2 +- .dumi/theme/common/ClientOnly.tsx | 10 ++---- .dumi/theme/common/CodePreview.tsx | 8 ++--- .dumi/theme/common/CommonHelmet.tsx | 10 +++--- .dumi/theme/common/DirectionIcon.tsx | 23 ++++++++---- .dumi/theme/common/EditButton.tsx | 9 ++--- .dumi/theme/common/GlobalStyles.tsx | 3 +- .dumi/theme/common/Helmet.tsx | 11 +++--- .dumi/theme/common/Link.tsx | 6 ++-- .dumi/theme/layouts/DocLayout/index.tsx | 18 ++++++---- .dumi/theme/layouts/GlobalLayout.tsx | 34 +++++++++--------- .dumi/theme/layouts/IndexLayout/index.tsx | 36 +++++++++++-------- .../layouts/ResourceLayout/AffixTabs.tsx | 14 +++++--- .dumi/theme/layouts/ResourceLayout/index.tsx | 5 +-- .dumi/theme/layouts/SidebarLayout/index.tsx | 5 +-- .dumi/theme/slots/Sidebar/index.tsx | 29 +++++++-------- 18 files changed, 146 insertions(+), 118 deletions(-) diff --git a/.dumi/theme/builtins/Previewer/DesignPreviewer.tsx b/.dumi/theme/builtins/Previewer/DesignPreviewer.tsx index d3b591aeba..ae79b6bed6 100644 --- a/.dumi/theme/builtins/Previewer/DesignPreviewer.tsx +++ b/.dumi/theme/builtins/Previewer/DesignPreviewer.tsx @@ -1,10 +1,11 @@ import type { FC } from 'react'; import React, { useRef } from 'react'; -import { createStyles } from 'antd-style'; import { CheckOutlined, SketchOutlined } from '@ant-design/icons'; -import { nodeToGroup } from 'html2sketch'; -import copy from 'copy-to-clipboard'; import { App } from 'antd'; +import { createStyles } from 'antd-style'; +import copy from 'copy-to-clipboard'; +import { nodeToGroup } from 'html2sketch'; + import type { AntdPreviewerProps } from './Previewer'; const useStyle = createStyles(({ token, css }) => ({ @@ -60,14 +61,15 @@ const DesignPreviewer: FC = ({ children, title, description, const handleCopy = async () => { try { - const group = await nodeToGroup(demoRef.current); - copy(JSON.stringify(group.toSketchJSON())); - setCopied(true); - setTimeout(() => { - setCopied(false); - }, 5000); - } catch (e) { - console.error(e); + if (demoRef.current) { + const group = await nodeToGroup(demoRef.current); + copy(JSON.stringify(group.toSketchJSON())); + setCopied(true); + setTimeout(() => { + setCopied(false); + }, 5000); + } + } catch { message.error('复制失败'); } }; @@ -77,7 +79,9 @@ const DesignPreviewer: FC = ({ children, title, description, {title} -
+ {description && ( +
+ )}
{copied ? (
diff --git a/.dumi/theme/builtins/Previewer/index.tsx b/.dumi/theme/builtins/Previewer/index.tsx index 83a5b56a07..aa7950a207 100644 --- a/.dumi/theme/builtins/Previewer/index.tsx +++ b/.dumi/theme/builtins/Previewer/index.tsx @@ -1,7 +1,7 @@ import React, { Suspense } from 'react'; -import type { IPreviewerProps } from 'dumi'; -import { Skeleton, Alert } from 'antd'; +import { Alert, Skeleton } from 'antd'; import { createStyles } from 'antd-style'; +import type { IPreviewerProps } from 'dumi'; const { ErrorBoundary } = Alert; @@ -16,7 +16,7 @@ const useStyle = createStyles(({ css }) => ({ `, })); -export default (props: IPreviewerProps) => { +const PreviewerSuspense: React.FC = (props) => { const { styles } = useStyle(); return ( @@ -25,10 +25,7 @@ export default (props: IPreviewerProps) => { {' '} @@ -39,3 +36,5 @@ export default (props: IPreviewerProps) => { ); }; + +export default PreviewerSuspense; diff --git a/.dumi/theme/common/BrowserFrame.tsx b/.dumi/theme/common/BrowserFrame.tsx index 385a23cf41..9399eda47d 100644 --- a/.dumi/theme/common/BrowserFrame.tsx +++ b/.dumi/theme/common/BrowserFrame.tsx @@ -1,6 +1,6 @@ import React from 'react'; -const BrowserFrame: React.FC<{ children?: React.ReactNode }> = ({ children }) => ( +const BrowserFrame: React.FC = ({ children }) => (
{children}
); diff --git a/.dumi/theme/common/ClientOnly.tsx b/.dumi/theme/common/ClientOnly.tsx index 415d0d0888..4314d90696 100644 --- a/.dumi/theme/common/ClientOnly.tsx +++ b/.dumi/theme/common/ClientOnly.tsx @@ -1,18 +1,14 @@ -import type { FC, ReactElement, ReactNode } from 'react'; +import type React from 'react'; import { useLayoutEffect, useState } from 'react'; -export type ClientOnlyProps = { - children: ReactNode; -}; - -const ClientOnly: FC = ({ children }) => { +const ClientOnly: React.FC = ({ children }) => { const [clientReady, setClientReady] = useState(false); useLayoutEffect(() => { setClientReady(true); }, []); - return clientReady ? (children as ReactElement) : null; + return clientReady ? (children as React.ReactElement) : null; }; export default ClientOnly; diff --git a/.dumi/theme/common/CodePreview.tsx b/.dumi/theme/common/CodePreview.tsx index e9e7e81f79..1a5f9862d7 100644 --- a/.dumi/theme/common/CodePreview.tsx +++ b/.dumi/theme/common/CodePreview.tsx @@ -1,4 +1,4 @@ -import React, { type ComponentProps, useEffect, useMemo } from 'react'; +import React, { useEffect, useMemo, type ComponentProps } from 'react'; import { Button, Tabs, Typography } from 'antd'; import { createStyles } from 'antd-style'; import toReactElement from 'jsonml-to-react-element'; @@ -96,7 +96,7 @@ const CodePreview: React.FC = ({ error, }) => { // 避免 Tabs 数量不稳定的闪动问题 - const initialCodes = {} as Record<'tsx' | 'jsx' | 'style', string>; + const initialCodes: Partial> = {}; if (sourceCode) { initialCodes.tsx = ''; } @@ -144,7 +144,7 @@ const CodePreview: React.FC = ({ error={error} lang={lang} initialValue={sourceCodes[lang]} - onChange={(code) => { + onChange={(code: string) => { onSourceChange?.({ [entryName]: code }); }} /> @@ -170,7 +170,7 @@ const CodePreview: React.FC = ({ error={error} lang={langList[0]} initialValue={sourceCodes[langList[0]]} - onChange={(code) => { + onChange={(code: string) => { onSourceChange?.({ [entryName]: code }); }} /> diff --git a/.dumi/theme/common/CommonHelmet.tsx b/.dumi/theme/common/CommonHelmet.tsx index 3cf879b5e6..9d619b2935 100644 --- a/.dumi/theme/common/CommonHelmet.tsx +++ b/.dumi/theme/common/CommonHelmet.tsx @@ -1,11 +1,11 @@ -import { useRouteMeta, Helmet } from 'dumi'; -import React, { useMemo } from 'react'; +import React from 'react'; +import { Helmet, useRouteMeta } from 'dumi'; -const CommonHelmet = () => { +const CommonHelmet: React.FC = () => { const meta = useRouteMeta(); - const [title, description] = useMemo(() => { - let helmetTitle; + const [title, description] = React.useMemo<[string, string]>(() => { + let helmetTitle: string; if (!meta.frontmatter.subtitle && !meta.frontmatter.title) { helmetTitle = '404 Not Found - Ant Design'; } else { diff --git a/.dumi/theme/common/DirectionIcon.tsx b/.dumi/theme/common/DirectionIcon.tsx index ffae15ad3b..9a1679a6e4 100644 --- a/.dumi/theme/common/DirectionIcon.tsx +++ b/.dumi/theme/common/DirectionIcon.tsx @@ -1,19 +1,28 @@ -import Icon from '@ant-design/icons'; import React from 'react'; +import Icon from '@ant-design/icons'; import type { DirectionType } from 'antd/es/config-provider'; const ltrD = 'M448 64l512 0 0 128-128 0 0 768-128 0 0-768-128 0 0 768-128 0 0-448c-123.712 0-224-100.288-224-224s100.288-224 224-224zM64 448l256 224-256 224z'; + const rtlD = 'M256 64l512 0 0 128-128 0 0 768-128 0 0-768-128 0 0 768-128 0 0-448c-123.712 0-224-100.288-224-224s100.288-224 224-224zM960 896l-256-224 256-224z'; -const DirectionSvg = ({ direction }: any) => ( - - - -); +interface DirectionIconProps { + className?: string; + direction?: DirectionType; +} -const DirectionIcon: React.FC<{ direction: DirectionType; className?: string }> = (props) => ( +const DirectionSvg: React.FC = (props) => { + const { direction } = props; + return ( + + + + ); +}; + +const DirectionIcon: React.FC = (props) => ( } /> ); diff --git a/.dumi/theme/common/EditButton.tsx b/.dumi/theme/common/EditButton.tsx index 64b8423d51..f03bdc7065 100644 --- a/.dumi/theme/common/EditButton.tsx +++ b/.dumi/theme/common/EditButton.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { EditOutlined } from '@ant-design/icons'; -import { createStyles } from 'antd-style'; import { Tooltip } from 'antd'; +import { createStyles } from 'antd-style'; const branchUrl = 'https://github.com/ant-design/ant-design/edit/master/'; @@ -38,9 +38,8 @@ const useStyle = createStyles(({ token, css }) => { }; }); -export default function EditButton({ title, filename }: EditButtonProps) { +const EditButton: React.FC = ({ title, filename }) => { const { styles } = useStyle(); - return ( ); -} +}; + +export default EditButton; diff --git a/.dumi/theme/common/GlobalStyles.tsx b/.dumi/theme/common/GlobalStyles.tsx index d087584428..f2da6d90a6 100644 --- a/.dumi/theme/common/GlobalStyles.tsx +++ b/.dumi/theme/common/GlobalStyles.tsx @@ -1,4 +1,5 @@ import React from 'react'; + import ColorStyle from './Color/ColorStyle'; import { BrowserMockup, @@ -17,7 +18,7 @@ import { } from './styles'; import InlineCard from './styles/InlineCard'; -const GlobalStyles = () => ( +const GlobalStyles: React.FC = () => ( <> diff --git a/.dumi/theme/common/Helmet.tsx b/.dumi/theme/common/Helmet.tsx index 4bc99ec82c..1b514a4da6 100644 --- a/.dumi/theme/common/Helmet.tsx +++ b/.dumi/theme/common/Helmet.tsx @@ -1,11 +1,8 @@ import * as React from 'react'; import { Helmet } from 'dumi'; -type HelmetProps = Helmet['props']; -export interface WrapHelmetProps extends HelmetProps { - children?: React.ReactNode; -} +const WrapHelmet: React.FC> = (props) => ( + +); -export default function WrapHelmet(props: WrapHelmetProps) { - return ; -} +export default WrapHelmet; diff --git a/.dumi/theme/common/Link.tsx b/.dumi/theme/common/Link.tsx index a7dac2436f..47b2c5b0f2 100644 --- a/.dumi/theme/common/Link.tsx +++ b/.dumi/theme/common/Link.tsx @@ -1,10 +1,10 @@ import type { MouseEvent, MouseEventHandler } from 'react'; -import React, { forwardRef, useLayoutEffect, useMemo, useTransition } from 'react'; +import React, { forwardRef, useLayoutEffect, useTransition } from 'react'; import { useLocation, useNavigate } from 'dumi'; import nprogress from 'nprogress'; export interface LinkProps { - to?: string | { pathname?: string; search?: string; hash?: string }; + to: string | { pathname?: string; search?: string; hash?: string }; children?: React.ReactNode; style?: React.CSSProperties; className?: string; @@ -17,7 +17,7 @@ const Link = forwardRef((props, ref) => { const navigate = useNavigate(); const { pathname } = useLocation(); - const href = useMemo(() => { + const href = React.useMemo(() => { if (typeof to === 'object') { return `${to.pathname || pathname}${to.search || ''}${to.hash || ''}`; } diff --git a/.dumi/theme/layouts/DocLayout/index.tsx b/.dumi/theme/layouts/DocLayout/index.tsx index 8ddbf828c7..1a22625b9a 100644 --- a/.dumi/theme/layouts/DocLayout/index.tsx +++ b/.dumi/theme/layouts/DocLayout/index.tsx @@ -1,16 +1,21 @@ import classNames from 'classnames'; import dayjs from 'dayjs'; + import 'dayjs/locale/zh-cn'; -import { Helmet, useOutlet, useSiteData } from 'dumi'; -import React, { useContext, useEffect, useLayoutEffect, useMemo, useRef } from 'react'; -import zhCN from 'antd/es/locale/zh_CN'; + +import React, { useContext, useEffect, useLayoutEffect, useRef } from 'react'; import ConfigProvider from 'antd/es/config-provider'; +import zhCN from 'antd/es/locale/zh_CN'; +import { Helmet, useOutlet, useSiteData } from 'dumi'; + import useLocale from '../../../hooks/useLocale'; import useLocation from '../../../hooks/useLocation'; import GlobalStyles from '../../common/GlobalStyles'; import Header from '../../slots/Header'; import SiteContext from '../../slots/SiteContext'; + import '../../static/style'; + import IndexLayout from '../IndexLayout'; import ResourceLayout from '../ResourceLayout'; import SidebarLayout from '../SidebarLayout'; @@ -56,8 +61,9 @@ const DocLayout: React.FC = () => { // handle hash change or visit page hash from Link component, and jump after async chunk loaded useEffect(() => { const id = hash.replace('#', ''); - - if (id) document.getElementById(decodeURIComponent(id))?.scrollIntoView(); + if (id) { + document.getElementById(decodeURIComponent(id))?.scrollIntoView(); + } }, [loading, hash]); useEffect(() => { @@ -66,7 +72,7 @@ const DocLayout: React.FC = () => { } }, [location]); - const content = useMemo(() => { + const content = React.useMemo(() => { if ( ['', '/'].some((path) => path === pathname) || ['/index'].some((path) => pathname.startsWith(path)) diff --git a/.dumi/theme/layouts/GlobalLayout.tsx b/.dumi/theme/layouts/GlobalLayout.tsx index 5ad0364b28..1208a107e9 100644 --- a/.dumi/theme/layouts/GlobalLayout.tsx +++ b/.dumi/theme/layouts/GlobalLayout.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useEffect, useMemo, Suspense } from 'react'; +import React, { Suspense, useCallback, useEffect } from 'react'; import { createCache, extractStyle, @@ -9,8 +9,9 @@ import { } from '@ant-design/cssinjs'; import { HappyProvider } from '@ant-design/happy-work-theme'; import { getSandpackCssText } from '@codesandbox/sandpack-react'; -import { App, theme as antdTheme } from 'antd'; -import type { DirectionType } from 'antd/es/config-provider'; +import { theme as antdTheme, App } from 'antd'; +import type { MappingAlgorithm } from 'antd'; +import type { DirectionType, ThemeConfig } from 'antd/es/config-provider'; import { createSearchParams, useOutlet, useSearchParams, useServerInsertedHTML } from 'dumi'; import { DarkContext } from '../../hooks/useDark'; @@ -43,9 +44,9 @@ const getAlgorithm = (themes: ThemeName[] = []) => if (theme === 'compact') { return antdTheme.compactAlgorithm; } - return null; + return null as unknown as MappingAlgorithm; }) - .filter((item) => item) as (typeof antdTheme.darkAlgorithm)[]; + .filter(Boolean); const GlobalLayout: React.FC = () => { const outlet = useOutlet(); @@ -120,7 +121,7 @@ const GlobalLayout: React.FC = () => { }; }, []); - const siteContextValue = useMemo( + const siteContextValue = React.useMemo( () => ({ direction, updateSiteConfig, @@ -131,6 +132,16 @@ const GlobalLayout: React.FC = () => { [isMobile, direction, updateSiteConfig, theme, bannerVisible], ); + const themeConfig = React.useMemo( + () => ({ + algorithm: getAlgorithm(theme), + token: { motion: !theme.includes('motion-off') }, + cssVar: true, + hashed: false, + }), + [theme], + ); + const [styleCache] = React.useState(() => createCache()); useServerInsertedHTML(() => { @@ -191,16 +202,7 @@ const GlobalLayout: React.FC = () => { linters={[legacyNotSelectorLinter, parentSelectorLinter, NaNLinter]} > - + {content} diff --git a/.dumi/theme/layouts/IndexLayout/index.tsx b/.dumi/theme/layouts/IndexLayout/index.tsx index dbd85a1fb3..a53e544495 100644 --- a/.dumi/theme/layouts/IndexLayout/index.tsx +++ b/.dumi/theme/layouts/IndexLayout/index.tsx @@ -1,21 +1,27 @@ -import { Helmet } from 'dumi'; import type { PropsWithChildren } from 'react'; import React from 'react'; +import { Helmet } from 'dumi'; + import Footer from '../../slots/Footer'; -const IndexLayout: React.FC> = ({ - children, - ...restProps -}) => ( - <> - - {restProps.title} - - {restProps.desc && } - -
{children}
-