chore: auto merge branches (ant-design#44052)

chore: merge master into feature
ammar-knowledge · Aug 6, 2023 · 1f03d37 · 1f03d37
2 parents a4212f4 + fee14ec
commit 1f03d37
Show file tree

Hide file tree

Showing 136 changed files with 4,842 additions and 2,592 deletions.
diff --git a/.dumi/hooks/use.ts b/.dumi/hooks/use.ts
@@ -1,23 +1,28 @@
-export default function use(promise: any) {
-  if (promise.status === 'fulfilled') {
-    return promise.value;
+export default function use<T>(promise: PromiseLike<T>): T {
+  const internal: PromiseLike<T> & {
+    status?: 'pending' | 'fulfilled' | 'rejected';
+    value?: T;
+    reason?: any;
+  } = promise;
+  if (internal.status === 'fulfilled') {
+    return internal.value;
   }
-  if (promise.status === 'rejected') {
-    throw promise.reason;
-  } else if (promise.status === 'pending') {
-    throw promise;
+  if (internal.status === 'rejected') {
+    throw internal.reason;
+  } else if (internal.status === 'pending') {
+    throw internal;
   } else {
-    promise.status = 'pending';
-    promise.then(
+    internal.status = 'pending';
+    internal.then(
       (result) => {
-        promise.status = 'fulfilled';
-        promise.value = result;
+        internal.status = 'fulfilled';
+        internal.value = result;
       },
       (reason) => {
-        promise.status = 'rejected';
-        promise.reason = reason;
+        internal.status = 'rejected';
+        internal.reason = reason;
       },
     );
-    throw promise;
+    throw internal;
   }
 }
diff --git a/.dumi/hooks/useFetch/cache.ts b/.dumi/hooks/useFetch/cache.ts
@@ -0,0 +1,21 @@
+export default class FetchCache {
+  private cache: Map<string, PromiseLike<any>> = new Map();
+
+  get(key: string) {
+    return this.cache.get(key);
+  }
+
+  set(key: string, value: PromiseLike<any>) {
+    this.cache.set(key, value);
+  }
+
+  promise<T>(key: string, promiseFn: () => PromiseLike<T>): PromiseLike<T> {
+    const cached = this.get(key);
+    if (cached) {
+      return cached;
+    }
+    const promise = promiseFn();
+    this.set(key, promise);
+    return promise;
+  }
+}
diff --git a/.dumi/hooks/useFetch/index.ts b/.dumi/hooks/useFetch/index.ts
@@ -0,0 +1,20 @@
+import fetch from 'cross-fetch';
+import use from '../use';
+import FetchCache from './cache';
+
+const cache = new FetchCache();
+
+const useFetch = <T>(options: string | { request: () => PromiseLike<T>; key: string }) => {
+  let request;
+  let key;
+  if (typeof options === 'string') {
+    request = () => fetch(options).then((res) => res.json());
+    key = options;
+  } else {
+    request = options.request;
+    key = options.key;
+  }
+  return use(cache.promise<T>(key, request));
+};
+
+export default useFetch;
diff --git a/.dumi/hooks/useMenu.tsx b/.dumi/hooks/useMenu.tsx
@@ -1,7 +1,7 @@
 import { useFullSidebarData, useSidebarData } from 'dumi';
 import React, { useMemo } from 'react';
 import type { MenuProps } from 'antd';
-import { Tag, theme } from 'antd';
+import { Tag, version } from 'antd';
 import Link from '../theme/common/Link';
 import useLocation from './useLocation';
 
@@ -15,7 +15,6 @@ const useMenu = (options: UseMenuOptions = {}): [MenuProps['items'], string] =>
   const { pathname, search } = useLocation();
   const sidebarData = useSidebarData();
   const { before, after } = options;
-  const { token } = theme.useToken();
 
   const menuItems = useMemo<MenuProps['items']>(() => {
     const sidebarItems = [...(sidebarData ?? [])];
@@ -32,18 +31,31 @@ const useMenu = (options: UseMenuOptions = {}): [MenuProps['items'], string] =>
         key.startsWith('/changelog'),
       )?.[1];
       if (changelogData) {
-        sidebarItems.push(...changelogData);
+        sidebarItems.splice(1, 0, changelogData[0]);
       }
     }
     if (pathname.startsWith('/changelog')) {
       const reactDocData = Object.entries(fullData).find(([key]) =>
         key.startsWith('/docs/react'),
       )?.[1];
       if (reactDocData) {
-        sidebarItems.unshift(...reactDocData);
+        sidebarItems.unshift(reactDocData[0]);
+        sidebarItems.push(...reactDocData.slice(1));
       }
     }
 
+    const getItemTag = (tag: string, show = true) =>
+      tag &&
+      show && (
+        <Tag
+          color={tag === 'New' ? 'success' : 'orange'}
+          bordered={false}
+          style={{ marginInlineStart: 'auto', marginInlineEnd: 0, marginTop: -2 }}
+        >
+          {tag.replace('VERSION', version)}
+        </Tag>
+      );
+
     return (
       sidebarItems?.reduce<Exclude<MenuProps['items'], undefined>>((result, group) => {
         if (group?.title) {
@@ -52,7 +64,7 @@ const useMenu = (options: UseMenuOptions = {}): [MenuProps['items'], string] =>
             const childrenGroup = group.children.reduce<
               Record<string, ReturnType<typeof useSidebarData>[number]['children']>
             >((childrenResult, child) => {
-              const type = (child.frontmatter as any).type ?? 'default';
+              const type = child.frontmatter?.type ?? 'default';
               if (!childrenResult[type]) {
                 childrenResult[type] = [];
               }
@@ -103,17 +115,16 @@ const useMenu = (options: UseMenuOptions = {}): [MenuProps['items'], string] =>
               key: group?.title,
               children: group.children?.map((item) => ({
                 label: (
-                  <Link to={`${item.link}${search}`}>
+                  <Link
+                    to={`${item.link}${search}`}
+                    style={{ display: 'flex', alignItems: 'center' }}
+                  >
                     {before}
                     <span key="english">{item?.title}</span>
                     <span className="chinese" key="chinese">
-                      {(item.frontmatter as any).subtitle}
+                      {item.frontmatter?.subtitle}
                     </span>
-                    {(item.frontmatter as any).tag && (
-                      <Tag color="warning" style={{ marginInlineStart: token.marginXS }}>
-                        {(item.frontmatter as any).tag}
-                      </Tag>
-                    )}
+                    {getItemTag(item.frontmatter?.tag, !before && !after)}
                     {after}
                   </Link>
                 ),
@@ -131,9 +142,13 @@ const useMenu = (options: UseMenuOptions = {}): [MenuProps['items'], string] =>
           result.push(
             ...list.map((item) => ({
               label: (
-                <Link to={`${item.link}${search}`}>
+                <Link
+                  to={`${item.link}${search}`}
+                  style={{ display: 'flex', alignItems: 'center' }}
+                >
                   {before}
                   {item?.title}
+                  {getItemTag((item.frontmatter as any).tag, !before && !after)}
                   {after}
                 </Link>
               ),

diff --git a/.dumi/pages/index/components/util.ts b/.dumi/pages/index/components/util.ts
@@ -1,6 +1,5 @@
 import { css } from 'antd-style';
-import fetch from 'cross-fetch';
-import use from '../../../hooks/use';
+import useFetch from '../../../hooks/useFetch';
 
 export interface Author {
   avatar: string;
@@ -81,12 +80,8 @@ export function preLoad(list: string[]) {
   }
 }
 
-const promise = fetch(`https://render.alipay.com/p/h5data/antd4-config_website-h5data.json`).then(
-  (res) => res.json(),
-);
-
-export function useSiteData(): [Partial<SiteData>, boolean] {
-  return use(promise);
+export function useSiteData(): Partial<SiteData> {
+  return useFetch('https://render.alipay.com/p/h5data/antd4-config_website-h5data.json');
 }
 
 export const getCarouselStyle = () => ({

diff --git a/.dumi/preset/.gitkeep b/.dumi/preset/.gitkeep
diff --git a/.dumi/rehypeAntd.ts b/.dumi/rehypeAntd.ts
@@ -68,10 +68,13 @@ function rehypeAntd(): UnifiedTransformer<HastRoot> {
         node.tagName = 'VideoPlayer';
       } else if (node.tagName === 'SourceCode') {
         const { lang } = node.properties;
-        if (lang === 'sandpack') {
+        if (typeof lang === 'string' && lang.startsWith('sandpack')) {
           parent!.children.splice(i!, 1, {
             type: 'element',
             tagName: 'Sandpack',
+            properties: {
+              dark: lang === 'sandpackdark',
+            },
             children: [
               {
                 type: 'text',

diff --git a/.dumi/theme/builtins/ResourceArticles/index.tsx b/.dumi/theme/builtins/ResourceArticles/index.tsx
@@ -51,8 +51,10 @@ const useStyle = createStyles(({ token, css }) => {
         padding: 0;
         font-size: 14px;
         list-style: none;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
       }
-
       ${antCls}-avatar > img {
         max-width: unset;
       }
@@ -95,7 +97,7 @@ const ArticleList: React.FC<ArticleListProps> = ({ name, data = [], authors = []
   );
 };
 
-const Articles = () => {
+const Articles: React.FC = () => {
   const [, lang] = useLocale();
   const isZhCN = lang === 'cn';
   const { articles = { cn: [], en: [] }, authors = [] } = useSiteData();
@@ -113,10 +115,16 @@ const Articles = () => {
 
   const yearList = Object.keys(mergedData).sort((a, b) => Number(b) - Number(a));
 
-  return yearList.length ? (
-    <Tabs>
-      {yearList.map((year) => (
-        <Tabs.TabPane tab={`${year}${isZhCN ? ' 年' : ''}`} key={year}>
+  if (yearList.length === 0) {
+    return null;
+  }
+
+  return (
+    <Tabs
+      items={yearList.map((year) => ({
+        key: year,
+        label: `${year}${isZhCN ? ' 年' : ''}`,
+        children: (
           <table>
             <tbody>
               <tr>
@@ -133,15 +141,14 @@ const Articles = () => {
               </tr>
             </tbody>
           </table>
-        </Tabs.TabPane>
-      ))}
-    </Tabs>
-  ) : null;
+        ),
+      }))}
+    />
+  );
 };
 
 export default () => {
   const { styles } = useStyle();
-
   return (
     <div id="articles" className={styles.articles}>
       <Suspense fallback={<Skeleton active />}>

diff --git a/.dumi/theme/builtins/Sandpack/index.tsx b/.dumi/theme/builtins/Sandpack/index.tsx
@@ -23,14 +23,16 @@ const setup = {
 
 const options = {
   activeFile: 'app.tsx' as never,
-  visibleFiles: ['index.tsx', 'app.tsx', 'package.json'] as any,
+  visibleFiles: ['index.tsx', 'app.tsx', 'package.json', 'index.css'] as any,
   showLineNumbers: true,
   editorHeight: '500px',
+  autorun: false,
 };
 
 const indexContent = `import React from 'react';
 import { createRoot } from 'react-dom/client';
 import App from './app';
+import './index.css';
 
 const root = createRoot(document.getElementById("root"));
 root.render(<App />);
@@ -62,7 +64,7 @@ const SandpackFallback = () => {
   );
 };
 
-const Sandpack = ({ children }: { children: ReactNode }) => {
+const Sandpack = ({ children, dark }: { children: ReactNode; dark: boolean }) => {
   const [searchParams] = useSearchParams();
 
   useServerInsertedHTML(() => (
@@ -81,6 +83,15 @@ const Sandpack = ({ children }: { children: ReactNode }) => {
         options={options}
         files={{
           'index.tsx': indexContent,
+          'index.css': `html, body {
+  padding: 0;
+  margin: 0;
+  background: ${dark ? '#000' : '#fff'};
+}
+
+#root {
+  padding: 24px;
+}`,
           'app.tsx': children,
         }}
       />