[pull] master from ant-design:master

.dumi/components/SemanticPreview.tsx

@@ -43,7 +43,7 @@ const useStyle = createStyles(({ token }, markPos: [number, number, number, numb
  z-index: 999999;
  box-shadow: 0 0 0 1px #fff;
  pointer-events: none;
- left: ${markPos[0] - MARK_BORDER_SIZE}px;
+ inset-inline-start: ${markPos[0] - MARK_BORDER_SIZE}px;
  top: ${markPos[1] - MARK_BORDER_SIZE}px;
  width: ${markPos[2] + MARK_BORDER_SIZE * 2}px;
  height: ${markPos[3] + MARK_BORDER_SIZE * 2}px;

.dumi/global.css

@@ -13,3 +13,8 @@
  background: rgba(255, 255, 255, 0.2);
  border-radius: 6px;
 }
+
+html {
+ scrollbar-width: thin;
+ scrollbar-color: unset;
+}

.dumi/hooks/use.ts

@@ -9,22 +9,22 @@ function use<T>(promise: PromiseLike<T>): T {
  }
  if (internal.status === 'rejected') {
  throw internal.reason;
- } else if (internal.status === 'pending') {
- throw internal;
- } else {
- internal.status = 'pending';
- internal.then(
- (result) => {
- internal.status = 'fulfilled';
- internal.value = result;
- },
- (reason) => {
- internal.status = 'rejected';
- internal.reason = reason;
- },
- );
+ }
+ if (internal.status === 'pending') {
  throw internal;
  }
+ internal.status = 'pending';
+ internal.then(
+ (result) => {
+ internal.status = 'fulfilled';
+ internal.value = result;
+ },
+ (reason) => {
+ internal.status = 'rejected';
+ internal.reason = reason;
+ },
+ );
+ throw internal;
 }
 
 export default use;

.dumi/hooks/useFetch/index.ts

@@ -1,4 +1,5 @@
 import fetch from 'cross-fetch';
+
 import use from '../use';
 import FetchCache from './cache';
 

.dumi/hooks/useLocale.ts

@@ -1,16 +1,22 @@
 import { useLocale as useDumiLocale } from 'dumi';
 
-export interface LocaleMap<Key extends string> {
- cn: Record<Key, string>;
- en: Record<Key, string>;
+export interface LocaleMap<
+ K extends PropertyKey = PropertyKey,
+ V extends string | ((...params: any[]) => string) = string,
+> {
+ cn: Record<K, V>;
+ en: Record<K, V>;
 }
 
-function useLocale<Key extends string>(
- localeMap?: LocaleMap<Key>,
-): [Record<Key, string>, 'cn' | 'en'] {
+const useLocale = <
+ K extends PropertyKey = PropertyKey,
+ V extends string | ((...params: any[]) => string) = string,
+>(
+ localeMap?: LocaleMap<K, V>,
+): [Record<K, V>, 'cn' | 'en'] => {
  const { id } = useDumiLocale();
  const localeType = id === 'zh-CN' ? 'cn' : 'en';
- return [localeMap?.[localeType]!, localeType];
-}
+ return [localeMap?.[localeType]!, localeType] as const;
+};
 
 export default useLocale;

.dumi/hooks/useLocation.ts

@@ -1,5 +1,6 @@
-import { useLocation as useDumiLocation } from 'dumi';
 import * as React from 'react';
+import { useLocation as useDumiLocation } from 'dumi';
+
 import useLocale from './useLocale';
 
 function clearPath(path: string) {

.dumi/hooks/useMenu.tsx

@@ -1,24 +1,73 @@
 import React, { useMemo } from 'react';
 import type { MenuProps } from 'antd';
-import { Tag, version } from 'antd';
+import { Space, Tag, version } from 'antd';
+import { createStyles } from 'antd-style';
+import classnames from 'classnames';
 import { useFullSidebarData, useSidebarData } from 'dumi';
 
 import Link from '../theme/common/Link';
 import useLocation from './useLocation';
 
-const ItemTag: React.FC<{ tag?: string; show?: boolean }> = (props) => {
- const { tag, show = true } = props;
- if (!show || !tag) {
- return null;
+function isVersionNumber(value?: string) {
+ return value && /^\d+\.\d+\.\d+$/.test(value);
+}
+
+const useStyle = createStyles(({ css, token }) => ({
+ link: css`
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ `,
+ tag: css`
+ margin-inline-end: 0;
+ `,
+ subtitle: css`
+ font-weight: normal;
+ font-size: ${token.fontSizeSM}px;
+ opacity: 0.8;
+ `,
+}));
+
+interface MenuItemLabelProps {
+ before?: React.ReactNode;
+ after?: React.ReactNode;
+ link: string;
+ title: React.ReactNode;
+ subtitle?: React.ReactNode;
+ search?: string;
+ tag?: string;
+ className?: string;
+}
+
+const MenuItemLabelWithTag: React.FC<MenuItemLabelProps> = (props) => {
+ const { styles } = useStyle();
+ const { before, after, link, title, subtitle, search, tag, className } = props;
+ if (!before && !after) {
+ return (
+ <Link to={`${link}${search}`} className={classnames(className, { [styles.link]: tag })}>
+ <Space>
+ <span>{title}</span>
+ {subtitle && <span className={styles.subtitle}>{subtitle}</span>}
+ </Space>
+ {tag && (
+ <Tag
+ bordered={false}
+ className={classnames(styles.tag)}
+ color={isVersionNumber(tag) || tag === 'New' ? 'success' : 'processing'}
+ >
+ {tag.replace('VERSION', version)}
+ </Tag>
+ )}
+ </Link>
+ );
  }
  return (
- <Tag
- bordered={false}
- color={tag === 'New' ? 'success' : 'processing'}
- style={{ marginInlineStart: 'auto', marginInlineEnd: 0, marginTop: -2 }}
- >
- {tag.replace('VERSION', version)}
- </Tag>
+ <Link to={`${link}${search}`} className={className}>
+ {before}
+ {title}
+ {subtitle && <span className={styles.subtitle}>{subtitle}</span>}
+ {after}
+ </Link>
  );
 };
 
@@ -27,7 +76,7 @@ export interface UseMenuOptions {
  after?: React.ReactNode;
 }
 
-const useMenu = (options: UseMenuOptions = {}): [MenuProps['items'], string] => {
+const useMenu = (options: UseMenuOptions = {}): readonly [MenuProps['items'], string] => {
  const fullData = useFullSidebarData();
  const { pathname, search } = useLocation();
  const sidebarData = useSidebarData();
@@ -120,18 +169,15 @@ const useMenu = (options: UseMenuOptions = {}): [MenuProps['items'], string] =>
  key: group?.title,
  children: group.children?.map((item) => ({
  label: (
- <Link
- to={`${item.link}${search}`}
- style={{ display: 'flex', alignItems: 'center' }}
- >
- {before}
- <span key="english">{item?.title}</span>
- <span className="chinese" key="chinese">
- {item.frontmatter?.subtitle}
- </span>
- <ItemTag tag={item.frontmatter?.tag} show={!before && !after} />
- {after}
- </Link>
+ <MenuItemLabelWithTag
+ before={before}
+ after={after}
+ link={item.link}
+ title={item?.title}
+ subtitle={item.frontmatter?.subtitle}
+ search={search}
+ tag={item.frontmatter?.tag}
+ />
  ),
  key: item.link.replace(/(-cn$)/g, ''),
  })),
@@ -146,15 +192,14 @@ const useMenu = (options: UseMenuOptions = {}): [MenuProps['items'], string] =>
  result.push(
  ...list.map((item) => ({
  label: (
- <Link
- to={`${item.link}${search}`}
- style={{ display: 'flex', alignItems: 'center' }}
- >
- {before}
- {item?.title}
- <ItemTag tag={item.frontmatter?.tag} show={!before && !after} />
- {after}
- </Link>
+ <MenuItemLabelWithTag
+ before={before}
+ after={after}
+ link={item.link}
+ title={item?.title}
+ search={search}
+ tag={item.frontmatter?.tag}
+ />
  ),
  key: item.link.replace(/(-cn$)/g, ''),
  })),
@@ -165,7 +210,7 @@ const useMenu = (options: UseMenuOptions = {}): [MenuProps['items'], string] =>
  );
  }, [sidebarData, fullData, pathname, search, options]);
 
- return [menuItems, pathname];
+ return [menuItems, pathname] as const;
 };
 
 export default useMenu;

.dumi/pages/404/index.tsx

@@ -1,7 +1,9 @@
-import { HomeOutlined } from '@ant-design/icons';
-import { Link, useLocation } from 'dumi';
 import React, { useEffect } from 'react';
+import { HomeOutlined } from '@ant-design/icons';
 import { Button, Result } from 'antd';
+import { useLocation } from 'dumi';
+
+import Link from '../../theme/common/Link';
 import * as utils from '../../theme/utils';
 
 export interface NotFoundProps {