Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-beautiful-dnd
Advanced tools
react-beautiful-dnd - npm Package Compare versions
Comparing version 11.0.4 to 11.0.5
| { | ||
| "name": "react-beautiful-dnd", | ||
| "version": "11.0.4", | ||
| "version": "11.0.5", | ||
| "description": "Beautiful and accessible drag and drop for lists with React", | ||
@@ -93,3 +93,3 @@ "author": "Alex Reardon <areardon@atlassian.com>", | ||
| "eslint-config-airbnb": "^17.1.0", | ||
| "eslint-config-prettier": "^4.3.0", | ||
| "eslint-config-prettier": "^5.1.0", | ||
| "eslint-plugin-cypress": "^2.2.1", | ||
@@ -96,0 +96,0 @@ "eslint-plugin-emotion": "^10.0.7", |
@@ -136,4 +136,4 @@ <p align="center"> | ||
| - [ **中文/Chinese**](https://github.com/chinanf-boy/react-beautiful-dnd-zh) | ||
| - [ На русском/Russian\*\*](https://github.com/vtereshyn/react-beautiful-dnd-ru) | ||
| - [ Português/Portuguese](https://github.com/dudestein/react-beautiful-dnd-pt) | ||
| - [ **На русском/Russian**](https://github.com/vtereshyn/react-beautiful-dnd-ru) | ||
| - [ **Português/Portuguese**](https://github.com/dudestein/react-beautiful-dnd-pt) | ||
@@ -140,0 +140,0 @@ ## Author ✍️ |
@@ -13,3 +13,2 @@ // @flow | ||
| import createScheduler from '../util/create-scheduler'; | ||
| import { warning } from '../../../dev-warning'; | ||
| import * as keyCodes from '../../key-codes'; | ||
@@ -36,6 +35,2 @@ import supportedPageVisibilityEventName from '../util/supported-page-visibility-event-name'; | ||
| // Custom event format for force press inputs | ||
| type MouseForceChangedEvent = MouseEvent & { | ||
| webkitForce?: number, | ||
| }; | ||
| // https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button | ||
@@ -53,3 +48,4 @@ const primaryButton: number = 0; | ||
| callbacks, | ||
| getShouldRespectForcePress, | ||
| // Currently always respecting force press due to safari bug (see below) | ||
| // getShouldRespectForcePress, | ||
| onCaptureStart, | ||
@@ -254,30 +250,9 @@ onCaptureEnd, | ||
| { | ||
| eventName: 'webkitmouseforcechanged', | ||
| fn: (event: MouseForceChangedEvent) => { | ||
| if ( | ||
| event.webkitForce == null || | ||
| (MouseEvent: any).WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN == null | ||
| ) { | ||
| warning( | ||
| 'handling a mouse force changed event when it is not supported', | ||
| ); | ||
| return; | ||
| } | ||
| const forcePressThreshold: number = (MouseEvent: any) | ||
| .WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN; | ||
| const isForcePressing: boolean = | ||
| event.webkitForce >= forcePressThreshold; | ||
| // New behaviour | ||
| if (!getShouldRespectForcePress()) { | ||
| event.preventDefault(); | ||
| return; | ||
| } | ||
| if (isForcePressing) { | ||
| // it is considered a indirect cancel so we do not | ||
| // prevent default in any situation. | ||
| cancel(); | ||
| } | ||
| eventName: 'webkitmouseforcedown', | ||
| fn: () => { | ||
| // In order to opt out of force press correctly we need to call | ||
| // event.preventDefault() on webkitmouseforcewillbegin | ||
| // We have no way of doing this in this branch so we are always respecting force touches | ||
| // There is a correct fix in the `virtual` branch | ||
| cancel(); | ||
| }, | ||
@@ -300,3 +275,2 @@ }, | ||
| getWindow, | ||
| getShouldRespectForcePress, | ||
| ]); | ||
@@ -303,0 +277,0 @@ |
@@ -18,2 +18,3 @@ // @flow | ||
| } from '../util/create-post-drag-event-preventer'; | ||
| import useLayoutEffect from '../../use-isomorphic-layout-effect'; | ||
@@ -40,8 +41,5 @@ export type Args = {| | ||
| type WebkitHack = {| | ||
| preventTouchMove: () => void, | ||
| releaseTouchMove: () => void, | ||
| |}; | ||
| export const timeForLongPress: number = 150; | ||
| // Decreased from 150 as a work around for an issue for forcepress on iOS | ||
| // https://github.com/atlassian/react-beautiful-dnd/issues/1401 | ||
| export const timeForLongPress: number = 120; | ||
| export const forcePressThreshold: number = 0.15; | ||
@@ -51,61 +49,2 @@ const touchStartMarshal: EventMarshal = createEventMarshal(); | ||
| // Webkit does not allow event.preventDefault() in dynamically added handlers | ||
| // So we add an always listening event handler to get around this :( | ||
| // webkit bug: https://bugs.webkit.org/show_bug.cgi?id=184250 | ||
| const webkitHack: WebkitHack = (() => { | ||
| const stub: WebkitHack = { | ||
| preventTouchMove: noop, | ||
| releaseTouchMove: noop, | ||
| }; | ||
| // Do nothing when server side rendering | ||
| if (typeof window === 'undefined') { | ||
| return stub; | ||
| } | ||
| // Device has no touch support - no point adding the touch listener | ||
| if (!('ontouchstart' in window)) { | ||
| return stub; | ||
| } | ||
| // Not adding any user agent testing as everything pretends to be webkit | ||
| let isBlocking: boolean = false; | ||
| // Adding a persistent event handler | ||
| window.addEventListener( | ||
| 'touchmove', | ||
| (event: TouchEvent) => { | ||
| // We let the event go through as normal as nothing | ||
| // is blocking the touchmove | ||
| if (!isBlocking) { | ||
| return; | ||
| } | ||
| // Our event handler would have worked correctly if the browser | ||
| // was not webkit based, or an older version of webkit. | ||
| if (event.defaultPrevented) { | ||
| return; | ||
| } | ||
| // Okay, now we need to step in and fix things | ||
| event.preventDefault(); | ||
| // Forcing this to be non-passive so we can get every touchmove | ||
| // Not activating in the capture phase like the dynamic touchmove we add. | ||
| // Technically it would not matter if we did this in the capture phase | ||
| }, | ||
| { passive: false, capture: false }, | ||
| ); | ||
| const preventTouchMove = () => { | ||
| isBlocking = true; | ||
| }; | ||
| const releaseTouchMove = () => { | ||
| isBlocking = false; | ||
| }; | ||
| return { preventTouchMove, releaseTouchMove }; | ||
| })(); | ||
| export default function useTouchSensor(args: Args): OnTouchStart { | ||
@@ -149,3 +88,2 @@ const { | ||
| touchStartMarshal.reset(); | ||
| webkitHack.releaseTouchMove(); | ||
| hasMovedRef.current = false; | ||
@@ -203,7 +141,11 @@ onCaptureEnd(); | ||
| const { clientX, clientY } = event.touches[0]; | ||
| const touch: ?Touch = event.touches[0]; | ||
| if (!touch) { | ||
| return; | ||
| } | ||
| const point: Position = { | ||
| x: clientX, | ||
| y: clientY, | ||
| x: touch.clientX, | ||
| y: touch.clientY, | ||
| }; | ||
@@ -316,28 +258,40 @@ | ||
| // https://developer.apple.com/library/content/documentation/AppleApplications/Conceptual/SafariJSProgTopics/RespondingtoForceTouchEventsfromJavaScript.html | ||
| // NOTE: this function is back-ported from the `virtual` branch | ||
| { | ||
| eventName: 'touchforcechange', | ||
| fn: (event: TouchEvent) => { | ||
| // Not respecting force touches - prevent the event | ||
| if (!getShouldRespectForcePress()) { | ||
| event.preventDefault(); | ||
| const touch: TouchWithForce = (event.touches[0]: any); | ||
| const isForcePress: boolean = touch.force >= forcePressThreshold; | ||
| if (!isForcePress) { | ||
| return; | ||
| } | ||
| // A force push action will no longer fire after a touchmove | ||
| if (hasMovedRef.current) { | ||
| // This is being super safe. While this situation should not occur we | ||
| // are still expressing that we want to opt out of force pressing | ||
| event.preventDefault(); | ||
| const shouldRespect: boolean = getShouldRespectForcePress(); | ||
| if (pendingRef.current) { | ||
| if (shouldRespect) { | ||
| cancel(); | ||
| } | ||
| // If not respecting we just let the event go through | ||
| // It will not have an impact on the browser until | ||
| // there has been a sufficient time ellapsed | ||
| return; | ||
| } | ||
| // A drag could be pending or has already started but no movement has occurred | ||
| // DRAGGING | ||
| const touch: TouchWithForce = (event.touches[0]: any); | ||
| if (touch.force >= forcePressThreshold) { | ||
| // this is an indirect cancel so we do not preventDefault | ||
| // we also want to allow the force press to occur | ||
| if (shouldRespect) { | ||
| if (hasMovedRef.current) { | ||
| // After the user has moved we do not allow the dragging item to be force pressed | ||
| // This prevents strange behaviour such as a link preview opening mid drag | ||
| event.preventDefault(); | ||
| return; | ||
| } | ||
| // indirect cancel | ||
| cancel(); | ||
| return; | ||
| } | ||
| // not respecting during a drag | ||
| event.preventDefault(); | ||
| }, | ||
@@ -434,9 +388,23 @@ }, | ||
| touchStartMarshal.handle(); | ||
| // A webkit only hack to prevent touch move events | ||
| webkitHack.preventTouchMove(); | ||
| startPendingDrag(event); | ||
| }; | ||
| // This is needed for safari | ||
| // Simply adding a non capture, non passive 'touchmove' listener. | ||
| // This forces event.preventDefault() in dynamically added | ||
| // touchmove event handlers to actually work | ||
| // https://github.com/atlassian/react-beautiful-dnd/issues/1374 | ||
| useLayoutEffect(function webkitHack() { | ||
| const unbind = bindEvents(window, [ | ||
| { | ||
| eventName: 'touchmove', | ||
| fn: noop, | ||
| options: { capture: false, passive: false }, | ||
| }, | ||
| ]); | ||
| return unbind; | ||
| }, []); | ||
| return onTouchStart; | ||
| } |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Number of low supply chain risk alerts
- decreased by-0.6%
334
Worsened metrics
- Total package byte prevSize
- decreased by-0.36%
1400432
- Lines of code
- decreased by-0.35%
37697
No dependency changes