mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-05 09:49:57 +08:00
89 lines
2.6 KiB
TypeScript
89 lines
2.6 KiB
TypeScript
import * as React from 'react';
|
||
import { updateCSS, removeCSS } from 'rc-util/lib/Dom/dynamicCSS';
|
||
import useLocale from '../../../hooks/useLocale';
|
||
|
||
const whereCls = 'ant-where-checker';
|
||
|
||
const locales = {
|
||
cn: {
|
||
whereNotSupport: `你的浏览器不支持现代 CSS Selector，请使用现代浏览器（如 Chrome、Firefox 等等）查看官网。如果需要对旧版浏览器进行样式支持，欢迎查阅配置文档：`,
|
||
whereDocTitle: '兼容性调整（请使用现代浏览器访问）',
|
||
whereDocUrl: '/docs/react/customize-theme-cn#兼容性调整',
|
||
},
|
||
en: {
|
||
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',
|
||
},
|
||
};
|
||
|
||
// Check for browser support `:where` or not
|
||
// Warning user if not support to modern browser
|
||
export default function InfoNewVersion() {
|
||
const [location] = useLocale(locales);
|
||
const [supportWhere, setSupportWhere] = React.useState(true);
|
||
|
||
React.useEffect(() => {
|
||
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,
|
||
);
|
||
|
||
// Check style
|
||
const { opacity } = getComputedStyle(p);
|
||
setSupportWhere(String(opacity) === '0.3');
|
||
|
||
return () => {
|
||
document.body.removeChild(p);
|
||
removeCSS(whereCls);
|
||
};
|
||
}, []);
|
||
|
||
return supportWhere ? null : (
|
||
<div
|
||
style={{
|
||
position: 'fixed',
|
||
left: 0,
|
||
right: 0,
|
||
top: 0,
|
||
bottom: 0,
|
||
zIndex: 99999999,
|
||
background: 'rgba(0,0,0,0.65)',
|
||
display: 'flex',
|
||
justifyContent: 'center',
|
||
alignItems: 'center',
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
border: `1px solid #ffe58f`,
|
||
background: '#fffbe6',
|
||
color: 'rgba(0,0,0,0.88)',
|
||
padding: '8px 12px',
|
||
borderRadius: '8px',
|
||
zIndex: 9999999999,
|
||
lineHeight: '22px',
|
||
width: 520,
|
||
}}
|
||
>
|
||
{location.whereNotSupport}{' '}
|
||
<a style={{ color: '#1677ff', textDecoration: 'none' }} href={location.whereDocUrl}>
|
||
{location.whereDocTitle}
|
||
</a>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|