diff --git a/.dumi/hooks/useLocale.tsx b/.dumi/hooks/useLocale.tsx index 6ca4dd51c7..328e204946 100644 --- a/.dumi/hooks/useLocale.tsx +++ b/.dumi/hooks/useLocale.tsx @@ -1,4 +1,3 @@ -import * as React from 'react'; import { useLocale as useDumiLocale } from 'dumi'; export interface LocaleMap { diff --git a/.dumi/hooks/useMenu.tsx b/.dumi/hooks/useMenu.tsx index 54300ff96c..b69e326e88 100644 --- a/.dumi/hooks/useMenu.tsx +++ b/.dumi/hooks/useMenu.tsx @@ -1,5 +1,6 @@ -import React, { ReactNode, useMemo } from 'react'; -import { MenuProps } from 'antd'; +import type { ReactNode } from 'react'; +import React, { useMemo } from 'react'; +import type { MenuProps } from 'antd'; import { Link, useFullSidebarData, useSidebarData } from 'dumi'; import useLocation from './useLocation'; @@ -115,7 +116,7 @@ const useMenu = (options: UseMenuOptions = {}): [MenuProps['items'], string] => } } else { result.push( - ...group.children?.map((item) => ({ + ...(group.children?.map((item) => ({ label: ( {before} @@ -124,7 +125,7 @@ const useMenu = (options: UseMenuOptions = {}): [MenuProps['items'], string] => ), key: item.link.replace(/(-cn$)/g, ''), - })), + })) ?? []), ); } return result; diff --git a/.dumi/pages/index-cn/index.tsx b/.dumi/pages/index-cn/index.tsx index 4a997ee843..b119d46b2e 100644 --- a/.dumi/pages/index-cn/index.tsx +++ b/.dumi/pages/index-cn/index.tsx @@ -1 +1,3 @@ -export { default } from '../index/index'; +import Homepage from '../index/index'; + +export default Homepage; diff --git a/.dumi/pages/index/components/Banner.tsx b/.dumi/pages/index/components/Banner.tsx index 1bbfe31585..09e4f39a2a 100644 --- a/.dumi/pages/index/components/Banner.tsx +++ b/.dumi/pages/index/components/Banner.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; import { Button, Space, Typography } from 'antd'; +import { Link, useLocation } from 'dumi'; import useLocale from '../../../hooks/useLocale'; import useSiteToken from '../../../hooks/useSiteToken'; import { GroupMask } from './Group'; -import { Link, useLocation } from 'dumi'; import * as utils from '../../../theme/utils'; const locales = { @@ -25,7 +25,7 @@ export interface BannerProps { } export default function Banner({ children }: BannerProps) { - const [locale, lang] = useLocale(locales); + const [locale] = useLocale(locales); const { pathname, search } = useLocation(); const { token } = useSiteToken(); @@ -82,6 +82,7 @@ export default function Banner({ children }: BannerProps) { Ant Design {/* Image Left Top */} bg { const { token } = useSiteToken(); @@ -52,20 +52,20 @@ export default function BannerRecommends({ extras = [], icons = [] }: BannerReco textAlign: 'start', }} > - {first3.map((extra, index) => { + {first3.map((extra) => { if (!extra) { - return ; + return ; } - const icon = icons.find((icon) => icon.name === extra.source); + const icon = icons.find((i) => i.name === extra.source); return ( - + {extra.title} {extra.description}
{extra.date} - {icon && } + {icon && banner}
); diff --git a/.dumi/pages/index/components/ComponentsList.tsx b/.dumi/pages/index/components/ComponentsList.tsx index fccff30ed4..8104bb3f73 100644 --- a/.dumi/pages/index/components/ComponentsList.tsx +++ b/.dumi/pages/index/components/ComponentsList.tsx @@ -1,4 +1,4 @@ -import useSiteToken from '../../../hooks/useSiteToken'; +/* eslint-disable react/jsx-pascal-case */ import React from 'react'; import { Space, @@ -14,6 +14,7 @@ import { import dayjs from 'dayjs'; import { CustomerServiceOutlined, QuestionCircleOutlined, SyncOutlined } from '@ant-design/icons'; import { css } from '@emotion/react'; +import useSiteToken from '../../../hooks/useSiteToken'; import useLocale from '../../../hooks/useLocale'; const SAMPLE_CONTENT_EN = diff --git a/.dumi/pages/index/components/DesignFramework.tsx b/.dumi/pages/index/components/DesignFramework.tsx index d90d870b12..c606b27c40 100644 --- a/.dumi/pages/index/components/DesignFramework.tsx +++ b/.dumi/pages/index/components/DesignFramework.tsx @@ -1,9 +1,9 @@ -import useSiteToken from '../../../hooks/useSiteToken'; import { Col, Row, Typography } from 'antd'; import React from 'react'; import { css } from '@emotion/react'; -import useLocale from '../../../hooks/useLocale'; import { Link, useLocation } from 'dumi'; +import useLocale from '../../../hooks/useLocale'; +import useSiteToken from '../../../hooks/useSiteToken'; import * as utils from '../../../theme/utils'; const SECONDARY_LIST = [ @@ -150,7 +150,7 @@ export default function DesignFramework() { return ( - + {title}
{ diff --git a/.dumi/pages/index/components/Theme/BackgroundImage.tsx b/.dumi/pages/index/components/Theme/BackgroundImage.tsx index bdb6e93ad5..bc99c8e14b 100644 --- a/.dumi/pages/index/components/Theme/BackgroundImage.tsx +++ b/.dumi/pages/index/components/Theme/BackgroundImage.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import useSiteToken from '../../../../hooks/useSiteToken'; -import { COLOR_IMAGES, DEFAULT_COLOR, getClosetColor } from './colorUtil'; +import { COLOR_IMAGES, getClosetColor } from './colorUtil'; export interface BackgroundImageProps { colorPrimary?: string; @@ -38,6 +38,7 @@ export default function BackgroundImage({ colorPrimary, isLight }: BackgroundIma objectPosition: 'right top', }} src={url} + alt="" /> ); })} diff --git a/.dumi/pages/index/components/Theme/ColorPicker.tsx b/.dumi/pages/index/components/Theme/ColorPicker.tsx index c35fa8524e..c7772ab050 100644 --- a/.dumi/pages/index/components/Theme/ColorPicker.tsx +++ b/.dumi/pages/index/components/Theme/ColorPicker.tsx @@ -1,10 +1,12 @@ -import useSiteToken from '../../../../hooks/useSiteToken'; import { Input, Space, Popover } from 'antd'; -import React, { FC, useEffect, useState } from 'react'; +import type { FC } from 'react'; +import React, { useEffect, useState } from 'react'; import { css } from '@emotion/react'; import { TinyColor } from '@ctrl/tinycolor'; +import type { ColorPanelProps } from 'antd-token-previewer/es/ColorPanel'; +import ColorPanel from 'antd-token-previewer/es/ColorPanel'; import { PRESET_COLORS } from './colorUtil'; -import ColorPanel, { ColorPanelProps } from 'antd-token-previewer/es/ColorPanel'; +import useSiteToken from '../../../../hooks/useSiteToken'; const useStyle = () => { const { token } = useSiteToken(); @@ -109,10 +111,7 @@ export default function ColorPicker({ value, onChange }: RadiusPickerProps) { key={color} overlayInnerStyle={{ padding: 0 }} content={ - onChange?.(color)} - /> + onChange?.(c)} /> } trigger="click" showArrow={false} diff --git a/.dumi/pages/index/components/Theme/ThemePicker.tsx b/.dumi/pages/index/components/Theme/ThemePicker.tsx index b36f324007..5b24c120d9 100644 --- a/.dumi/pages/index/components/Theme/ThemePicker.tsx +++ b/.dumi/pages/index/components/Theme/ThemePicker.tsx @@ -85,6 +85,7 @@ export default function ThemePicker({ value, onChange }: ThemePickerProps) { onClick={() => { onChange?.(theme); }} + alt="" />
{locale[theme as keyof typeof locale]} diff --git a/.dumi/pages/index/components/Theme/colorUtil.ts b/.dumi/pages/index/components/Theme/colorUtil.ts index 90d5f376cb..0df5ea543a 100644 --- a/.dumi/pages/index/components/Theme/colorUtil.ts +++ b/.dumi/pages/index/components/Theme/colorUtil.ts @@ -52,9 +52,9 @@ export function getClosetColor(colorPrimary?: string | null) { const distance = COLOR_IMAGES.map(({ color }) => { const colorObj = new TinyColor(color).toRgb(); const dist = Math.sqrt( - Math.pow(colorObj.r - colorPrimaryRGB.r, 2) + - Math.pow(colorObj.g - colorPrimaryRGB.g, 2) + - Math.pow(colorObj.b - colorPrimaryRGB.b, 2), + (colorObj.r - colorPrimaryRGB.r) ** 2 + + (colorObj.g - colorPrimaryRGB.g) ** 2 + + (colorObj.b - colorPrimaryRGB.b) ** 2, ); return { color, dist }; diff --git a/.dumi/pages/index/components/Theme/index.tsx b/.dumi/pages/index/components/Theme/index.tsx index 2d28f92dba..3820acf491 100644 --- a/.dumi/pages/index/components/Theme/index.tsx +++ b/.dumi/pages/index/components/Theme/index.tsx @@ -2,33 +2,34 @@ import * as React from 'react'; import { css } from '@emotion/react'; import { TinyColor } from '@ctrl/tinycolor'; import { - HomeOutlined, - FolderOutlined, BellOutlined, + FolderOutlined, + HomeOutlined, QuestionCircleOutlined, } from '@ant-design/icons'; -import useLocale from '../../../../hooks/useLocale'; -import useSiteToken from '../../../../hooks/useSiteToken'; +import type { MenuProps } from 'antd'; import { - Typography, + Breadcrumb, + Button, + Card, + ConfigProvider, + Form, Layout, Menu, - Breadcrumb, - MenuProps, - Space, - ConfigProvider, - Card, - Form, Radio, + Space, theme, - Button, + Typography, } from 'antd'; -import ThemePicker, { THEME } from './ThemePicker'; +import useLocale from '../../../../hooks/useLocale'; +import useSiteToken from '../../../../hooks/useSiteToken'; +import type { THEME } from './ThemePicker'; +import ThemePicker from './ThemePicker'; import ColorPicker from './ColorPicker'; import RadiusPicker from './RadiusPicker'; import Group from '../Group'; import BackgroundImage from './BackgroundImage'; -import { getClosetColor, DEFAULT_COLOR, getAvatarURL, PINK_COLOR } from './colorUtil'; +import { DEFAULT_COLOR, getAvatarURL, getClosetColor, PINK_COLOR } from './colorUtil'; const { Header, Content, Sider } = Layout; @@ -179,10 +180,6 @@ const useStyle = () => { }; }; -interface PickerProps { - title: React.ReactNode; -} - // ========================== Menu Config ========================== const subMenuItems: MenuProps['items'] = [ { @@ -403,6 +400,7 @@ export default function Theme() { ? undefined : `drop-shadow(30px 0 0 ${logoColor})`, }} + alt="" />

Ant Design 5.0

@@ -422,7 +420,7 @@ export default function Theme() { /> - + {/* Image Right Bottom */} @@ -542,11 +542,13 @@ export default function Theme() { {/* Image Right Bottom */} diff --git a/.dumi/pages/index/index.tsx b/.dumi/pages/index/index.tsx index ff3a8013cc..a64fa9ce83 100644 --- a/.dumi/pages/index/index.tsx +++ b/.dumi/pages/index/index.tsx @@ -1,29 +1,14 @@ import React from 'react'; import { useLocale as useDumiLocale } from 'dumi'; -import { css } from '@emotion/react'; +import { ConfigProvider } from 'antd'; import useLocale from '../../hooks/useLocale'; import Banner from './components/Banner'; import Group from './components/Group'; import { useSiteData } from './components/util'; -import useSiteToken from '../../hooks/useSiteToken'; import Theme from './components/Theme'; import BannerRecommends from './components/BannerRecommends'; import ComponentsList from './components/ComponentsList'; import DesignFramework from './components/DesignFramework'; -import { ConfigProvider } from 'antd'; - -const useStyle = () => { - const { token } = useSiteToken(); - - return { - container: css` - // padding: 0 116px; - - // background: url(https://gw.alipayobjects.com/zos/bmw-prod/5741382d-cc22-4ede-b962-aea287a1d1a1/l4nq43o8_w2646_h1580.png); - // background-size: 20% 10%; - `, - }; -}; const locales = { cn: { @@ -47,9 +32,7 @@ const Homepage: React.FC = () => { const { id: localeId } = useDumiLocale(); const localeStr = localeId === 'zh-CN' ? 'cn' : 'en'; - const [siteData, loading] = useSiteData(); - - const style = useStyle(); + const [siteData] = useSiteData(); return ( @@ -58,7 +41,7 @@ const Homepage: React.FC = () => { -
+
{ } diff --git a/.dumi/pages/theme-editor-cn/index.tsx b/.dumi/pages/theme-editor-cn/index.tsx index 7577ba3a7d..767688311b 100644 --- a/.dumi/pages/theme-editor-cn/index.tsx +++ b/.dumi/pages/theme-editor-cn/index.tsx @@ -1 +1,3 @@ -export { default } from '../theme-editor/index'; +import ThemeEditor from '../theme-editor'; + +export default ThemeEditor; diff --git a/.dumi/pages/theme-editor/index.tsx b/.dumi/pages/theme-editor/index.tsx index 6ed903ea53..672bc356e9 100644 --- a/.dumi/pages/theme-editor/index.tsx +++ b/.dumi/pages/theme-editor/index.tsx @@ -1,20 +1,9 @@ +import React, { useState } from 'react'; import { ThemeEditor } from 'antd-token-previewer'; -import { useState } from 'react'; -import useLocale from '../../hooks/useLocale'; import { ConfigProvider } from 'antd'; -import { ThemeConfig } from 'antd/es/config-provider/context'; - -const locales = { - cn: { - title: '主题编辑器', - }, - en: { - title: 'Theme Editor', - }, -}; +import type { ThemeConfig } from 'antd/es/config-provider/context'; const CustomTheme = () => { - const [locale] = useLocale(locales); const [theme, setTheme] = useState({}); return ( diff --git a/.dumi/rehypeAntd.ts b/.dumi/rehypeAntd.ts index 29e8320630..89ae696ba2 100644 --- a/.dumi/rehypeAntd.ts +++ b/.dumi/rehypeAntd.ts @@ -6,7 +6,7 @@ import { type HastRoot, type UnifiedTransformer, unistUtilVisit } from 'dumi'; */ function rehypeAntd(): UnifiedTransformer { return (tree, vFile) => { - const filename = (vFile.data.frontmatter as any).filename; + const { filename } = vFile.data.frontmatter as any; unistUtilVisit.visit(tree, 'element', (node) => { if (node.tagName === 'DumiDemoGrid') { diff --git a/.dumi/theme/builtins/APITable/index.tsx b/.dumi/theme/builtins/APITable/index.tsx index 69ea24f8b2..e71fb131f8 100644 --- a/.dumi/theme/builtins/APITable/index.tsx +++ b/.dumi/theme/builtins/APITable/index.tsx @@ -1,8 +1,8 @@ import React from 'react'; -const APITable: React.FC = () => { +const APITable: React.FC = () => ( // TODO: implement api table, depend on the new markdown data structure passed - return <>API Table; -}; + <>API Table +); export default APITable; diff --git a/.dumi/theme/builtins/Alert/index.tsx b/.dumi/theme/builtins/Alert/index.tsx index 60fe59f45e..674697c092 100644 --- a/.dumi/theme/builtins/Alert/index.tsx +++ b/.dumi/theme/builtins/Alert/index.tsx @@ -1,8 +1,10 @@ -import { Alert, AlertProps } from 'antd'; -import React, { FC } from 'react'; +import type { AlertProps } from 'antd'; +import { Alert } from 'antd'; +import type { FC } from 'react'; +import React from 'react'; -const MdAlert: FC = ({ style, ...props }) => { - return ; -}; +const MdAlert: FC = ({ style, ...props }) => ( + +); export default MdAlert; diff --git a/.dumi/theme/builtins/ComponentOverview/index.tsx b/.dumi/theme/builtins/ComponentOverview/index.tsx index 92da8b4444..f757f9acbb 100644 --- a/.dumi/theme/builtins/ComponentOverview/index.tsx +++ b/.dumi/theme/builtins/ComponentOverview/index.tsx @@ -1,11 +1,11 @@ -import React, { useState, memo, useMemo } from 'react'; -import { Link, useRouteMeta, useIntl, useSidebarData, Helmet } from 'dumi'; +import React, { memo, useMemo, useState } from 'react'; +import { Link, useIntl, useSidebarData } from 'dumi'; import { css } from '@emotion/react'; import debounce from 'lodash/debounce'; -import { Input, Divider, Row, Col, Card, Typography, Tag, Space } from 'antd'; +import { Card, Col, Divider, Input, Row, Space, Tag, Typography } from 'antd'; import { SearchOutlined } from '@ant-design/icons'; -import proComponentsList from './ProComponentsList'; import type { Component } from './ProComponentsList'; +import proComponentsList from './ProComponentsList'; import useSiteToken from '../../../hooks/useSiteToken'; const useStyle = () => { @@ -80,11 +80,9 @@ const { Title } = Typography; const Overview: React.FC = () => { const style = useStyle(); - const meta = useRouteMeta(); const data = useSidebarData(); const { locale, formatMessage } = useIntl(); - const documentTitle = `${meta.frontmatter.title} - Ant Design`; const [search, setSearch] = useState(''); @@ -96,11 +94,11 @@ const Overview: React.FC = () => { } }; - const groups = useMemo<{ title: string; children: Component[] }[]>(() => { - return data - .filter((item) => item.title) - .map<{ title: string; children: Component[] }>((item) => { - return { + const groups = useMemo<{ title: string; children: Component[] }[]>( + () => + data + .filter((item) => item.title) + .map<{ title: string; children: Component[] }>((item) => ({ title: item.title!, children: item.children.map((child) => ({ title: child.frontmatter.title, @@ -108,18 +106,18 @@ const Overview: React.FC = () => { cover: child.frontmatter.cover, link: child.link, })), - }; - }) - .concat([ - { - title: locale === 'zh-CN' ? '重型组件' : 'Others', - children: - locale === 'zh-CN' - ? proComponentsList - : proComponentsList.map((component) => ({ ...component, subtitle: '' })), - }, - ]); - }, [data, locale]); + })) + .concat([ + { + title: locale === 'zh-CN' ? '重型组件' : 'Others', + children: + locale === 'zh-CN' + ? proComponentsList + : proComponentsList.map((component) => ({ ...component, subtitle: '' })), + }, + ]), + [data, locale], + ); return (
diff --git a/.dumi/theme/builtins/DemoWrapper/index.tsx b/.dumi/theme/builtins/DemoWrapper/index.tsx index 9cdb74256f..2cce6a6566 100644 --- a/.dumi/theme/builtins/DemoWrapper/index.tsx +++ b/.dumi/theme/builtins/DemoWrapper/index.tsx @@ -1,4 +1,4 @@ -import React, { useContext, useLayoutEffect, useState } from 'react'; +import React, { useContext, useState } from 'react'; import { DumiDemoGrid, FormattedMessage } from 'dumi'; import { Tooltip } from 'antd'; import { BugFilled, BugOutlined, CodeFilled, CodeOutlined } from '@ant-design/icons'; @@ -55,7 +55,7 @@ const DemoWrapper: typeof DumiDemoGrid = ({ items }) => { {/* FIXME: find a new way instead of `key` to trigger re-render */} - +
); }; diff --git a/.dumi/theme/builtins/Previewer/fromDumiProps.tsx b/.dumi/theme/builtins/Previewer/fromDumiProps.tsx index 7caa9ff690..f00d5872f5 100644 --- a/.dumi/theme/builtins/Previewer/fromDumiProps.tsx +++ b/.dumi/theme/builtins/Previewer/fromDumiProps.tsx @@ -5,10 +5,8 @@ import JsonML from 'jsonml.js/lib/utils'; import toReactComponent from 'jsonml-to-react-element'; // @ts-ignore import Prism from 'prismjs'; -import { useLocation } from 'dumi'; -import { useIntl, type IPreviewerProps } from 'dumi'; +import { useLocation, useIntl, type IPreviewerProps } from 'dumi'; import { ping } from '../../utils'; -import sylvanas from 'sylvanas'; let pingDeferrer: PromiseLike; @@ -56,13 +54,11 @@ export default function fromDumiProps

( toReactComponent(jsonML: any) { return toReactComponent(jsonML, [ [ - function (node: any) { - return JsonML.isElement(node) && JsonML.getTagName(node) === 'pre'; - }, - function (node: any, index: any) { + (node: any) => JsonML.isElement(node) && JsonML.getTagName(node) === 'pre', + (node: any, index: any) => { // @ts-ignore // ref: https://github.com/benjycui/bisheng/blob/master/packages/bisheng/src/bisheng-plugin-highlight/lib/browser.js#L7 - var attr = JsonML.getAttributes(node); + const attr = JsonML.getAttributes(node); return React.createElement( 'pre', { diff --git a/.dumi/theme/builtins/Previewer/index.jsx b/.dumi/theme/builtins/Previewer/index.jsx index 33aea51788..e8bbad0c20 100644 --- a/.dumi/theme/builtins/Previewer/index.jsx +++ b/.dumi/theme/builtins/Previewer/index.jsx @@ -120,13 +120,6 @@ class Demo extends React.Component { }); } - handleIframeReady = () => { - const { theme, setIframeTheme } = this.props; - if (this.iframeRef.current) { - // setIframeTheme(this.iframeRef.current, theme); - } - }; - render() { const { state } = this; const { props } = this; @@ -167,7 +160,7 @@ class Demo extends React.Component { }); const localizedTitle = meta.title[locale] || meta.title; const localizeIntro = content[locale] || content; - const introChildren =

; + const introChildren =
; const highlightClass = classNames('highlight-wrapper', { 'highlight-wrapper-expand': codeExpand, @@ -458,7 +451,7 @@ createRoot(document.getElementById('container')).render(); }> - + diff --git a/.dumi/theme/builtins/ResourceArticles/index.tsx b/.dumi/theme/builtins/ResourceArticles/index.tsx index 4b4e08ab19..03ce33e73f 100644 --- a/.dumi/theme/builtins/ResourceArticles/index.tsx +++ b/.dumi/theme/builtins/ResourceArticles/index.tsx @@ -3,9 +3,9 @@ import * as React from 'react'; import dayjs from 'dayjs'; import { FormattedMessage, useIntl } from 'dumi'; import { Tabs, Skeleton, Avatar, Divider, Empty } from 'antd'; +import { css } from '@emotion/react'; import { useSiteData } from '../../../pages/index/components/util'; import type { Article, Authors } from '../../../pages/index/components/util'; -import { css } from '@emotion/react'; import useSiteToken from '../../../hooks/useSiteToken'; const useStyle = () => { diff --git a/.dumi/theme/builtins/ResourceCards/index.tsx b/.dumi/theme/builtins/ResourceCards/index.tsx index a87105f7f0..fdf2d1dc1f 100644 --- a/.dumi/theme/builtins/ResourceCards/index.tsx +++ b/.dumi/theme/builtins/ResourceCards/index.tsx @@ -86,7 +86,7 @@ const ResourceCard: React.FC = ({ resource }) => { return ( - + = ({ resources }) => { - return ( - - {resources.map((item) => ( - - ))} - - ); -}; +const ResourceCards: React.FC = ({ resources }) => ( + + {resources.map((item) => ( + + ))} + +); export default ResourceCards; diff --git a/.dumi/theme/builtins/TokenTable/index.tsx b/.dumi/theme/builtins/TokenTable/index.tsx index 57ae744066..71e2eade08 100644 --- a/.dumi/theme/builtins/TokenTable/index.tsx +++ b/.dumi/theme/builtins/TokenTable/index.tsx @@ -1,10 +1,14 @@ -import React, { FC, useMemo } from 'react'; +import type { FC } from 'react'; +import React, { useMemo } from 'react'; +/* eslint import/no-unresolved: 0 */ +// @ts-ignore import tokenMeta from 'antd/es/version/token-meta.json'; import { getDesignToken } from 'antd-token-previewer'; -import { Table, TableProps, Tag } from 'antd'; +import type { TableProps } from 'antd'; +import { Table } from 'antd'; +import { css } from '@emotion/react'; import useLocale from '../../../hooks/useLocale'; import useSiteToken from '../../../hooks/useSiteToken'; -import { css } from '@emotion/react'; type TokenTableProps = { type: 'seed' | 'map' | 'alias'; @@ -89,7 +93,7 @@ const TokenTable: FC = ({ type }) => { boxShadow: 'inset 0 0 0 1px rgba(0, 0, 0, 0.06)', marginRight: 4, }} - > + /> )} {typeof record.value !== 'string' ? JSON.stringify(record.value) : record.value} @@ -97,16 +101,16 @@ const TokenTable: FC = ({ type }) => { }, ]; - const data = useMemo(() => { - return tokenMeta[type].map((token) => { - return { + const data = useMemo( + () => + tokenMeta[type].map((token) => ({ name: token.name, desc: lang === 'cn' ? token.desc : token.descEn, type: token.type, value: (defaultToken as any)[token.name], - }; - }); - }, [type, lang]); + })), + [type, lang], + ); return ; }; diff --git a/.dumi/theme/common/Color/ColorStyle.tsx b/.dumi/theme/common/Color/ColorStyle.tsx index e12050f5c0..58ebe6d3ab 100644 --- a/.dumi/theme/common/Color/ColorStyle.tsx +++ b/.dumi/theme/common/Color/ColorStyle.tsx @@ -1,3 +1,4 @@ +import React from 'react'; import { Global, css } from '@emotion/react'; import useSiteToken from '../../../hooks/useSiteToken'; diff --git a/.dumi/theme/common/CommonHelmet.tsx b/.dumi/theme/common/CommonHelmet.tsx index b8861d9f86..b99c6fefd1 100644 --- a/.dumi/theme/common/CommonHelmet.tsx +++ b/.dumi/theme/common/CommonHelmet.tsx @@ -6,7 +6,7 @@ const CommonHelmet = () => { const [title, description] = useMemo(() => { const helmetTitle = `${meta.frontmatter.subtitle || ''} ${meta.frontmatter.title} - Ant Design`; - let helmetDescription = meta.frontmatter.description; + const helmetDescription = meta.frontmatter.description; return [helmetTitle, helmetDescription]; }, [meta]); diff --git a/.dumi/theme/common/GlobalStyles.tsx b/.dumi/theme/common/GlobalStyles.tsx index 3ce43f826a..d0f954cc4b 100644 --- a/.dumi/theme/common/GlobalStyles.tsx +++ b/.dumi/theme/common/GlobalStyles.tsx @@ -1,8 +1,8 @@ import React from 'react'; import { Global, css } from '@emotion/react'; -import useSiteToken from '../../hooks/useSiteToken'; import { TinyColor } from '@ctrl/tinycolor'; -import ColorStyle from '../common/Color/ColorStyle'; +import useSiteToken from '../../hooks/useSiteToken'; +import ColorStyle from './Color/ColorStyle'; const GlobalStyles = () => { const { token } = useSiteToken(); diff --git a/.dumi/theme/common/PrevAndNext.tsx b/.dumi/theme/common/PrevAndNext.tsx index c477f02f21..1a36a40a0d 100644 --- a/.dumi/theme/common/PrevAndNext.tsx +++ b/.dumi/theme/common/PrevAndNext.tsx @@ -1,10 +1,11 @@ -import React, { ReactElement, useMemo } from 'react'; +import type { ReactElement } from 'react'; +import React, { useMemo } from 'react'; import { ClassNames, css } from '@emotion/react'; -import useSiteToken from '../../hooks/useSiteToken'; -import { Menu, MenuProps, Typography } from 'antd'; -import useMenu from '../../hooks/useMenu'; -import { MenuItemType } from 'antd/es/menu/hooks/useItems'; +import type { MenuProps } from 'antd'; +import type { MenuItemType } from 'antd/es/menu/hooks/useItems'; import { LeftOutlined, RightOutlined } from '@ant-design/icons'; +import useMenu from '../../hooks/useMenu'; +import useSiteToken from '../../hooks/useSiteToken'; const useStyle = () => { const { token } = useSiteToken(); @@ -114,9 +115,10 @@ const PrevAndNext = () => { activeMenuItemIndex = i; } }); - const prev = flatMenu[activeMenuItemIndex - 1]; - const next = flatMenu[activeMenuItemIndex + 1]; - return [prev as MenuItemType, next as MenuItemType]; + return [ + flatMenu[activeMenuItemIndex - 1] as MenuItemType, + flatMenu[activeMenuItemIndex + 1] as MenuItemType, + ]; }, [menuItems, selectedKey]); return ( diff --git a/.dumi/theme/common/ThemeSwitch/index.tsx b/.dumi/theme/common/ThemeSwitch/index.tsx index 3f826031ba..fe461cbbc5 100644 --- a/.dumi/theme/common/ThemeSwitch/index.tsx +++ b/.dumi/theme/common/ThemeSwitch/index.tsx @@ -1,7 +1,8 @@ -import React, { FC } from 'react'; +import type { FC } from 'react'; +import React from 'react'; import { FloatButton, theme } from 'antd'; -import ThemeIcon from './ThemeIcon'; import { DarkTheme, Light, CompactTheme } from 'antd-token-previewer/es/icons'; +import ThemeIcon from './ThemeIcon'; const { defaultAlgorithm, darkAlgorithm, compactAlgorithm } = theme; diff --git a/.dumi/theme/layouts/DocLayout/index.tsx b/.dumi/theme/layouts/DocLayout/index.tsx index 03f439c4c5..d428b8f3e3 100644 --- a/.dumi/theme/layouts/DocLayout/index.tsx +++ b/.dumi/theme/layouts/DocLayout/index.tsx @@ -1,17 +1,18 @@ -import React, { useEffect, useMemo, useRef, useLayoutEffect } from 'react'; +import React, { useEffect, useLayoutEffect, useMemo, useRef } from 'react'; import 'dayjs/locale/zh-cn'; import dayjs from 'dayjs'; -import { useOutlet, useSearchParams, Helmet } from 'dumi'; -import Header from 'dumi/theme/slots/Header'; -import Footer from 'dumi/theme/slots/Footer'; +import { Helmet, useOutlet, useSearchParams } from 'dumi'; import '../../static/style'; -import useLocation from '../../../hooks/useLocation'; -import SiteContext from '../../slots/SiteContext'; -import ConfigProvider, { DirectionType } from 'antd/es/config-provider'; +import type { DirectionType } from 'antd/es/config-provider'; +import ConfigProvider from 'antd/es/config-provider'; import classNames from 'classnames'; -import useLocale from '../../../hooks/useLocale'; import zhCN from 'antd/es/locale/zh_CN'; import { createCache, StyleProvider } from '@ant-design/cssinjs'; +import Header from '../../slots/Header'; +import Footer from '../../slots/Footer'; +import useLocale from '../../../hooks/useLocale'; +import SiteContext from '../../slots/SiteContext'; +import useLocation from '../../../hooks/useLocation'; import ResourceLayout from '../ResourceLayout'; import GlobalStyles from '../../common/GlobalStyles'; import SidebarLayout from '../SidebarLayout'; @@ -94,9 +95,9 @@ const DocLayout: React.FC = () => { } }, [location]); - const changeDirection = (direction: DirectionType): void => { - setDirection(direction); - if (direction === 'ltr') { + const changeDirection = (dir: DirectionType): void => { + setDirection(dir); + if (dir === 'ltr') { searchParams.delete('direction'); } else { searchParams.set('direction', 'rtl'); @@ -115,17 +116,27 @@ const DocLayout: React.FC = () => {
); - } else if (pathname.startsWith('/docs/resource')) { + } + if (pathname.startsWith('/docs/resource')) { return {outlet}; - } else if (pathname.startsWith('/theme-editor')) { - return <>{outlet}; + } + if (pathname.startsWith('/theme-editor')) { + return outlet; } return {outlet}; }, [pathname, outlet]); + const siteContextValue = useMemo( + () => ({ + isMobile, + direction, + }), + [isMobile, direction], + ); + return ( - + { const { token } = useSiteToken(); diff --git a/.dumi/theme/layouts/ResourceLayout/index.tsx b/.dumi/theme/layouts/ResourceLayout/index.tsx index e61d896c6b..21dd7a5cee 100644 --- a/.dumi/theme/layouts/ResourceLayout/index.tsx +++ b/.dumi/theme/layouts/ResourceLayout/index.tsx @@ -1,8 +1,9 @@ -import React, { FC, PropsWithChildren } from 'react'; +import type { FC, PropsWithChildren } from 'react'; +import React from 'react'; import { useRouteMeta, FormattedMessage } from 'dumi'; -import Footer from 'dumi/theme/slots/Footer'; import { Layout, Typography, ConfigProvider } from 'antd'; import { css } from '@emotion/react'; +import Footer from '../../slots/Footer'; import AffixTabs from './AffixTabs'; import EditButton from '../../common/EditButton'; import useSiteToken from '../../../hooks/useSiteToken'; diff --git a/.dumi/theme/layouts/SidebarLayout/index.tsx b/.dumi/theme/layouts/SidebarLayout/index.tsx index 5796a7f9f3..24378604c7 100644 --- a/.dumi/theme/layouts/SidebarLayout/index.tsx +++ b/.dumi/theme/layouts/SidebarLayout/index.tsx @@ -1,16 +1,15 @@ -import React, { FC, PropsWithChildren } from 'react'; +import type { FC, PropsWithChildren } from 'react'; +import React from 'react'; import Sidebar from '../../slots/Sidebar'; import Content from '../../slots/Content'; import CommonHelmet from '../../common/CommonHelmet'; -const SidebarLayout: FC> = ({ children }) => { - return ( -
- - - {children} -
- ); -}; +const SidebarLayout: FC> = ({ children }) => ( +
+ + + {children} +
+); export default SidebarLayout; diff --git a/.dumi/theme/locales/en-US.json b/.dumi/theme/locales/en-US.json index bd1fa14132..f3a0cd5f5e 100644 --- a/.dumi/theme/locales/en-US.json +++ b/.dumi/theme/locales/en-US.json @@ -5,10 +5,6 @@ "app.theme.switch.compact": "Compact theme", "app.header.search": "Search...", "app.header.menu.documentation": "Docs", - "app.header.menu.development": "Development", - "app.header.menu.components": "Components", - "app.header.menu.spec": "Design", - "app.header.menu.resource": "Resources", "app.header.menu.more": "More", "app.header.menu.mobile": "Mobile", "app.header.menu.pro.v4": "Ant Design Pro", diff --git a/.dumi/theme/locales/zh-CN.json b/.dumi/theme/locales/zh-CN.json index efd572abca..bfeb9c11a4 100644 --- a/.dumi/theme/locales/zh-CN.json +++ b/.dumi/theme/locales/zh-CN.json @@ -5,10 +5,6 @@ "app.theme.switch.compact": "紧凑主题", "app.header.search": "全文本搜索...", "app.header.menu.documentation": "文档", - "app.header.menu.development": "研发", - "app.header.menu.components": "组件", - "app.header.menu.spec": "设计", - "app.header.menu.resource": "资源", "app.header.menu.more": "更多", "app.header.menu.mobile": "移动版", "app.header.menu.pro.v4": "Ant Design Pro", diff --git a/.dumi/theme/plugin.ts b/.dumi/theme/plugin.ts index 112bd6d2b2..baf0b3dc44 100644 --- a/.dumi/theme/plugin.ts +++ b/.dumi/theme/plugin.ts @@ -81,7 +81,7 @@ const RoutesPlugin = (api: IApi) => { let styles = ''; // extract all emotion style tags from body - file.content = file.content.replace(/