Browse Source

chore: bump notify on second time (#38665)

* chore: bump notify on second time

* docs: adjust notify
pull/38619/head
二货爱吃白萝卜 2 years ago
committed by GitHub
parent
commit
f5ed8fb29c
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
  1. 194
      .dumi/theme/slots/Footer/AdditionalInfo.tsx
  2. 99
      .dumi/theme/slots/Footer/InfoNewVersion.tsx
  3. 4
      .dumi/theme/slots/Footer/index.tsx
  4. 107
      .dumi/theme/slots/Header/index.tsx

194
.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 | 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> */}
</>
);
}

99
.dumi/theme/slots/Footer/InfoNewVersion.tsx

@ -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>
);
}

4
.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 = () => {
</>
}
/>
<InfoNewVersion />
<AdditionalInfo />
</>
);
};

107
.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<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…
Cancel
Save