react-remove-scroll - npm Package Compare versions

Comparing version 2.1.1 to 2.2.0

dist/es2015/SideEffect.d.ts

 import * as React from 'react';
 import { IRemoveScrollEffectProps } from './types';
-export declare const getTouchXY: (event: React.TouchEvent<Element>) => number[];
+export declare const getTouchXY: (event: WheelEvent | React.TouchEvent<Element>) => number[];
 export declare const getDeltaXY: (event: WheelEvent) => number[];
 export declare function RemoveScrollSideCar(props: IRemoveScrollEffectProps): JSX.Element;

dist/es2015/SideEffect.js

@@ -7,3 +7,3 @@ import * as React from 'react';
 export var getTouchXY = function (event) {
-    return event.changedTouches
+    return 'changedTouches' in event
         ? [event.changedTouches[0].clientX, event.changedTouches[0].clientY]
@@ -49,2 +49,5 @@ : [0, 0];
     var shouldCancelEvent = React.useCallback(function (event, parent) {
+        if ('touches' in event && event.touches.length === 2) {
+            return !lastProps.current.allowPinchZoom;
+        }
         var touch = getTouchXY(event);
@@ -72,3 +75,5 @@ var touchStart = touchStartRef.current;
         }
-        if (!activeAxis.current && event.changedTouches && (deltaX || deltaY)) {
+        if (!activeAxis.current &&
+            'changedTouches' in event &&
+            (deltaX || deltaY)) {
             activeAxis.current = currentAxis;
@@ -82,3 +87,4 @@ }
     }, []);
-    var shouldPrevent = React.useCallback(function (event) {
+    var shouldPrevent = React.useCallback(function (_event) {
+        var event = _event;
         if (!lockStack.length || lockStack[lockStack.length - 1] !== Style) {
@@ -85,0 +91,0 @@ // not the last active

dist/es2015/types.d.ts

@@ -22,2 +22,3 @@ import * as React from 'react';
     inert?: boolean;
+    allowPinchZoom?: boolean;
     enabled?: boolean;
@@ -35,2 +36,3 @@ className?: string;
     removeScrollBar?: boolean;
+    allowPinchZoom: boolean;
     inert?: boolean;
@@ -37,0 +39,0 @@ shards?: Array<React.RefObject<any> | HTMLElement>;

dist/es2015/UI.js

@@ -16,3 +16,3 @@ import * as tslib_1 from "tslib";
     }), callbacks = _a[0], setCallbacks = _a[1];
-    var forwardProps = props.forwardProps, children = props.children, className = props.className, removeScrollBar = props.removeScrollBar, enabled = props.enabled, shards = props.shards, sideCar = props.sideCar, noIsolation = props.noIsolation, inert = props.inert, rest = tslib_1.__rest(props, ["forwardProps", "children", "className", "removeScrollBar", "enabled", "shards", "sideCar", "noIsolation", "inert"]);
+    var forwardProps = props.forwardProps, children = props.children, className = props.className, removeScrollBar = props.removeScrollBar, enabled = props.enabled, shards = props.shards, sideCar = props.sideCar, noIsolation = props.noIsolation, inert = props.inert, allowPinchZoom = props.allowPinchZoom, rest = tslib_1.__rest(props, ["forwardProps", "children", "className", "removeScrollBar", "enabled", "shards", "sideCar", "noIsolation", "inert", "allowPinchZoom"]);
     var SideCar = sideCar;
@@ -24,3 +24,3 @@ var containerProps = tslib_1.__assign({ ref: useMergeRefs([
     return (React.createElement(React.Fragment, null,
-        enabled && (React.createElement(SideCar, { sideCar: effectCar, removeScrollBar: removeScrollBar, shards: shards, noIsolation: noIsolation, inert: inert, setCallbacks: setCallbacks, lockRef: ref })),
+        enabled && (React.createElement(SideCar, { sideCar: effectCar, removeScrollBar: removeScrollBar, shards: shards, noIsolation: noIsolation, inert: inert, setCallbacks: setCallbacks, allowPinchZoom: !!allowPinchZoom, lockRef: ref })),
         forwardProps ? (React.cloneElement(React.Children.only(children), containerProps)) : (React.createElement("div", tslib_1.__assign({}, containerProps, { className: className }), children))));
@@ -27,0 +27,0 @@ });

dist/es5/SideEffect.d.ts

 import * as React from 'react';
 import { IRemoveScrollEffectProps } from './types';
-export declare const getTouchXY: (event: React.TouchEvent<Element>) => number[];
+export declare const getTouchXY: (event: WheelEvent | React.TouchEvent<Element>) => number[];
 export declare const getDeltaXY: (event: WheelEvent) => number[];
 export declare function RemoveScrollSideCar(props: IRemoveScrollEffectProps): JSX.Element;

dist/es5/SideEffect.js

@@ -9,3 +9,3 @@ "use strict";
 exports.getTouchXY = function (event) {
-    return event.changedTouches
+    return 'changedTouches' in event
         ? [event.changedTouches[0].clientX, event.changedTouches[0].clientY]
@@ -51,2 +51,5 @@ : [0, 0];
     var shouldCancelEvent = React.useCallback(function (event, parent) {
+        if ('touches' in event && event.touches.length === 2) {
+            return !lastProps.current.allowPinchZoom;
+        }
         var touch = exports.getTouchXY(event);
@@ -74,3 +77,5 @@ var touchStart = touchStartRef.current;
         }
-        if (!activeAxis.current && event.changedTouches && (deltaX || deltaY)) {
+        if (!activeAxis.current &&
+            'changedTouches' in event &&
+            (deltaX || deltaY)) {
             activeAxis.current = currentAxis;
@@ -84,3 +89,4 @@ }
     }, []);
-    var shouldPrevent = React.useCallback(function (event) {
+    var shouldPrevent = React.useCallback(function (_event) {
+        var event = _event;
         if (!lockStack.length || lockStack[lockStack.length - 1] !== Style) {
@@ -87,0 +93,0 @@ // not the last active

dist/es5/types.d.ts

@@ -22,2 +22,3 @@ import * as React from 'react';
     inert?: boolean;
+    allowPinchZoom?: boolean;
     enabled?: boolean;
@@ -35,2 +36,3 @@ className?: string;
     removeScrollBar?: boolean;
+    allowPinchZoom: boolean;
     inert?: boolean;
@@ -37,0 +39,0 @@ shards?: Array<React.RefObject<any> | HTMLElement>;

dist/es5/UI.js

@@ -18,3 +18,3 @@ "use strict";
     }), callbacks = _a[0], setCallbacks = _a[1];
-    var forwardProps = props.forwardProps, children = props.children, className = props.className, removeScrollBar = props.removeScrollBar, enabled = props.enabled, shards = props.shards, sideCar = props.sideCar, noIsolation = props.noIsolation, inert = props.inert, rest = tslib_1.__rest(props, ["forwardProps", "children", "className", "removeScrollBar", "enabled", "shards", "sideCar", "noIsolation", "inert"]);
+    var forwardProps = props.forwardProps, children = props.children, className = props.className, removeScrollBar = props.removeScrollBar, enabled = props.enabled, shards = props.shards, sideCar = props.sideCar, noIsolation = props.noIsolation, inert = props.inert, allowPinchZoom = props.allowPinchZoom, rest = tslib_1.__rest(props, ["forwardProps", "children", "className", "removeScrollBar", "enabled", "shards", "sideCar", "noIsolation", "inert", "allowPinchZoom"]);
     var SideCar = sideCar;
@@ -26,3 +26,3 @@ var containerProps = tslib_1.__assign({ ref: use_callback_ref_1.useMergeRefs([
     return (React.createElement(React.Fragment, null,
-        enabled && (React.createElement(SideCar, { sideCar: medium_1.effectCar, removeScrollBar: removeScrollBar, shards: shards, noIsolation: noIsolation, inert: inert, setCallbacks: setCallbacks, lockRef: ref })),
+        enabled && (React.createElement(SideCar, { sideCar: medium_1.effectCar, removeScrollBar: removeScrollBar, shards: shards, noIsolation: noIsolation, inert: inert, setCallbacks: setCallbacks, allowPinchZoom: !!allowPinchZoom, lockRef: ref })),
         forwardProps ? (React.cloneElement(React.Children.only(children), containerProps)) : (React.createElement("div", tslib_1.__assign({}, containerProps, { className: className }), children))));
@@ -29,0 +29,0 @@ });

package.json

 {
   "name": "react-remove-scroll",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "description": "Disables scroll outside of `children` node.",
@@ -5,0 +5,0 @@ "main": "dist/es5/index.js",

README.md

@@ -51,2 +51,3 @@ <div align="center">
 - `[enabled]` - activate or deactivate component behaviour without removing it.
+- `[allowPinchZoom=false]` - enabled "pinch-n-zoom" behavior. By default it might be prevented. However - pinch and zoom might break "scroll isolation", and __disabled by default__.
 - `[noIsolation=false]` - disables outer event capturing. Event capturing is React friendly and unlikely be a problem.
@@ -53,0 +54,0 @@ But if you are using _shadowbox_ of some sort - you dont need it.

New alerts

License Policy Violation

License

This 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

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

45766

increased by11.47%

Number of package files

46

increased by9.52%

Lines of code

874

increased by16.22%

Number of lines in readme file

152

increased by0.66%

No dependency changes