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", diff --git a/src/Scene.js b/src/Scene.js index a570a92..7a36ef8 100644 --- a/src/Scene.js +++ b/src/Scene.js @@ -1,5 +1,5 @@ // @flow -import { default as React } 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'; @@ -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]); @@ -226,36 +232,38 @@ class SceneBase extends React.PureComponent { const child = getChild(children, progress, event); - // TODO: Don't add ref to stateless or stateful components - - return React.cloneElement(child, { [refOrInnerRef(child)]: ref => this.ref = ref }); - } -} - -class SceneWrapper extends React.PureComponent { - static displayName = 'Scene'; - - render() { - if (!this.props.controller) { - let { children } = this.props; - const progress = 0; - const event = 'init'; - - return getChild(children, progress, event); + // Don't add ref to class components, only to functional components + if (typeof child.type !== 'function') { + return child; } - return ( - - ); + return React.cloneElement(child, { [refOrInnerRef(child)]: ref => ref = this.ref, refresh: this.refreshScene }); } } -export const Scene = ({ children, ...props }) => ( +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 + ); +}); + +export const Scene = React.forwardRef(({ children, ...props }, ref) => ( {controller => ( - + {children} )} -); \ No newline at end of file +));