react-scroll-parallax
Advanced tools
Comparing version 3.3.1 to 3.3.2
@@ -344,3 +344,3 @@ 'use strict'; | ||
if (item.type === ParallaxBannerLayer) { | ||
if ((item == null ? void 0 : item.type) === ParallaxBannerLayer) { | ||
var clone = React__default.cloneElement(item, { | ||
@@ -347,0 +347,0 @@ targetElement: targetElement |
@@ -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,y=e.scaleY,b=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:y,scaleZ:b,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),y=(r=e).image?{backgroundImage:"url("+r.image+")",backgroundPosition:"center",backgroundSize:"cover"}:{},b=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({},y,h,b,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.componentDidUpdate=function(e){e.scrollContainer!==this.props.scrollContainer&&this.controller.updateScrollContainer(this.props.scrollContainer)},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 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,y=e.scaleY,b=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:y,scaleZ:b,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),y=(r=e).image?{backgroundImage:"url("+r.image+")",backgroundPosition:"center",backgroundSize:"cover"}:{},b=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({},y,h,b,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.componentDidUpdate=function(e){e.scrollContainer!==this.props.scrollContainer&&this.controller.updateScrollContainer(this.props.scrollContainer)},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 |
@@ -338,3 +338,3 @@ import { ParallaxController, parseValueAndUnit, ScrollAxis } from 'parallax-controller'; | ||
if (item.type === ParallaxBannerLayer) { | ||
if ((item == null ? void 0 : item.type) === ParallaxBannerLayer) { | ||
var clone = React.cloneElement(item, { | ||
@@ -341,0 +341,0 @@ targetElement: targetElement |
{ | ||
"name": "react-scroll-parallax", | ||
"version": "3.3.1", | ||
"version": "3.3.2", | ||
"description": "React hooks and components to create parallax scroll effects for banners, images or any other DOM elements.", | ||
@@ -5,0 +5,0 @@ "keywords": [ |
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
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
197114