diff --git a/src/components/popup/index.en.md b/src/components/popup/index.en.md index cc9ba46403..30937dc00e 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 6c21b72e8b..ecff39dd3e 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 ab6a067945..ab3e7a1b16 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 = p => { const bind = useDrag( ({ swipe: [, swipeY] }) => { + if (!props.closeOnSwipe) return if ( (swipeY === 1 && props.position === 'bottom') || (swipeY === -1 && props.position === 'top') diff --git a/src/components/popup/tests/popup.test.tsx b/src/components/popup/tests/popup.test.tsx index a6d4d55dd4..549cf9baf0 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( - +
) @@ -26,7 +26,7 @@ describe('Popup', () => { test('bottom swipe should be closed', () => { const onClose = jest.fn() render( - +
)