From 0f26e51c2397155ef9aad6082b3cfc578088e262 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?= =?UTF-8?q?=E5=8D=9C?= Date: Thu, 24 Nov 2022 11:14:29 +0800 Subject: [PATCH] docs: tip for legacy browser (#38917) * docs: tip for legacy browser * Update .dumi/theme/slots/Footer/AdditionalInfo.tsx Co-authored-by: afc163 * Update .dumi/theme/slots/Footer/AdditionalInfo.tsx Co-authored-by: afc163 * docs: sample * chore: tmp adjust script Co-authored-by: afc163 --- .dumi/theme/plugin.ts | 4 +- .dumi/theme/slots/Footer/AdditionalInfo.tsx | 244 ++++++-------------- 2 files changed, 72 insertions(+), 176 deletions(-) diff --git a/.dumi/theme/plugin.ts b/.dumi/theme/plugin.ts index 3d844e810c7b..112bd6d2b253 100644 --- a/.dumi/theme/plugin.ts +++ b/.dumi/theme/plugin.ts @@ -104,7 +104,9 @@ const RoutesPlugin = (api: IApi) => { // generate ssr css file api.onBuildHtmlComplete(() => { - const styleText = extractStyle((global as any).styleCache); + // FIXME: This should not be empty @peachScript + const styleCache = (global as any)?.styleCache; + const styleText = styleCache ? extractStyle(styleCache) : ''; const styleTextWithoutStyleTag = styleText .replace(/]*>/g, '') .replace(/<\/style>/g, ''); diff --git a/.dumi/theme/slots/Footer/AdditionalInfo.tsx b/.dumi/theme/slots/Footer/AdditionalInfo.tsx index a515de7ecfcf..ddfb1427b9e7 100644 --- a/.dumi/theme/slots/Footer/AdditionalInfo.tsx +++ b/.dumi/theme/slots/Footer/AdditionalInfo.tsx @@ -1,194 +1,88 @@ 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 { updateCSS, removeCSS } from 'rc-util/lib/Dom/dynamicCSS'; import useLocale from '../../../hooks/useLocale'; -import useSiteToken from '../../../hooks/useSiteToken'; + +const whereCls = 'ant-where-checker'; const locales = { cn: { - title: '🎉🎉🎉 Ant Design 5.0 发布！ 🎉🎉🎉', - ok: '知道了', + whereNotSupport: `你的浏览器 ${navigator.userAgent} 不支持现代 CSS Selector，请使用现代浏览器（如 Chrome、Firefox 等等）查看官网。如果需要对旧版浏览器进行样式支持，欢迎查阅配置文档：`, + whereDocTitle: '兼容性调整（请使用现代浏览器访问）', + whereDocUrl: '/docs/react/customize-theme-cn#兼容性调整', }, en: { - title: '🎉🎉🎉 Ant Design 5.0 is released! 🎉🎉🎉', - ok: 'Got it', + whereNotSupport: + 'Your browser not support modern CSS Selector. Please use modern browser to view (e.g. Chrome, Firefox, etc). If you want to compatible style with legacy browser, please refer to the configuration document:', + whereDocTitle: 'Compatible adjustment (Please use modern browser to visit)', + whereDocUrl: '/docs/react/customize-theme#compatible-adjustment', }, }; -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); -} - +// Check for browser support `:where` or not +// Warning user if not support to modern browser 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'); - } + const [location] = useLocale(locales); + const [supportWhere, setSupportWhere] = React.useState(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); - }, []); + const p = document.createElement('p'); + p.className = whereCls; + p.style.position = 'fixed'; + p.style.pointerEvents = 'none'; + p.style.visibility = 'hidden'; + p.style.opacity = '0'; + document.body.appendChild(p); + updateCSS( + ` +:where(.${whereCls}) { + opacity: 0.3 !important; +} + `, + whereCls, + ); - 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(); - }, - }); - } - } - }); + // Check style + const { opacity } = getComputedStyle(p); + setSupportWhere(String(opacity) === '0.3'); - return clearTimeout(timeout); - }, [notify]); + return () => { + document.body.removeChild(p); + removeCSS(whereCls); + }; + }, []); - 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}} + return supportWhere ? null : ( +
+
- - - - - - - {lang === 'cn' ? ( - <> -

- 点击{' '} - - 此处查看 - {' '} - 完整更新日志。 -

-

- 如果你需要访问 v4 版本的文档，请点击{' '} - - 此处查看 - - 。 -

- - ) : ( - <> -

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

-

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

- - )} - - - - */} - + {location.whereNotSupport}{' '} + + {location.whereDocTitle} + +
+
); }