From 6fdaea67f6f0ccc80f465c8856f91d5f06d25cee Mon Sep 17 00:00:00 2001 From: Alexander Vologdin Date: Wed, 16 Aug 2023 13:13:04 +0300 Subject: [PATCH 1/9] Update Scene.js support ref and add refresh method --- src/Scene.js | 45 +++++++++++++++++++++++++++++++++++---------- 1 file changed, 35 insertions(+), 10 deletions(-) diff --git a/src/Scene.js b/src/Scene.js index a570a92..936831b 100644 --- a/src/Scene.js +++ b/src/Scene.js @@ -1,5 +1,5 @@ // @flow -import { default as React } from 'react'; +import React, { forwardRef } from 'react'; import { ControllerContext } from './Controller'; import ScrollMagic from './lib/scrollmagic'; import debugAddIndicators from './lib/debug.addIndicators.js'; @@ -184,6 +184,12 @@ class SceneBase extends React.PureComponent { this.scene.destroy(); } + refreshScene() { + if (this.scene) { + this.scene.refresh(); + } + } + setClassToggle(scene, element, classToggle) { if (Array.isArray(classToggle) && classToggle.length === 2) { scene.setClassToggle(classToggle[0], classToggle[1]); @@ -250,12 +256,31 @@ class SceneWrapper extends React.PureComponent { } } -export const Scene = ({ children, ...props }) => ( - - {controller => ( - - {children} - - )} - -); \ No newline at end of file + +export const Scene = forwardRef(({ children, ...props }, ref) => { + const sceneRef = useRef(null); // Ref to capture SceneBase instance + + return ( + + {controller => ( + { + // Forward the ref to the parent component + sceneRef.current = instance; + if (ref) { + if (typeof ref === 'function') { + ref(instance); + } else if (typeof ref === 'object') { + ref.current = instance; + } + } + }} + > + {children} + + )} + + ); +}); From 77442febacee1f4b0d26e7f0341b487ee90de503 Mon Sep 17 00:00:00 2001 From: Alexander Vologdin Date: Wed, 16 Aug 2023 13:28:10 +0300 Subject: [PATCH 2/9] Update Scene.js --- src/Scene.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Scene.js b/src/Scene.js index 936831b..d1d471a 100644 --- a/src/Scene.js +++ b/src/Scene.js @@ -1,5 +1,5 @@ // @flow -import React, { forwardRef } from 'react'; +import React, { forwardRef, useRef } from 'react'; import { ControllerContext } from './Controller'; import ScrollMagic from './lib/scrollmagic'; import debugAddIndicators from './lib/debug.addIndicators.js'; From d0d1f73025ea3920d9b59369f87443c59d84f66c Mon Sep 17 00:00:00 2001 From: Alexander Vologdin Date: Wed, 16 Aug 2023 13:28:32 +0300 Subject: [PATCH 3/9] Update package.json --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 55a8b92..54aabc3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-scrollmagic", - "version": "2.3.0", + "version": "2.3.1", "description": "React declarative component for ScrollMagic", "author": "bitworking", "license": "MIT", From 335055611b70e01d8607f849ff7d8d78ea371cfa Mon Sep 17 00:00:00 2001 From: Alexander Vologdin Date: Wed, 16 Aug 2023 13:41:24 +0300 Subject: [PATCH 4/9] Update Scene.js --- src/Scene.js | 57 ++++++++++++++++++++++++++-------------------------- 1 file changed, 29 insertions(+), 28 deletions(-) diff --git a/src/Scene.js b/src/Scene.js index d1d471a..70679ec 100644 --- a/src/Scene.js +++ b/src/Scene.js @@ -1,5 +1,5 @@ // @flow -import React, { forwardRef, useRef } from 'react'; +import React, { forwardRef, useRef, useCallback } from 'react'; import { ControllerContext } from './Controller'; import ScrollMagic from './lib/scrollmagic'; import debugAddIndicators from './lib/debug.addIndicators.js'; @@ -238,45 +238,46 @@ class SceneBase extends React.PureComponent { } } -class SceneWrapper extends React.PureComponent { - static displayName = 'Scene'; +const SceneWrapper = React.forwardRef(({ controller, ...props }, ref) => { + if (!controller) { + const { children } = props; + const progress = 0; + const event = 'init'; - render() { - if (!this.props.controller) { - let { children } = this.props; - const progress = 0; - const event = 'init'; - - return getChild(children, progress, event); - } - - return ( - - ); + return getChild(children, progress, event); } -} + return ( + + ); +}); -export const Scene = forwardRef(({ children, ...props }, ref) => { +export const Scene = React.forwardRef(({ children, ...props }, ref) => { const sceneRef = useRef(null); // Ref to capture SceneBase instance + const mergedRef = useCallback( + (instance) => { + sceneRef.current = instance; + + if (ref) { + if (typeof ref === 'function') { + ref(instance); + } else if (typeof ref === 'object') { + ref.current = instance; + ref.current.refreshScene = instance.refreshScene; // Expose the refreshScene function + } + } + }, + [ref] + ); + return ( {controller => ( { - // Forward the ref to the parent component - sceneRef.current = instance; - if (ref) { - if (typeof ref === 'function') { - ref(instance); - } else if (typeof ref === 'object') { - ref.current = instance; - } - } - }} + ref={mergedRef} > {children} From bfdf2ae60cff1f3da78987f5c6f96d86a30b658e Mon Sep 17 00:00:00 2001 From: Alexander Vologdin Date: Wed, 16 Aug 2023 13:44:44 +0300 Subject: [PATCH 5/9] Update Scene.js --- src/Scene.js | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/src/Scene.js b/src/Scene.js index 70679ec..edb0a7e 100644 --- a/src/Scene.js +++ b/src/Scene.js @@ -247,17 +247,12 @@ const SceneWrapper = React.forwardRef(({ controller, ...props }, ref) => { return getChild(children, progress, event); } - return ( - - ); -}); - -export const Scene = React.forwardRef(({ children, ...props }, ref) => { - const sceneRef = useRef(null); // Ref to capture SceneBase instance + const sceneRef = useRef(null); // Ref to capture SceneBase instance const mergedRef = useCallback( (instance) => { sceneRef.current = instance; + console.log(instance) if (ref) { if (typeof ref === 'function') { @@ -271,6 +266,14 @@ export const Scene = React.forwardRef(({ children, ...props }, ref) => { [ref] ); + return ( + + ); +}); + +export const Scene = React.forwardRef(({ children, ...props }, ref) => { + + return ( {controller => ( From e43d247fbe2cb7b8af33bd2899010528f26d2a68 Mon Sep 17 00:00:00 2001 From: Alexander Vologdin Date: Wed, 16 Aug 2023 13:53:54 +0300 Subject: [PATCH 6/9] Update Scene.js --- src/Scene.js | 28 +++++++++------------------- 1 file changed, 9 insertions(+), 19 deletions(-) diff --git a/src/Scene.js b/src/Scene.js index edb0a7e..ddf62e0 100644 --- a/src/Scene.js +++ b/src/Scene.js @@ -234,25 +234,23 @@ class SceneBase extends React.PureComponent { // TODO: Don't add ref to stateless or stateful components - return React.cloneElement(child, { [refOrInnerRef(child)]: ref => this.ref = ref }); + return React.cloneElement(child, {}); } } const SceneWrapper = React.forwardRef(({ controller, ...props }, ref) => { - if (!controller) { - const { children } = props; - const progress = 0; - const event = 'init'; - - return getChild(children, progress, event); - } + console.log('SceneWrapper', ref) + return ( + // Simply forward the ref here + ); +}); - const sceneRef = useRef(null); // Ref to capture SceneBase instance +export const Scene = React.forwardRef(({ children, ...props }, ref) => { + const sceneWrapperRef = useRef(null); // Ref to capture SceneWrapper instance const mergedRef = useCallback( (instance) => { - sceneRef.current = instance; - console.log(instance) + sceneWrapperRef.current = instance; if (ref) { if (typeof ref === 'function') { @@ -266,14 +264,6 @@ const SceneWrapper = React.forwardRef(({ controller, ...props }, ref) => { [ref] ); - return ( - - ); -}); - -export const Scene = React.forwardRef(({ children, ...props }, ref) => { - - return ( {controller => ( From 114e4c96e32b5f8ffe222b1e24b739430d0768f8 Mon Sep 17 00:00:00 2001 From: Alexander Vologdin Date: Wed, 16 Aug 2023 14:09:04 +0300 Subject: [PATCH 7/9] Update Scene.js --- src/Scene.js | 49 ++++++++++++++----------------------------------- 1 file changed, 14 insertions(+), 35 deletions(-) diff --git a/src/Scene.js b/src/Scene.js index ddf62e0..29dca19 100644 --- a/src/Scene.js +++ b/src/Scene.js @@ -232,9 +232,12 @@ class SceneBase extends React.PureComponent { const child = getChild(children, progress, event); - // TODO: Don't add ref to stateless or stateful components + // Don't add ref to class components, only to functional components + if (typeof child.type !== 'function') { + return child; + } - return React.cloneElement(child, {}); + return React.cloneElement(child, { [refOrInnerRef(child)]: ref => this.ref = ref }); } } @@ -245,36 +248,12 @@ const SceneWrapper = React.forwardRef(({ controller, ...props }, ref) => { ); }); -export const Scene = React.forwardRef(({ children, ...props }, ref) => { - const sceneWrapperRef = useRef(null); // Ref to capture SceneWrapper instance - - const mergedRef = useCallback( - (instance) => { - sceneWrapperRef.current = instance; - - if (ref) { - if (typeof ref === 'function') { - ref(instance); - } else if (typeof ref === 'object') { - ref.current = instance; - ref.current.refreshScene = instance.refreshScene; // Expose the refreshScene function - } - } - }, - [ref] - ); - - return ( - - {controller => ( - - {children} - - )} - - ); -}); +export const Scene = React.forwardRef(({ children, ...props }, ref) => ( + + {controller => ( + + {children} + + )} + +)); From a056c97389abcf37dbac68817b9e4becd58edf4e Mon Sep 17 00:00:00 2001 From: Alexander Vologdin Date: Wed, 16 Aug 2023 14:11:25 +0300 Subject: [PATCH 8/9] Update Scene.js --- src/Scene.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Scene.js b/src/Scene.js index 29dca19..675026c 100644 --- a/src/Scene.js +++ b/src/Scene.js @@ -237,7 +237,7 @@ class SceneBase extends React.PureComponent { return child; } - return React.cloneElement(child, { [refOrInnerRef(child)]: ref => this.ref = ref }); + return React.cloneElement(child, { [refOrInnerRef(child)]: ref => ref = this.ref }); } } From 88ca0ef08f135a41b4e6979a5c42716d8a5854f5 Mon Sep 17 00:00:00 2001 From: Alexander Vologdin Date: Wed, 16 Aug 2023 14:16:31 +0300 Subject: [PATCH 9/9] Update Scene.js --- src/Scene.js | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/src/Scene.js b/src/Scene.js index 675026c..7a36ef8 100644 --- a/src/Scene.js +++ b/src/Scene.js @@ -237,12 +237,22 @@ class SceneBase extends React.PureComponent { return child; } - return React.cloneElement(child, { [refOrInnerRef(child)]: ref => ref = this.ref }); + return React.cloneElement(child, { [refOrInnerRef(child)]: ref => ref = this.ref, refresh: this.refreshScene }); } } -const SceneWrapper = React.forwardRef(({ controller, ...props }, ref) => { - console.log('SceneWrapper', ref) +const SceneWrapper = React.forwardRef(({ controller, refresh, ...props }, ref) => { + console.log('SceneWrapper', ref); + + useImperativeHandle(ref, () => { + return { + refresh() { + console.log("here"); + refresh(); + } + }; + }, []); + return ( // Simply forward the ref here );