mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-07 01:13:58 +08:00
chore: bump notify on second time (#38665)
* chore: bump notify on second time * docs: adjust notify
This commit is contained in:
二货爱吃白萝卜
GitHub
parent
83e8554092
commit
f5ed8fb29c
194
.dumi/theme/slots/Footer/AdditionalInfo.tsx
Normal file
194
.dumi/theme/slots/Footer/AdditionalInfo.tsx
Normal file
@ -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 | boolean>(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 (
|
||||
<>
|
||||
<Tour
|
||||
open={!!notify}
|
||||
mask={false}
|
||||
steps={[
|
||||
{
|
||||
title: locale.title,
|
||||
target: () => document.querySelector('#versionSelector')!,
|
||||
description: (
|
||||
<Typography style={{ marginTop: token.marginXS }}>
|
||||
{lang === 'cn' ? (
|
||||
<>
|
||||
<p>
|
||||
点击{' '}
|
||||
<Typography.Link href="/changelog-cn" onClick={onClose}>
|
||||
此处查看
|
||||
</Typography.Link>{' '}
|
||||
完整更新日志。
|
||||
</p>
|
||||
<p>
|
||||
如果你需要访问 v4 版本的文档，请点击{' '}
|
||||
<Typography.Link href="https://4x.ant.design/" onClick={onClose}>
|
||||
此处查看
|
||||
</Typography.Link>
|
||||
。
|
||||
</p>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<p>
|
||||
Click{' '}
|
||||
<Typography.Link href="/changelog" onClick={onClose}>
|
||||
here
|
||||
</Typography.Link>{' '}
|
||||
to view full changelog.
|
||||
</p>
|
||||
<p>
|
||||
If you want to check v4 documentation, please click{' '}
|
||||
<Typography.Link href="https://4x.ant.design/" onClick={onClose}>
|
||||
here
|
||||
</Typography.Link>
|
||||
.
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
</Typography>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
{/* <Modal
|
||||
open={!!notify}
|
||||
title={locale.title}
|
||||
closable={false}
|
||||
footer={<Button onClick={onClose}>{locale.ok}</Button>}
|
||||
>
|
||||
<Row gutter={16}>
|
||||
<Col flex="none">
|
||||
<SmileOutlined style={{ fontSize: 72, color: token.colorSuccess }} />
|
||||
</Col>
|
||||
<Col flex="auto">
|
||||
<Typography style={{ marginTop: token.marginXS }}>
|
||||
{lang === 'cn' ? (
|
||||
<>
|
||||
<p>
|
||||
点击{' '}
|
||||
<Typography.Link href="/changelog-cn" onClick={onClose}>
|
||||
此处查看
|
||||
</Typography.Link>{' '}
|
||||
完整更新日志。
|
||||
</p>
|
||||
<p>
|
||||
如果你需要访问 v4 版本的文档，请点击{' '}
|
||||
<Typography.Link href="https://4x.ant.design/" onClick={onClose}>
|
||||
此处查看
|
||||
</Typography.Link>
|
||||
。
|
||||
</p>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<p>
|
||||
Click{' '}
|
||||
<Typography.Link href="/changelog" onClick={onClose}>
|
||||
here
|
||||
</Typography.Link>{' '}
|
||||
to view full changelog.
|
||||
</p>
|
||||
<p>
|
||||
If you want to check v4 documentation, please click{' '}
|
||||
<Typography.Link href="https://4x.ant.design/" onClick={onClose}>
|
||||
here
|
||||
</Typography.Link>
|
||||
.
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
</Typography>
|
||||
</Col>
|
||||
</Row>
|
||||
</Modal> */}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -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 (
|
||||
<Modal
|
||||
open={notify}
|
||||
title={locale.title}
|
||||
closable={false}
|
||||
footer={<Button onClick={onClose}>{locale.ok}</Button>}
|
||||
>
|
||||
<Row gutter={16}>
|
||||
{/* <Col flex="none">
|
||||
<SmileOutlined style={{ fontSize: 72, color: token.colorSuccess }} />
|
||||
</Col> */}
|
||||
<Col flex="auto">
|
||||
<Typography style={{ marginTop: token.marginXS }}>
|
||||
{lang === 'cn' ? (
|
||||
<>
|
||||
<p>
|
||||
点击{' '}
|
||||
<Typography.Link href="/changelog-cn" onClick={onClose}>
|
||||
此处查看
|
||||
</Typography.Link>{' '}
|
||||
完整更新日志。
|
||||
</p>
|
||||
<p>
|
||||
如果你需要访问 v4 版本的文档，请点击{' '}
|
||||
<Typography.Link href="https://4x.ant.design/" onClick={onClose}>
|
||||
此处查看
|
||||
</Typography.Link>
|
||||
。
|
||||
</p>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<p>
|
||||
Click{' '}
|
||||
<Typography.Link href="/changelog" onClick={onClose}>
|
||||
here
|
||||
</Typography.Link>{' '}
|
||||
to view full changelog.
|
||||
</p>
|
||||
<p>
|
||||
If you want to check v4 documentation, please click{' '}
|
||||
<Typography.Link href="https://4x.ant.design/" onClick={onClose}>
|
||||
here
|
||||
</Typography.Link>
|
||||
.
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
</Typography>
|
||||
</Col>
|
||||
</Row>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
@ -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 = () => {
|
||||
</>
|
||||
}
|
||||
/>
|
||||
<InfoNewVersion />
|
||||
<AdditionalInfo />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -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<HeaderProps> = (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 | boolean>(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<HeaderState>({
|
||||
@ -204,7 +243,7 @@ const Header: React.FC<HeaderProps> = (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<HeaderProps> = (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<HeaderProps> = (props) => {
|
||||
|
||||
let menu: (React.ReactElement | null)[] = [
|
||||
navigationNode,
|
||||
<Select
|
||||
key="version"
|
||||
className="version"
|
||||
size="small"
|
||||
defaultValue={antdVersion}
|
||||
onChange={handleVersionChange}
|
||||
dropdownStyle={getDropdownStyle}
|
||||
getPopupContainer={(trigger) => trigger.parentNode}
|
||||
<Popover
|
||||
open={!!notify}
|
||||
title={locale.title}
|
||||
content={
|
||||
<Typography style={{ marginTop: token.marginXS }}>
|
||||
{lang === 'cn' ? (
|
||||
<>
|
||||
<div>
|
||||
如果你发现任何新官网的问题，欢迎到{' '}
|
||||
<Typography.Link
|
||||
target="_blank"
|
||||
href="https://github.com/ant-design/ant-design/issues/38463"
|
||||
>
|
||||
Github Issue
|
||||
</Typography.Link>{' '}
|
||||
反馈。
|
||||
</div>
|
||||
<div>如果你需要查看 v4 文档，请点击上侧切换。</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div>
|
||||
If you find any official site problem. Please feel free to report on{' '}
|
||||
<Typography.Link
|
||||
target="_blank"
|
||||
href="https://github.com/ant-design/ant-design/issues/38463"
|
||||
>
|
||||
Github Issue
|
||||
</Typography.Link>
|
||||
.
|
||||
</div>
|
||||
<p>Click above Select to switch to v4 docs.</p>
|
||||
</>
|
||||
)}
|
||||
</Typography>
|
||||
}
|
||||
>
|
||||
{versionOptions}
|
||||
</Select>,
|
||||
<Select
|
||||
key="version"
|
||||
className="version"
|
||||
size="small"
|
||||
defaultValue={antdVersion}
|
||||
onChange={handleVersionChange}
|
||||
dropdownStyle={getDropdownStyle}
|
||||
getPopupContainer={(trigger) => trigger.parentNode}
|
||||
onClick={onClose}
|
||||
>
|
||||
{versionOptions}
|
||||
</Select>
|
||||
</Popover>,
|
||||
<Button size="small" onClick={onLangChange} css={style.headerButton} key="lang-button">
|
||||
<FormattedMessage id="app.header.lang" />
|
||||
</Button>,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user