react-scroll-parallax
Advanced tools
Comparing version 3.4.1 to 3.4.2
import { BannerLayer } from '../types'; | ||
export declare function getExpandedStyle(layer: BannerLayer): { | ||
top: string; | ||
bottom: string; | ||
} | { | ||
top?: undefined; | ||
bottom?: undefined; | ||
declare type ExpandedStyle = { | ||
top?: string; | ||
bottom?: string; | ||
}; | ||
export declare function getExpandedStyle(layer: BannerLayer): ExpandedStyle; | ||
export {}; |
@@ -10,3 +10,2 @@ import { Component } from 'react'; | ||
constructor(props: ParallaxProviderProps); | ||
componentDidMount(): void; | ||
componentDidUpdate(prevProps: ParallaxProviderProps): void; | ||
@@ -13,0 +12,0 @@ componentWillUnmount(): void; |
@@ -237,5 +237,5 @@ 'use strict'; | ||
if (translateYStart.unit === '%' && translateYEnd.unit === '%') { | ||
var _layer$targetElement; | ||
var _layer$targetElement$, _layer$targetElement; | ||
var clientRect = ((_layer$targetElement = layer.targetElement) == null ? void 0 : _layer$targetElement.getBoundingClientRect()) || FALLBACK_RECT; | ||
var clientRect = (_layer$targetElement$ = (_layer$targetElement = layer.targetElement) == null ? void 0 : _layer$targetElement.getBoundingClientRect()) != null ? _layer$targetElement$ : FALLBACK_RECT; | ||
var top = Math.abs(clientRect.height * 0.01 * translateYEnd.value) * -1; | ||
@@ -252,5 +252,6 @@ var bottom = Math.abs(clientRect.height * 0.01 * translateYStart.value) * -1; | ||
var speed = layer.speed || 0; | ||
var absSpeed = Math.abs(speed) * 10 * -1; | ||
return { | ||
top: Math.abs(speed) * 10 * -1 + 'px', | ||
bottom: Math.abs(speed) * 10 * -1 + 'px' | ||
top: absSpeed + "px", | ||
bottom: absSpeed + "px" | ||
}; | ||
@@ -387,3 +388,4 @@ } | ||
scrollAxis: props.scrollAxis, | ||
scrollContainer: props.scrollContainer | ||
scrollContainer: props.scrollContainer, | ||
disabled: props.isDisabled | ||
}); | ||
@@ -395,15 +397,7 @@ return _this; | ||
_proto.componentDidMount = function componentDidMount() { | ||
if (this.props.isDisabled) { | ||
var _this$controller; | ||
(_this$controller = this.controller) == null ? void 0 : _this$controller.disableParallaxController(); | ||
} | ||
}; | ||
_proto.componentDidUpdate = function componentDidUpdate(prevProps) { | ||
if (prevProps.scrollContainer !== this.props.scrollContainer && this.props.scrollContainer) { | ||
var _this$controller2; | ||
var _this$controller; | ||
(_this$controller2 = this.controller) == null ? void 0 : _this$controller2.updateScrollContainer(this.props.scrollContainer); | ||
(_this$controller = this.controller) == null ? void 0 : _this$controller.updateScrollContainer(this.props.scrollContainer); | ||
} | ||
@@ -413,11 +407,11 @@ | ||
if (this.props.isDisabled) { | ||
var _this$controller3; | ||
var _this$controller2; | ||
(_this$controller3 = this.controller) == null ? void 0 : _this$controller3.disableParallaxController(); | ||
(_this$controller2 = this.controller) == null ? void 0 : _this$controller2.disableParallaxController(); | ||
} | ||
if (!this.props.isDisabled) { | ||
var _this$controller4; | ||
var _this$controller3; | ||
(_this$controller4 = this.controller) == null ? void 0 : _this$controller4.enableParallaxController(); | ||
(_this$controller3 = this.controller) == null ? void 0 : _this$controller3.enableParallaxController(); | ||
} | ||
@@ -424,0 +418,0 @@ } |
@@ -1,2 +0,2 @@ | ||
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("parallax-controller"),r=require("react"),n=(e=r)&&"object"==typeof e&&"default"in e?e.default:e;function a(){return(a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}function l(e,t){return(l=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function o(e,t){if(null==e)return{};var r,n,a={},l=Object.keys(e);for(n=0;n<l.length;n++)t.indexOf(r=l[n])>=0||(a[r]=e[r]);return a}var s=["disabled","easing","endScroll","onChange","onEnter","onExit","onProgressChange","opacity","rootMargin","rotate","rotateX","rotateY","rotateZ","scale","scaleX","scaleY","scaleZ","shouldAlwaysCompleteAnimation","shouldDisableScalingTranslations","speed","startScroll","targetElement","translateX","translateY"];function i(e){var t,r=e.disabled,n=e.easing,a=e.endScroll,l=e.onChange,i=e.onEnter,c=e.onExit,u=e.onProgressChange,d=e.opacity,p=e.rootMargin,f=e.rotate,h=e.rotateX,g=e.rotateY,x=e.rotateZ,m=e.scale,v=e.scaleX,b=e.scaleY,y=e.scaleZ,E=e.shouldAlwaysCompleteAnimation,P=e.shouldDisableScalingTranslations,C=e.speed,w=e.startScroll,S=e.targetElement,A=e.translateX,Y=e.translateY,M=o(e,s);return{parallaxProps:(t={disabled:r,easing:n,endScroll:a,onChange:l,onEnter:i,onExit:c,onProgressChange:u,opacity:d,rootMargin:p,rotate:f,rotateX:h,rotateY:g,rotateZ:x,scale:m,scaleX:v,scaleY:b,scaleZ:y,shouldAlwaysCompleteAnimation:E,shouldDisableScalingTranslations:P,speed:C,startScroll:w,targetElement:S,translateX:A,translateY:Y},Object.keys(t).forEach((function(e){return void 0===t[e]&&delete t[e]})),t),rest:M}}var c=n.createContext(null);function u(){var e=r.useContext(c);if("undefined"==typeof window)return null;if(!e)throw new Error("Could not find `react-scroll-parallax` context value. Please ensure the component is wrapped in a <ParallaxProvider>");return e}function d(e){var n=u(),a=r.useRef(null),l=i(e).parallaxProps;!function(e){r.useEffect((function(){if(!("undefined"==typeof window||e||e instanceof t.ParallaxController))throw new Error("Must wrap your application's <Parallax /> components in a <ParallaxProvider />.")}),[e])}(n);var o=r.useState(),s=o[0],c=o[1];return r.useEffect((function(){var e;if(!(a.current instanceof HTMLElement))throw new Error("You must assign the ref returned by the useParallax() hook to an HTML Element.");return e=null==n?void 0:n.createElement({el:a.current,props:l}),c(e),function(){e&&(null==n||n.removeElementById(e.id))}}),[]),r.useEffect((function(){s&&(e.disabled?(null==n||n.resetElementStyles(s),null==n||n.updateElementPropsById(s.id,l)):null==n||n.updateElementPropsById(s.id,l))}),[e.disabled,e.easing,e.endScroll,e.onChange,e.onEnter,e.onExit,e.onProgressChange,e.opacity,e.rootMargin,e.rotate,e.rotateX,e.rotateY,e.rotateZ,e.scale,e.scaleX,e.scaleY,e.scaleZ,e.shouldAlwaysCompleteAnimation,e.shouldDisableScalingTranslations,e.speed,e.startScroll,e.targetElement,e.translateX,e.translateY]),{ref:a,controller:n,element:s}}var p={height:0},f=["children","disabled","style","expanded","image","testId"],h={position:"absolute",top:0,left:0,right:0,bottom:0},g=function(e){var r,l=i(e),s=l.parallaxProps,c=l.rest,u=c.style,g=c.expanded,x=void 0===g||g,m=c.testId,v=o(c,f),b=(r=e).image?{backgroundImage:"url("+r.image+")",backgroundPosition:"center",backgroundSize:"cover"}:{},y=x?function(e){if(Array.isArray(e.translateY)){var r=t.parseValueAndUnit(e.translateY[0]),n=t.parseValueAndUnit(e.translateY[1]);if("px"===r.unit&&"px"===n.unit)return{top:-1*Math.abs(n.value)+"px",bottom:-1*Math.abs(r.value)+"px"};if("%"===r.unit&&"%"===n.unit){var a,l=(null==(a=e.targetElement)?void 0:a.getBoundingClientRect())||p;return{top:-1*Math.abs(.01*l.height*n.value)+"px",bottom:-1*Math.abs(.01*l.height*r.value)+"px"}}}if(e.speed){var o=e.speed||0;return{top:10*Math.abs(o)*-1+"px",bottom:10*Math.abs(o)*-1+"px"}}return{}}(e):{},E=d(a({targetElement:e.targetElement,shouldDisableScalingTranslations:!0},s));return n.createElement("div",Object.assign({"data-testid":m,ref:E.ref,style:a({},b,h,y,u)},v),c.children)},x=["disabled","style","layers"],m={position:"relative",overflow:"hidden",width:"100%"},v=function(e){var r,a;function o(r){var n;return(n=e.call(this,r)||this).controller="undefined"==typeof window?null:t.ParallaxController.init({scrollAxis:r.scrollAxis,scrollContainer:r.scrollContainer}),n}a=e,(r=o).prototype=Object.create(a.prototype),r.prototype.constructor=r,l(r,a);var s=o.prototype;return s.componentDidMount=function(){var e;this.props.isDisabled&&(null==(e=this.controller)||e.disableParallaxController())},s.componentDidUpdate=function(e){var t,r,n;e.scrollContainer!==this.props.scrollContainer&&this.props.scrollContainer&&(null==(t=this.controller)||t.updateScrollContainer(this.props.scrollContainer)),e.isDisabled!==this.props.isDisabled&&(this.props.isDisabled&&(null==(r=this.controller)||r.disableParallaxController()),this.props.isDisabled||null==(n=this.controller)||n.enableParallaxController())},s.componentWillUnmount=function(){this.controller=this.controller.destroy()},s.render=function(){return n.createElement(c.Provider,{value:this.controller},this.props.children)},o}(r.Component);v.defaultProps={scrollAxis:t.ScrollAxis.vertical},Object.defineProperty(exports,"EasingPreset",{enumerable:!0,get:function(){return t.EasingPreset}}),exports.Parallax=function(e){var t=i(e),r=t.rest,a=d(t.parallaxProps);return n.createElement("div",Object.assign({ref:a.ref},r),e.children)},exports.ParallaxBanner=function(e){var t=r.useState(null),l=t[0],s=t[1],i=r.useRef(null);r.useEffect((function(){s(i.current)}),[]);var c=e.style,u=e.layers,d=void 0===u?[]:u,p=o(e,x);return n.createElement("div",Object.assign({ref:i,style:a({},m,c)},p),l&&d&&d.length>0?d.map((function(e,t){return n.createElement(g,Object.assign({},e,{targetElement:l,key:"layer-"+t,testId:"layer-"+t}))})):null,l?n.Children.map(e.children,(function(e){return(null==e?void 0:e.type)===g?n.cloneElement(e,{targetElement:l}):e})):null)},exports.ParallaxBannerLayer=g,exports.ParallaxContext=c,exports.ParallaxProvider=v,exports.useParallax=d,exports.useParallaxController=u; | ||
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("parallax-controller"),r=require("react"),n=(e=r)&&"object"==typeof e&&"default"in e?e.default:e;function a(){return(a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}function l(e,t){return(l=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function o(e,t){if(null==e)return{};var r,n,a={},l=Object.keys(e);for(n=0;n<l.length;n++)t.indexOf(r=l[n])>=0||(a[r]=e[r]);return a}var s=["disabled","easing","endScroll","onChange","onEnter","onExit","onProgressChange","opacity","rootMargin","rotate","rotateX","rotateY","rotateZ","scale","scaleX","scaleY","scaleZ","shouldAlwaysCompleteAnimation","shouldDisableScalingTranslations","speed","startScroll","targetElement","translateX","translateY"];function i(e){var t,r=e.disabled,n=e.easing,a=e.endScroll,l=e.onChange,i=e.onEnter,c=e.onExit,u=e.onProgressChange,d=e.opacity,p=e.rootMargin,f=e.rotate,h=e.rotateX,g=e.rotateY,x=e.rotateZ,m=e.scale,v=e.scaleX,b=e.scaleY,y=e.scaleZ,E=e.shouldAlwaysCompleteAnimation,P=e.shouldDisableScalingTranslations,C=e.speed,w=e.startScroll,S=e.targetElement,A=e.translateX,Y=e.translateY,O=o(e,s);return{parallaxProps:(t={disabled:r,easing:n,endScroll:a,onChange:l,onEnter:i,onExit:c,onProgressChange:u,opacity:d,rootMargin:p,rotate:f,rotateX:h,rotateY:g,rotateZ:x,scale:m,scaleX:v,scaleY:b,scaleZ:y,shouldAlwaysCompleteAnimation:E,shouldDisableScalingTranslations:P,speed:C,startScroll:w,targetElement:S,translateX:A,translateY:Y},Object.keys(t).forEach((function(e){return void 0===t[e]&&delete t[e]})),t),rest:O}}var c=n.createContext(null);function u(){var e=r.useContext(c);if("undefined"==typeof window)return null;if(!e)throw new Error("Could not find `react-scroll-parallax` context value. Please ensure the component is wrapped in a <ParallaxProvider>");return e}function d(e){var n=u(),a=r.useRef(null),l=i(e).parallaxProps;!function(e){r.useEffect((function(){if(!("undefined"==typeof window||e||e instanceof t.ParallaxController))throw new Error("Must wrap your application's <Parallax /> components in a <ParallaxProvider />.")}),[e])}(n);var o=r.useState(),s=o[0],c=o[1];return r.useEffect((function(){var e;if(!(a.current instanceof HTMLElement))throw new Error("You must assign the ref returned by the useParallax() hook to an HTML Element.");return e=null==n?void 0:n.createElement({el:a.current,props:l}),c(e),function(){e&&(null==n||n.removeElementById(e.id))}}),[]),r.useEffect((function(){s&&(e.disabled?(null==n||n.resetElementStyles(s),null==n||n.updateElementPropsById(s.id,l)):null==n||n.updateElementPropsById(s.id,l))}),[e.disabled,e.easing,e.endScroll,e.onChange,e.onEnter,e.onExit,e.onProgressChange,e.opacity,e.rootMargin,e.rotate,e.rotateX,e.rotateY,e.rotateZ,e.scale,e.scaleX,e.scaleY,e.scaleZ,e.shouldAlwaysCompleteAnimation,e.shouldDisableScalingTranslations,e.speed,e.startScroll,e.targetElement,e.translateX,e.translateY]),{ref:a,controller:n,element:s}}var p={height:0},f=["children","disabled","style","expanded","image","testId"],h={position:"absolute",top:0,left:0,right:0,bottom:0},g=function(e){var r,l=i(e),s=l.parallaxProps,c=l.rest,u=c.style,g=c.expanded,x=void 0===g||g,m=c.testId,v=o(c,f),b=(r=e).image?{backgroundImage:"url("+r.image+")",backgroundPosition:"center",backgroundSize:"cover"}:{},y=x?function(e){if(Array.isArray(e.translateY)){var r=t.parseValueAndUnit(e.translateY[0]),n=t.parseValueAndUnit(e.translateY[1]);if("px"===r.unit&&"px"===n.unit)return{top:-1*Math.abs(n.value)+"px",bottom:-1*Math.abs(r.value)+"px"};if("%"===r.unit&&"%"===n.unit){var a,l,o=null!=(a=null==(l=e.targetElement)?void 0:l.getBoundingClientRect())?a:p;return{top:-1*Math.abs(.01*o.height*n.value)+"px",bottom:-1*Math.abs(.01*o.height*r.value)+"px"}}}if(e.speed){var s=10*Math.abs(e.speed||0)*-1;return{top:s+"px",bottom:s+"px"}}return{}}(e):{},E=d(a({targetElement:e.targetElement,shouldDisableScalingTranslations:!0},s));return n.createElement("div",Object.assign({"data-testid":m,ref:E.ref,style:a({},b,h,y,u)},v),c.children)},x=["disabled","style","layers"],m={position:"relative",overflow:"hidden",width:"100%"},v=function(e){var r,a;function o(r){var n;return(n=e.call(this,r)||this).controller="undefined"==typeof window?null:t.ParallaxController.init({scrollAxis:r.scrollAxis,scrollContainer:r.scrollContainer,disabled:r.isDisabled}),n}a=e,(r=o).prototype=Object.create(a.prototype),r.prototype.constructor=r,l(r,a);var s=o.prototype;return s.componentDidUpdate=function(e){var t,r,n;e.scrollContainer!==this.props.scrollContainer&&this.props.scrollContainer&&(null==(t=this.controller)||t.updateScrollContainer(this.props.scrollContainer)),e.isDisabled!==this.props.isDisabled&&(this.props.isDisabled&&(null==(r=this.controller)||r.disableParallaxController()),this.props.isDisabled||null==(n=this.controller)||n.enableParallaxController())},s.componentWillUnmount=function(){this.controller=this.controller.destroy()},s.render=function(){return n.createElement(c.Provider,{value:this.controller},this.props.children)},o}(r.Component);v.defaultProps={scrollAxis:t.ScrollAxis.vertical},Object.defineProperty(exports,"EasingPreset",{enumerable:!0,get:function(){return t.EasingPreset}}),exports.Parallax=function(e){var t=i(e),r=t.rest,a=d(t.parallaxProps);return n.createElement("div",Object.assign({ref:a.ref},r),e.children)},exports.ParallaxBanner=function(e){var t=r.useState(null),l=t[0],s=t[1],i=r.useRef(null);r.useEffect((function(){s(i.current)}),[]);var c=e.style,u=e.layers,d=void 0===u?[]:u,p=o(e,x);return n.createElement("div",Object.assign({ref:i,style:a({},m,c)},p),l&&d&&d.length>0?d.map((function(e,t){return n.createElement(g,Object.assign({},e,{targetElement:l,key:"layer-"+t,testId:"layer-"+t}))})):null,l?n.Children.map(e.children,(function(e){return(null==e?void 0:e.type)===g?n.cloneElement(e,{targetElement:l}):e})):null)},exports.ParallaxBannerLayer=g,exports.ParallaxContext=c,exports.ParallaxProvider=v,exports.useParallax=d,exports.useParallaxController=u; | ||
//# sourceMappingURL=react-scroll-parallax.cjs.production.min.js.map |
@@ -231,5 +231,5 @@ import { ParallaxController, parseValueAndUnit, ScrollAxis } from 'parallax-controller'; | ||
if (translateYStart.unit === '%' && translateYEnd.unit === '%') { | ||
var _layer$targetElement; | ||
var _layer$targetElement$, _layer$targetElement; | ||
var clientRect = ((_layer$targetElement = layer.targetElement) == null ? void 0 : _layer$targetElement.getBoundingClientRect()) || FALLBACK_RECT; | ||
var clientRect = (_layer$targetElement$ = (_layer$targetElement = layer.targetElement) == null ? void 0 : _layer$targetElement.getBoundingClientRect()) != null ? _layer$targetElement$ : FALLBACK_RECT; | ||
var top = Math.abs(clientRect.height * 0.01 * translateYEnd.value) * -1; | ||
@@ -246,5 +246,6 @@ var bottom = Math.abs(clientRect.height * 0.01 * translateYStart.value) * -1; | ||
var speed = layer.speed || 0; | ||
var absSpeed = Math.abs(speed) * 10 * -1; | ||
return { | ||
top: Math.abs(speed) * 10 * -1 + 'px', | ||
bottom: Math.abs(speed) * 10 * -1 + 'px' | ||
top: absSpeed + "px", | ||
bottom: absSpeed + "px" | ||
}; | ||
@@ -381,3 +382,4 @@ } | ||
scrollAxis: props.scrollAxis, | ||
scrollContainer: props.scrollContainer | ||
scrollContainer: props.scrollContainer, | ||
disabled: props.isDisabled | ||
}); | ||
@@ -389,15 +391,7 @@ return _this; | ||
_proto.componentDidMount = function componentDidMount() { | ||
if (this.props.isDisabled) { | ||
var _this$controller; | ||
(_this$controller = this.controller) == null ? void 0 : _this$controller.disableParallaxController(); | ||
} | ||
}; | ||
_proto.componentDidUpdate = function componentDidUpdate(prevProps) { | ||
if (prevProps.scrollContainer !== this.props.scrollContainer && this.props.scrollContainer) { | ||
var _this$controller2; | ||
var _this$controller; | ||
(_this$controller2 = this.controller) == null ? void 0 : _this$controller2.updateScrollContainer(this.props.scrollContainer); | ||
(_this$controller = this.controller) == null ? void 0 : _this$controller.updateScrollContainer(this.props.scrollContainer); | ||
} | ||
@@ -407,11 +401,11 @@ | ||
if (this.props.isDisabled) { | ||
var _this$controller3; | ||
var _this$controller2; | ||
(_this$controller3 = this.controller) == null ? void 0 : _this$controller3.disableParallaxController(); | ||
(_this$controller2 = this.controller) == null ? void 0 : _this$controller2.disableParallaxController(); | ||
} | ||
if (!this.props.isDisabled) { | ||
var _this$controller4; | ||
var _this$controller3; | ||
(_this$controller4 = this.controller) == null ? void 0 : _this$controller4.enableParallaxController(); | ||
(_this$controller3 = this.controller) == null ? void 0 : _this$controller3.enableParallaxController(); | ||
} | ||
@@ -418,0 +412,0 @@ } |
{ | ||
"name": "react-scroll-parallax", | ||
"version": "3.4.1", | ||
"version": "3.4.2", | ||
"description": "React hooks and components to create parallax scroll effects for banners, images or any other DOM elements.", | ||
@@ -5,0 +5,0 @@ "keywords": [ |
@@ -8,3 +8,8 @@ import { parseValueAndUnit } from 'parallax-controller'; | ||
export function getExpandedStyle(layer: BannerLayer) { | ||
type ExpandedStyle = { | ||
top?: string; | ||
bottom?: string; | ||
}; | ||
export function getExpandedStyle(layer: BannerLayer): ExpandedStyle { | ||
if (Array.isArray(layer.translateY)) { | ||
@@ -23,3 +28,3 @@ const translateYStart = parseValueAndUnit(layer.translateY[0]); | ||
const clientRect = | ||
layer.targetElement?.getBoundingClientRect() || FALLBACK_RECT; | ||
layer.targetElement?.getBoundingClientRect() ?? FALLBACK_RECT; | ||
const top = Math.abs(clientRect.height * 0.01 * translateYEnd.value) * -1; | ||
@@ -34,11 +39,14 @@ const bottom = | ||
} | ||
if (layer.speed) { | ||
const speed = layer.speed || 0; | ||
const absSpeed = Math.abs(speed) * 10 * -1; | ||
return { | ||
top: Math.abs(speed) * 10 * -1 + 'px', | ||
bottom: Math.abs(speed) * 10 * -1 + 'px', | ||
top: `${absSpeed}px`, | ||
bottom: `${absSpeed}px`, | ||
}; | ||
} | ||
return {}; | ||
} |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Environment variable access
Supply chain riskPackage accesses environment variables, which may be a sign of credential stuffing or data theft.
Found 1 instance in 1 package
Environment variable access
Supply chain riskPackage accesses environment variables, which may be a sign of credential stuffing or data theft.
Found 1 instance in 1 package
1
202484
3028