Merge branch 'master' into docs/bump-umi

ant-design · Apr 23, 2024 · 432dbce · 432dbce
2 parents 680cc69 + 50d8201
commit 432dbce
Show file tree

Hide file tree

Showing 758 changed files with 7,854 additions and 5,217 deletions.
diff --git a/.dumi/rehypeAntd.ts b/.dumi/rehypeAntd.ts
@@ -1,5 +1,6 @@
 import assert from 'assert';
-import { unistUtilVisit, type HastRoot, type UnifiedTransformer } from 'dumi';
+import type { HastRoot, UnifiedTransformer } from 'dumi';
+import { unistUtilVisit } from 'dumi';
 
 /**
  * plugin for modify hast tree when docs compiling

diff --git a/.dumi/theme/builtins/ColorChunk/index.tsx b/.dumi/theme/builtins/ColorChunk/index.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { TinyColor, type ColorInput } from '@ctrl/tinycolor';
+import type { ColorInput } from '@ctrl/tinycolor';
+import { TinyColor } from '@ctrl/tinycolor';
 import { createStyles } from 'antd-style';
 
 interface ColorChunkProps {

diff --git a/.dumi/theme/builtins/ComponentMeta/index.tsx b/.dumi/theme/builtins/ComponentMeta/index.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { EditOutlined, GithubOutlined } from '@ant-design/icons';
-import { Descriptions, theme, Tooltip, Typography, type GetProp } from 'antd';
+import type { GetProp } from 'antd';
+import { Descriptions, theme, Tooltip, Typography } from 'antd';
 import { createStyles, css } from 'antd-style';
 import kebabCase from 'lodash/kebabCase';
 import CopyToClipboard from 'react-copy-to-clipboard';
@@ -40,7 +41,7 @@ const useStyle = createStyles(({ token }) => ({
     position: relative;
     display: inline-flex;
     align-items: center;
-    column-gap: 4px;
+    column-gap: ${token.paddingXXS}px;
     border-radius: ${token.borderRadiusSM}px;
     padding-inline: ${token.paddingXS}px;
     transition: all ${token.motionDurationSlow} !important;

diff --git a/.dumi/theme/builtins/Container/index.tsx b/.dumi/theme/builtins/Container/index.tsx
@@ -2,7 +2,7 @@
  * copied: https://github.com/arvinxx/dumi-theme-antd-style/tree/master/src/builtins/Container
  */
 import * as React from 'react';
-import { type FC, type ReactNode } from 'react';
+import type { FC, ReactNode } from 'react';
 import { Alert } from 'antd';
 
 import useStyles from './style';

diff --git a/.dumi/theme/builtins/DemoWrapper/index.tsx b/.dumi/theme/builtins/DemoWrapper/index.tsx
@@ -113,7 +113,7 @@ const DemoWrapper: typeof DumiDemoGrid = ({ items }) => {
           )}
         </Tooltip>
       </span>
-      <ConfigProvider theme={{ cssVar: enableCssVar }}>
+      <ConfigProvider theme={{ cssVar: enableCssVar, hashed: !enableCssVar }}>
         <DumiDemoGrid items={demos} />
       </ConfigProvider>
     </div>

diff --git a/.dumi/theme/builtins/IconSearch/index.tsx b/.dumi/theme/builtins/IconSearch/index.tsx
@@ -7,7 +7,7 @@ const IconSearch = React.lazy(() => import('./IconSearch'));
 const useStyle = createStyles(({ token, css }) => ({
   searchWrapper: css`
     display: flex;
-    gap: 16px;
+    gap: ${token.padding}px;
     > *:first-child {
       flex: 0 0 328px;
     }

diff --git a/.dumi/theme/builtins/Previewer/CodePreviewer.tsx b/.dumi/theme/builtins/Previewer/CodePreviewer.tsx
@@ -108,7 +108,7 @@ const CodePreviewer: React.FC<AntdPreviewerProps> = (props) => {
     clientOnly,
     pkgDependencyList,
   } = props;
-  const { showDebug } = useContext(DemoContext);
+  const { showDebug, codeType } = useContext(DemoContext);
 
   const { pkg } = useSiteData();
   const location = useLocation();
@@ -134,7 +134,6 @@ const CodePreviewer: React.FC<AntdPreviewerProps> = (props) => {
   const riddleIconRef = useRef<HTMLFormElement>(null);
   const codepenIconRef = useRef<HTMLFormElement>(null);
   const [codeExpand, setCodeExpand] = useState<boolean>(false);
-  const [codeType, setCodeType] = useState<string>('tsx');
   const { theme } = useContext<SiteContextProps>(SiteContext);
 
   const { hash, pathname, search } = location;
@@ -541,7 +540,6 @@ createRoot(document.getElementById('container')).render(<Demo />);
             styleCode={style}
             error={liveDemoError}
             entryName={entryName}
-            onCodeTypeChange={setCodeType}
             onSourceChange={setLiveDemoSource}
           />
           <div

diff --git a/.dumi/theme/builtins/ResourceCards/index.tsx b/.dumi/theme/builtins/ResourceCards/index.tsx
@@ -1,39 +1,27 @@
 import React from 'react';
 import { ExclamationCircleOutlined } from '@ant-design/icons';
-import { Col, Row, Tooltip } from 'antd';
+import { Col, Row, Tooltip, Card, Typography } from 'antd';
 import { createStyles } from 'antd-style';
-
 import useLocale from '../../../hooks/useLocale';
 
-const useStyle = createStyles(({ token, css }) => {
-  const { boxShadowSecondary } = token;
+const { Paragraph } = Typography;
 
-  return {
-    card: css`
+const useStyle = createStyles(({ token, css }) => ({
+  card: css`
       position: relative;
-      display: flex;
-      flex-direction: column;
-      height: 100%;
-      color: inherit;
-      list-style: none;
-      border: 1px solid ${token.colorSplit};
-      border-radius: ${token.borderRadiusXS}px;
-      cursor: pointer;
-      transition: box-shadow ${token.motionDurationSlow};
+      overflow: hidden;
 
-      &:hover {
-        box-shadow: ${boxShadowSecondary};
-        color: inherit;
+      .ant-card-cover {
+        overflow: hidden;
       }
-    `,
-    image: css`
-      width: calc(100% + 2px);
-      max-width: none;
-      height: 184px;
-      margin: -1px -1px 0;
-      object-fit: cover;
-    `,
-    badge: css`
+      img {
+        transition: all ${token.motionDurationSlow} ease-out;
+      }
+
+      &:hover img {
+        transform: scale(1.3);
+        `,
+  badge: css`
       position: absolute;
       top: 8px;
       right: 8px;
@@ -42,25 +30,12 @@ const useStyle = createStyles(({ token, css }) => {
       font-size: ${token.fontSizeSM}px;
       line-height: 1;
       background: rgba(0, 0, 0, 0.65);
-      border-radius: ${token.borderRadiusXS}px;
+      border-radius: ${token.borderRadiusLG}px;
       box-shadow: 0 0 2px rgba(255, 255, 255, 0.2);
       display: inline-flex;
-      column-gap: 4px;
-    `,
-    title: css`
-      margin: ${token.margin}px ${token.marginMD}px ${token.marginXS}px;
-      opacity: 0.85;
-      font-size: ${token.fontSizeXL}px;
-      line-height: 28px;
+      column-gap: ${token.paddingXXS}px;
     `,
-    description: css`
-      margin: 0 ${token.marginMD}px ${token.marginMD}px;
-      opacity: 0.65;
-      font-size: ${token.fontSizeXL}px;
-      line-height: 22px;
-    `,
-  };
-});
+}));
 
 export type Resource = {
   title: string;
@@ -91,38 +66,33 @@ const ResourceCard: React.FC<ResourceCardProps> = ({ resource }) => {
   const { styles } = useStyle();
   const [locale] = useLocale(locales);
 
-  const { title: titleStr, description, cover, src, official } = resource;
+  const { title, description, cover, src, official } = resource;
 
-  let coverColor: string | null = null;
-  let title: string = titleStr;
-  const titleMatch = titleStr.match(/(.*)(#[\dA-Fa-f]{6})/);
-  if (titleMatch) {
-    title = titleMatch[1].trim();
-    // eslint-disable-next-line prefer-destructuring
-    coverColor = titleMatch[2];
-  }
+  const badge = official ? (
+    <div className={styles.badge}>{locale.official}</div>
+  ) : (
+    <Tooltip title={locale.thirdPartDesc}>
+      <div className={styles.badge}>
+        <ExclamationCircleOutlined />
+        {locale.thirdPart}
+      </div>
+    </Tooltip>
+  );
 
   return (
-    <Col xs={24} sm={12} md={8} lg={6} style={{ padding: 12 }}>
+    <Col xs={24} sm={12} md={8} lg={6}>
       <a className={styles.card} target="_blank" href={src} rel="noreferrer">
-        <img
-          className={styles.image}
-          src={cover}
-          alt={title}
-          style={coverColor ? { backgroundColor: coverColor } : {}}
-        />
-        {official ? (
-          <div className={styles.badge}>{locale.official}</div>
-        ) : (
-          <Tooltip title={locale.thirdPartDesc}>
-            <div className={styles.badge}>
-              <ExclamationCircleOutlined />
-              {locale.thirdPart}
-            </div>
-          </Tooltip>
-        )}
-        <p className={styles?.title}>{title}</p>
-        <p className={styles.description}>{description}</p>
+        <Card hoverable className={styles.card} cover={<img src={cover} alt={title} />}>
+          <Card.Meta
+            title={title}
+            description={
+              <Paragraph style={{ marginBottom: 0 }} ellipsis={{ rows: 1 }} title={description}>
+                {description}
+              </Paragraph>
+            }
+          />
+          {badge}
+        </Card>
       </a>
     </Col>
   );
@@ -133,7 +103,7 @@ export type ResourceCardsProps = {
 };
 
 const ResourceCards: React.FC<ResourceCardsProps> = ({ resources }) => (
-  <Row style={{ margin: '-12px -12px 0 -12px' }}>
+  <Row gutter={[24, 24]}>
     {resources.map((item) => (
       <ResourceCard resource={item} key={item?.title} />
     ))}

diff --git a/.dumi/theme/common/CodePreview.tsx b/.dumi/theme/common/CodePreview.tsx
@@ -1,10 +1,12 @@
-import React, { useEffect, useMemo, type ComponentProps } from 'react';
+import type { ComponentProps } from 'react';
+import React, { useContext, useEffect, useMemo } from 'react';
 import { Button, Tabs, Typography } from 'antd';
 import { createStyles } from 'antd-style';
 import toReactElement from 'jsonml-to-react-element';
 import JsonML from 'jsonml.js/lib/utils';
 import Prism from 'prismjs';
 
+import DemoContext from '../slots/DemoContext';
 import LiveCode from './LiveCode';
 
 const useStyle = createStyles(({ token, css }) => {
@@ -66,7 +68,6 @@ interface CodePreviewProps
   jsxCode?: string;
   styleCode?: string;
   entryName: string;
-  onCodeTypeChange?: (activeKey: string) => void;
   onSourceChange?: (source: Record<string, string>) => void;
 }
 
@@ -91,7 +92,6 @@ const CodePreview: React.FC<CodePreviewProps> = ({
   jsxCode = '',
   styleCode = '',
   entryName,
-  onCodeTypeChange,
   onSourceChange,
   error,
 }) => {
@@ -107,6 +107,7 @@ const CodePreview: React.FC<CodePreviewProps> = ({
     initialCodes.style = '';
   }
   const [highlightedCodes, setHighlightedCodes] = React.useState(initialCodes);
+  const { codeType, setCodeType } = useContext(DemoContext);
   const sourceCodes = {
     // omit trailing line break
     tsx: sourceCode?.trim(),
@@ -120,7 +121,7 @@ const CodePreview: React.FC<CodePreviewProps> = ({
       style: Prism.highlight(styleCode, Prism.languages.css, 'css'),
     };
     // 去掉空的代码类型
-    Object.keys(codes).forEach((key: keyof typeof codes) => {
+    (Object.keys(codes) as (keyof typeof codes)[]).forEach((key) => {
       if (!codes[key]) {
         delete codes[key];
       }
@@ -177,7 +178,15 @@ const CodePreview: React.FC<CodePreviewProps> = ({
     );
   }
 
-  return <Tabs centered className="highlight" onChange={onCodeTypeChange} items={items} />;
+  return (
+    <Tabs
+      centered
+      className="highlight"
+      activeKey={codeType}
+      onChange={setCodeType}
+      items={items}
+    />
+  );
 };
 
 export default CodePreview;
diff --git a/.dumi/theme/common/LiveCode.tsx b/.dumi/theme/common/LiveCode.tsx
@@ -27,7 +27,7 @@ const useStyle = createStyles(({ token, css }) => {
 
         .dumi-default-source-code > pre,
         .dumi-default-source-code-scroll-content > pre {
-          font-size: 13px;
+          font-size: ${token.fontSize}px;
           line-height: 2;
           font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
         }