react-remove-scroll
Advanced tools
Comparing version 2.3.0 to 2.4.0
@@ -65,5 +65,3 @@ var elementCouldBeVScrolled = function (node) { | ||
(targetInLock && (endTarget.contains(target) || endTarget === target))); | ||
if (0) { | ||
} | ||
else if (isDeltaPositive && | ||
if (isDeltaPositive && | ||
((noOverscroll && availableScroll === 0) || | ||
@@ -70,0 +68,0 @@ (!noOverscroll && delta > availableScroll))) { |
@@ -82,3 +82,3 @@ import * as React from 'react'; | ||
var cancelingAxis = activeAxis.current || currentAxis; | ||
return handleScroll(cancelingAxis, parent, event, cancelingAxis == 'h' ? deltaX : deltaY, true); | ||
return handleScroll(cancelingAxis, parent, event, cancelingAxis === 'h' ? deltaX : deltaY, true); | ||
}, []); | ||
@@ -85,0 +85,0 @@ var shouldPrevent = React.useCallback(function (_event) { |
@@ -12,2 +12,7 @@ import * as React from 'react'; | ||
export interface ChildrenNode { | ||
/** | ||
* if forwardProps is false - children should be ReactNode | ||
* and it would be wrapper with a div | ||
* @see {@link IRemoveScrollSelfProps.as} | ||
*/ | ||
forwardProps?: false; | ||
@@ -17,2 +22,7 @@ children: React.ReactNode; | ||
export interface ChildrenForward { | ||
/** | ||
* if forwardProps is true - children should be single Element | ||
* which would NOT with a div | ||
* @see {@link IRemoveScrollSelfProps.as} | ||
*/ | ||
forwardProps: true; | ||
@@ -22,9 +32,38 @@ children: React.ReactElement; | ||
export interface IRemoveScrollSelfProps { | ||
/** | ||
* disables "event isolation" (suppressing of events happening outside of the Lock) | ||
* @default false | ||
*/ | ||
noIsolation?: boolean; | ||
/** | ||
* enabled complete Lock isolation using `pointer-events:none` for anything outside the Lock | ||
* you probably don't need it, except you do | ||
* @default false | ||
* @see {IRemoveScrollSelfProps.noIsolation} | ||
*/ | ||
inert?: boolean; | ||
/** | ||
* allows pinch-zoom, however might work not perfectly for normal scroll | ||
*/ | ||
allowPinchZoom?: boolean; | ||
/** | ||
* switches on/off the behavior of the component | ||
*/ | ||
enabled?: boolean; | ||
/** | ||
* Controls the body scroll bar removal | ||
* @default false | ||
*/ | ||
removeScrollBar?: boolean; | ||
className?: string; | ||
removeScrollBar?: boolean; | ||
style?: React.CSSProperties; | ||
/** | ||
* array of refs to other Elements, which should be considered as a part of the Lock | ||
*/ | ||
shards?: Array<React.RefObject<any> | HTMLElement>; | ||
/** | ||
* Control host node used for the lock. | ||
* @default 'div' | ||
*/ | ||
as?: string | React.ElementType; | ||
} | ||
@@ -31,0 +70,0 @@ export declare type IRemoveScrollProps = IRemoveScrollSelfProps & (ChildrenForward | ChildrenNode); |
import { RemoveScrollUIType } from './types'; | ||
/** | ||
* Removes scrollbar from the page and contain the scroll within the Lock | ||
*/ | ||
declare const RemoveScroll: RemoveScrollUIType; | ||
export { RemoveScroll }; |
@@ -9,2 +9,5 @@ import * as tslib_1 from "tslib"; | ||
}; | ||
/** | ||
* Removes scrollbar from the page and contain the scroll within the Lock | ||
*/ | ||
var RemoveScroll = React.forwardRef(function (props, parentRef) { | ||
@@ -17,11 +20,12 @@ var ref = React.useRef(null); | ||
}), 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, allowPinchZoom = props.allowPinchZoom, rest = tslib_1.__rest(props, ["forwardProps", "children", "className", "removeScrollBar", "enabled", "shards", "sideCar", "noIsolation", "inert", "allowPinchZoom"]); | ||
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, _b = props.as, Container = _b === void 0 ? 'div' : _b, rest = tslib_1.__rest(props, ["forwardProps", "children", "className", "removeScrollBar", "enabled", "shards", "sideCar", "noIsolation", "inert", "allowPinchZoom", "as"]); | ||
var SideCar = sideCar; | ||
var containerProps = tslib_1.__assign({ ref: useMergeRefs([ | ||
ref, | ||
parentRef | ||
]) }, rest, callbacks); | ||
var containerRef = useMergeRefs([ | ||
ref, | ||
parentRef | ||
]); | ||
var containerProps = tslib_1.__assign({}, rest, callbacks); | ||
return (React.createElement(React.Fragment, null, | ||
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)))); | ||
forwardProps ? (React.cloneElement(React.Children.only(children), tslib_1.__assign({}, containerProps, { ref: containerRef }))) : (React.createElement(Container, tslib_1.__assign({}, containerProps, { className: className, ref: containerRef }), children)))); | ||
}); | ||
@@ -28,0 +32,0 @@ RemoveScroll.defaultProps = { |
@@ -67,5 +67,3 @@ "use strict"; | ||
(targetInLock && (endTarget.contains(target) || endTarget === target))); | ||
if (0) { | ||
} | ||
else if (isDeltaPositive && | ||
if (isDeltaPositive && | ||
((noOverscroll && availableScroll === 0) || | ||
@@ -72,0 +70,0 @@ (!noOverscroll && delta > availableScroll))) { |
@@ -84,3 +84,3 @@ "use strict"; | ||
var cancelingAxis = activeAxis.current || currentAxis; | ||
return handleScroll_1.handleScroll(cancelingAxis, parent, event, cancelingAxis == 'h' ? deltaX : deltaY, true); | ||
return handleScroll_1.handleScroll(cancelingAxis, parent, event, cancelingAxis === 'h' ? deltaX : deltaY, true); | ||
}, []); | ||
@@ -87,0 +87,0 @@ var shouldPrevent = React.useCallback(function (_event) { |
@@ -12,2 +12,7 @@ import * as React from 'react'; | ||
export interface ChildrenNode { | ||
/** | ||
* if forwardProps is false - children should be ReactNode | ||
* and it would be wrapper with a div | ||
* @see {@link IRemoveScrollSelfProps.as} | ||
*/ | ||
forwardProps?: false; | ||
@@ -17,2 +22,7 @@ children: React.ReactNode; | ||
export interface ChildrenForward { | ||
/** | ||
* if forwardProps is true - children should be single Element | ||
* which would NOT with a div | ||
* @see {@link IRemoveScrollSelfProps.as} | ||
*/ | ||
forwardProps: true; | ||
@@ -22,9 +32,38 @@ children: React.ReactElement; | ||
export interface IRemoveScrollSelfProps { | ||
/** | ||
* disables "event isolation" (suppressing of events happening outside of the Lock) | ||
* @default false | ||
*/ | ||
noIsolation?: boolean; | ||
/** | ||
* enabled complete Lock isolation using `pointer-events:none` for anything outside the Lock | ||
* you probably don't need it, except you do | ||
* @default false | ||
* @see {IRemoveScrollSelfProps.noIsolation} | ||
*/ | ||
inert?: boolean; | ||
/** | ||
* allows pinch-zoom, however might work not perfectly for normal scroll | ||
*/ | ||
allowPinchZoom?: boolean; | ||
/** | ||
* switches on/off the behavior of the component | ||
*/ | ||
enabled?: boolean; | ||
/** | ||
* Controls the body scroll bar removal | ||
* @default false | ||
*/ | ||
removeScrollBar?: boolean; | ||
className?: string; | ||
removeScrollBar?: boolean; | ||
style?: React.CSSProperties; | ||
/** | ||
* array of refs to other Elements, which should be considered as a part of the Lock | ||
*/ | ||
shards?: Array<React.RefObject<any> | HTMLElement>; | ||
/** | ||
* Control host node used for the lock. | ||
* @default 'div' | ||
*/ | ||
as?: string | React.ElementType; | ||
} | ||
@@ -31,0 +70,0 @@ export declare type IRemoveScrollProps = IRemoveScrollSelfProps & (ChildrenForward | ChildrenNode); |
import { RemoveScrollUIType } from './types'; | ||
/** | ||
* Removes scrollbar from the page and contain the scroll within the Lock | ||
*/ | ||
declare const RemoveScroll: RemoveScrollUIType; | ||
export { RemoveScroll }; |
@@ -11,2 +11,5 @@ "use strict"; | ||
}; | ||
/** | ||
* Removes scrollbar from the page and contain the scroll within the Lock | ||
*/ | ||
var RemoveScroll = React.forwardRef(function (props, parentRef) { | ||
@@ -19,11 +22,12 @@ var ref = React.useRef(null); | ||
}), 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, allowPinchZoom = props.allowPinchZoom, rest = tslib_1.__rest(props, ["forwardProps", "children", "className", "removeScrollBar", "enabled", "shards", "sideCar", "noIsolation", "inert", "allowPinchZoom"]); | ||
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, _b = props.as, Container = _b === void 0 ? 'div' : _b, rest = tslib_1.__rest(props, ["forwardProps", "children", "className", "removeScrollBar", "enabled", "shards", "sideCar", "noIsolation", "inert", "allowPinchZoom", "as"]); | ||
var SideCar = sideCar; | ||
var containerProps = tslib_1.__assign({ ref: use_callback_ref_1.useMergeRefs([ | ||
ref, | ||
parentRef | ||
]) }, rest, callbacks); | ||
var containerRef = use_callback_ref_1.useMergeRefs([ | ||
ref, | ||
parentRef | ||
]); | ||
var containerProps = tslib_1.__assign({}, rest, callbacks); | ||
return (React.createElement(React.Fragment, null, | ||
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)))); | ||
forwardProps ? (React.cloneElement(React.Children.only(children), tslib_1.__assign({}, containerProps, { ref: containerRef }))) : (React.createElement(Container, tslib_1.__assign({}, containerProps, { className: className, ref: containerRef }), children)))); | ||
}); | ||
@@ -30,0 +34,0 @@ exports.RemoveScroll = RemoveScroll; |
{ | ||
"name": "react-remove-scroll", | ||
"version": "2.3.0", | ||
"version": "2.4.0", | ||
"description": "Disables scroll outside of `children` node.", | ||
@@ -5,0 +5,0 @@ "main": "dist/es5/index.js", |
@@ -54,3 +54,3 @@ <div align="center"> | ||
But if you are using _shadowbox_ of some sort - you dont need it. | ||
- `[inert=false]` - ☠️(be careful) disables events the rest of page completely using `pointer-events` expect the Lock(+shard). | ||
- `[inert=false]` - ☠️(be careful) disables events the rest of page completely using `pointer-events` except the Lock(+shards). | ||
React portals not friendly, might lead to production issues. Enable only for __rare__ cases, when you have to disable scrollbars somewhere on the page(except body, Lock and shards). | ||
@@ -57,0 +57,0 @@ - `[forwardProps]` - will forward all props to the `children` |
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
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
52507
962