ssr fixes

lukesthl · Feb 21, 2018 · cf0cfca · cf0cfca
1 parent db4fe69
commit cf0cfca
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 14 deletions.
diff --git a/README.md b/README.md
@@ -1,7 +1,7 @@
 # React Reveal
 
 [React Reveal](https://www.react-reveal.com/) is
-an attention management framework for React. It's MIT licensed, has a tiny footprint
+an animation framework for React. It's MIT licensed, has a tiny footprint
 and written specifically for React in ES6. It can be used to create various cool reveal
 on scroll animations in your application.
 If you liked this package, don't forget to star

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-reveal",
-  "version": "1.1.5",
+  "version": "1.1.6-beta.2",
   "author": "Roman Nosov <rnosov@gmail.com>",
   "description": "Really simple way to add reveal on scroll animation to your React app.",
   "license": "MIT",

diff --git a/src/RevealBase.js b/src/RevealBase.js
@@ -82,7 +82,7 @@ class RevealBase extends React.Component {
     this.state = {
       collapse: props.collapse ? RevealBase.getInitialCollapseStyle(props): void 0,
       style: {
-        opacity: !this.isOn && props.outEffect ? 0 : void 0,
+        opacity: (!this.isOn||props.always) && props.outEffect ? 0 : void 0,
         //visibility: props.when  ? 'visible' : 'hidden',
       },
     };
@@ -211,7 +211,7 @@ class RevealBase extends React.Component {
     //const inOut = props[this.isOn || !props.outEffectEffect ?'inEffect':'outEffect'];
     let animationName = (('style' in inOut) && inOut.style.animationName) || void 0;
     if ((props.outEffect||this.isOn) && inOut.make)
-        animationName = inOut.make();
+        animationName = this.animationName || inOut.make();
     let state = {/* status: leaving ? 'exiting':'entering',*/
         hasAppeared: true,
         hasExited: false,
@@ -283,6 +283,8 @@ class RevealBase extends React.Component {
     if (!this||!this.el) return;
     if (!props)
       props = this.props;
+    if (ssr)
+      disableSsr();
     if ( this.isOn && this.isShown && 'spy' in props ){
         this.isShown = false;
         this.setState({ style: {} });
@@ -302,10 +304,12 @@ class RevealBase extends React.Component {
   componentDidMount() {
     if (!this.el || this.props.disabled)
       return;
+    if ('make' in this.props)
+      this.animationName = this.props.inEffect.make();
     const parentGroup = this.context.transitionGroup;
     const appear = parentGroup && !parentGroup.isMounting ? !('enter' in this.props && this.props.enter === false) : this.props.appear;
     if (this.isOn && ((('when' in this.props || 'spy' in this.props) && !appear)
-    || (ssr && !fadeOutEnabled && this.props.outEffect && (RevealBase.getTop(this.el) < window.pageYOffset + window.innerHeight)))
+    || (ssr && !fadeOutEnabled && this.props.outEffect && !this.props.always && (RevealBase.getTop(this.el) < window.pageYOffset + window.innerHeight)))
       ) {
       this.isShown = true;
       this.setState({
@@ -364,8 +368,9 @@ class RevealBase extends React.Component {
 
   static getInitialCollapseStyle(props) {
     return {
+          //height: ismounting  ? void 0 : 0,
           height: 0,
-          visibility: props.when  ? 'visible' : 'hidden',
+          visibility: props.when  ? void 0 : 'hidden',
           //height: props.when ? void 0 : 0,
           //padding: 0,
           //border: 0,
@@ -453,6 +458,6 @@ class RevealBase extends React.Component {
 RevealBase.propTypes = propTypes;
 RevealBase.defaultProps = defaultProps;
 RevealBase.contextTypes = contextTypes;
-//RevealBase.displayName = 'RevealBase';
+RevealBase.displayName = 'RevealBase';
 //RevealBase.childContextTypes = childContextTypes;
 export default RevealBase;
diff --git a/src/lib/globals.js b/src/lib/globals.js
@@ -68,7 +68,7 @@ if (typeof window !== 'undefined' && window.name !== 'nodejs' && window.document
       && 'timing' in window.performance
       && 'domContentLoadedEventEnd' in window.performance.timing
       && window.performance.timing.domLoading
-      && Date.now() - window.performance.timing.domLoading<500)
+      && Date.now() - window.performance.timing.domLoading<300)
     ssr = false;
   collapseend = document.createEvent('Event');
   collapseend.initEvent('collapseend', true, true);

diff --git a/src/lib/makeCarousel.js b/src/lib/makeCarousel.js
@@ -41,16 +41,17 @@ function makeCarousel(WrappedComponent, config = {}) {
         current: 0,
         next: 1,
         backwards: false,
-        swap: false
+        swap: false,
+        appear: false,
       };
       this.turn = 0;
       this.handleReveal = this.handleReveal.bind(this);
       this.handleSwipe = this.handleSwipe.bind(this);
       this.target = this.target.bind(this);
     }
 
-    target({target}) {
-      this.move(+target.getAttribute('data-position'));
+    target({currentTarget}) {
+      this.move(+currentTarget.getAttribute('data-position'));
     }
 
     handleReveal() {
@@ -78,7 +79,8 @@ function makeCarousel(WrappedComponent, config = {}) {
         current: pos,
         next: this.state.current,
         backwards: newPos<this.state.current,
-        swap: !this.state.swap
+        swap: !this.state.swap,
+        appear: true,
       });
     }
 
@@ -119,7 +121,7 @@ function makeCarousel(WrappedComponent, config = {}) {
               <before.type
                 mountOnEnter
                 unmountOnExit
-                appear
+                appear={this.state.appear}
                 wait={this.props.defaultWait}
                 {...before.props}
                 opposite
@@ -132,7 +134,7 @@ function makeCarousel(WrappedComponent, config = {}) {
               <after.type
                 mountOnEnter
                 unmountOnExit
-                appear
+                appear={this.state.appear}
                 wait={this.props.defaultWait}
                 {...after.props}
                 opposite