From 986718c81f9028c07dacc3311ea7ce373d21a351 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 1 Mar 2023 13:40:19 +0800 Subject: [PATCH] docs: fix antd version in codesandbox preview link (#40983) - Update dependencies to latest versions - Replace `FormattedMessage` with `useSiteData` - Add `Badge` - Update `useLocation` to include `useSiteData` - Update `versionOptions` to include `pkg.version` - Update `defaultValue` of `Select` to `pkg.version` - Update `arrow` prop of `Popover` to include `arrowPointAtCenter` [.dumi/theme/builtins/Previewer/CodePreviewer.tsx] - Replace `FormattedMessage` with `useSiteData` - Update `antd` version in dependencies - Update `@ant-design/icons` version in dependencies - Update `react` version in dependencies - Update `react-dom` version in dependencies - Update `dayjs` version in dependencies - Update `react-router-dom` version in dependencies - Update `react-router` version in dependencies - Add `Badge. [.dumi/theme/slots/Header/index.tsx] - Change import of `useLocation` to include `useSiteData` - Add `pkg` to `useSiteData` - Update `versionOptions` to include `pkg.version` - Update `defaultValue` of `Select` to `pkg.version` - Update `arrow` prop of `Popover` to include `arrowPointAtCenter` --- .dumi/theme/builtins/Previewer/CodePreviewer.tsx | 12 ++++++------ .dumi/theme/plugin.ts | 1 + .dumi/theme/slots/Header/index.tsx | 13 ++++++------- 3 files changed, 13 insertions(+), 13 deletions(-) diff --git a/.dumi/theme/builtins/Previewer/CodePreviewer.tsx b/.dumi/theme/builtins/Previewer/CodePreviewer.tsx index 11e7c427b9..d2c45c9956 100644 --- a/.dumi/theme/builtins/Previewer/CodePreviewer.tsx +++ b/.dumi/theme/builtins/Previewer/CodePreviewer.tsx @@ -12,7 +12,7 @@ import LZString from 'lz-string'; import React, { useContext, useEffect, useRef, useState } from 'react'; import CopyToClipboard from 'react-copy-to-clipboard'; import type { IPreviewerProps } from 'dumi'; -import { FormattedMessage } from 'dumi'; +import { FormattedMessage, useSiteData } from 'dumi'; import Prism from 'prismjs'; import JsonML from 'jsonml.js/lib/utils'; import toReactElement from 'jsonml-to-react-element'; @@ -103,9 +103,9 @@ const CodePreviewer: React.FC = (props) => { compact, background, filePath, - version, } = props; + const { pkg } = useSiteData(); const location = useLocation(); const entryCode = asset.dependencies['index.tsx'].value; @@ -235,7 +235,7 @@ const CodePreviewer: React.FC = (props) => { } return acc; }, - { antd: version }, + { antd: pkg.version }, ); dependencies['@ant-design/icons'] = 'latest'; @@ -273,7 +273,7 @@ const CodePreviewer: React.FC = (props) => { 'react@18/umd/react.development.js', 'react-dom@18/umd/react-dom.development.js', 'dayjs@1/dayjs.min.js', - `antd@${version}/dist/antd-with-locales.js`, + `antd@${pkg.version}/dist/antd-with-locales.js`, `@ant-design/icons/dist/index.umd.js`, 'react-router-dom/dist/umd/react-router-dom.production.min.js', 'react-router/dist/umd/react-router.production.min.js', @@ -541,9 +541,9 @@ createRoot(document.getElementById('container')).render(); ); - if (version) { + if (pkg.version) { return ( - + {codeBox} ); diff --git a/.dumi/theme/plugin.ts b/.dumi/theme/plugin.ts index c095f2625c..d60f1a3f96 100644 --- a/.dumi/theme/plugin.ts +++ b/.dumi/theme/plugin.ts @@ -10,6 +10,7 @@ import sylvanas from 'sylvanas'; class AntdReactTechStack extends ReactTechStack { // eslint-disable-next-line class-methods-use-this generatePreviewerProps(...[props, opts]: any) { + console.log(props, opts); if (opts.type === 'external') { // try to find md file with the same name as the demo tsx file const locale = opts.mdAbsPath.match(/index\.([a-z-]+)\.md$/i)?.[1]; diff --git a/.dumi/theme/slots/Header/index.tsx b/.dumi/theme/slots/Header/index.tsx index fe27ae8547..28fbb17143 100644 --- a/.dumi/theme/slots/Header/index.tsx +++ b/.dumi/theme/slots/Header/index.tsx @@ -2,10 +2,9 @@ import { GithubOutlined, MenuOutlined } from '@ant-design/icons'; import { ClassNames, css } from '@emotion/react'; import { Col, Modal, Popover, Row, Select } from 'antd'; import classNames from 'classnames'; -import { useLocation } from 'dumi'; +import { useLocation, useSiteData } from 'dumi'; import DumiSearchBar from 'dumi/theme-default/slots/SearchBar'; import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'; -import packageJson from '../../../../package.json'; import useLocale from '../../../hooks/useLocale'; import useSiteToken from '../../../hooks/useSiteToken'; import * as utils from '../../utils'; @@ -21,8 +20,6 @@ import SwitchBtn from './SwitchBtn'; const RESPONSIVE_XS = 1120; const RESPONSIVE_SM = 1200; -const antdVersion: string = packageJson.version; - const useStyle = () => { const { token } = useSiteToken(); const searchIconColor = '#ced4d9'; @@ -129,6 +126,8 @@ const Header: React.FC = () => { const [isClient, setIsClient] = React.useState(false); const [, lang] = useLocale(); + const { pkg } = useSiteData(); + const themeConfig = getThemeConfig(); const [headerState, setHeaderState] = useState({ menuVisible: false, @@ -240,7 +239,7 @@ const Header: React.FC = () => { const { menuVisible, windowWidth, searching } = headerState; const docVersions: Record = { - [antdVersion]: antdVersion, + [pkg.version]: pkg.version, ...themeConfig?.docVersions, }; const versionOptions = Object.keys(docVersions).map((version) => ({ @@ -287,7 +286,7 @@ const Header: React.FC = () => { key="version" className="version" size="small" - defaultValue={antdVersion} + defaultValue={pkg.version} onChange={handleVersionChange} dropdownStyle={getDropdownStyle} dropdownMatchSelectWidth={false} @@ -358,7 +357,7 @@ const Header: React.FC = () => { content={menu} trigger="click" open={menuVisible} - arrowPointAtCenter + arrow={{ arrowPointAtCenter: true }} onOpenChange={onMenuVisibleChange} >