[pull] master from ant-design:master

.dumi/mirror-modal.js

@@ -0,0 +1,172 @@
+(function createMirrorModal() {
+  if (
+    (navigator.languages.includes('zh') || navigator.languages.includes('zh-CN')) &&
+    /-cn\/?$/.test(window.location.pathname) &&
+    !['ant-design.gitee.io', 'ant-design.antgroup.com'].includes(window.location.hostname)
+  ) {
+    const ANTD_DOT_NOT_SHOW_MIRROR_MODAL = 'ANT_DESIGN_DO_NOT_OPEN_MIRROR_MODAL';
+
+    const lastShowTime = window.localStorage.getItem(ANTD_DOT_NOT_SHOW_MIRROR_MODAL);
+    if (
+      lastShowTime &&
+      lastShowTime !== 'true' &&
+      Date.now() - new Date(lastShowTime).getTime() < 7 * 24 * 60 * 60 * 1000
+    ) {
+      return;
+    }
+
+    const style = document.createElement('style');
+    style.innerHTML = `
+  @keyframes mirror-fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes mirror-zoom-in {
+    from {
+      transform: scale(0.8);
+    }
+    to {
+      transform: scale(1);
+    }
+  }
+
+  .mirror-modal-mask {
+    position: fixed;
+    inset: 0;
+    height: '100vh';
+    width: '100vw';
+    background: rgba(0, 0, 0, 0.3);
+    z-index: 9999;
+    animation: mirror-fade-in 0.3s forwards;
+  }
+
+  .mirror-modal-dialog {
+    position: fixed;
+    inset: 0;
+    top: 120px;
+    margin-left: auto;
+    margin-right: auto;
+    width: 400px;
+    height: 120px;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    border-radius: 8px;
+    border: 1px solid #eee;
+    background: #fff;
+    padding: 20px 24px;
+    box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+    animation: mirror-zoom-in 0.3s forwards;
+  }
+
+  .mirror-modal-title {
+    font-size: 16px;
+    font-weight: 500;
+    align-self: flex-start;
+    margin-bottom: 8px;
+  }
+
+  .mirror-modal-content {
+    font-size: 14px;
+    align-self: flex-start;
+    margin-bottom: 16px;
+  }
+
+  .mirror-modal-btns {
+    align-self: flex-end;
+    margin-top: auto;
+    display: flex;
+    align-items: center;
+  }
+
+  .mirror-modal-btn {
+    border-radius: 6px;
+    cursor: pointer;
+    height: 32px;
+    box-sizing: border-box;
+    font-size: 14px;
+    padding: 4px 16px;
+    display: inline-flex;
+    align-items: center;
+    text-decoration: none;
+    transition: all 0.2s;
+  }
+
+  .mirror-modal-confirm-btn {
+    background: #1677ff;
+    color: #fff;
+  }
+
+  .mirror-modal-confirm-btn:hover {
+    background: #4096ff;
+  }
+
+  .mirror-modal-confirm-btn:active {
+    background: #0958d9;
+  }
+
+  .mirror-modal-cancel-btn {
+    border: 1px solid #eee;
+    color: #000;
+    margin-right: 8px;
+  }
+
+  .mirror-modal-cancel-btn:hover {
+    border-color: #4096ff;
+    color: #4096ff
+  }
+
+  .mirror-modal-cancel-btn:active {
+    border-color: #0958d9;
+    color: #0958d9;
+  }
+    `;
+    document.head.append(style);
+
+    const modal = document.createElement('div');
+    modal.className = 'mirror-modal-mask';
+
+    const dialog = document.createElement('div');
+    dialog.className = 'mirror-modal-dialog';
+    modal.append(dialog);
+
+    const title = document.createElement('div');
+    title.className = 'mirror-modal-title';
+    title.innerText = '提示';
+    dialog.append(title);
+
+    const content = document.createElement('div');
+    content.className = 'mirror-modal-content';
+    content.innerText = '国内用户推荐访问国内镜像以获得极速体验～';
+    dialog.append(content);
+
+    const btnWrapper = document.createElement('div');
+    btnWrapper.className = 'mirror-modal-btns';
+    dialog.append(btnWrapper);
+
+    const cancelBtn = document.createElement('a');
+    cancelBtn.className = 'mirror-modal-cancel-btn mirror-modal-btn';
+    cancelBtn.innerText = '7 天内不再显示';
+    btnWrapper.append(cancelBtn);
+    cancelBtn.addEventListener('click', () => {
+      window.localStorage.setItem(ANTD_DOT_NOT_SHOW_MIRROR_MODAL, new Date().toISOString());
+      document.body.removeChild(modal);
+      document.head.removeChild(style);
+      document.body.style.overflow = '';
+    });
+
+    const confirmBtn = document.createElement('a');
+    confirmBtn.className = 'mirror-modal-confirm-btn mirror-modal-btn';
+    confirmBtn.href = window.location.href.replace(window.location.host, 'ant-design.antgroup.com');
+    confirmBtn.innerText = '🚀 立刻前往';
+    btnWrapper.append(confirmBtn);
+
+    document.body.append(modal);
+    document.body.style.overflow = 'hidden';
+  }
+})();

.dumi/pages/theme-editor/index.tsx

@@ -44,11 +44,6 @@ const CustomTheme = () => {
     const storedConfig = localStorage.getItem(ANT_DESIGN_V5_THEME_EDITOR_THEME);
     if (storedConfig) {
       const themeConfig = JSON.parse(storedConfig);
-      const originThemeConfig = {
-        json: themeConfig,
-        text: undefined,
-      };
-      setThemeConfigContent(originThemeConfig);
       setTheme(themeConfig);
     }
   }, []);

.dumi/theme/builtins/IconSearch/Category.tsx

@@ -16,7 +16,7 @@ const Category: React.FC<CategoryProps> = (props) => {
   const { icons, title, newIcons, theme } = props;
   const intl = useIntl();
   const [justCopied, setJustCopied] = React.useState<string | null>(null);
-  const copyId = React.useRef<NodeJS.Timeout | null>(null);
+  const copyId = React.useRef<ReturnType<typeof setTimeout> | null>(null);
   const onCopied = React.useCallback((type: string, text: string) => {
     message.success(
       <span>

.dumi/theme/builtins/Previewer/CodePreviewer.tsx

@@ -8,10 +8,7 @@ import type { Project } from '@stackblitz/sdk';
 import stackblitzSdk from '@stackblitz/sdk';
 import classNames from 'classnames';
 import { FormattedMessage, useSiteData } from 'dumi';
-import toReactElement from 'jsonml-to-react-element';
-import JsonML from 'jsonml.js/lib/utils';
 import LZString from 'lz-string';
-import Prism from 'prismjs';
 import React, { useContext, useEffect, useRef, useState } from 'react';
 import CopyToClipboard from 'react-copy-to-clipboard';
 import { Alert, Badge, Space, Tooltip } from 'antd';
@@ -31,28 +28,6 @@ import { ping } from '../../utils';
 
 const { ErrorBoundary } = Alert;
 
-function toReactComponent(jsonML: any) {
-  return toReactElement(jsonML, [
-    [
-      (node: any) => JsonML.isElement(node) && JsonML.getTagName(node) === 'pre',
-      (node: any, index: any) => {
-        // ref: /~https://github.com/benjycui/bisheng/blob/master/packages/bisheng/src/bisheng-plugin-highlight/lib/browser.js#L7
-        const attr = JsonML.getAttributes(node);
-        return React.createElement(
-          'pre',
-          {
-            key: index,
-            className: `language-${attr.lang}`,
-          },
-          React.createElement('code', {
-            dangerouslySetInnerHTML: { __html: attr.highlighted },
-          }),
-        );
-      },
-    ],
-  ]);
-}
-
 function compress(string: string): string {
   return LZString.compressToBase64(string)
     .replace(/\+/g, '-') // Convert '+' to '-'
@@ -130,13 +105,6 @@ const CodePreviewer: React.FC<AntdPreviewerProps> = (props) => {
 
   const [showOnlineUrl, setShowOnlineUrl] = useState<boolean>(false);
 
-  const highlightedCodes = {
-    jsx: Prism.highlight(jsx, Prism.languages.javascript, 'jsx'),
-    tsx: Prism.highlight(entryCode, Prism.languages.javascript, 'jsx'),
-  };
-
-  const highlightedStyle = style ? Prism.highlight(style, Prism.languages.css, 'css') : '';
-
   useEffect(() => {
     const regexp = /preview-(\d+)-ant-design/; // matching PR preview addresses
     setShowOnlineUrl(
@@ -538,17 +506,11 @@ createRoot(document.getElementById('container')).render(<Demo />);
       {codeExpand && (
         <section className={highlightClass} key="code">
           <CodePreview
-            codes={highlightedCodes}
-            toReactComponent={toReactComponent}
+            sourceCode={entryCode}
+            jsxCode={jsx}
+            styleCode={style}
             onCodeTypeChange={(type) => setCodeType(type)}
           />
-          {highlightedStyle ? (
-            <div key="style" className="highlight">
-              <pre>
-                <code className="css" dangerouslySetInnerHTML={{ __html: highlightedStyle }} />
-              </pre>
-            </div>
-          ) : null}
         </section>
       )}
     </section>
@@ -560,7 +522,9 @@ createRoot(document.getElementById('container')).render(<Demo />);
     // resulting in some response delays like following issue:
     // /~https://github.com/ant-design/ant-design/issues/39995
     // So we insert style tag into head tag.
-    if (!style) return;
+    if (!style) {
+      return;
+    }
     const styleTag = document.createElement('style');
     styleTag.type = 'text/css';
     styleTag.innerHTML = style;

.dumi/theme/builtins/Previewer/Previewer.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import type { IPreviewerProps } from 'dumi';
+import { useTabMeta } from 'dumi';
+
+import CodePreviewer from './CodePreviewer';
+import DesignPreviewer from './DesignPreviewer';
+
+export interface AntdPreviewerProps extends IPreviewerProps {
+  originDebug?: IPreviewerProps['debug'];
+}
+
+const Previewer: React.FC<AntdPreviewerProps> = (props) => {
+  const tab = useTabMeta();
+
+  if (tab?.frontmatter.title === 'Design') {
+    return <DesignPreviewer {...props} />;
+  }
+
+  return <CodePreviewer {...props} />;
+};
+
+export default Previewer;

.dumi/theme/builtins/Previewer/index.tsx

@@ -1,21 +1,40 @@
+import React, { Suspense } from 'react';
 import type { IPreviewerProps } from 'dumi';
-import { useTabMeta } from 'dumi';
-import React from 'react';
-import CodePreviewer from './CodePreviewer';
-import DesignPreviewer from './DesignPreviewer';
+import { Skeleton, Alert } from 'antd';
+import { createStyles } from 'antd-style';
 
-export interface AntdPreviewerProps extends IPreviewerProps {
-  originDebug?: IPreviewerProps['debug'];
-}
+const { ErrorBoundary } = Alert;
 
-const Previewer: React.FC<AntdPreviewerProps> = (props) => {
-  const tab = useTabMeta();
+const Previewer = React.lazy(() => import('./Previewer'));
 
-  if (tab?.frontmatter.title === 'Design') {
-    return <DesignPreviewer {...props} />;
-  }
+const useStyle = createStyles(({ css }) => ({
+  skeletonWrapper: css`
+    width: 100% !important;
+    height: 500px;
+    margin-bottom: 16px;
+  `,
+}));
 
-  return <CodePreviewer {...props} />;
+export default (props: IPreviewerProps) => {
+  const { styles } = useStyle();
+  return (
+    <ErrorBoundary>
+      <Suspense
+        fallback={
+          <Skeleton.Node
+            active
+            className={styles.skeletonWrapper}
+            style={{
+              width: '100%',
+              height: '100%',
+            }}
+          >
+            {' '}
+          </Skeleton.Node>
+        }
+      >
+        <Previewer {...props} />
+      </Suspense>
+    </ErrorBoundary>
+  );
 };
-
-export default Previewer;

.dumi/theme/builtins/TokenCompare/index.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import { TinyColor } from '@ctrl/tinycolor';
 import { createStyles } from 'antd-style';
 import tokenMeta from 'antd/es/version/token-meta.json';
-import { theme, Space } from 'antd';
+import { Space, theme } from 'antd';
 import useLocale from '../../../hooks/useLocale';
 
 const useStyle = createStyles(({ token, css }) => {
@@ -29,7 +29,7 @@ const useStyle = createStyles(({ token, css }) => {
       display: flex;
       align-items: center;
       justify-content: center;
-
+      color: rgba(0,0,0,0.88);
       border-right: 1px solid rgba(0, 0, 0, 0.1);
     `,