diff --git a/.dumi/theme/slots/Footer/AdditionalInfo.tsx b/.dumi/theme/slots/Footer/AdditionalInfo.tsx new file mode 100644 index 0000000000..a515de7ecf --- /dev/null +++ b/.dumi/theme/slots/Footer/AdditionalInfo.tsx @@ -0,0 +1,194 @@ +import * as React from 'react'; +import { Modal, Button, Typography, Row, Col, Tour } from 'antd'; +import { SmileOutlined } from '@ant-design/icons'; +import { isLocalStorageNameSupported, ping } from '../../utils'; +import useLocale from '../../../hooks/useLocale'; +import useSiteToken from '../../../hooks/useSiteToken'; + +const locales = { + cn: { + title: '๐ŸŽ‰๐ŸŽ‰๐ŸŽ‰ Ant Design 5.0 ๅ‘ๅธƒ๏ผ ๐ŸŽ‰๐ŸŽ‰๐ŸŽ‰', + ok: '็Ÿฅ้“ไบ†', + }, + en: { + title: '๐ŸŽ‰๐ŸŽ‰๐ŸŽ‰ Ant Design 5.0 is released! ๐ŸŽ‰๐ŸŽ‰๐ŸŽ‰', + ok: 'Got it', + }, +}; + +const V5_NOTIFICATION = 'antd@4.0.0-notification-sent'; +const SHOULD_OPEN_ANT_DESIGN_MIRROR_MODAL = 'ANT_DESIGN_DO_NOT_OPEN_MIRROR_MODAL'; + +function disableAntdMirrorModal() { + window.localStorage.setItem(SHOULD_OPEN_ANT_DESIGN_MIRROR_MODAL, 'true'); +} + +function shouldOpenAntdMirrorModal() { + return !window.localStorage.getItem(SHOULD_OPEN_ANT_DESIGN_MIRROR_MODAL); +} + +export default function InfoNewVersion() { + return null; + + const [locale, lang] = useLocale(locales); + const [notify, setNotify] = React.useState(null); + + const { token } = useSiteToken(); + + function onClose() { + setNotify(false); + localStorage.setItem(V5_NOTIFICATION, 'true'); + } + + React.useEffect(() => { + if (isLocalStorageNameSupported()) { + // ๅคง็‰ˆๆœฌๅ‘ๅธƒๅŽๅ…จๅฑ€ๅผน็ช—ๆ็คบ + // 1. ็‚นๅ‡ปใ€Ž็Ÿฅ้“ไบ†ใ€ไน‹ๅŽไธๅ†ๆ็คบ + // 2. ่ถ…่ฟ‡ๆˆชๆญขๆ—ฅๆœŸๅŽไธๅ†ๆ็คบ + if ( + localStorage.getItem(V5_NOTIFICATION) !== 'true' && + Date.now() < new Date('2022/12/31').getTime() + ) { + setNotify(true); + return; + } + } + + setNotify(false); + }, []); + + React.useEffect(() => { + const timeout = ping((status) => { + if (status !== 'timeout' && status !== 'error') { + if ( + // process.env.NODE_ENV === 'production' && + notify === false && + window.location.host !== 'ant-design.antgroup.com' && + shouldOpenAntdMirrorModal() + ) { + Modal.confirm({ + title: 'ๆ็คบ', + content: 'ๅ†…็ฝ‘็”จๆˆทๆŽจ่่ฎฟ้—ฎๅ›ฝๅ†…้•œๅƒไปฅ่Žทๅพ—ๆž้€Ÿไฝ“้ชŒ๏ฝž', + okText: '๐Ÿš€ ็ซ‹ๅˆปๅ‰ๅพ€', + cancelText: 'ไธๅ†ๅผนๅ‡บ', + closable: true, + onOk() { + window.open('https://ant-design.antgroup.com', '_self'); + disableAntdMirrorModal(); + }, + onCancel() { + disableAntdMirrorModal(); + }, + }); + } + } + }); + + return clearTimeout(timeout); + }, [notify]); + + return ( + <> + document.querySelector('#versionSelector')!, + description: ( + + {lang === 'cn' ? ( + <> +

+ ็‚นๅ‡ป{' '} + + ๆญคๅค„ๆŸฅ็œ‹ + {' '} + ๅฎŒๆ•ดๆ›ดๆ–ฐๆ—ฅๅฟ—ใ€‚ +

+

+ ๅฆ‚ๆžœไฝ ้œ€่ฆ่ฎฟ้—ฎ v4 ็‰ˆๆœฌ็š„ๆ–‡ๆกฃ๏ผŒ่ฏท็‚นๅ‡ป{' '} + + ๆญคๅค„ๆŸฅ็œ‹ + + ใ€‚ +

+ + ) : ( + <> +

+ Click{' '} + + here + {' '} + to view full changelog. +

+

+ If you want to check v4 documentation, please click{' '} + + here + + . +

+ + )} +
+ ), + }, + ]} + /> + {/* {locale.ok}} + > + + + + + + + {lang === 'cn' ? ( + <> +

+ ็‚นๅ‡ป{' '} + + ๆญคๅค„ๆŸฅ็œ‹ + {' '} + ๅฎŒๆ•ดๆ›ดๆ–ฐๆ—ฅๅฟ—ใ€‚ +

+

+ ๅฆ‚ๆžœไฝ ้œ€่ฆ่ฎฟ้—ฎ v4 ็‰ˆๆœฌ็š„ๆ–‡ๆกฃ๏ผŒ่ฏท็‚นๅ‡ป{' '} + + ๆญคๅค„ๆŸฅ็œ‹ + + ใ€‚ +

+ + ) : ( + <> +

+ Click{' '} + + here + {' '} + to view full changelog. +

+

+ If you want to check v4 documentation, please click{' '} + + here + + . +

+ + )} +
+ +
+
*/} + + ); +} diff --git a/.dumi/theme/slots/Footer/InfoNewVersion.tsx b/.dumi/theme/slots/Footer/InfoNewVersion.tsx deleted file mode 100644 index 3f519d384b..0000000000 --- a/.dumi/theme/slots/Footer/InfoNewVersion.tsx +++ /dev/null @@ -1,99 +0,0 @@ -import * as React from 'react'; -import { Modal, Button, Typography, Row, Col } from 'antd'; -import { SmileOutlined } from '@ant-design/icons'; -import { isLocalStorageNameSupported } from '../../../theme/utils'; -import useLocale from '../../../hooks/useLocale'; -import useSiteToken from '../../../hooks/useSiteToken'; - -const locales = { - cn: { - title: '๐ŸŽ‰๐ŸŽ‰๐ŸŽ‰ Ant Design 5.0 ๅ‘ๅธƒ๏ผ ๐ŸŽ‰๐ŸŽ‰๐ŸŽ‰', - ok: '็Ÿฅ้“ไบ†', - }, - en: { - title: '๐ŸŽ‰๐ŸŽ‰๐ŸŽ‰ Ant Design 5.0 is released! ๐ŸŽ‰๐ŸŽ‰๐ŸŽ‰', - ok: 'Got it', - }, -}; - -export default function InfoNewVersion() { - const [locale, lang] = useLocale(locales); - const [notify, setNotify] = React.useState(false); - - const { token } = useSiteToken(); - - function onClose() { - setNotify(false); - localStorage.setItem('antd@4.0.0-notification-sent', 'true'); - } - - React.useEffect(() => { - if (!isLocalStorageNameSupported()) { - return; - } - - // ๅคง็‰ˆๆœฌๅ‘ๅธƒๅŽๅ…จๅฑ€ๅผน็ช—ๆ็คบ - // 1. ็‚นๅ‡ปใ€Ž็Ÿฅ้“ไบ†ใ€ไน‹ๅŽไธๅ†ๆ็คบ - // 2. ่ถ…่ฟ‡ๆˆชๆญขๆ—ฅๆœŸๅŽไธๅ†ๆ็คบ - if ( - localStorage.getItem('antd@4.0.0-notification-sent') !== 'true' && - Date.now() < new Date('2022/12/31').getTime() - ) { - setNotify(true); - } - }, []); - - return ( - {locale.ok}} - > - - {/* - - */} - - - {lang === 'cn' ? ( - <> -

- ็‚นๅ‡ป{' '} - - ๆญคๅค„ๆŸฅ็œ‹ - {' '} - ๅฎŒๆ•ดๆ›ดๆ–ฐๆ—ฅๅฟ—ใ€‚ -

-

- ๅฆ‚ๆžœไฝ ้œ€่ฆ่ฎฟ้—ฎ v4 ็‰ˆๆœฌ็š„ๆ–‡ๆกฃ๏ผŒ่ฏท็‚นๅ‡ป{' '} - - ๆญคๅค„ๆŸฅ็œ‹ - - ใ€‚ -

- - ) : ( - <> -

- Click{' '} - - here - {' '} - to view full changelog. -

-

- If you want to check v4 documentation, please click{' '} - - here - - . -

- - )} -
- -
-
- ); -} diff --git a/.dumi/theme/slots/Footer/index.tsx b/.dumi/theme/slots/Footer/index.tsx index 1970288d41..371cadafa4 100644 --- a/.dumi/theme/slots/Footer/index.tsx +++ b/.dumi/theme/slots/Footer/index.tsx @@ -23,7 +23,7 @@ import useLocale from '../../../hooks/useLocale'; import useSiteToken from '../../../hooks/useSiteToken'; import { TinyColor } from '@ctrl/tinycolor'; import getAlphaColor from 'antd/es/theme/util/getAlphaColor'; -import InfoNewVersion from './InfoNewVersion'; +import AdditionalInfo from './AdditionalInfo'; const locales = { cn: { @@ -369,7 +369,7 @@ const Footer = () => { } /> - + ); }; diff --git a/.dumi/theme/slots/Header/index.tsx b/.dumi/theme/slots/Header/index.tsx index 13636ced41..9d2100e123 100644 --- a/.dumi/theme/slots/Header/index.tsx +++ b/.dumi/theme/slots/Header/index.tsx @@ -2,7 +2,7 @@ import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } import { FormattedMessage, useIntl } from 'dumi'; import DumiSearchBar from 'dumi/theme-default/slots/SearchBar'; import classNames from 'classnames'; -import { Button, Col, Modal, Popover, Row, Select } from 'antd'; +import { Button, Col, Modal, Popover, Row, Select, Typography } from 'antd'; import { MenuOutlined } from '@ant-design/icons'; import canUseDom from 'rc-util/lib/Dom/canUseDom'; import type { DirectionType } from 'antd/es/config-provider'; @@ -27,6 +27,17 @@ const { Option } = Select; const antdVersion: string = packageJson.version; +const locales = { + cn: { + title: '๐ŸŽ‰๐ŸŽ‰๐ŸŽ‰ Ant Design 5.0 ๅ‘ๅธƒ๏ผ ๐ŸŽ‰๐ŸŽ‰๐ŸŽ‰', + ok: '็Ÿฅ้“ไบ†', + }, + en: { + title: '๐ŸŽ‰๐ŸŽ‰๐ŸŽ‰ Ant Design 5.0 is released! ๐ŸŽ‰๐ŸŽ‰๐ŸŽ‰', + ok: 'Got it', + }, +}; + const useStyle = () => { const { token } = useSiteToken(); const searchIconColor = '#ced4d9'; @@ -44,7 +55,7 @@ const useStyle = () => { } .dumi-default-search-bar { - border-inline-start: 1px solid rgba(0,0,0,.06); + border-inline-start: 1px solid rgba(0, 0, 0, 0.06); > svg { width: 14px; @@ -135,6 +146,7 @@ const triggerDocSearchImport = () => { }); }; +const V5_NOTIFICATION = 'antd@4.0.0-notification-sent'; const SHOULD_OPEN_ANT_DESIGN_MIRROR_MODAL = 'ANT_DESIGN_DO_NOT_OPEN_MIRROR_MODAL'; function disableAntdMirrorModal() { @@ -152,11 +164,38 @@ interface HeaderState { showTechUIButton: boolean; } +// ================================= Header ================================= const Header: React.FC = (props) => { const intl = useIntl(); const { changeDirection } = props; - const [, lang] = useLocale(); const [isClient, setIsClient] = React.useState(false); + const [locale, lang] = useLocale(locales); + const { token } = useSiteToken(); + const [notify, setNotify] = React.useState(null); + + // ========================= ๅ‘ๅธƒ้€š็Ÿฅ ๅผ€ๅง‹ ========================= + React.useEffect(() => { + if (utils.isLocalStorageNameSupported()) { + // ๅคง็‰ˆๆœฌๅ‘ๅธƒๅŽๅ…จๅฑ€ๅผน็ช—ๆ็คบ + // 1. ็‚นๅ‡ปใ€Ž็Ÿฅ้“ไบ†ใ€ไน‹ๅŽไธๅ†ๆ็คบ + // 2. ่ถ…่ฟ‡ๆˆชๆญขๆ—ฅๆœŸๅŽไธๅ†ๆ็คบ + if ( + localStorage.getItem(V5_NOTIFICATION) !== 'true' && + Date.now() < new Date('2022/12/31').getTime() + ) { + setNotify(true); + return; + } + } + + setNotify(false); + }, []); + + function onClose() { + setNotify(false); + localStorage.setItem(V5_NOTIFICATION, 'true'); + } + // ========================= ๅ‘ๅธƒ้€š็Ÿฅ ็ป“ๆŸ ========================= const themeConfig = getThemeConfig(); const [headerState, setHeaderState] = useState({ @@ -204,7 +243,7 @@ const Header: React.FC = (props) => { if (status !== 'timeout' && status !== 'error') { setHeaderState((prev) => ({ ...prev, showTechUIButton: true })); if ( - process.env.NODE_ENV === 'production' && + // process.env.NODE_ENV === 'production' && window.location.host !== 'ant-design.antgroup.com' && shouldOpenAntdMirrorModal() ) { @@ -214,6 +253,7 @@ const Header: React.FC = (props) => { okText: '๐Ÿš€ ็ซ‹ๅˆปๅ‰ๅพ€', cancelText: 'ไธๅ†ๅผนๅ‡บ', closable: true, + zIndex: 99999, onOk() { window.open('https://ant-design.antgroup.com', '_self'); disableAntdMirrorModal(); @@ -320,17 +360,56 @@ const Header: React.FC = (props) => { let menu: (React.ReactElement | null)[] = [ navigationNode, - , + + , ,