@plasmicpkgs/react-scroll-parallax 0.0.8 → 0.0.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/react-scroll-parallax.cjs.development.js +11 -3
- package/dist/react-scroll-parallax.cjs.development.js.map +1 -1
- package/dist/react-scroll-parallax.cjs.production.min.js +1 -1
- package/dist/react-scroll-parallax.cjs.production.min.js.map +1 -1
- package/dist/react-scroll-parallax.esm.js +11 -3
- package/dist/react-scroll-parallax.esm.js.map +1 -1
- package/package.json +2 -2
|
@@ -140,15 +140,23 @@ var parallaxProviderMeta = {
|
|
|
140
140
|
importName: "ParallaxProviderWrapper",
|
|
141
141
|
importPath: "@plasmicpkgs/react-scroll-parallax",
|
|
142
142
|
props: {
|
|
143
|
-
children:
|
|
143
|
+
children: {
|
|
144
|
+
type: "slot",
|
|
145
|
+
defaultValue: {
|
|
146
|
+
type: "vbox",
|
|
147
|
+
children: [{
|
|
148
|
+
type: "component",
|
|
149
|
+
name: "ParallaxWrapper"
|
|
150
|
+
}]
|
|
151
|
+
}
|
|
152
|
+
},
|
|
144
153
|
scrollAxis: {
|
|
145
154
|
type: "choice",
|
|
146
155
|
description: "Scroll axis for setting horizontal/vertical scrolling",
|
|
147
156
|
options: ["vertical", "horizontal"],
|
|
148
157
|
displayName: "Scroll Axis"
|
|
149
158
|
}
|
|
150
|
-
}
|
|
151
|
-
parentComponentName: "hostless-scroll-parallax"
|
|
159
|
+
}
|
|
152
160
|
};
|
|
153
161
|
function registerParallaxProvider(loader, customParallaxProviderMeta) {
|
|
154
162
|
if (loader) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"react-scroll-parallax.cjs.development.js","sources":["../src/ParallaxWrapper.tsx","../src/ParallaxProvider.tsx"],"sourcesContent":["import { PlasmicCanvasContext } from \"@plasmicapp/host\";\nimport registerComponent, {\n ComponentMeta,\n} from \"@plasmicapp/host/registerComponent\";\nimport React, { useContext } from \"react\";\nimport { Parallax, ParallaxContext } from \"react-scroll-parallax\";\n\nexport interface ParallaxWrapperProps {\n speed?: number;\n disabled?: boolean;\n previewInEditor?: boolean;\n children: React.ReactNode;\n className?: string;\n}\n\nexport default function ParallaxWrapper({\n speed,\n disabled,\n previewInEditor,\n children,\n className,\n}: ParallaxWrapperProps) {\n const inEditor = useContext(PlasmicCanvasContext);\n const hasContext = useContext(ParallaxContext) != null;\n if (!hasContext) {\n throw new Error(\n \"Scroll Parallax can only be instantiated somewhere inside the Parallax Provider\"\n );\n }\n return (\n <Parallax\n disabled={disabled || (inEditor && !previewInEditor)}\n speed={speed}\n className={className}\n >\n {children}\n </Parallax>\n );\n}\n\nexport const parallaxWrapperMeta: ComponentMeta<ParallaxWrapperProps> = {\n name: \"hostless-scroll-parallax\",\n displayName: \"Scroll Parallax\",\n importName: \"ParallaxWrapper\",\n importPath: \"@plasmicpkgs/react-scroll-parallax\",\n props: {\n children: {\n type: \"slot\",\n defaultValue: {\n type: \"img\",\n src: \"https://placekitten.com/300/200\",\n style: {\n maxWidth: \"100%\",\n },\n },\n },\n speed: {\n type: \"number\",\n description:\n \"How much to speed up or slow down this element while scrolling. Try -20 for slower, 20 for faster.\",\n defaultValue: 20,\n },\n disabled: {\n type: \"boolean\",\n description: \"Disables the parallax effect.\",\n },\n previewInEditor: {\n type: \"boolean\",\n description: \"Enable the parallax effect in the editor.\",\n },\n },\n defaultStyles: {\n maxWidth: \"100%\",\n },\n};\n\nexport function registerParallaxWrapper(\n loader?: { registerComponent: typeof registerComponent },\n customParallaxWrapperMeta?: ComponentMeta<ParallaxWrapperProps>\n) {\n if (loader) {\n loader.registerComponent(\n ParallaxWrapper,\n customParallaxWrapperMeta ?? parallaxWrapperMeta\n );\n } else {\n registerComponent(\n ParallaxWrapper,\n customParallaxWrapperMeta ?? parallaxWrapperMeta\n );\n }\n}\n","import registerComponent, {\n ComponentMeta,\n} from \"@plasmicapp/host/registerComponent\";\nimport React, { useEffect, useRef } from \"react\";\nimport { ParallaxProvider, useController } from \"react-scroll-parallax\";\nimport { ParallaxProviderProps } from \"react-scroll-parallax/dist/components/ParallaxProvider/types\";\nimport ResizeObserver from \"resize-observer-polyfill\";\n\n/**\n * This is required to ensure the parallax scrolling works correctly, since if\n * (for instance) images load after the parallax wrapper has calculated the\n * dimensions of the space, it will result in incorrect parallax scrolling\n * amounts.\n *\n * This is not great since we need to mutation-observe the whole section of the\n * document (which may be large), but we can probably optimize this in the\n * future.\n */\nfunction ParallaxCacheUpdate({ children }: React.PropsWithChildren<{}>) {\n const parallaxController = useController();\n const ref = useRef<HTMLDivElement | null>(null);\n\n useEffect(() => {\n if (ref.current?.parentElement) {\n const targetNode = ref.current.parentElement;\n const observer = new ResizeObserver(() => {\n if (parallaxController) {\n parallaxController.update();\n }\n });\n observer.observe(targetNode);\n return () => {\n observer.disconnect();\n };\n }\n return () => {};\n }, [ref.current]);\n\n return (\n <div style={{ display: \"contents\" }} ref={ref}>\n {children}\n </div>\n );\n}\n\nexport function ParallaxProviderWrapper({\n children,\n ...props\n}: React.PropsWithChildren<ParallaxProviderProps>) {\n return (\n <ParallaxProvider {...props}>\n <ParallaxCacheUpdate>{children}</ParallaxCacheUpdate>\n </ParallaxProvider>\n );\n}\n\nexport const parallaxProviderMeta: ComponentMeta<ParallaxProviderProps> = {\n name: \"hostless-parallax-provider\",\n displayName: \"Parallax Provider\",\n importName: \"ParallaxProviderWrapper\",\n importPath: \"@plasmicpkgs/react-scroll-parallax\",\n props: {\n children: \"slot\",\n scrollAxis: {\n type: \"choice\",\n description: \"Scroll axis for setting horizontal/vertical scrolling\",\n options: [\"vertical\", \"horizontal\"],\n displayName: \"Scroll Axis\",\n },\n },\n
|
|
1
|
+
{"version":3,"file":"react-scroll-parallax.cjs.development.js","sources":["../src/ParallaxWrapper.tsx","../src/ParallaxProvider.tsx"],"sourcesContent":["import { PlasmicCanvasContext } from \"@plasmicapp/host\";\nimport registerComponent, {\n ComponentMeta,\n} from \"@plasmicapp/host/registerComponent\";\nimport React, { useContext } from \"react\";\nimport { Parallax, ParallaxContext } from \"react-scroll-parallax\";\n\nexport interface ParallaxWrapperProps {\n speed?: number;\n disabled?: boolean;\n previewInEditor?: boolean;\n children: React.ReactNode;\n className?: string;\n}\n\nexport default function ParallaxWrapper({\n speed,\n disabled,\n previewInEditor,\n children,\n className,\n}: ParallaxWrapperProps) {\n const inEditor = useContext(PlasmicCanvasContext);\n const hasContext = useContext(ParallaxContext) != null;\n if (!hasContext) {\n throw new Error(\n \"Scroll Parallax can only be instantiated somewhere inside the Parallax Provider\"\n );\n }\n return (\n <Parallax\n disabled={disabled || (inEditor && !previewInEditor)}\n speed={speed}\n className={className}\n >\n {children}\n </Parallax>\n );\n}\n\nexport const parallaxWrapperMeta: ComponentMeta<ParallaxWrapperProps> = {\n name: \"hostless-scroll-parallax\",\n displayName: \"Scroll Parallax\",\n importName: \"ParallaxWrapper\",\n importPath: \"@plasmicpkgs/react-scroll-parallax\",\n props: {\n children: {\n type: \"slot\",\n defaultValue: {\n type: \"img\",\n src: \"https://placekitten.com/300/200\",\n style: {\n maxWidth: \"100%\",\n },\n },\n },\n speed: {\n type: \"number\",\n description:\n \"How much to speed up or slow down this element while scrolling. Try -20 for slower, 20 for faster.\",\n defaultValue: 20,\n },\n disabled: {\n type: \"boolean\",\n description: \"Disables the parallax effect.\",\n },\n previewInEditor: {\n type: \"boolean\",\n description: \"Enable the parallax effect in the editor.\",\n },\n },\n defaultStyles: {\n maxWidth: \"100%\",\n },\n};\n\nexport function registerParallaxWrapper(\n loader?: { registerComponent: typeof registerComponent },\n customParallaxWrapperMeta?: ComponentMeta<ParallaxWrapperProps>\n) {\n if (loader) {\n loader.registerComponent(\n ParallaxWrapper,\n customParallaxWrapperMeta ?? parallaxWrapperMeta\n );\n } else {\n registerComponent(\n ParallaxWrapper,\n customParallaxWrapperMeta ?? parallaxWrapperMeta\n );\n }\n}\n","import registerComponent, {\n ComponentMeta,\n} from \"@plasmicapp/host/registerComponent\";\nimport React, { useEffect, useRef } from \"react\";\nimport { ParallaxProvider, useController } from \"react-scroll-parallax\";\nimport { ParallaxProviderProps } from \"react-scroll-parallax/dist/components/ParallaxProvider/types\";\nimport ResizeObserver from \"resize-observer-polyfill\";\n\n/**\n * This is required to ensure the parallax scrolling works correctly, since if\n * (for instance) images load after the parallax wrapper has calculated the\n * dimensions of the space, it will result in incorrect parallax scrolling\n * amounts.\n *\n * This is not great since we need to mutation-observe the whole section of the\n * document (which may be large), but we can probably optimize this in the\n * future.\n */\nfunction ParallaxCacheUpdate({ children }: React.PropsWithChildren<{}>) {\n const parallaxController = useController();\n const ref = useRef<HTMLDivElement | null>(null);\n\n useEffect(() => {\n if (ref.current?.parentElement) {\n const targetNode = ref.current.parentElement;\n const observer = new ResizeObserver(() => {\n if (parallaxController) {\n parallaxController.update();\n }\n });\n observer.observe(targetNode);\n return () => {\n observer.disconnect();\n };\n }\n return () => {};\n }, [ref.current]);\n\n return (\n <div style={{ display: \"contents\" }} ref={ref}>\n {children}\n </div>\n );\n}\n\nexport function ParallaxProviderWrapper({\n children,\n ...props\n}: React.PropsWithChildren<ParallaxProviderProps>) {\n return (\n <ParallaxProvider {...props}>\n <ParallaxCacheUpdate>{children}</ParallaxCacheUpdate>\n </ParallaxProvider>\n );\n}\n\nexport const parallaxProviderMeta: ComponentMeta<ParallaxProviderProps> = {\n name: \"hostless-parallax-provider\",\n displayName: \"Parallax Provider\",\n importName: \"ParallaxProviderWrapper\",\n importPath: \"@plasmicpkgs/react-scroll-parallax\",\n props: {\n children: {\n type: \"slot\",\n defaultValue: {\n type: \"vbox\",\n children: [\n {\n type: \"component\",\n name: \"ParallaxWrapper\",\n },\n ],\n },\n },\n scrollAxis: {\n type: \"choice\",\n description: \"Scroll axis for setting horizontal/vertical scrolling\",\n options: [\"vertical\", \"horizontal\"],\n displayName: \"Scroll Axis\",\n },\n },\n};\n\nexport function registerParallaxProvider(\n loader?: { registerComponent: typeof registerComponent },\n customParallaxProviderMeta?: ComponentMeta<ParallaxProviderProps>\n) {\n if (loader) {\n loader.registerComponent(\n ParallaxProviderWrapper,\n customParallaxProviderMeta ?? parallaxProviderMeta\n );\n } else {\n registerComponent(\n ParallaxProviderWrapper,\n customParallaxProviderMeta ?? parallaxProviderMeta\n );\n }\n}\n"],"names":["ParallaxWrapper","speed","disabled","previewInEditor","children","className","inEditor","useContext","PlasmicCanvasContext","hasContext","ParallaxContext","Error","React","Parallax","parallaxWrapperMeta","name","displayName","importName","importPath","props","type","defaultValue","src","style","maxWidth","description","defaultStyles","registerParallaxWrapper","loader","customParallaxWrapperMeta","registerComponent","ParallaxCacheUpdate","parallaxController","useController","ref","useRef","useEffect","current","parentElement","targetNode","observer","ResizeObserver","update","observe","disconnect","display","ParallaxProviderWrapper","ParallaxProvider","parallaxProviderMeta","scrollAxis","options","registerParallaxProvider","customParallaxProviderMeta"],"mappings":";;;;;;;;;;;;;SAewBA;MACtBC,aAAAA;MACAC,gBAAAA;MACAC,uBAAAA;MACAC,gBAAAA;MACAC,iBAAAA;AAEA,MAAMC,QAAQ,GAAGC,gBAAU,CAACC,yBAAD,CAA3B;AACA,MAAMC,UAAU,GAAGF,gBAAU,CAACG,mCAAD,CAAV,IAA+B,IAAlD;;AACA,MAAI,CAACD,UAAL,EAAiB;AACf,UAAM,IAAIE,KAAJ,CACJ,iFADI,CAAN;AAGD;;AACD,SACEC,4BAAA,CAACC,4BAAD;AACEX,IAAAA,QAAQ,EAAEA,QAAQ,IAAKI,QAAQ,IAAI,CAACH;AACpCF,IAAAA,KAAK,EAAEA;AACPI,IAAAA,SAAS,EAAEA;GAHb,EAKGD,QALH,CADF;AASD;IAEYU,mBAAmB,GAAwC;AACtEC,EAAAA,IAAI,EAAE,0BADgE;AAEtEC,EAAAA,WAAW,EAAE,iBAFyD;AAGtEC,EAAAA,UAAU,EAAE,iBAH0D;AAItEC,EAAAA,UAAU,EAAE,oCAJ0D;AAKtEC,EAAAA,KAAK,EAAE;AACLf,IAAAA,QAAQ,EAAE;AACRgB,MAAAA,IAAI,EAAE,MADE;AAERC,MAAAA,YAAY,EAAE;AACZD,QAAAA,IAAI,EAAE,KADM;AAEZE,QAAAA,GAAG,EAAE,iCAFO;AAGZC,QAAAA,KAAK,EAAE;AACLC,UAAAA,QAAQ,EAAE;AADL;AAHK;AAFN,KADL;AAWLvB,IAAAA,KAAK,EAAE;AACLmB,MAAAA,IAAI,EAAE,QADD;AAELK,MAAAA,WAAW,EACT,oGAHG;AAILJ,MAAAA,YAAY,EAAE;AAJT,KAXF;AAiBLnB,IAAAA,QAAQ,EAAE;AACRkB,MAAAA,IAAI,EAAE,SADE;AAERK,MAAAA,WAAW,EAAE;AAFL,KAjBL;AAqBLtB,IAAAA,eAAe,EAAE;AACfiB,MAAAA,IAAI,EAAE,SADS;AAEfK,MAAAA,WAAW,EAAE;AAFE;AArBZ,GAL+D;AA+BtEC,EAAAA,aAAa,EAAE;AACbF,IAAAA,QAAQ,EAAE;AADG;AA/BuD;SAoCxDG,wBACdC,QACAC;AAEA,MAAID,MAAJ,EAAY;AACVA,IAAAA,MAAM,CAACE,iBAAP,CACE9B,eADF,EAEE6B,yBAFF,WAEEA,yBAFF,GAE+Bf,mBAF/B;AAID,GALD,MAKO;AACLgB,IAAAA,iBAAiB,CACf9B,eADe,EAEf6B,yBAFe,WAEfA,yBAFe,GAEcf,mBAFd,CAAjB;AAID;AACF;;;;;;;;;;;;;;;;;ACnFD;;;;;;;;;;;AAUA,SAASiB,mBAAT;MAA+B3B,gBAAAA;AAC7B,MAAM4B,kBAAkB,GAAGC,iCAAa,EAAxC;AACA,MAAMC,GAAG,GAAGC,YAAM,CAAwB,IAAxB,CAAlB;AAEAC,EAAAA,eAAS,CAAC;;;AACR,wBAAIF,GAAG,CAACG,OAAR,aAAI,aAAaC,aAAjB,EAAgC;AAC9B,UAAMC,UAAU,GAAGL,GAAG,CAACG,OAAJ,CAAYC,aAA/B;AACA,UAAME,QAAQ,GAAG,IAAIC,cAAJ,CAAmB;AAClC,YAAIT,kBAAJ,EAAwB;AACtBA,UAAAA,kBAAkB,CAACU,MAAnB;AACD;AACF,OAJgB,CAAjB;AAKAF,MAAAA,QAAQ,CAACG,OAAT,CAAiBJ,UAAjB;AACA,aAAO;AACLC,QAAAA,QAAQ,CAACI,UAAT;AACD,OAFD;AAGD;;AACD,WAAO,cAAP;AACD,GAdQ,EAcN,CAACV,GAAG,CAACG,OAAL,CAdM,CAAT;AAgBA,SACEzB,4BAAA,MAAA;AAAKW,IAAAA,KAAK,EAAE;AAAEsB,MAAAA,OAAO,EAAE;AAAX;AAAyBX,IAAAA,GAAG,EAAEA;GAA1C,EACG9B,QADH,CADF;AAKD;;AAED,SAAgB0C;MACd1C,iBAAAA;MACGe;;AAEH,SACEP,4BAAA,CAACmC,oCAAD,oBAAsB5B,MAAtB,EACEP,4BAAA,CAACmB,mBAAD,MAAA,EAAsB3B,QAAtB,CADF,CADF;AAKD;AAED,IAAa4C,oBAAoB,GAAyC;AACxEjC,EAAAA,IAAI,EAAE,4BADkE;AAExEC,EAAAA,WAAW,EAAE,mBAF2D;AAGxEC,EAAAA,UAAU,EAAE,yBAH4D;AAIxEC,EAAAA,UAAU,EAAE,oCAJ4D;AAKxEC,EAAAA,KAAK,EAAE;AACLf,IAAAA,QAAQ,EAAE;AACRgB,MAAAA,IAAI,EAAE,MADE;AAERC,MAAAA,YAAY,EAAE;AACZD,QAAAA,IAAI,EAAE,MADM;AAEZhB,QAAAA,QAAQ,EAAE,CACR;AACEgB,UAAAA,IAAI,EAAE,WADR;AAEEL,UAAAA,IAAI,EAAE;AAFR,SADQ;AAFE;AAFN,KADL;AAaLkC,IAAAA,UAAU,EAAE;AACV7B,MAAAA,IAAI,EAAE,QADI;AAEVK,MAAAA,WAAW,EAAE,uDAFH;AAGVyB,MAAAA,OAAO,EAAE,CAAC,UAAD,EAAa,YAAb,CAHC;AAIVlC,MAAAA,WAAW,EAAE;AAJH;AAbP;AALiE,CAAnE;AA2BP,SAAgBmC,yBACdvB,QACAwB;AAEA,MAAIxB,MAAJ,EAAY;AACVA,IAAAA,MAAM,CAACE,iBAAP,CACEgB,uBADF,EAEEM,0BAFF,WAEEA,0BAFF,GAEgCJ,oBAFhC;AAID,GALD,MAKO;AACLlB,IAAAA,iBAAiB,CACfgB,uBADe,EAEfM,0BAFe,WAEfA,0BAFe,GAEeJ,oBAFf,CAAjB;AAID;AACF;;;;;;;;;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var r=require("@plasmicapp/host"),a=e(require("@plasmicapp/host/registerComponent")),l=require("react"),t=e(l),n=require("react-scroll-parallax"),o=e(require("resize-observer-polyfill"));function i(e){var a=e.speed,o=e.disabled,i=e.previewInEditor,s=e.children,p=e.className,c=l.useContext(r.PlasmicCanvasContext);if(null==l.useContext(n.ParallaxContext))throw new Error("Scroll Parallax can only be instantiated somewhere inside the Parallax Provider");return t.createElement(n.Parallax,{disabled:o||c&&!i,speed:a,className:p},s)}var s={name:"hostless-scroll-parallax",displayName:"Scroll Parallax",importName:"ParallaxWrapper",importPath:"@plasmicpkgs/react-scroll-parallax",props:{children:{type:"slot",defaultValue:{type:"img",src:"https://placekitten.com/300/200",style:{maxWidth:"100%"}}},speed:{type:"number",description:"How much to speed up or slow down this element while scrolling. Try -20 for slower, 20 for faster.",defaultValue:20},disabled:{type:"boolean",description:"Disables the parallax effect."},previewInEditor:{type:"boolean",description:"Enable the parallax effect in the editor."}},defaultStyles:{maxWidth:"100%"}};function p(e){var r=e.children,a=n.useController(),i=l.useRef(null);return l.useEffect((function(){var e;if(null!=(e=i.current)&&e.parentElement){var r=i.current.parentElement,l=new o((function(){a&&a.update()}));return l.observe(r),function(){l.disconnect()}}return function(){}}),[i.current]),t.createElement("div",{style:{display:"contents"},ref:i},r)}function c(e){var r=e.children,a=function(e,r){if(null==e)return{};var a,l,t={},n=Object.keys(e);for(l=0;l<n.length;l++)r.indexOf(a=n[l])>=0||(t[a]=e[a]);return t}(e,["children"]);return t.createElement(n.ParallaxProvider,Object.assign({},a),t.createElement(p,null,r))}var u={name:"hostless-parallax-provider",displayName:"Parallax Provider",importName:"ParallaxProviderWrapper",importPath:"@plasmicpkgs/react-scroll-parallax",props:{children:"slot",scrollAxis:{type:"choice",description:"Scroll axis for setting horizontal/vertical scrolling",options:["vertical","horizontal"],displayName:"Scroll Axis"}}
|
|
1
|
+
"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var r=require("@plasmicapp/host"),a=e(require("@plasmicapp/host/registerComponent")),l=require("react"),t=e(l),n=require("react-scroll-parallax"),o=e(require("resize-observer-polyfill"));function i(e){var a=e.speed,o=e.disabled,i=e.previewInEditor,s=e.children,p=e.className,c=l.useContext(r.PlasmicCanvasContext);if(null==l.useContext(n.ParallaxContext))throw new Error("Scroll Parallax can only be instantiated somewhere inside the Parallax Provider");return t.createElement(n.Parallax,{disabled:o||c&&!i,speed:a,className:p},s)}var s={name:"hostless-scroll-parallax",displayName:"Scroll Parallax",importName:"ParallaxWrapper",importPath:"@plasmicpkgs/react-scroll-parallax",props:{children:{type:"slot",defaultValue:{type:"img",src:"https://placekitten.com/300/200",style:{maxWidth:"100%"}}},speed:{type:"number",description:"How much to speed up or slow down this element while scrolling. Try -20 for slower, 20 for faster.",defaultValue:20},disabled:{type:"boolean",description:"Disables the parallax effect."},previewInEditor:{type:"boolean",description:"Enable the parallax effect in the editor."}},defaultStyles:{maxWidth:"100%"}};function p(e){var r=e.children,a=n.useController(),i=l.useRef(null);return l.useEffect((function(){var e;if(null!=(e=i.current)&&e.parentElement){var r=i.current.parentElement,l=new o((function(){a&&a.update()}));return l.observe(r),function(){l.disconnect()}}return function(){}}),[i.current]),t.createElement("div",{style:{display:"contents"},ref:i},r)}function c(e){var r=e.children,a=function(e,r){if(null==e)return{};var a,l,t={},n=Object.keys(e);for(l=0;l<n.length;l++)r.indexOf(a=n[l])>=0||(t[a]=e[a]);return t}(e,["children"]);return t.createElement(n.ParallaxProvider,Object.assign({},a),t.createElement(p,null,r))}var u={name:"hostless-parallax-provider",displayName:"Parallax Provider",importName:"ParallaxProviderWrapper",importPath:"@plasmicpkgs/react-scroll-parallax",props:{children:{type:"slot",defaultValue:{type:"vbox",children:[{type:"component",name:"ParallaxWrapper"}]}},scrollAxis:{type:"choice",description:"Scroll axis for setting horizontal/vertical scrolling",options:["vertical","horizontal"],displayName:"Scroll Axis"}}};exports.ParallaxProviderWrapper=c,exports.ParallaxWrapper=i,exports.parallaxProviderMeta=u,exports.parallaxWrapperMeta=s,exports.registerParallaxProvider=function(e,r){e?e.registerComponent(c,null!=r?r:u):a(c,null!=r?r:u)},exports.registerParallaxWrapper=function(e,r){e?e.registerComponent(i,null!=r?r:s):a(i,null!=r?r:s)};
|
|
2
2
|
//# sourceMappingURL=react-scroll-parallax.cjs.production.min.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"react-scroll-parallax.cjs.production.min.js","sources":["../src/ParallaxWrapper.tsx","../src/ParallaxProvider.tsx"],"sourcesContent":["import { PlasmicCanvasContext } from \"@plasmicapp/host\";\nimport registerComponent, {\n ComponentMeta,\n} from \"@plasmicapp/host/registerComponent\";\nimport React, { useContext } from \"react\";\nimport { Parallax, ParallaxContext } from \"react-scroll-parallax\";\n\nexport interface ParallaxWrapperProps {\n speed?: number;\n disabled?: boolean;\n previewInEditor?: boolean;\n children: React.ReactNode;\n className?: string;\n}\n\nexport default function ParallaxWrapper({\n speed,\n disabled,\n previewInEditor,\n children,\n className,\n}: ParallaxWrapperProps) {\n const inEditor = useContext(PlasmicCanvasContext);\n const hasContext = useContext(ParallaxContext) != null;\n if (!hasContext) {\n throw new Error(\n \"Scroll Parallax can only be instantiated somewhere inside the Parallax Provider\"\n );\n }\n return (\n <Parallax\n disabled={disabled || (inEditor && !previewInEditor)}\n speed={speed}\n className={className}\n >\n {children}\n </Parallax>\n );\n}\n\nexport const parallaxWrapperMeta: ComponentMeta<ParallaxWrapperProps> = {\n name: \"hostless-scroll-parallax\",\n displayName: \"Scroll Parallax\",\n importName: \"ParallaxWrapper\",\n importPath: \"@plasmicpkgs/react-scroll-parallax\",\n props: {\n children: {\n type: \"slot\",\n defaultValue: {\n type: \"img\",\n src: \"https://placekitten.com/300/200\",\n style: {\n maxWidth: \"100%\",\n },\n },\n },\n speed: {\n type: \"number\",\n description:\n \"How much to speed up or slow down this element while scrolling. Try -20 for slower, 20 for faster.\",\n defaultValue: 20,\n },\n disabled: {\n type: \"boolean\",\n description: \"Disables the parallax effect.\",\n },\n previewInEditor: {\n type: \"boolean\",\n description: \"Enable the parallax effect in the editor.\",\n },\n },\n defaultStyles: {\n maxWidth: \"100%\",\n },\n};\n\nexport function registerParallaxWrapper(\n loader?: { registerComponent: typeof registerComponent },\n customParallaxWrapperMeta?: ComponentMeta<ParallaxWrapperProps>\n) {\n if (loader) {\n loader.registerComponent(\n ParallaxWrapper,\n customParallaxWrapperMeta ?? parallaxWrapperMeta\n );\n } else {\n registerComponent(\n ParallaxWrapper,\n customParallaxWrapperMeta ?? parallaxWrapperMeta\n );\n }\n}\n","import registerComponent, {\n ComponentMeta,\n} from \"@plasmicapp/host/registerComponent\";\nimport React, { useEffect, useRef } from \"react\";\nimport { ParallaxProvider, useController } from \"react-scroll-parallax\";\nimport { ParallaxProviderProps } from \"react-scroll-parallax/dist/components/ParallaxProvider/types\";\nimport ResizeObserver from \"resize-observer-polyfill\";\n\n/**\n * This is required to ensure the parallax scrolling works correctly, since if\n * (for instance) images load after the parallax wrapper has calculated the\n * dimensions of the space, it will result in incorrect parallax scrolling\n * amounts.\n *\n * This is not great since we need to mutation-observe the whole section of the\n * document (which may be large), but we can probably optimize this in the\n * future.\n */\nfunction ParallaxCacheUpdate({ children }: React.PropsWithChildren<{}>) {\n const parallaxController = useController();\n const ref = useRef<HTMLDivElement | null>(null);\n\n useEffect(() => {\n if (ref.current?.parentElement) {\n const targetNode = ref.current.parentElement;\n const observer = new ResizeObserver(() => {\n if (parallaxController) {\n parallaxController.update();\n }\n });\n observer.observe(targetNode);\n return () => {\n observer.disconnect();\n };\n }\n return () => {};\n }, [ref.current]);\n\n return (\n <div style={{ display: \"contents\" }} ref={ref}>\n {children}\n </div>\n );\n}\n\nexport function ParallaxProviderWrapper({\n children,\n ...props\n}: React.PropsWithChildren<ParallaxProviderProps>) {\n return (\n <ParallaxProvider {...props}>\n <ParallaxCacheUpdate>{children}</ParallaxCacheUpdate>\n </ParallaxProvider>\n );\n}\n\nexport const parallaxProviderMeta: ComponentMeta<ParallaxProviderProps> = {\n name: \"hostless-parallax-provider\",\n displayName: \"Parallax Provider\",\n importName: \"ParallaxProviderWrapper\",\n importPath: \"@plasmicpkgs/react-scroll-parallax\",\n props: {\n children: \"slot\",\n scrollAxis: {\n type: \"choice\",\n description: \"Scroll axis for setting horizontal/vertical scrolling\",\n options: [\"vertical\", \"horizontal\"],\n displayName: \"Scroll Axis\",\n },\n },\n
|
|
1
|
+
{"version":3,"file":"react-scroll-parallax.cjs.production.min.js","sources":["../src/ParallaxWrapper.tsx","../src/ParallaxProvider.tsx"],"sourcesContent":["import { PlasmicCanvasContext } from \"@plasmicapp/host\";\nimport registerComponent, {\n ComponentMeta,\n} from \"@plasmicapp/host/registerComponent\";\nimport React, { useContext } from \"react\";\nimport { Parallax, ParallaxContext } from \"react-scroll-parallax\";\n\nexport interface ParallaxWrapperProps {\n speed?: number;\n disabled?: boolean;\n previewInEditor?: boolean;\n children: React.ReactNode;\n className?: string;\n}\n\nexport default function ParallaxWrapper({\n speed,\n disabled,\n previewInEditor,\n children,\n className,\n}: ParallaxWrapperProps) {\n const inEditor = useContext(PlasmicCanvasContext);\n const hasContext = useContext(ParallaxContext) != null;\n if (!hasContext) {\n throw new Error(\n \"Scroll Parallax can only be instantiated somewhere inside the Parallax Provider\"\n );\n }\n return (\n <Parallax\n disabled={disabled || (inEditor && !previewInEditor)}\n speed={speed}\n className={className}\n >\n {children}\n </Parallax>\n );\n}\n\nexport const parallaxWrapperMeta: ComponentMeta<ParallaxWrapperProps> = {\n name: \"hostless-scroll-parallax\",\n displayName: \"Scroll Parallax\",\n importName: \"ParallaxWrapper\",\n importPath: \"@plasmicpkgs/react-scroll-parallax\",\n props: {\n children: {\n type: \"slot\",\n defaultValue: {\n type: \"img\",\n src: \"https://placekitten.com/300/200\",\n style: {\n maxWidth: \"100%\",\n },\n },\n },\n speed: {\n type: \"number\",\n description:\n \"How much to speed up or slow down this element while scrolling. Try -20 for slower, 20 for faster.\",\n defaultValue: 20,\n },\n disabled: {\n type: \"boolean\",\n description: \"Disables the parallax effect.\",\n },\n previewInEditor: {\n type: \"boolean\",\n description: \"Enable the parallax effect in the editor.\",\n },\n },\n defaultStyles: {\n maxWidth: \"100%\",\n },\n};\n\nexport function registerParallaxWrapper(\n loader?: { registerComponent: typeof registerComponent },\n customParallaxWrapperMeta?: ComponentMeta<ParallaxWrapperProps>\n) {\n if (loader) {\n loader.registerComponent(\n ParallaxWrapper,\n customParallaxWrapperMeta ?? parallaxWrapperMeta\n );\n } else {\n registerComponent(\n ParallaxWrapper,\n customParallaxWrapperMeta ?? parallaxWrapperMeta\n );\n }\n}\n","import registerComponent, {\n ComponentMeta,\n} from \"@plasmicapp/host/registerComponent\";\nimport React, { useEffect, useRef } from \"react\";\nimport { ParallaxProvider, useController } from \"react-scroll-parallax\";\nimport { ParallaxProviderProps } from \"react-scroll-parallax/dist/components/ParallaxProvider/types\";\nimport ResizeObserver from \"resize-observer-polyfill\";\n\n/**\n * This is required to ensure the parallax scrolling works correctly, since if\n * (for instance) images load after the parallax wrapper has calculated the\n * dimensions of the space, it will result in incorrect parallax scrolling\n * amounts.\n *\n * This is not great since we need to mutation-observe the whole section of the\n * document (which may be large), but we can probably optimize this in the\n * future.\n */\nfunction ParallaxCacheUpdate({ children }: React.PropsWithChildren<{}>) {\n const parallaxController = useController();\n const ref = useRef<HTMLDivElement | null>(null);\n\n useEffect(() => {\n if (ref.current?.parentElement) {\n const targetNode = ref.current.parentElement;\n const observer = new ResizeObserver(() => {\n if (parallaxController) {\n parallaxController.update();\n }\n });\n observer.observe(targetNode);\n return () => {\n observer.disconnect();\n };\n }\n return () => {};\n }, [ref.current]);\n\n return (\n <div style={{ display: \"contents\" }} ref={ref}>\n {children}\n </div>\n );\n}\n\nexport function ParallaxProviderWrapper({\n children,\n ...props\n}: React.PropsWithChildren<ParallaxProviderProps>) {\n return (\n <ParallaxProvider {...props}>\n <ParallaxCacheUpdate>{children}</ParallaxCacheUpdate>\n </ParallaxProvider>\n );\n}\n\nexport const parallaxProviderMeta: ComponentMeta<ParallaxProviderProps> = {\n name: \"hostless-parallax-provider\",\n displayName: \"Parallax Provider\",\n importName: \"ParallaxProviderWrapper\",\n importPath: \"@plasmicpkgs/react-scroll-parallax\",\n props: {\n children: {\n type: \"slot\",\n defaultValue: {\n type: \"vbox\",\n children: [\n {\n type: \"component\",\n name: \"ParallaxWrapper\",\n },\n ],\n },\n },\n scrollAxis: {\n type: \"choice\",\n description: \"Scroll axis for setting horizontal/vertical scrolling\",\n options: [\"vertical\", \"horizontal\"],\n displayName: \"Scroll Axis\",\n },\n },\n};\n\nexport function registerParallaxProvider(\n loader?: { registerComponent: typeof registerComponent },\n customParallaxProviderMeta?: ComponentMeta<ParallaxProviderProps>\n) {\n if (loader) {\n loader.registerComponent(\n ParallaxProviderWrapper,\n customParallaxProviderMeta ?? parallaxProviderMeta\n );\n } else {\n registerComponent(\n ParallaxProviderWrapper,\n customParallaxProviderMeta ?? parallaxProviderMeta\n );\n }\n}\n"],"names":["ParallaxWrapper","speed","disabled","previewInEditor","children","className","inEditor","useContext","PlasmicCanvasContext","ParallaxContext","Error","React","Parallax","parallaxWrapperMeta","name","displayName","importName","importPath","props","type","defaultValue","src","style","maxWidth","description","defaultStyles","ParallaxCacheUpdate","parallaxController","useController","ref","useRef","useEffect","current","_ref$current","parentElement","targetNode","observer","ResizeObserver","update","observe","disconnect","display","ParallaxProviderWrapper","ParallaxProvider","parallaxProviderMeta","scrollAxis","options","loader","customParallaxProviderMeta","registerComponent","customParallaxWrapperMeta"],"mappings":"8UAewBA,SACtBC,IAAAA,MACAC,IAAAA,SACAC,IAAAA,gBACAC,IAAAA,SACAC,IAAAA,UAEMC,EAAWC,aAAWC,2BACsB,MAA/BD,aAAWE,yBAEtB,IAAIC,MACR,0FAIFC,gBAACC,YACCV,SAAUA,GAAaI,IAAaH,EACpCF,MAAOA,EACPI,UAAWA,GAEVD,OAKMS,EAA2D,CACtEC,KAAM,2BACNC,YAAa,kBACbC,WAAY,kBACZC,WAAY,qCACZC,MAAO,CACLd,SAAU,CACRe,KAAM,OACNC,aAAc,CACZD,KAAM,MACNE,IAAK,kCACLC,MAAO,CACLC,SAAU,UAIhBtB,MAAO,CACLkB,KAAM,SACNK,YACE,qGACFJ,aAAc,IAEhBlB,SAAU,CACRiB,KAAM,UACNK,YAAa,iCAEfrB,gBAAiB,CACfgB,KAAM,UACNK,YAAa,8CAGjBC,cAAe,CACbF,SAAU,SCtDd,SAASG,SAAsBtB,IAAAA,SACvBuB,EAAqBC,kBACrBC,EAAMC,SAA8B,aAE1CC,aAAU,6BACJF,EAAIG,UAAJC,EAAaC,cAAe,KACxBC,EAAaN,EAAIG,QAAQE,cACzBE,EAAW,IAAIC,GAAe,WAC9BV,GACFA,EAAmBW,mBAGvBF,EAASG,QAAQJ,GACV,WACLC,EAASI,qBAGN,eACN,CAACX,EAAIG,UAGNrB,uBAAKW,MAAO,CAAEmB,QAAS,YAAcZ,IAAKA,GACvCzB,YAKSsC,SACdtC,IAAAA,SACGc,4JAGDP,gBAACgC,oCAAqBzB,GACpBP,gBAACe,OAAqBtB,IAK5B,IAAawC,EAA6D,CACxE9B,KAAM,6BACNC,YAAa,oBACbC,WAAY,0BACZC,WAAY,qCACZC,MAAO,CACLd,SAAU,CACRe,KAAM,OACNC,aAAc,CACZD,KAAM,OACNf,SAAU,CACR,CACEe,KAAM,YACNL,KAAM,sBAKd+B,WAAY,CACV1B,KAAM,SACNK,YAAa,wDACbsB,QAAS,CAAC,WAAY,cACtB/B,YAAa,oLAMjBgC,EACAC,GAEID,EACFA,EAAOE,kBACLP,QACAM,EAAAA,EAA8BJ,GAGhCK,EACEP,QACAM,EAAAA,EAA8BJ,6CDlBlCG,EACAG,GAEIH,EACFA,EAAOE,kBACLjD,QACAkD,EAAAA,EAA6BrC,GAG/BoC,EACEjD,QACAkD,EAAAA,EAA6BrC"}
|
|
@@ -133,15 +133,23 @@ var parallaxProviderMeta = {
|
|
|
133
133
|
importName: "ParallaxProviderWrapper",
|
|
134
134
|
importPath: "@plasmicpkgs/react-scroll-parallax",
|
|
135
135
|
props: {
|
|
136
|
-
children:
|
|
136
|
+
children: {
|
|
137
|
+
type: "slot",
|
|
138
|
+
defaultValue: {
|
|
139
|
+
type: "vbox",
|
|
140
|
+
children: [{
|
|
141
|
+
type: "component",
|
|
142
|
+
name: "ParallaxWrapper"
|
|
143
|
+
}]
|
|
144
|
+
}
|
|
145
|
+
},
|
|
137
146
|
scrollAxis: {
|
|
138
147
|
type: "choice",
|
|
139
148
|
description: "Scroll axis for setting horizontal/vertical scrolling",
|
|
140
149
|
options: ["vertical", "horizontal"],
|
|
141
150
|
displayName: "Scroll Axis"
|
|
142
151
|
}
|
|
143
|
-
}
|
|
144
|
-
parentComponentName: "hostless-scroll-parallax"
|
|
152
|
+
}
|
|
145
153
|
};
|
|
146
154
|
function registerParallaxProvider(loader, customParallaxProviderMeta) {
|
|
147
155
|
if (loader) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"react-scroll-parallax.esm.js","sources":["../src/ParallaxWrapper.tsx","../src/ParallaxProvider.tsx"],"sourcesContent":["import { PlasmicCanvasContext } from \"@plasmicapp/host\";\nimport registerComponent, {\n ComponentMeta,\n} from \"@plasmicapp/host/registerComponent\";\nimport React, { useContext } from \"react\";\nimport { Parallax, ParallaxContext } from \"react-scroll-parallax\";\n\nexport interface ParallaxWrapperProps {\n speed?: number;\n disabled?: boolean;\n previewInEditor?: boolean;\n children: React.ReactNode;\n className?: string;\n}\n\nexport default function ParallaxWrapper({\n speed,\n disabled,\n previewInEditor,\n children,\n className,\n}: ParallaxWrapperProps) {\n const inEditor = useContext(PlasmicCanvasContext);\n const hasContext = useContext(ParallaxContext) != null;\n if (!hasContext) {\n throw new Error(\n \"Scroll Parallax can only be instantiated somewhere inside the Parallax Provider\"\n );\n }\n return (\n <Parallax\n disabled={disabled || (inEditor && !previewInEditor)}\n speed={speed}\n className={className}\n >\n {children}\n </Parallax>\n );\n}\n\nexport const parallaxWrapperMeta: ComponentMeta<ParallaxWrapperProps> = {\n name: \"hostless-scroll-parallax\",\n displayName: \"Scroll Parallax\",\n importName: \"ParallaxWrapper\",\n importPath: \"@plasmicpkgs/react-scroll-parallax\",\n props: {\n children: {\n type: \"slot\",\n defaultValue: {\n type: \"img\",\n src: \"https://placekitten.com/300/200\",\n style: {\n maxWidth: \"100%\",\n },\n },\n },\n speed: {\n type: \"number\",\n description:\n \"How much to speed up or slow down this element while scrolling. Try -20 for slower, 20 for faster.\",\n defaultValue: 20,\n },\n disabled: {\n type: \"boolean\",\n description: \"Disables the parallax effect.\",\n },\n previewInEditor: {\n type: \"boolean\",\n description: \"Enable the parallax effect in the editor.\",\n },\n },\n defaultStyles: {\n maxWidth: \"100%\",\n },\n};\n\nexport function registerParallaxWrapper(\n loader?: { registerComponent: typeof registerComponent },\n customParallaxWrapperMeta?: ComponentMeta<ParallaxWrapperProps>\n) {\n if (loader) {\n loader.registerComponent(\n ParallaxWrapper,\n customParallaxWrapperMeta ?? parallaxWrapperMeta\n );\n } else {\n registerComponent(\n ParallaxWrapper,\n customParallaxWrapperMeta ?? parallaxWrapperMeta\n );\n }\n}\n","import registerComponent, {\n ComponentMeta,\n} from \"@plasmicapp/host/registerComponent\";\nimport React, { useEffect, useRef } from \"react\";\nimport { ParallaxProvider, useController } from \"react-scroll-parallax\";\nimport { ParallaxProviderProps } from \"react-scroll-parallax/dist/components/ParallaxProvider/types\";\nimport ResizeObserver from \"resize-observer-polyfill\";\n\n/**\n * This is required to ensure the parallax scrolling works correctly, since if\n * (for instance) images load after the parallax wrapper has calculated the\n * dimensions of the space, it will result in incorrect parallax scrolling\n * amounts.\n *\n * This is not great since we need to mutation-observe the whole section of the\n * document (which may be large), but we can probably optimize this in the\n * future.\n */\nfunction ParallaxCacheUpdate({ children }: React.PropsWithChildren<{}>) {\n const parallaxController = useController();\n const ref = useRef<HTMLDivElement | null>(null);\n\n useEffect(() => {\n if (ref.current?.parentElement) {\n const targetNode = ref.current.parentElement;\n const observer = new ResizeObserver(() => {\n if (parallaxController) {\n parallaxController.update();\n }\n });\n observer.observe(targetNode);\n return () => {\n observer.disconnect();\n };\n }\n return () => {};\n }, [ref.current]);\n\n return (\n <div style={{ display: \"contents\" }} ref={ref}>\n {children}\n </div>\n );\n}\n\nexport function ParallaxProviderWrapper({\n children,\n ...props\n}: React.PropsWithChildren<ParallaxProviderProps>) {\n return (\n <ParallaxProvider {...props}>\n <ParallaxCacheUpdate>{children}</ParallaxCacheUpdate>\n </ParallaxProvider>\n );\n}\n\nexport const parallaxProviderMeta: ComponentMeta<ParallaxProviderProps> = {\n name: \"hostless-parallax-provider\",\n displayName: \"Parallax Provider\",\n importName: \"ParallaxProviderWrapper\",\n importPath: \"@plasmicpkgs/react-scroll-parallax\",\n props: {\n children: \"slot\",\n scrollAxis: {\n type: \"choice\",\n description: \"Scroll axis for setting horizontal/vertical scrolling\",\n options: [\"vertical\", \"horizontal\"],\n displayName: \"Scroll Axis\",\n },\n },\n
|
|
1
|
+
{"version":3,"file":"react-scroll-parallax.esm.js","sources":["../src/ParallaxWrapper.tsx","../src/ParallaxProvider.tsx"],"sourcesContent":["import { PlasmicCanvasContext } from \"@plasmicapp/host\";\nimport registerComponent, {\n ComponentMeta,\n} from \"@plasmicapp/host/registerComponent\";\nimport React, { useContext } from \"react\";\nimport { Parallax, ParallaxContext } from \"react-scroll-parallax\";\n\nexport interface ParallaxWrapperProps {\n speed?: number;\n disabled?: boolean;\n previewInEditor?: boolean;\n children: React.ReactNode;\n className?: string;\n}\n\nexport default function ParallaxWrapper({\n speed,\n disabled,\n previewInEditor,\n children,\n className,\n}: ParallaxWrapperProps) {\n const inEditor = useContext(PlasmicCanvasContext);\n const hasContext = useContext(ParallaxContext) != null;\n if (!hasContext) {\n throw new Error(\n \"Scroll Parallax can only be instantiated somewhere inside the Parallax Provider\"\n );\n }\n return (\n <Parallax\n disabled={disabled || (inEditor && !previewInEditor)}\n speed={speed}\n className={className}\n >\n {children}\n </Parallax>\n );\n}\n\nexport const parallaxWrapperMeta: ComponentMeta<ParallaxWrapperProps> = {\n name: \"hostless-scroll-parallax\",\n displayName: \"Scroll Parallax\",\n importName: \"ParallaxWrapper\",\n importPath: \"@plasmicpkgs/react-scroll-parallax\",\n props: {\n children: {\n type: \"slot\",\n defaultValue: {\n type: \"img\",\n src: \"https://placekitten.com/300/200\",\n style: {\n maxWidth: \"100%\",\n },\n },\n },\n speed: {\n type: \"number\",\n description:\n \"How much to speed up or slow down this element while scrolling. Try -20 for slower, 20 for faster.\",\n defaultValue: 20,\n },\n disabled: {\n type: \"boolean\",\n description: \"Disables the parallax effect.\",\n },\n previewInEditor: {\n type: \"boolean\",\n description: \"Enable the parallax effect in the editor.\",\n },\n },\n defaultStyles: {\n maxWidth: \"100%\",\n },\n};\n\nexport function registerParallaxWrapper(\n loader?: { registerComponent: typeof registerComponent },\n customParallaxWrapperMeta?: ComponentMeta<ParallaxWrapperProps>\n) {\n if (loader) {\n loader.registerComponent(\n ParallaxWrapper,\n customParallaxWrapperMeta ?? parallaxWrapperMeta\n );\n } else {\n registerComponent(\n ParallaxWrapper,\n customParallaxWrapperMeta ?? parallaxWrapperMeta\n );\n }\n}\n","import registerComponent, {\n ComponentMeta,\n} from \"@plasmicapp/host/registerComponent\";\nimport React, { useEffect, useRef } from \"react\";\nimport { ParallaxProvider, useController } from \"react-scroll-parallax\";\nimport { ParallaxProviderProps } from \"react-scroll-parallax/dist/components/ParallaxProvider/types\";\nimport ResizeObserver from \"resize-observer-polyfill\";\n\n/**\n * This is required to ensure the parallax scrolling works correctly, since if\n * (for instance) images load after the parallax wrapper has calculated the\n * dimensions of the space, it will result in incorrect parallax scrolling\n * amounts.\n *\n * This is not great since we need to mutation-observe the whole section of the\n * document (which may be large), but we can probably optimize this in the\n * future.\n */\nfunction ParallaxCacheUpdate({ children }: React.PropsWithChildren<{}>) {\n const parallaxController = useController();\n const ref = useRef<HTMLDivElement | null>(null);\n\n useEffect(() => {\n if (ref.current?.parentElement) {\n const targetNode = ref.current.parentElement;\n const observer = new ResizeObserver(() => {\n if (parallaxController) {\n parallaxController.update();\n }\n });\n observer.observe(targetNode);\n return () => {\n observer.disconnect();\n };\n }\n return () => {};\n }, [ref.current]);\n\n return (\n <div style={{ display: \"contents\" }} ref={ref}>\n {children}\n </div>\n );\n}\n\nexport function ParallaxProviderWrapper({\n children,\n ...props\n}: React.PropsWithChildren<ParallaxProviderProps>) {\n return (\n <ParallaxProvider {...props}>\n <ParallaxCacheUpdate>{children}</ParallaxCacheUpdate>\n </ParallaxProvider>\n );\n}\n\nexport const parallaxProviderMeta: ComponentMeta<ParallaxProviderProps> = {\n name: \"hostless-parallax-provider\",\n displayName: \"Parallax Provider\",\n importName: \"ParallaxProviderWrapper\",\n importPath: \"@plasmicpkgs/react-scroll-parallax\",\n props: {\n children: {\n type: \"slot\",\n defaultValue: {\n type: \"vbox\",\n children: [\n {\n type: \"component\",\n name: \"ParallaxWrapper\",\n },\n ],\n },\n },\n scrollAxis: {\n type: \"choice\",\n description: \"Scroll axis for setting horizontal/vertical scrolling\",\n options: [\"vertical\", \"horizontal\"],\n displayName: \"Scroll Axis\",\n },\n },\n};\n\nexport function registerParallaxProvider(\n loader?: { registerComponent: typeof registerComponent },\n customParallaxProviderMeta?: ComponentMeta<ParallaxProviderProps>\n) {\n if (loader) {\n loader.registerComponent(\n ParallaxProviderWrapper,\n customParallaxProviderMeta ?? parallaxProviderMeta\n );\n } else {\n registerComponent(\n ParallaxProviderWrapper,\n customParallaxProviderMeta ?? parallaxProviderMeta\n );\n }\n}\n"],"names":["ParallaxWrapper","speed","disabled","previewInEditor","children","className","inEditor","useContext","PlasmicCanvasContext","hasContext","ParallaxContext","Error","React","Parallax","parallaxWrapperMeta","name","displayName","importName","importPath","props","type","defaultValue","src","style","maxWidth","description","defaultStyles","registerParallaxWrapper","loader","customParallaxWrapperMeta","registerComponent","ParallaxCacheUpdate","parallaxController","useController","ref","useRef","useEffect","current","parentElement","targetNode","observer","ResizeObserver","update","observe","disconnect","display","ParallaxProviderWrapper","ParallaxProvider","parallaxProviderMeta","scrollAxis","options","registerParallaxProvider","customParallaxProviderMeta"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@plasmicpkgs/react-scroll-parallax",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.9",
|
|
4
4
|
"description": "Plasmic registration call for the HTML5 video element",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
"typescript": "^3.9.7"
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@plasmicapp/host": "^0.0
|
|
39
|
+
"@plasmicapp/host": "^1.0.0",
|
|
40
40
|
"react-scroll-parallax": "3.0.0-alpha.14",
|
|
41
41
|
"resize-observer-polyfill": "^1.5.1"
|
|
42
42
|
},
|