Repository: ant-design/ant-design-mobile
Pull request #6203 (2023-06-12 06:13:13)

feat(Popup): add `closeOnSwipe` prop
#6174 
#6192

codecov[bot]: ## [Codecov](https://app.codecov.io/gh/ant-design/ant-design-mobile/pull/6203?src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design) Report
Patch coverage: **`100.00`**% and no project coverage change.
> Comparison is base [(`671c077`)](https://app.codecov.io/gh/ant-design/ant-design-mobile/commit/671c077bf741c4797b79b4f00c20ccb34fb5923e?el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design) 90.59% compared to head [(`d7e8953`)](https://app.codecov.io/gh/ant-design/ant-design-mobile/pull/6203?src=pr&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design) 90.59%.

<details><summary>Additional details and impacted files</summary>


```diff
@@           Coverage Diff           @@
##           master    #6203   +/-   ##
=======================================
  Coverage   90.59%   90.59%           
=======================================
  Files         304      304           
  Lines        6592     6593    +1     
  Branches     1639     1640    +1     
=======================================
+ Hits         5972     5973    +1     
  Misses        568      568           
  Partials       52       52           
```


| [Impacted Files](https://app.codecov.io/gh/ant-design/ant-design-mobile/pull/6203?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design) | Coverage Δ | |
|---|---|---|
| [src/components/popup/popup.tsx](https://app.codecov.io/gh/ant-design/ant-design-mobile/pull/6203?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design#diff-c3JjL2NvbXBvbmVudHMvcG9wdXAvcG9wdXAudHN4) | `84.72% <100.00%> (+0.21%)` | :arrow_up: |
| [src/utils/reduce-and-restore-motion.ts](https://app.codecov.io/gh/ant-design/ant-design-mobile/pull/6203?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design#diff-c3JjL3V0aWxzL3JlZHVjZS1hbmQtcmVzdG9yZS1tb3Rpb24udHM=) | `95.65% <100.00%> (ø)` | |


</details>

[:umbrella: View full report in Codecov by Sentry](https://app.codecov.io/gh/ant-design/ant-design-mobile/pull/6203?src=pr&el=continue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design).   
:loudspeaker: Do you have feedback about the report comment? [Let us know in this issue](https://about.codecov.io/codecov-pr-comment-feedback/?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design).

github-actions[bot]: PR preview has been successfully built and deployed to https://antd-mobile-preview-pr-6203.surge.sh

Patch:
diff --git a/src/components/popup/index.en.md b/src/components/popup/index.en.md
index cc9ba4640..30937dc00 100644
--- a/src/components/popup/index.en.md
+++ b/src/components/popup/index.en.md
@@ -38,6 +38,7 @@ It is suitable for displaying pop-up windows, information prompts, selection inp
 | stopPropagation | Stop the propagation of some events. | `PropagationEvent[]` | `['click']` |
 | style | Container style | `React.CSSProperties` | - |
 | visible | Whether visible | `boolean` | `false` |
+| closeOnSwipe | Whether to support closing by swiping up/down | `boolean` | `false` |
 
 ### CSS Variables
 
diff --git a/src/components/popup/index.zh.md b/src/components/popup/index.zh.md
index 6c21b72e8..ecff39dd3 100644
--- a/src/components/popup/index.zh.md
+++ b/src/components/popup/index.zh.md
@@ -38,6 +38,7 @@
 | stopPropagation | 阻止某些事件的冒泡 | `PropagationEvent[]` | `['click']` |
 | style | 容器样式 | `React.CSSProperties` | - |
 | visible | 是否可见 | `boolean` | `false` |
+| closeOnSwipe | 是否支持向上/下滑动关闭 | `boolean` | `false` |
 
 ### CSS 变量
 
diff --git a/src/components/popup/popup.tsx b/src/components/popup/popup.tsx
index ab6a06794..ab3e7a1b1 100644
--- a/src/components/popup/popup.tsx
+++ b/src/components/popup/popup.tsx
@@ -20,11 +20,13 @@ const classPrefix = `adm-popup`
 export type PopupProps = PopupBaseProps &
   PropsWithChildren<{
     position?: 'bottom' | 'top' | 'left' | 'right'
+    closeOnSwipe?: boolean
   }> &
   NativeProps<'--z-index'>
 
 const defaultProps = {
   ...defaultPopupBaseProps,
+  closeOnSwipe: false,
   position: 'bottom',
 }
 
@@ -70,6 +72,7 @@ export const Popup: FC<PopupProps> = p => {
 
   const bind = useDrag(
     ({ swipe: [, swipeY] }) => {
+      if (!props.closeOnSwipe) return
       if (
         (swipeY === 1 && props.position === 'bottom') ||
         (swipeY === -1 && props.position === 'top')


Test patch:
diff --git a/src/components/popup/tests/popup.test.tsx b/src/components/popup/tests/popup.test.tsx
index a6d4d55dd..549cf9baf 100644
--- a/src/components/popup/tests/popup.test.tsx
+++ b/src/components/popup/tests/popup.test.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react'
-import { render, cleanup, fireEvent, mockDrag } from 'testing'
+import { render, mockDrag } from 'testing'
 import Popup from '..'
 
 describe('Popup', () => {
   test('top swipe should be closed', () => {
     const onClose = jest.fn()
     render(
-      <Popup visible={true} onClose={onClose} position='top'>
+      <Popup visible onClose={onClose} position='top' closeOnSwipe>
         <div style={{ height: '400px', width: '400px' }}></div>
       </Popup>
     )
@@ -26,7 +26,7 @@ describe('Popup', () => {
   test('bottom swipe should be closed', () => {
     const onClose = jest.fn()
     render(
-      <Popup visible={true} onClose={onClose} position='bottom'>
+      <Popup visible onClose={onClose} position='bottom' closeOnSwipe>
         <div style={{ height: '400px', width: '400px' }}></div>
       </Popup>
     )