From d7e89538a7a1506b341d805ef3ea6118e0b0eb3f Mon Sep 17 00:00:00 2001 From: miracles1919 <516571350@qq.com> Date: Mon, 12 Jun 2023 14:12:04 +0800 Subject: [PATCH 1/2] feat(Popup): add `enableSwipeToClose` prop --- src/components/popup/index.en.md | 1 + src/components/popup/index.zh.md | 1 + src/components/popup/popup.tsx | 3 +++ src/components/popup/tests/popup.test.tsx | 6 +++--- 4 files changed, 8 insertions(+), 3 deletions(-) diff --git a/src/components/popup/index.en.md b/src/components/popup/index.en.md index cc9ba46403..078c0c20da 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` | +| enableSwipeToClose | 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..66a8442070 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` | +| enableSwipeToClose | 是否支持向上/下滑动关闭 | `boolean` | `false` | ### CSS 变量 diff --git a/src/components/popup/popup.tsx b/src/components/popup/popup.tsx index ab6a067945..06cdda78c5 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' + enableSwipeToClose?: boolean }> & NativeProps<'--z-index'> const defaultProps = { ...defaultPopupBaseProps, + enableSwipeToClose: false, position: 'bottom', } @@ -70,6 +72,7 @@ export const Popup: FC = p => { const bind = useDrag( ({ swipe: [, swipeY] }) => { + if (!props.enableSwipeToClose) 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..f621b9b7e3 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( - +
) From 03c067723a0d77d3156f9e724612db93346f2bc7 Mon Sep 17 00:00:00 2001 From: miracles1919 <516571350@qq.com> Date: Mon, 12 Jun 2023 14:50:45 +0800 Subject: [PATCH 2/2] chore: replace `enableSwipeToClose` with `closeOnSwipe` --- src/components/popup/index.en.md | 2 +- src/components/popup/index.zh.md | 2 +- src/components/popup/popup.tsx | 6 +++--- src/components/popup/tests/popup.test.tsx | 4 ++-- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/popup/index.en.md b/src/components/popup/index.en.md index 078c0c20da..30937dc00e 100644 --- a/src/components/popup/index.en.md +++ b/src/components/popup/index.en.md @@ -38,7 +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` | -| enableSwipeToClose | Whether to support closing by swiping up/down | `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 66a8442070..ecff39dd3e 100644 --- a/src/components/popup/index.zh.md +++ b/src/components/popup/index.zh.md @@ -38,7 +38,7 @@ | stopPropagation | 阻止某些事件的冒泡 | `PropagationEvent[]` | `['click']` | | style | 容器样式 | `React.CSSProperties` | - | | visible | 是否可见 | `boolean` | `false` | -| enableSwipeToClose | 是否支持向上/下滑动关闭 | `boolean` | `false` | +| closeOnSwipe | 是否支持向上/下滑动关闭 | `boolean` | `false` | ### CSS 变量 diff --git a/src/components/popup/popup.tsx b/src/components/popup/popup.tsx index 06cdda78c5..ab3e7a1b16 100644 --- a/src/components/popup/popup.tsx +++ b/src/components/popup/popup.tsx @@ -20,13 +20,13 @@ const classPrefix = `adm-popup` export type PopupProps = PopupBaseProps & PropsWithChildren<{ position?: 'bottom' | 'top' | 'left' | 'right' - enableSwipeToClose?: boolean + closeOnSwipe?: boolean }> & NativeProps<'--z-index'> const defaultProps = { ...defaultPopupBaseProps, - enableSwipeToClose: false, + closeOnSwipe: false, position: 'bottom', } @@ -72,7 +72,7 @@ export const Popup: FC = p => { const bind = useDrag( ({ swipe: [, swipeY] }) => { - if (!props.enableSwipeToClose) return + 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 f621b9b7e3..549cf9baf0 100644 --- a/src/components/popup/tests/popup.test.tsx +++ b/src/components/popup/tests/popup.test.tsx @@ -6,7 +6,7 @@ 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( - +
)