From fae792539eb4b136bea7ad82ffc832a7f0d9eaef Mon Sep 17 00:00:00 2001 From: tech-meppem Date: Mon, 24 Jan 2022 12:25:58 +0000 Subject: [PATCH 01/10] Add callback to customise touchstart ignore for swipeable drawer --- docs/pages/api-docs/swipeable-drawer.json | 4 ++++ .../swipeable-drawer/swipeable-drawer-pt.json | 1 + .../swipeable-drawer/swipeable-drawer-zh.json | 1 + .../swipeable-drawer/swipeable-drawer.json | 1 + .../src/SwipeableDrawer/SwipeableDrawer.d.ts | 11 +++++++++++ .../src/SwipeableDrawer/SwipeableDrawer.js | 14 +++++++++++++- 6 files changed, 31 insertions(+), 1 deletion(-) diff --git a/docs/pages/api-docs/swipeable-drawer.json b/docs/pages/api-docs/swipeable-drawer.json index 5e92fc7c37daa2..82721409a24865 100644 --- a/docs/pages/api-docs/swipeable-drawer.json +++ b/docs/pages/api-docs/swipeable-drawer.json @@ -14,6 +14,10 @@ "minFlingVelocity": { "type": { "name": "number" }, "default": "450" }, "SwipeAreaProps": { "type": { "name": "object" } }, "swipeAreaWidth": { "type": { "name": "number" }, "default": "20" }, + "swipeAreaIgnoreTouchStartEvent": { + "type": { "name": "func" }, + "default": "(event, swipeArea) => event.target !== swipeArea" + }, "transitionDuration": { "type": { "name": "union", diff --git a/docs/translations/api-docs/swipeable-drawer/swipeable-drawer-pt.json b/docs/translations/api-docs/swipeable-drawer/swipeable-drawer-pt.json index 8346551641de5a..c055c253fb13f3 100644 --- a/docs/translations/api-docs/swipeable-drawer/swipeable-drawer-pt.json +++ b/docs/translations/api-docs/swipeable-drawer/swipeable-drawer-pt.json @@ -12,6 +12,7 @@ "open": "Control the popup` open state.", "SwipeAreaProps": "The element is used to intercept the touch events on the edge.", "swipeAreaWidth": "The width of the left most (or right most) area in px that the drawer can be swiped open from.", + "swipeAreaIgnoreTouchStartEvent": "Callback to determine if the 'touchstart' event is ignored. This is useful if you have a swipeable edge, with a button in it, that you want to be able to both click, and drag to open the drawer.", "transitionDuration": "The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object." }, "classDescriptions": {} diff --git a/docs/translations/api-docs/swipeable-drawer/swipeable-drawer-zh.json b/docs/translations/api-docs/swipeable-drawer/swipeable-drawer-zh.json index c51b16599ad260..855d699750b725 100644 --- a/docs/translations/api-docs/swipeable-drawer/swipeable-drawer-zh.json +++ b/docs/translations/api-docs/swipeable-drawer/swipeable-drawer-zh.json @@ -12,6 +12,7 @@ "open": "Control the popup` open state.", "SwipeAreaProps": "The element is used to intercept the touch events on the edge.", "swipeAreaWidth": "The width of the left most (or right most) area in px that the drawer can be swiped open from.", + "swipeAreaIgnoreTouchStartEvent": "Callback to determine if the 'touchstart' event is ignored. This is useful if you have a swipeable edge, with a button in it, that you want to be able to both click, and drag to open the drawer.", "transitionDuration": "The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object." }, "classDescriptions": {} diff --git a/docs/translations/api-docs/swipeable-drawer/swipeable-drawer.json b/docs/translations/api-docs/swipeable-drawer/swipeable-drawer.json index 172c07fc084e8c..4c590aab385375 100644 --- a/docs/translations/api-docs/swipeable-drawer/swipeable-drawer.json +++ b/docs/translations/api-docs/swipeable-drawer/swipeable-drawer.json @@ -12,6 +12,7 @@ "open": "If true, the component is shown.", "SwipeAreaProps": "The element is used to intercept the touch events on the edge.", "swipeAreaWidth": "The width of the left most (or right most) area in px that the drawer can be swiped open from.", + "swipeAreaIgnoreTouchStartEvent": "Callback to determine if the 'touchstart' event is ignored. This is useful if you have a swipeable edge, with a button in it, that you want to be able to both click, and drag to open the drawer.", "transitionDuration": "The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object." }, "classDescriptions": {} diff --git a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.d.ts b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.d.ts index b5823a131571b9..02befc007ced56 100644 --- a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.d.ts +++ b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.d.ts @@ -59,6 +59,17 @@ export interface SwipeableDrawerProps extends Omit event.target !== swipeArea; + */ + swipeAreaIgnoreTouchStartEvent?: (e: TouchEvent, swipeArea: HTMLDivElement) => boolean; } /** diff --git a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js index eab5cdf5642c46..21849db46d33fe 100644 --- a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js +++ b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js @@ -151,6 +151,7 @@ const SwipeableDrawer = React.forwardRef(function SwipeableDrawer(inProps, ref) PaperProps = {}, SwipeAreaProps, swipeAreaWidth = 20, + swipeAreaIgnoreTouchStartEvent = (event, swipeArea) => event.target !== swipeArea, transitionDuration = transitionDurationDefault, variant = 'temporary', // Mobile first. ...other @@ -469,7 +470,7 @@ const SwipeableDrawer = React.forwardRef(function SwipeableDrawer(inProps, ref) ); if (!open) { - if (disableSwipeToOpen || nativeEvent.target !== swipeAreaRef.current) { + if (disableSwipeToOpen || swipeAreaIgnoreTouchStartEvent(nativeEvent, swipeAreaRef.current)) { return; } if (horizontalSwipe) { @@ -672,6 +673,17 @@ SwipeableDrawer.propTypes /* remove-proptypes */ = { * @default 20 */ swipeAreaWidth: PropTypes.number, + /** + * Callback to determine if the 'touchstart' event is ignored. + * This is useful if you have a swipeable edge, with a button in it, + * that you want to be able to both click, and drag to open the drawer. + * + * @param {TouchEvent} event The 'touchstart' event + * @param {HTMLDivElement} swipeArea The swipe area element + * + * @default (event,swipeArea) => event.target !== swipeArea; + */ + swipeAreaIgnoreTouchStartEvent: PropTypes.func, /** * The duration for the transition, in milliseconds. * You may specify a single timeout for all transitions, or individually with an object. From 26cee90baacb978ebe7e3f709f2050c6f14b887d Mon Sep 17 00:00:00 2001 From: tech-meppem Date: Mon, 24 Jan 2022 14:11:36 +0000 Subject: [PATCH 02/10] Fixes for tests --- docs/pages/api-docs/swipeable-drawer.json | 6 ++-- .../swipeable-drawer/swipeable-drawer-pt.json | 2 +- .../swipeable-drawer/swipeable-drawer-zh.json | 2 +- .../swipeable-drawer/swipeable-drawer.json | 2 +- .../src/SwipeableDrawer/SwipeableDrawer.d.ts | 24 ++++++++------- .../src/SwipeableDrawer/SwipeableDrawer.js | 30 +++++++++++-------- 6 files changed, 37 insertions(+), 29 deletions(-) diff --git a/docs/pages/api-docs/swipeable-drawer.json b/docs/pages/api-docs/swipeable-drawer.json index 82721409a24865..b4c4a111a68dcc 100644 --- a/docs/pages/api-docs/swipeable-drawer.json +++ b/docs/pages/api-docs/swipeable-drawer.json @@ -12,12 +12,12 @@ }, "hysteresis": { "type": { "name": "number" }, "default": "0.52" }, "minFlingVelocity": { "type": { "name": "number" }, "default": "450" }, - "SwipeAreaProps": { "type": { "name": "object" } }, - "swipeAreaWidth": { "type": { "name": "number" }, "default": "20" }, "swipeAreaIgnoreTouchStartEvent": { "type": { "name": "func" }, - "default": "(event, swipeArea) => event.target !== swipeArea" + "default": "function defaultSwipeAreaIgnoreTouchStartEvent(event, swipeArea) {\n return event.target !== swipeArea;\n}" }, + "SwipeAreaProps": { "type": { "name": "object" } }, + "swipeAreaWidth": { "type": { "name": "number" }, "default": "20" }, "transitionDuration": { "type": { "name": "union", diff --git a/docs/translations/api-docs/swipeable-drawer/swipeable-drawer-pt.json b/docs/translations/api-docs/swipeable-drawer/swipeable-drawer-pt.json index c055c253fb13f3..f995db2406b612 100644 --- a/docs/translations/api-docs/swipeable-drawer/swipeable-drawer-pt.json +++ b/docs/translations/api-docs/swipeable-drawer/swipeable-drawer-pt.json @@ -10,9 +10,9 @@ "onClose": "Callback fired when the component requests to be closed.

Signature:
function(event: object) => void
event: The event source of the callback.", "onOpen": "Callback fired when the component requests to be opened.

Signature:
function(event: object) => void
event: The event source of the callback.", "open": "Control the popup` open state.", + "swipeAreaIgnoreTouchStartEvent": "Callback to determine if the 'touchstart' event is ignored. This is useful if you have a swipeable edge, with a button in it, that you want to be able to both click, and drag to open the drawer.", "SwipeAreaProps": "The element is used to intercept the touch events on the edge.", "swipeAreaWidth": "The width of the left most (or right most) area in px that the drawer can be swiped open from.", - "swipeAreaIgnoreTouchStartEvent": "Callback to determine if the 'touchstart' event is ignored. This is useful if you have a swipeable edge, with a button in it, that you want to be able to both click, and drag to open the drawer.", "transitionDuration": "The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object." }, "classDescriptions": {} diff --git a/docs/translations/api-docs/swipeable-drawer/swipeable-drawer-zh.json b/docs/translations/api-docs/swipeable-drawer/swipeable-drawer-zh.json index 855d699750b725..c6dd2ffadb1922 100644 --- a/docs/translations/api-docs/swipeable-drawer/swipeable-drawer-zh.json +++ b/docs/translations/api-docs/swipeable-drawer/swipeable-drawer-zh.json @@ -10,9 +10,9 @@ "onClose": "Callback fired when the component requests to be closed.

Signature:
function(event: object) => void
event: The event source of the callback.", "onOpen": "Callback fired when the component requests to be opened.

Signature:
function(event: object) => void
event: The event source of the callback.", "open": "Control the popup` open state.", + "swipeAreaIgnoreTouchStartEvent": "Callback to determine if the 'touchstart' event is ignored. This is useful if you have a swipeable edge, with a button in it, that you want to be able to both click, and drag to open the drawer.", "SwipeAreaProps": "The element is used to intercept the touch events on the edge.", "swipeAreaWidth": "The width of the left most (or right most) area in px that the drawer can be swiped open from.", - "swipeAreaIgnoreTouchStartEvent": "Callback to determine if the 'touchstart' event is ignored. This is useful if you have a swipeable edge, with a button in it, that you want to be able to both click, and drag to open the drawer.", "transitionDuration": "The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object." }, "classDescriptions": {} diff --git a/docs/translations/api-docs/swipeable-drawer/swipeable-drawer.json b/docs/translations/api-docs/swipeable-drawer/swipeable-drawer.json index 4c590aab385375..6c5e0c6369ec32 100644 --- a/docs/translations/api-docs/swipeable-drawer/swipeable-drawer.json +++ b/docs/translations/api-docs/swipeable-drawer/swipeable-drawer.json @@ -10,9 +10,9 @@ "onClose": "Callback fired when the component requests to be closed.

Signature:
function(event: object) => void
event: The event source of the callback.", "onOpen": "Callback fired when the component requests to be opened.

Signature:
function(event: object) => void
event: The event source of the callback.", "open": "If true, the component is shown.", + "swipeAreaIgnoreTouchStartEvent": "Callback to determine if the 'touchstart' event is ignored. This is useful if you have a swipeable edge, with a button in it, that you want to be able to both click, and drag to open the drawer.

Signature:
function(event: TouchEvent, swipeArea: HTMLDivElement) => void
event: The 'touchstart' event
swipeArea: The swipe area element", "SwipeAreaProps": "The element is used to intercept the touch events on the edge.", "swipeAreaWidth": "The width of the left most (or right most) area in px that the drawer can be swiped open from.", - "swipeAreaIgnoreTouchStartEvent": "Callback to determine if the 'touchstart' event is ignored. This is useful if you have a swipeable edge, with a button in it, that you want to be able to both click, and drag to open the drawer.", "transitionDuration": "The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object." }, "classDescriptions": {} diff --git a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.d.ts b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.d.ts index 02befc007ced56..b21cd21ee7b45e 100644 --- a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.d.ts +++ b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.d.ts @@ -49,6 +49,19 @@ export interface SwipeableDrawerProps extends Omit boolean; /** * The element is used to intercept the touch events on the edge. */ @@ -59,17 +72,6 @@ export interface SwipeableDrawerProps extends Omit event.target !== swipeArea; - */ - swipeAreaIgnoreTouchStartEvent?: (e: TouchEvent, swipeArea: HTMLDivElement) => boolean; } /** diff --git a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js index 21849db46d33fe..d621edf3db7e83 100644 --- a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js +++ b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js @@ -54,6 +54,10 @@ function getTranslate(currentTranslate, startLocation, open, maxTranslate) { ); } +function defaultSwipeAreaIgnoreTouchStartEvent(event, swipeArea) { + return event.target !== swipeArea; +} + /** * @param {Element | null} element * @param {Element} rootNode @@ -149,9 +153,9 @@ const SwipeableDrawer = React.forwardRef(function SwipeableDrawer(inProps, ref) onOpen, open, PaperProps = {}, + swipeAreaIgnoreTouchStartEvent = defaultSwipeAreaIgnoreTouchStartEvent, SwipeAreaProps, swipeAreaWidth = 20, - swipeAreaIgnoreTouchStartEvent = (event, swipeArea) => event.target !== swipeArea, transitionDuration = transitionDurationDefault, variant = 'temporary', // Mobile first. ...other @@ -663,6 +667,19 @@ SwipeableDrawer.propTypes /* remove-proptypes */ = { component: elementTypeAcceptingRef, style: PropTypes.object, }), + /** + * Callback to determine if the 'touchstart' event is ignored. + * This is useful if you have a swipeable edge, with a button in it, + * that you want to be able to both click, and drag to open the drawer. + * + * @param {TouchEvent} event The 'touchstart' event + * @param {HTMLDivElement} swipeArea The swipe area element + * + * @default function defaultSwipeAreaIgnoreTouchStartEvent(event, swipeArea) { + * return event.target !== swipeArea; + * } + */ + swipeAreaIgnoreTouchStartEvent: PropTypes.func, /** * The element is used to intercept the touch events on the edge. */ @@ -673,17 +690,6 @@ SwipeableDrawer.propTypes /* remove-proptypes */ = { * @default 20 */ swipeAreaWidth: PropTypes.number, - /** - * Callback to determine if the 'touchstart' event is ignored. - * This is useful if you have a swipeable edge, with a button in it, - * that you want to be able to both click, and drag to open the drawer. - * - * @param {TouchEvent} event The 'touchstart' event - * @param {HTMLDivElement} swipeArea The swipe area element - * - * @default (event,swipeArea) => event.target !== swipeArea; - */ - swipeAreaIgnoreTouchStartEvent: PropTypes.func, /** * The duration for the transition, in milliseconds. * You may specify a single timeout for all transitions, or individually with an object. From cdc91e7ed29c2431d1da27b5f64087f43e08b371 Mon Sep 17 00:00:00 2001 From: tech-meppem Date: Tue, 8 Feb 2022 15:40:27 +0000 Subject: [PATCH 03/10] Update for migration PR --- docs/pages/material/api/swipeable-drawer.json | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docs/pages/material/api/swipeable-drawer.json b/docs/pages/material/api/swipeable-drawer.json index 9285409042055d..63ed4e412c3bfc 100644 --- a/docs/pages/material/api/swipeable-drawer.json +++ b/docs/pages/material/api/swipeable-drawer.json @@ -12,6 +12,10 @@ }, "hysteresis": { "type": { "name": "number" }, "default": "0.52" }, "minFlingVelocity": { "type": { "name": "number" }, "default": "450" }, + "swipeAreaIgnoreTouchStartEvent": { + "type": { "name": "func" }, + "default": "function defaultSwipeAreaIgnoreTouchStartEvent(event, swipeArea) {\n return event.target !== swipeArea;\n}" + }, "SwipeAreaProps": { "type": { "name": "object" } }, "swipeAreaWidth": { "type": { "name": "number" }, "default": "20" }, "transitionDuration": { From 36e3e101278bfb1bb4ff35f05e78be618d26a692 Mon Sep 17 00:00:00 2001 From: tech-meppem Date: Fri, 25 Feb 2022 16:35:02 +0000 Subject: [PATCH 04/10] Changed to be 'AllowSwipeInChildren' --- docs/pages/api-docs/swipeable-drawer.json | 8 ++-- docs/pages/material/api/swipeable-drawer.json | 8 ++-- .../swipeable-drawer/swipeable-drawer-pt.json | 2 +- .../swipeable-drawer/swipeable-drawer-zh.json | 2 +- .../swipeable-drawer/swipeable-drawer.json | 2 +- .../src/SwipeableDrawer/SwipeableDrawer.d.ts | 27 ++++++----- .../src/SwipeableDrawer/SwipeableDrawer.js | 48 +++++++++++-------- 7 files changed, 53 insertions(+), 44 deletions(-) diff --git a/docs/pages/api-docs/swipeable-drawer.json b/docs/pages/api-docs/swipeable-drawer.json index 851968cf3699fd..3e8ee78f1c354e 100644 --- a/docs/pages/api-docs/swipeable-drawer.json +++ b/docs/pages/api-docs/swipeable-drawer.json @@ -3,6 +3,10 @@ "onClose": { "type": { "name": "func" }, "required": true }, "onOpen": { "type": { "name": "func" }, "required": true }, "open": { "type": { "name": "bool" }, "required": true }, + "AllowSwipeInChildren": { + "type": { "name": "union", "description": "bool
| func" }, + "default": "false" + }, "children": { "type": { "name": "node" } }, "disableBackdropTransition": { "type": { "name": "bool" } }, "disableDiscovery": { "type": { "name": "bool" } }, @@ -12,10 +16,6 @@ }, "hysteresis": { "type": { "name": "number" }, "default": "0.52" }, "minFlingVelocity": { "type": { "name": "number" }, "default": "450" }, - "swipeAreaIgnoreTouchStartEvent": { - "type": { "name": "func" }, - "default": "function defaultSwipeAreaIgnoreTouchStartEvent(event, swipeArea) {\n return event.target !== swipeArea;\n}" - }, "SwipeAreaProps": { "type": { "name": "object" } }, "swipeAreaWidth": { "type": { "name": "number" }, "default": "20" }, "transitionDuration": { diff --git a/docs/pages/material/api/swipeable-drawer.json b/docs/pages/material/api/swipeable-drawer.json index 0fd4d9c5d0c94f..9cceae7de60cd7 100644 --- a/docs/pages/material/api/swipeable-drawer.json +++ b/docs/pages/material/api/swipeable-drawer.json @@ -3,6 +3,10 @@ "onClose": { "type": { "name": "func" }, "required": true }, "onOpen": { "type": { "name": "func" }, "required": true }, "open": { "type": { "name": "bool" }, "required": true }, + "AllowSwipeInChildren": { + "type": { "name": "union", "description": "bool
| func" }, + "default": "false" + }, "children": { "type": { "name": "node" } }, "disableBackdropTransition": { "type": { "name": "bool" } }, "disableDiscovery": { "type": { "name": "bool" } }, @@ -12,10 +16,6 @@ }, "hysteresis": { "type": { "name": "number" }, "default": "0.52" }, "minFlingVelocity": { "type": { "name": "number" }, "default": "450" }, - "swipeAreaIgnoreTouchStartEvent": { - "type": { "name": "func" }, - "default": "function defaultSwipeAreaIgnoreTouchStartEvent(event, swipeArea) {\n return event.target !== swipeArea;\n}" - }, "SwipeAreaProps": { "type": { "name": "object" } }, "swipeAreaWidth": { "type": { "name": "number" }, "default": "20" }, "transitionDuration": { diff --git a/docs/translations/api-docs/swipeable-drawer/swipeable-drawer-pt.json b/docs/translations/api-docs/swipeable-drawer/swipeable-drawer-pt.json index f995db2406b612..3a37a38421e008 100644 --- a/docs/translations/api-docs/swipeable-drawer/swipeable-drawer-pt.json +++ b/docs/translations/api-docs/swipeable-drawer/swipeable-drawer-pt.json @@ -1,6 +1,7 @@ { "componentDescription": "", "propDescriptions": { + "AllowSwipeInChildren": "Callback to determine what children of the drawer the user can use to drag open the drawer. Can be a custom function to control the behavior. Set or return true / false to allow / disallow the swipe event.", "children": "O conteúdo do componente.", "disableBackdropTransition": "Disable the backdrop transition. This can improve the FPS on low-end devices.", "disableDiscovery": "If true, touching the screen near the edge of the drawer will not slide in the drawer a bit to promote accidental discovery of the swipe gesture.", @@ -10,7 +11,6 @@ "onClose": "Callback fired when the component requests to be closed.

Signature:
function(event: object) => void
event: The event source of the callback.", "onOpen": "Callback fired when the component requests to be opened.

Signature:
function(event: object) => void
event: The event source of the callback.", "open": "Control the popup` open state.", - "swipeAreaIgnoreTouchStartEvent": "Callback to determine if the 'touchstart' event is ignored. This is useful if you have a swipeable edge, with a button in it, that you want to be able to both click, and drag to open the drawer.", "SwipeAreaProps": "The element is used to intercept the touch events on the edge.", "swipeAreaWidth": "The width of the left most (or right most) area in px that the drawer can be swiped open from.", "transitionDuration": "The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object." diff --git a/docs/translations/api-docs/swipeable-drawer/swipeable-drawer-zh.json b/docs/translations/api-docs/swipeable-drawer/swipeable-drawer-zh.json index c6dd2ffadb1922..9c10e1020f1cd6 100644 --- a/docs/translations/api-docs/swipeable-drawer/swipeable-drawer-zh.json +++ b/docs/translations/api-docs/swipeable-drawer/swipeable-drawer-zh.json @@ -1,6 +1,7 @@ { "componentDescription": "", "propDescriptions": { + "AllowSwipeInChildren": "Callback to determine what children of the drawer the user can use to drag open the drawer. Can be a custom function to control the behavior. Set or return true / false to allow / disallow the swipe event.", "children": "The content of the component.", "disableBackdropTransition": "Disable the backdrop transition. This can improve the FPS on low-end devices.", "disableDiscovery": "If true, touching the screen near the edge of the drawer will not slide in the drawer a bit to promote accidental discovery of the swipe gesture.", @@ -10,7 +11,6 @@ "onClose": "Callback fired when the component requests to be closed.

Signature:
function(event: object) => void
event: The event source of the callback.", "onOpen": "Callback fired when the component requests to be opened.

Signature:
function(event: object) => void
event: The event source of the callback.", "open": "Control the popup` open state.", - "swipeAreaIgnoreTouchStartEvent": "Callback to determine if the 'touchstart' event is ignored. This is useful if you have a swipeable edge, with a button in it, that you want to be able to both click, and drag to open the drawer.", "SwipeAreaProps": "The element is used to intercept the touch events on the edge.", "swipeAreaWidth": "The width of the left most (or right most) area in px that the drawer can be swiped open from.", "transitionDuration": "The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object." diff --git a/docs/translations/api-docs/swipeable-drawer/swipeable-drawer.json b/docs/translations/api-docs/swipeable-drawer/swipeable-drawer.json index 6c5e0c6369ec32..631a2412c5334e 100644 --- a/docs/translations/api-docs/swipeable-drawer/swipeable-drawer.json +++ b/docs/translations/api-docs/swipeable-drawer/swipeable-drawer.json @@ -1,6 +1,7 @@ { "componentDescription": "", "propDescriptions": { + "AllowSwipeInChildren": "Callback to determine what children of the drawer the user can use to drag open the drawer. Can be a custom function to control the behavior. Set or return true / false to allow / disallow the swipe event.", "children": "The content of the component.", "disableBackdropTransition": "Disable the backdrop transition. This can improve the FPS on low-end devices.", "disableDiscovery": "If true, touching the screen near the edge of the drawer will not slide in the drawer a bit to promote accidental discovery of the swipe gesture.", @@ -10,7 +11,6 @@ "onClose": "Callback fired when the component requests to be closed.

Signature:
function(event: object) => void
event: The event source of the callback.", "onOpen": "Callback fired when the component requests to be opened.

Signature:
function(event: object) => void
event: The event source of the callback.", "open": "If true, the component is shown.", - "swipeAreaIgnoreTouchStartEvent": "Callback to determine if the 'touchstart' event is ignored. This is useful if you have a swipeable edge, with a button in it, that you want to be able to both click, and drag to open the drawer.

Signature:
function(event: TouchEvent, swipeArea: HTMLDivElement) => void
event: The 'touchstart' event
swipeArea: The swipe area element", "SwipeAreaProps": "The element is used to intercept the touch events on the edge.", "swipeAreaWidth": "The width of the left most (or right most) area in px that the drawer can be swiped open from.", "transitionDuration": "The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object." diff --git a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.d.ts b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.d.ts index b21cd21ee7b45e..fbf91761436b93 100644 --- a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.d.ts +++ b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.d.ts @@ -2,6 +2,20 @@ import * as React from 'react'; import { DrawerProps } from '../Drawer'; export interface SwipeableDrawerProps extends Omit { + /** + * Callback to determine what children of the drawer the user can use to drag open the drawer. + * Can be a custom function to control the behavior. + * Set or return true / false to allow / disallow the swipe event. + * + * @param {TouchEvent} event The 'touchstart' event + * @param {HTMLDivElement} swipeArea The swipe area element + * @param {HTMLDivElement} paper The drawer's paper element + * + * @default false + */ + AllowSwipeInChildren?: + | boolean + | ((e: TouchEvent, swipeArea: HTMLDivElement, paper: HTMLDivElement) => boolean); /** * Disable the backdrop transition. * This can improve the FPS on low-end devices. @@ -49,19 +63,6 @@ export interface SwipeableDrawerProps extends Omit boolean; /** * The element is used to intercept the touch events on the edge. */ diff --git a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js index efb52ccbe70726..1128b3168dd957 100644 --- a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js +++ b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js @@ -53,10 +53,6 @@ function getTranslate(currentTranslate, startLocation, open, maxTranslate) { ); } -function defaultSwipeAreaIgnoreTouchStartEvent(event, swipeArea) { - return event.target !== swipeArea; -} - /** * @param {Element | null} element * @param {Element} rootNode @@ -149,13 +145,13 @@ const SwipeableDrawer = React.forwardRef(function SwipeableDrawer(inProps, ref) disableSwipeToOpen = iOS, hideBackdrop, hysteresis = 0.52, + AllowSwipeInChildren = false, minFlingVelocity = 450, ModalProps: { BackdropProps, ...ModalPropsProp } = {}, onClose, onOpen, open, PaperProps = {}, - swipeAreaIgnoreTouchStartEvent = defaultSwipeAreaIgnoreTouchStartEvent, SwipeAreaProps, swipeAreaWidth = 20, transitionDuration = transitionDurationDefault, @@ -476,7 +472,20 @@ const SwipeableDrawer = React.forwardRef(function SwipeableDrawer(inProps, ref) ); if (!open) { - if (disableSwipeToOpen || swipeAreaIgnoreTouchStartEvent(nativeEvent, swipeAreaRef.current)) { + // logic for if swipe should be ignored: + // if disableSwipeToOpen + // if target != swipeArea, and target is not a child of paper ref + // if is a child of paper ref, but `AllowSwipeInChildren` disallows it + if ( + disableSwipeToOpen || + !( + nativeEvent.target === swipeAreaRef.current || + (paperRef.current?.contains(nativeEvent.target) && + (typeof AllowSwipeInChildren === 'function' + ? AllowSwipeInChildren(nativeEvent, swipeAreaRef.current, paperRef.current) + : AllowSwipeInChildren)) + ) + ) { return; } if (horizontalSwipe) { @@ -565,7 +574,7 @@ const SwipeableDrawer = React.forwardRef(function SwipeableDrawer(inProps, ref) PaperProps={{ ...PaperProps, style: { - pointerEvents: variant === 'temporary' && !open ? 'none' : '', + pointerEvents: variant === 'temporary' && !open && !AllowSwipeInChildren ? 'none' : '', ...PaperProps.style, }, ref: paperRef, @@ -595,6 +604,18 @@ SwipeableDrawer.propTypes /* remove-proptypes */ = { // | These PropTypes are generated from the TypeScript type definitions | // | To update them edit the d.ts file and run "yarn proptypes" | // ---------------------------------------------------------------------- + /** + * Callback to determine what children of the drawer the user can use to drag open the drawer. + * Can be a custom function to control the behavior. + * Set or return true / false to allow / disallow the swipe event. + * + * @param {TouchEvent} event The 'touchstart' event + * @param {HTMLDivElement} swipeArea The swipe area element + * @param {HTMLDivElement} paper The drawer's paper element + * + * @default false + */ + AllowSwipeInChildren: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]), /** * @ignore */ @@ -669,19 +690,6 @@ SwipeableDrawer.propTypes /* remove-proptypes */ = { component: elementTypeAcceptingRef, style: PropTypes.object, }), - /** - * Callback to determine if the 'touchstart' event is ignored. - * This is useful if you have a swipeable edge, with a button in it, - * that you want to be able to both click, and drag to open the drawer. - * - * @param {TouchEvent} event The 'touchstart' event - * @param {HTMLDivElement} swipeArea The swipe area element - * - * @default function defaultSwipeAreaIgnoreTouchStartEvent(event, swipeArea) { - * return event.target !== swipeArea; - * } - */ - swipeAreaIgnoreTouchStartEvent: PropTypes.func, /** * The element is used to intercept the touch events on the edge. */ From 74d2c8128f2353c4a8625422da26beed73491050 Mon Sep 17 00:00:00 2001 From: tech-meppem Date: Tue, 22 Mar 2022 10:16:11 +0000 Subject: [PATCH 05/10] Fix iOS click bug --- .../src/SwipeableDrawer/SwipeableDrawer.js | 52 ++++++++++++------- 1 file changed, 34 insertions(+), 18 deletions(-) diff --git a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js index 1128b3168dd957..ff180be0281f4d 100644 --- a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js +++ b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js @@ -296,6 +296,37 @@ const SwipeableDrawer = React.forwardRef(function SwipeableDrawer(inProps, ref) } }); + const startMaybeSwiping = (force = false) => { + if (!maybeSwiping) { + // on Safari Mobile, if you want to be able to have the 'click' event fired on child elements, nothing in the DOM can be changed. + // this is because Safari Mobile will not fire any mouse events (still fires touch though) if the DOM changes during mousemove. + // so do this change on first touchmove instead of touchstart + if (force || !(disableDiscovery && AllowSwipeInChildren)) { + setMaybeSwiping(true); + } + + const horizontalSwipe = isHorizontal(anchor); + + if (!open && paperRef.current) { + // The ref may be null when a parent component updates while swiping. + setPosition( + getMaxTranslate(horizontalSwipe, paperRef.current) + + (disableDiscovery ? 15 : -DRAG_STARTED_SIGNAL), + { + changeTransition: false, + }, + ); + } + + swipeInstance.current.velocity = 0; + swipeInstance.current.lastTime = null; + swipeInstance.current.lastTranslate = null; + swipeInstance.current.paperHit = false; + + touchDetected.current = true; + } + }; + const handleBodyTouchMove = useEventCallback((nativeEvent) => { // the ref may be null when a parent component updates while swiping if (!paperRef.current || !touchDetected.current) { @@ -307,6 +338,8 @@ const SwipeableDrawer = React.forwardRef(function SwipeableDrawer(inProps, ref) return; } + startMaybeSwiping(); + const anchorRtl = getAnchor(theme, anchor); const horizontalSwipe = isHorizontal(anchor); @@ -502,24 +535,7 @@ const SwipeableDrawer = React.forwardRef(function SwipeableDrawer(inProps, ref) swipeInstance.current.startX = currentX; swipeInstance.current.startY = currentY; - setMaybeSwiping(true); - if (!open && paperRef.current) { - // The ref may be null when a parent component updates while swiping. - setPosition( - getMaxTranslate(horizontalSwipe, paperRef.current) + - (disableDiscovery ? 15 : -DRAG_STARTED_SIGNAL), - { - changeTransition: false, - }, - ); - } - - swipeInstance.current.velocity = 0; - swipeInstance.current.lastTime = null; - swipeInstance.current.lastTranslate = null; - swipeInstance.current.paperHit = false; - - touchDetected.current = true; + startMaybeSwiping(); }); React.useEffect(() => { From 4411ecf14850dd5f6b2a1c4866d7d6f9cdde099b Mon Sep 17 00:00:00 2001 From: tech-meppem Date: Fri, 27 May 2022 12:28:07 +0100 Subject: [PATCH 06/10] Change 'AllowSwipeInChildren' to 'allowSwipeInChildren' --- docs/pages/material-ui/api/swipeable-drawer.json | 2 +- .../swipeable-drawer/swipeable-drawer-pt.json | 2 +- .../swipeable-drawer/swipeable-drawer-zh.json | 2 +- .../swipeable-drawer/swipeable-drawer.json | 2 +- .../src/SwipeableDrawer/SwipeableDrawer.d.ts | 2 +- .../src/SwipeableDrawer/SwipeableDrawer.js | 16 ++++++++-------- 6 files changed, 13 insertions(+), 13 deletions(-) diff --git a/docs/pages/material-ui/api/swipeable-drawer.json b/docs/pages/material-ui/api/swipeable-drawer.json index c3b432fef065a4..4c7f6a1a400a4c 100644 --- a/docs/pages/material-ui/api/swipeable-drawer.json +++ b/docs/pages/material-ui/api/swipeable-drawer.json @@ -3,7 +3,7 @@ "onClose": { "type": { "name": "func" }, "required": true }, "onOpen": { "type": { "name": "func" }, "required": true }, "open": { "type": { "name": "bool" }, "required": true }, - "AllowSwipeInChildren": { + "allowSwipeInChildren": { "type": { "name": "union", "description": "bool
| func" }, "default": "false" }, diff --git a/docs/translations/api-docs/swipeable-drawer/swipeable-drawer-pt.json b/docs/translations/api-docs/swipeable-drawer/swipeable-drawer-pt.json index 3a37a38421e008..a535ca929c0289 100644 --- a/docs/translations/api-docs/swipeable-drawer/swipeable-drawer-pt.json +++ b/docs/translations/api-docs/swipeable-drawer/swipeable-drawer-pt.json @@ -1,7 +1,7 @@ { "componentDescription": "", "propDescriptions": { - "AllowSwipeInChildren": "Callback to determine what children of the drawer the user can use to drag open the drawer. Can be a custom function to control the behavior. Set or return true / false to allow / disallow the swipe event.", + "allowSwipeInChildren": "Callback to determine what children of the drawer the user can use to drag open the drawer. Can be a custom function to control the behavior. Set or return true / false to allow / disallow the swipe event.", "children": "O conteúdo do componente.", "disableBackdropTransition": "Disable the backdrop transition. This can improve the FPS on low-end devices.", "disableDiscovery": "If true, touching the screen near the edge of the drawer will not slide in the drawer a bit to promote accidental discovery of the swipe gesture.", diff --git a/docs/translations/api-docs/swipeable-drawer/swipeable-drawer-zh.json b/docs/translations/api-docs/swipeable-drawer/swipeable-drawer-zh.json index 9c10e1020f1cd6..75fddd295b360e 100644 --- a/docs/translations/api-docs/swipeable-drawer/swipeable-drawer-zh.json +++ b/docs/translations/api-docs/swipeable-drawer/swipeable-drawer-zh.json @@ -1,7 +1,7 @@ { "componentDescription": "", "propDescriptions": { - "AllowSwipeInChildren": "Callback to determine what children of the drawer the user can use to drag open the drawer. Can be a custom function to control the behavior. Set or return true / false to allow / disallow the swipe event.", + "allowSwipeInChildren": "Callback to determine what children of the drawer the user can use to drag open the drawer. Can be a custom function to control the behavior. Set or return true / false to allow / disallow the swipe event.", "children": "The content of the component.", "disableBackdropTransition": "Disable the backdrop transition. This can improve the FPS on low-end devices.", "disableDiscovery": "If true, touching the screen near the edge of the drawer will not slide in the drawer a bit to promote accidental discovery of the swipe gesture.", diff --git a/docs/translations/api-docs/swipeable-drawer/swipeable-drawer.json b/docs/translations/api-docs/swipeable-drawer/swipeable-drawer.json index 631a2412c5334e..0423f47321ced4 100644 --- a/docs/translations/api-docs/swipeable-drawer/swipeable-drawer.json +++ b/docs/translations/api-docs/swipeable-drawer/swipeable-drawer.json @@ -1,7 +1,7 @@ { "componentDescription": "", "propDescriptions": { - "AllowSwipeInChildren": "Callback to determine what children of the drawer the user can use to drag open the drawer. Can be a custom function to control the behavior. Set or return true / false to allow / disallow the swipe event.", + "allowSwipeInChildren": "Callback to determine what children of the drawer the user can use to drag open the drawer. Can be a custom function to control the behavior. Set or return true / false to allow / disallow the swipe event.", "children": "The content of the component.", "disableBackdropTransition": "Disable the backdrop transition. This can improve the FPS on low-end devices.", "disableDiscovery": "If true, touching the screen near the edge of the drawer will not slide in the drawer a bit to promote accidental discovery of the swipe gesture.", diff --git a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.d.ts b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.d.ts index bfeae66437b1c9..5268f8fe628416 100644 --- a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.d.ts +++ b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.d.ts @@ -13,7 +13,7 @@ export interface SwipeableDrawerProps extends Omit boolean); /** diff --git a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js index ff180be0281f4d..8eaf46487f55f9 100644 --- a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js +++ b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js @@ -145,7 +145,7 @@ const SwipeableDrawer = React.forwardRef(function SwipeableDrawer(inProps, ref) disableSwipeToOpen = iOS, hideBackdrop, hysteresis = 0.52, - AllowSwipeInChildren = false, + allowSwipeInChildren = false, minFlingVelocity = 450, ModalProps: { BackdropProps, ...ModalPropsProp } = {}, onClose, @@ -301,7 +301,7 @@ const SwipeableDrawer = React.forwardRef(function SwipeableDrawer(inProps, ref) // on Safari Mobile, if you want to be able to have the 'click' event fired on child elements, nothing in the DOM can be changed. // this is because Safari Mobile will not fire any mouse events (still fires touch though) if the DOM changes during mousemove. // so do this change on first touchmove instead of touchstart - if (force || !(disableDiscovery && AllowSwipeInChildren)) { + if (force || !(disableDiscovery && allowSwipeInChildren)) { setMaybeSwiping(true); } @@ -508,15 +508,15 @@ const SwipeableDrawer = React.forwardRef(function SwipeableDrawer(inProps, ref) // logic for if swipe should be ignored: // if disableSwipeToOpen // if target != swipeArea, and target is not a child of paper ref - // if is a child of paper ref, but `AllowSwipeInChildren` disallows it + // if is a child of paper ref, but `allowSwipeInChildren` disallows it if ( disableSwipeToOpen || !( nativeEvent.target === swipeAreaRef.current || (paperRef.current?.contains(nativeEvent.target) && - (typeof AllowSwipeInChildren === 'function' - ? AllowSwipeInChildren(nativeEvent, swipeAreaRef.current, paperRef.current) - : AllowSwipeInChildren)) + (typeof allowSwipeInChildren === 'function' + ? allowSwipeInChildren(nativeEvent, swipeAreaRef.current, paperRef.current) + : allowSwipeInChildren)) ) ) { return; @@ -590,7 +590,7 @@ const SwipeableDrawer = React.forwardRef(function SwipeableDrawer(inProps, ref) PaperProps={{ ...PaperProps, style: { - pointerEvents: variant === 'temporary' && !open && !AllowSwipeInChildren ? 'none' : '', + pointerEvents: variant === 'temporary' && !open && !allowSwipeInChildren ? 'none' : '', ...PaperProps.style, }, ref: paperRef, @@ -631,7 +631,7 @@ SwipeableDrawer.propTypes /* remove-proptypes */ = { * * @default false */ - AllowSwipeInChildren: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]), + allowSwipeInChildren: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]), /** * @ignore */ From 987a7a0ba37ec4596b4b7785e130d75d72104929 Mon Sep 17 00:00:00 2001 From: tech-meppem Date: Tue, 30 Aug 2022 12:40:17 +0100 Subject: [PATCH 07/10] Added tests for allowSwipeInChildren prop --- .../SwipeableDrawer/SwipeableDrawer.test.js | 135 ++++++++++++++++++ 1 file changed, 135 insertions(+) diff --git a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.test.js b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.test.js index 82738e326e6ed3..8caf7b69df0858 100644 --- a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.test.js +++ b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.test.js @@ -426,6 +426,141 @@ describe('', () => { setProps({ variant: 'temporary' }); expect(document.querySelector('[class*=PrivateSwipeArea-root]')).not.to.equal(null); }); + + + const openTouchesForSwipingChildren = [ + { pageX: 0, clientY: windowHeight - 20 }, + { pageX: 0, clientY: windowHeight - 60 }, + { pageX: 0, clientY: windowHeight - 180 }, + ]; + const handleHeight = 60; + describe('prop: allowSwipeInChildren', () => { + it('should allow swiping on children to open', () => { + const handleOpen = spy(); + render( + +
+
+ SwipeableDrawer +
+
+ , + ); + + const handle = screen.getAllByTestId('handle').slice(-1)[0]; + + fireEvent.touchStart(handle, { + touches: [new Touch({ identifier: 0, target: handle, ...openTouchesForSwipingChildren[0] })], + }); + fireEvent.touchMove(handle, { + touches: [new Touch({ identifier: 0, target: handle, ...openTouchesForSwipingChildren[1] })], + }); + fireEvent.touchMove(handle, { + touches: [new Touch({ identifier: 0, target: handle, ...openTouchesForSwipingChildren[2] })], + }); + fireEvent.touchEnd(handle, { + changedTouches: [ + new Touch({ identifier: 0, target: handle, ...openTouchesForSwipingChildren[2] }), + ], + }); + expect(handleOpen.callCount).to.equal(1); + }); + + it('should not allow swiping on children to open that are excluded via a function', () => { + const handleOpen = spy(); + render( + { + const elem = e.target; + // ignore touch events from .ignore &^ from swipe area + return !elem.classList.contains('ignore') && !elem.classList.contains('PrivateSwipeArea-root') + }} + onOpen={handleOpen} + open={false} + swipeAreaWidth={20} + SwipeAreaProps={{ + style: { + // ensure clicks will not be grabbed by swipe area to ensure testing just this functionality + pointerEvents: "none", + } + }} + PaperProps={{ component: FakePaper }} + ModalProps={{ + keepMounted: true, + sx: { + '& > *': { + pointerEvents: 'auto' + } + } + }} + > +
+
+ SwipeableDrawer +
+
+ , + ); + + // should ignore the drawer touch events + const drawer = screen.getAllByTestId('drawer').slice(-1)[0]; + + fireEvent.touchStart(drawer, { + touches: [new Touch({ identifier: 0, target: drawer, ...openTouchesForSwipingChildren[0] })], + }); + fireEvent.touchMove(drawer, { + touches: [new Touch({ identifier: 0, target: drawer, ...openTouchesForSwipingChildren[1] })], + }); + fireEvent.touchMove(drawer, { + touches: [new Touch({ identifier: 0, target: drawer, ...openTouchesForSwipingChildren[2] })], + }); + fireEvent.touchEnd(drawer, { + changedTouches: [ + new Touch({ identifier: 0, target: drawer, ...openTouchesForSwipingChildren[2] }), + ], + }); + expect(handleOpen.callCount).to.equal(0); + + // should allow opening the drawer via handle + const handle = screen.getAllByTestId('handle').slice(-1)[0]; + + fireEvent.touchStart(handle, { + touches: [new Touch({ identifier: 0, target: handle, ...openTouchesForSwipingChildren[0] })], + }); + fireEvent.touchMove(handle, { + touches: [new Touch({ identifier: 0, target: handle, ...openTouchesForSwipingChildren[1] })], + }); + fireEvent.touchMove(handle, { + touches: [new Touch({ identifier: 0, target: handle, ...openTouchesForSwipingChildren[2] })], + }); + fireEvent.touchEnd(handle, { + changedTouches: [ + new Touch({ identifier: 0, target: handle, ...openTouchesForSwipingChildren[2] }), + ], + }); + expect(handleOpen.callCount).to.equal(1); + }); + }); }); describe('disableSwipeToOpen', () => { From 1dfaf7239421f34e837ca8af2d9fd5d7579e4c01 Mon Sep 17 00:00:00 2001 From: tech-meppem Date: Tue, 30 Aug 2022 16:25:29 +0100 Subject: [PATCH 08/10] prettier fixes --- .../SwipeableDrawer/SwipeableDrawer.test.js | 90 +++++++++++++------ 1 file changed, 63 insertions(+), 27 deletions(-) diff --git a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.test.js b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.test.js index 8caf7b69df0858..9a555e657b905d 100644 --- a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.test.js +++ b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.test.js @@ -427,7 +427,6 @@ describe('', () => { expect(document.querySelector('[class*=PrivateSwipeArea-root]')).not.to.equal(null); }); - const openTouchesForSwipingChildren = [ { pageX: 0, clientY: windowHeight - 20 }, { pageX: 0, clientY: windowHeight - 60 }, @@ -437,29 +436,37 @@ describe('', () => { describe('prop: allowSwipeInChildren', () => { it('should allow swiping on children to open', () => { const handleOpen = spy(); - render( + render( {}} open={false} swipeAreaWidth={20} SwipeAreaProps={{ style: { // ensure clicks will not be grabbed by swipe area to ensure testing just this functionality - pointerEvents: "none", - } + pointerEvents: 'none', + }, }} PaperProps={{ component: FakePaper }} ModalProps={{ keepMounted: true, - sx:{ - transform: `translateY(${handleHeight}px) !important` - } + sx: { + transform: `translateY(${handleHeight}px) !important`, + }, }} > -
-
+
+
SwipeableDrawer
@@ -469,13 +476,19 @@ describe('', () => { const handle = screen.getAllByTestId('handle').slice(-1)[0]; fireEvent.touchStart(handle, { - touches: [new Touch({ identifier: 0, target: handle, ...openTouchesForSwipingChildren[0] })], + touches: [ + new Touch({ identifier: 0, target: handle, ...openTouchesForSwipingChildren[0] }), + ], }); fireEvent.touchMove(handle, { - touches: [new Touch({ identifier: 0, target: handle, ...openTouchesForSwipingChildren[1] })], + touches: [ + new Touch({ identifier: 0, target: handle, ...openTouchesForSwipingChildren[1] }), + ], }); fireEvent.touchMove(handle, { - touches: [new Touch({ identifier: 0, target: handle, ...openTouchesForSwipingChildren[2] })], + touches: [ + new Touch({ identifier: 0, target: handle, ...openTouchesForSwipingChildren[2] }), + ], }); fireEvent.touchEnd(handle, { changedTouches: [ @@ -487,35 +500,46 @@ describe('', () => { it('should not allow swiping on children to open that are excluded via a function', () => { const handleOpen = spy(); - render( + render( { const elem = e.target; // ignore touch events from .ignore &^ from swipe area - return !elem.classList.contains('ignore') && !elem.classList.contains('PrivateSwipeArea-root') + return ( + !elem.classList.contains('ignore') && + !elem.classList.contains('PrivateSwipeArea-root') + ); }} onOpen={handleOpen} + onClose={() => {}} open={false} swipeAreaWidth={20} SwipeAreaProps={{ style: { // ensure clicks will not be grabbed by swipe area to ensure testing just this functionality - pointerEvents: "none", - } + pointerEvents: 'none', + }, }} PaperProps={{ component: FakePaper }} ModalProps={{ keepMounted: true, sx: { '& > *': { - pointerEvents: 'auto' - } - } + pointerEvents: 'auto', + }, + }, }} > -
-
+
+
SwipeableDrawer
@@ -526,13 +550,19 @@ describe('', () => { const drawer = screen.getAllByTestId('drawer').slice(-1)[0]; fireEvent.touchStart(drawer, { - touches: [new Touch({ identifier: 0, target: drawer, ...openTouchesForSwipingChildren[0] })], + touches: [ + new Touch({ identifier: 0, target: drawer, ...openTouchesForSwipingChildren[0] }), + ], }); fireEvent.touchMove(drawer, { - touches: [new Touch({ identifier: 0, target: drawer, ...openTouchesForSwipingChildren[1] })], + touches: [ + new Touch({ identifier: 0, target: drawer, ...openTouchesForSwipingChildren[1] }), + ], }); fireEvent.touchMove(drawer, { - touches: [new Touch({ identifier: 0, target: drawer, ...openTouchesForSwipingChildren[2] })], + touches: [ + new Touch({ identifier: 0, target: drawer, ...openTouchesForSwipingChildren[2] }), + ], }); fireEvent.touchEnd(drawer, { changedTouches: [ @@ -545,13 +575,19 @@ describe('', () => { const handle = screen.getAllByTestId('handle').slice(-1)[0]; fireEvent.touchStart(handle, { - touches: [new Touch({ identifier: 0, target: handle, ...openTouchesForSwipingChildren[0] })], + touches: [ + new Touch({ identifier: 0, target: handle, ...openTouchesForSwipingChildren[0] }), + ], }); fireEvent.touchMove(handle, { - touches: [new Touch({ identifier: 0, target: handle, ...openTouchesForSwipingChildren[1] })], + touches: [ + new Touch({ identifier: 0, target: handle, ...openTouchesForSwipingChildren[1] }), + ], }); fireEvent.touchMove(handle, { - touches: [new Touch({ identifier: 0, target: handle, ...openTouchesForSwipingChildren[2] })], + touches: [ + new Touch({ identifier: 0, target: handle, ...openTouchesForSwipingChildren[2] }), + ], }); fireEvent.touchEnd(handle, { changedTouches: [ From fa7b76e2085c0e14353f30ae4a9627dde66eab04 Mon Sep 17 00:00:00 2001 From: tech-meppem Date: Fri, 30 Sep 2022 12:17:20 +0100 Subject: [PATCH 09/10] SwipeableDrawer: fix missing bool for iOS fix --- packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js index 8eaf46487f55f9..38c4362815d967 100644 --- a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js +++ b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js @@ -338,7 +338,7 @@ const SwipeableDrawer = React.forwardRef(function SwipeableDrawer(inProps, ref) return; } - startMaybeSwiping(); + startMaybeSwiping(true); const anchorRtl = getAnchor(theme, anchor); const horizontalSwipe = isHorizontal(anchor); @@ -508,7 +508,7 @@ const SwipeableDrawer = React.forwardRef(function SwipeableDrawer(inProps, ref) // logic for if swipe should be ignored: // if disableSwipeToOpen // if target != swipeArea, and target is not a child of paper ref - // if is a child of paper ref, but `allowSwipeInChildren` disallows it + // if is a child of paper ref, and `allowSwipeInChildren` does not allow it if ( disableSwipeToOpen || !( From 6445cd41b30f98250d3143cd819454e74435d19b Mon Sep 17 00:00:00 2001 From: tech-meppem Date: Tue, 3 Jan 2023 11:56:52 +0000 Subject: [PATCH 10/10] updated comment for allowSwipeInChildren --- .../api-docs/swipeable-drawer/swipeable-drawer.json | 2 +- .../mui-material/src/SwipeableDrawer/SwipeableDrawer.d.ts | 7 ++++--- .../mui-material/src/SwipeableDrawer/SwipeableDrawer.js | 7 ++++--- 3 files changed, 9 insertions(+), 7 deletions(-) diff --git a/docs/translations/api-docs/swipeable-drawer/swipeable-drawer.json b/docs/translations/api-docs/swipeable-drawer/swipeable-drawer.json index 0423f47321ced4..32544a759b2fcd 100644 --- a/docs/translations/api-docs/swipeable-drawer/swipeable-drawer.json +++ b/docs/translations/api-docs/swipeable-drawer/swipeable-drawer.json @@ -1,7 +1,7 @@ { "componentDescription": "", "propDescriptions": { - "allowSwipeInChildren": "Callback to determine what children of the drawer the user can use to drag open the drawer. Can be a custom function to control the behavior. Set or return true / false to allow / disallow the swipe event.", + "allowSwipeInChildren": "If set to true, the swipe event will open the drawer even if the user begins the swipe on one of the drawer's children. This can be useful in scenarios where the drawer is partially visible. You can customize it further with a callback that determines which children the user can drag over to open the drawer (for example, to ignore other elements that handle touch move events, like sliders).", "children": "The content of the component.", "disableBackdropTransition": "Disable the backdrop transition. This can improve the FPS on low-end devices.", "disableDiscovery": "If true, touching the screen near the edge of the drawer will not slide in the drawer a bit to promote accidental discovery of the swipe gesture.", diff --git a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.d.ts b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.d.ts index eb6f914e6c02b0..fea68f162183d7 100644 --- a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.d.ts +++ b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.d.ts @@ -3,9 +3,10 @@ import { DrawerProps } from '../Drawer'; export interface SwipeableDrawerProps extends Omit { /** - * Callback to determine what children of the drawer the user can use to drag open the drawer. - * Can be a custom function to control the behavior. - * Set or return true / false to allow / disallow the swipe event. + * If set to true, the swipe event will open the drawer even if the user begins the swipe on one of the drawer's children. + * This can be useful in scenarios where the drawer is partially visible. + * You can customize it further with a callback that determines which children the user can drag over to open the drawer + * (for example, to ignore other elements that handle touch move events, like sliders). * * @param {TouchEvent} event The 'touchstart' event * @param {HTMLDivElement} swipeArea The swipe area element diff --git a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js index a5e4584b79cc31..2b70adc6885027 100644 --- a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js +++ b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js @@ -634,9 +634,10 @@ SwipeableDrawer.propTypes /* remove-proptypes */ = { // | To update them edit the d.ts file and run "yarn proptypes" | // ---------------------------------------------------------------------- /** - * Callback to determine what children of the drawer the user can use to drag open the drawer. - * Can be a custom function to control the behavior. - * Set or return true / false to allow / disallow the swipe event. + * If set to true, the swipe event will open the drawer even if the user begins the swipe on one of the drawer's children. + * This can be useful in scenarios where the drawer is partially visible. + * You can customize it further with a callback that determines which children the user can drag over to open the drawer + * (for example, to ignore other elements that handle touch move events, like sliders). * * @param {TouchEvent} event The 'touchstart' event * @param {HTMLDivElement} swipeArea The swipe area element