diff --git a/CHANGELOG.md b/CHANGELOG.md index cd8eb515..3d37bf02 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,9 @@ # Changelog +### 4.4.4 (July 4, 2021) + +- Add `preventDefault` prop to allow touch scroll + ### 4.4.3 (June 8, 2020) - Add `nodeRef` to TypeScript definitions @@ -41,16 +45,16 @@ `nodeRef` is also available on ``. - Remove "browser" field in "package.json": - There is nothing special in the browser build that is actually practical - for modern use. The "browser" field, as defined in + for modern use. The "browser" field, as defined in https://github.com/defunctzombie/package-browser-field-spec#overview, indicates that you should use it if you are directly accessing globals, using browser-specific features, dom manipulation, etc. - + React components like react-draggable are built to do minimal raw DOM manipulation, and to always gate this behind conditionals to ensure that server-side rendering still works. We don't make any changes to any of that for the "browser" build, so it's entirely redundant. - + This should also fix the "Super expression must either be null or a function" error (#472) that some users have experienced with particular bundler configurations. @@ -61,7 +65,7 @@ - The browser build will likely be removed entirely in 5.0. - Fix: Make `bounds` optional in TypeScript [#473](https://github.com/strml/react-draggable/pull/473) -### 4.3.1 (Apr 11, 2020) +### 4.3.1 (Apr 11, 2020) > This is a bugfix release. @@ -72,7 +76,7 @@ return React.cloneElement(this.props.children, {style: this.props.children.props.style}); ``` , `style` ends up undefined. -- Fixed a bug that caused debug output to show up in the build. +- Fixed a bug that caused debug output to show up in the build. - `babel-loader` cache does not invalidate when it should. I had modified webpack.config.js in the last version but it reused stale cache. ### 4.3.0 (Apr 10, 2020) @@ -82,7 +86,7 @@ - Thanks @schnerd, [#450](https://github.com/mzabriskie/react-draggable/pull/450) - Fix an issue where the insides of a `` were not scrollable on touch devices due to the outer container having `touch-action: none`. - This was a long-standing hack for mobile devices. Without it, the page will scroll while you drag the element. - - The new solution will simply cancel the touch event `e.preventDefault()`. However, due to changes in Chrome >= 56, this is only possible on + - The new solution will simply cancel the touch event `e.preventDefault()`. However, due to changes in Chrome >= 56, this is only possible on non-passive event handlers. To fix this, we now add/remove the touchEvent on lifecycle events rather than using React's event system. - [#465](https://github.com/mzabriskie/react-draggable/pull/465) - Upgrade devDeps and fix security warnings. None of them actually applied to this module. @@ -106,7 +110,7 @@ * **`"module"`**: ES6-compatible build using import/export. This should fix issues like https://github.com/STRML/react-resizable/issues/113 while allowing modern bundlers to consume esm modules in the future. - + No compatibility changes are expected. ### 4.0.3 (Sep 10, 2019) diff --git a/example/example.js b/example/example.js index e5effe93..9896f265 100644 --- a/example/example.js +++ b/example/example.js @@ -30,8 +30,8 @@ class App extends React.Component { }; onDrop = (e) => { this.setState({activeDrags: --this.state.activeDrags}); - if (e.target.classList.contains("drop-target")) { - alert("Dropped!"); + if (e.target.classList.contains('drop-target')) { + alert('Dropped!'); e.target.classList.remove('hovered'); } }; @@ -134,7 +134,7 @@ class App extends React.Component {
I can detect drops from the next box.
-
I can be dropped onto another box.
+
I can be dropped onto another box.
@@ -150,6 +150,11 @@ class App extends React.Component { Both parent padding and child margin work properly.
+ +
+ I don't prevent touches from scrolling the container. +
+
@@ -174,7 +179,7 @@ class App extends React.Component {
- {"I have a default position of {x: 25, y: 25}, so I'm slightly offset."} + {'I have a default position of {x: 25, y: 25}, so I\'m slightly offset.'}
@@ -227,27 +232,27 @@ class RemWrapper extends React.Component { .split(',') .map(px => px.replace('px', '')) .map(px => parseInt(px, 10) / remBaseline) - .map(x => `${x}rem`) - const [x, y] = convertedValues + .map(x => `${x}rem`); + const [x, y] = convertedValues; - return `translate(${x}, ${y})` + return `translate(${x}, ${y})`; } render() { - const { children, remBaseline = 16, style } = this.props - const child = React.Children.only(children) + const { children, remBaseline = 16, style } = this.props; + const child = React.Children.only(children); const editedStyle = { ...child.props.style, ...style, transform: this.translateTransformToRem(style.transform, remBaseline), - } + }; return React.cloneElement(child, { ...child.props, ...this.props, style: editedStyle - }) + }); } } diff --git a/lib/DraggableCore.js b/lib/DraggableCore.js index c5a3da8f..4961a2cf 100644 --- a/lib/DraggableCore.js +++ b/lib/DraggableCore.js @@ -55,6 +55,7 @@ export type DraggableCoreDefaultProps = { onDrag: DraggableEventHandler, onStop: DraggableEventHandler, onMouseDown: (e: MouseEvent) => void, + preventDefault: true, scale: number, }; @@ -65,6 +66,7 @@ export type DraggableCoreProps = { offsetParent: HTMLElement, grid: [number, number], handle: string, + preventDefault: boolean, nodeRef?: ?React.ElementRef, }; @@ -208,6 +210,8 @@ export default class DraggableCore extends React.Component