chore: merge master

ant-design · Jun 12, 2024 · 18ddc6c · 18ddc6c
2 parents ca23bad + 1e21905
commit 18ddc6c
Show file tree

Hide file tree

Showing 23 changed files with 29,074 additions and 528 deletions.
diff --git a/docs/guide/i18n.en.md b/docs/guide/i18n.en.md
@@ -30,13 +30,20 @@ The following languages are currently supported:
 | Japanese              | ja-JP    |
 | Kazakh                | kk-KZ    |
 | Indonesian            | id-ID    |
+| Indonesian(old form)  | in-ID    |
 | Italian               | it-IT    |
 | Danish                | da-DK    |
 | Norwegian (Bokmål)    | nb-NO    |
 | Dutch (Netherlands)   | nl-NL    |
 | Russian (Russia)      | ru-RU    |
 | Turkish (Türkçe)      | tr-TR    |
 | Thai                  | th-TH    |
+| French                | fr-FR    |
+| German                | de-DE    |
+| Malay                 | ms-MY    |
+| Arabic                | ar-SA    |
+| Portuguese            | pt-BR    |
+| Vietnamese            | vi-VN    |
 
 See more usage at [ConfigProvider](../components/config-provider).
 

diff --git a/docs/guide/i18n.zh.md b/docs/guide/i18n.zh.md
@@ -29,13 +29,20 @@ return (
 | 日语                 | ja-JP  |
 | 哈萨克语             | kk-KZ  |
 | 印度尼西亚语         | id-ID  |
+| 印度尼西亚语（旧版） | in-ID  |
 | 意大利语             | it-IT  |
 | 丹麦语               | da-DK  |
 | 挪威                 | nb-NO  |
 | 荷兰语               | nl-NL  |
 | 俄罗斯语             | ru-RU  |
 | 土耳其语             | tr-TR  |
 | 泰语                 | th-TH  |
+| 法语                 | fr-FR  |
+| 德语                 | de-DE  |
+| 马来语               | ms-MY  |
+| 阿拉伯语             | ar-SA  |
+| 葡萄牙语             | pt-BR  |
+| 越南语               | vi-VN  |
 
 具体的使用方法请参考 [ConfigProvider](../components/config-provider) 文档。
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "antd-mobile",
-  "version": "5.35.0",
+  "version": "5.36.1",
   "homepage": "https://github.com/ant-design/ant-design-mobile#readme",
   "bugs": {
     "url": "https://github.com/ant-design/ant-design-mobile/issues"
@@ -172,7 +172,8 @@
     "webpack-stream": "^7.0.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org"

diff --git a/src/components/card/card.less b/src/components/card/card.less
@@ -2,17 +2,18 @@
 
 .@{class-prefix-card} {
   background: var(--adm-color-background);
-  border-radius: 8px;
-  padding: 0 12px;
+  border-radius: var(--adm-card-border-radius, 8px);
+  padding: 0 var(--adm-card-padding-inline, 12px);
   &-header {
     position: relative;
     display: flex;
     justify-content: space-between;
     align-items: center;
     box-sizing: border-box;
-    padding: 12px 0;
+    padding: var(--adm-card-header-padding-block, 12px) 0;
     &:not(:last-child) {
-      border-bottom: solid 0.5px var(--adm-color-border);
+      border-bottom: solid var(--adm-card-header-border-width, 0.5px)
+        var(--adm-card-header-border-color, var(--adm-color-border));
     }
     &-title {
       font-size: var(--adm-font-size-7);
@@ -21,6 +22,6 @@
     }
   }
   &-body {
-    padding: 12px 0;
+    padding: var(--adm-card-body-padding-block, 12px) 0;
   }
 }
diff --git a/src/components/card/card.patch.less b/src/components/card/card.patch.less
@@ -0,0 +1,19 @@
+@class-prefix-card: ~'adm-card';
+
+.@{class-prefix-card} {
+  background: #fff;
+  border-radius: 8px;
+  padding: 0 12px;
+  &-header {
+    padding: 12px 0;
+    &:not(:last-child) {
+      border-bottom: solid 0.5px #eee;
+    }
+    &-title {
+      font-size: 15px;
+    }
+  }
+  &-body {
+    padding: 12px 0;
+  }
+}
diff --git a/src/components/card/index.en.md b/src/components/card/index.en.md
@@ -25,3 +25,14 @@ It can carry text, lists, pictures, paragraphs, etc., which is convenient for us
 | onClick | The click event of the Card | `(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void` | - |
 | onHeaderClick | The click event of the header area | `(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void` | - |
 | title | The left area of the header | `ReactNode` | - |
+
+### CSS Variables
+
+| Name | Description | Default | Global |
+| --- | --- | --- | --- |
+| `--adm-card-border-radius` | Border radius of the button. | `8px` | `--adm-card-border-radius` |
+| `--adm-card-padding-inline` | Horizontal padding of the card. | `12px` | `--adm-card-padding-inline` |
+| `--adm-card-header-border-width` | Bottom border width of the card header. | `0.5px` | `--adm-card-header-border-width` |
+| `--adm-card-header-border-color` | Bottom border color of the card header. | `var(--adm-color-border)` | `--adm-card-header-border-color` |
+| `--adm-card-header-padding-block` | Vertical of the card header. | `12px` | `--adm-card-header-padding-block` |
+| `--adm-card-body-padding-block` | Vertical padding of the card body. | `12px` | `--adm-card-body-padding-block` |
diff --git a/src/components/card/index.zh.md b/src/components/card/index.zh.md
@@ -25,3 +25,14 @@
 | onClick | 卡片点击事件 | `(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void` | - |
 | onHeaderClick | header 区域点击事件 | `(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void` | - |
 | title | header 左边区域 | `ReactNode` | - |
+
+### CSS 变量
+
+| 属性 | 说明 | 默认值 | 全局变量 |
+| --- | --- | --- | --- |
+| `--adm-card-border-radius` | 圆角大小 | `8px` | `--adm-card-border-radius` |
+| `--adm-card-padding-inline` | 水平内边距 | `12px` | `--adm-card-padding-inline` |
+| `--adm-card-header-border-width` | header 分割线宽度 | `0.5px` | `--adm-card-header-border-width` |
+| `--adm-card-header-border-color` | header 分割线颜色 | `var(--adm-color-border)` | `--adm-card-header-border-color` |
+| `--adm-card-header-padding-block` | header 垂直内边距 | `12px` | `--adm-card-header-padding-block` |
+| `--adm-card-body-padding-block` | body 垂直内边距 | `12px` | `--adm-card-body-padding-block` |
diff --git a/src/components/collapse/collapse.tsx b/src/components/collapse/collapse.tsx
@@ -8,6 +8,7 @@ import { NativeProps, withNativeProps } from '../../utils/native-props'
 import { useShouldRender } from '../../utils/should-render'
 import { traverseReactNode } from '../../utils/traverse-react-node'
 import { useIsomorphicUpdateLayoutEffect } from '../../utils/use-isomorphic-update-layout-effect'
+import { observe } from '../../utils/use-mutation-effect'
 import { usePropsValue } from '../../utils/use-props-value'
 import { mergeProp, mergeProps } from '../../utils/with-default-props'
 import { useConfig } from '../config-provider'
@@ -71,18 +72,32 @@ const CollapsePanelContent: FC<{
   useIsomorphicUpdateLayoutEffect(() => {
     const inner = innerRef.current
     if (!inner) return
+
     if (visible) {
-      api.start({
-        height: inner.offsetHeight,
-      })
+      let lastMotionId = 0
+      let cancelObserve: VoidFunction = () => {}
+
+      const handleMotion = () => {
+        lastMotionId += 1
+        const motionId = lastMotionId
+
+        api.start({ height: inner.offsetHeight })[0].then(() => {
+          if (motionId === lastMotionId) {
+            cancelObserve()
+          }
+        })
+      }
+
+      cancelObserve = observe(
+        inner,
+        { childList: true, subtree: true },
+        handleMotion
+      )
+      handleMotion()
+      return cancelObserve
     } else {
-      api.start({
-        height: inner.offsetHeight,
-        immediate: true,
-      })
-      api.start({
-        height: 0,
-      })
+      api.start({ height: inner.offsetHeight, immediate: true })
+      api.start({ height: 0 })
     }
   }, [visible])
 

diff --git a/src/components/collapse/demos/demo1.tsx b/src/components/collapse/demos/demo1.tsx
@@ -1,6 +1,6 @@
-import React from 'react'
 import { Collapse } from 'antd-mobile'
 import { DemoBlock, lorem } from 'demos'
+import React from 'react'
 
 export default () => {
   return (