adding support for mounting props

lukesthl · Feb 19, 2018 · 33f585e · 33f585e
1 parent 782cd5d
commit 33f585e
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 48 deletions.
diff --git a/README.md b/README.md
@@ -1,14 +1,11 @@
 # React Reveal
 
-[React Reveal](https://www.react-reveal.com/) is an attention management framework for your React app. The traditional way of calling attention to a certain element has been in-your-face method of placing it in a popup or putting it in a sticky navigation element like sticky headers, footers or sidebars. As the number of these elements proliferate, the app is at danger of starting to resemble a control panel from a jumbo jet cockpit. There should be a better way of managing a user attention and `react-reveal`  can do just that. 
-
-Instead of trying to squeeze everything that requires attention into one screen, you can draw user attention to important bits as they scroll past. `react-reveal` provides a dead simple way to add cool reveal-on-scroll animations to your React app. In addition, it has a first class support for collapsing elements thereby abolishing the need for the universally hated popups.
-
-The other problem many single page applications are facing is actually their speed. As you add and remove elements from the page transitions are often rough and jerky. `react-reveal` rich suite of effects could really smoothen these transitions to make for a modern and polished user experience.
-
-`react-reveal` is MIT licensed, supports server side rendering, won't mess your SEO, compatible with [react transition group](https://www.react-reveal.com/docs/transition-group/) and has a tiny footprint in the application js bundle ( doesn't require any CSS files either ). So, what are you waiting for? Come and join the React UX revolution!
-
-Last but not least, do star the [Github repository](https://github.com/rnosov/react-reveal) if you liked this package.
+[React Reveal](https://www.react-reveal.com/) is
+an attention management 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
+the [Github repository](https://github.com/rnosov/react-reveal).
 
 ## Examples
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-reveal",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "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
@@ -47,6 +47,8 @@ const
     //onExit: func,
     //onExiting: func,
     //onExited: func,
+    unmountOnExit: bool,
+    mountOnEnter: bool,
     inEffect: inOut.isRequired,
     outEffect: oneOfType([ inOut, oneOf([ false ]) ]).isRequired,
   },
@@ -81,6 +83,7 @@ class RevealBase extends React.Component {
       collapse: props.collapse ? RevealBase.getInitialCollapseStyle(props): void 0,
       style: {
         opacity: !this.isOn && props.outEffect ? 0 : void 0,
+        //visibility: props.when  ? 'visible' : 'hidden',
       },
     };
     this.savedChild = false;
@@ -116,18 +119,18 @@ class RevealBase extends React.Component {
     return ( delta > tail - window.innerHeight ) && ( delta < h - tail );
   }
 
-  hide() {
-    if (this.props.outEffect)
-      this.setState({ style: { opacity: 0 } });
-  }
+  //hide() {
+  //  if (this.props.outEffect)
+  //    this.setState({ style: { opacity: 0 } });
+  //}
 
   resize() {
     if (!this||!this.el||!this.isOn)
       return;
     if ( this.inViewport() ) {
       this.unlisten();
       this.isShown = this.isOn;
-      this.setState({ style: { opacity: this.isOn || !this.props.outEffect ? 1 : 0 } });
+      this.setState({ hasExited: !this.isOn, hasAppeared: true, collapse: undefined, style: { opacity: this.isOn || !this.props.outEffect ? 1 : 0 } });
       this.onReveal(this.props);
       //if (this.props.onReveal && this.isOn)
       //  this.props.wait ? this.onRevealTimeout = window.setTimeout(this.props.onReveal, this.props.wait) : this.props.onReveal();
@@ -139,12 +142,12 @@ class RevealBase extends React.Component {
       return;
     this.savedChild = false;
     if (!this.isShown) {
-      this.setState( { style: { ...this.state.style, visibility: 'hidden' }/*, collapsing: false */});
+      this.setState( { hasExited: true, style: { ...this.state.style, visibility: 'hidden'}/*, collapsing: false */});
+      //if (this.props.onExited)
+      //  this.props.onExited(this.el);
       if (this.props.collapse)
         window.document.dispatchEvent(collapseend);
     }
-    if (this.props.onExited)
-      this.props.onExited(this.el);
   }
 
   animationEnd(func, cascade, { forever, count, delay, duration }) {
@@ -209,7 +212,11 @@ class RevealBase extends React.Component {
     let animationName = (('style' in inOut) && inOut.style.animationName) || void 0;
     if ((props.outEffect||this.isOn) && inOut.make)
         animationName = inOut.make();
-    let state = { collapse: undefined, style: {
+    let state = {/* status: leaving ? 'exiting':'entering',*/
+        hasAppeared: true,
+        hasExited: false,
+        collapse: undefined,
+        style: {
         ...inOut.style,
         animationDuration: `${inOut.duration}ms`,
         animationDelay: `${inOut.delay}ms`,
@@ -302,7 +309,8 @@ class RevealBase extends React.Component {
       ) {
       this.isShown = true;
       this.setState({
-        collapse: this.props.collapse ? {...this.state.collapse, height: this.getDimensionValue()} : this.state.collapse,
+        hasAppeared: true,
+        collapse: this.props.collapse ? { height: this.getDimensionValue() } : this.state.collapse,
         style: { opacity: 1,}
       });
       this.onReveal(this.props);
@@ -356,9 +364,9 @@ class RevealBase extends React.Component {
 
   static getInitialCollapseStyle(props) {
     return {
+          height: 0,
           visibility: props.when  ? 'visible' : 'hidden',
           //height: props.when ? void 0 : 0,
-          height: 0,
           //padding: 0,
           //border: 0,
           //boxSizing: 'border-box',
@@ -378,7 +386,7 @@ class RevealBase extends React.Component {
     if (props.collapse && !this.props.collapse) {
       this.setState({ style: { }, collapse: RevealBase.getInitialCollapseStyle(props)});
       this.isShown = false;
-      return;
+      //return;
     }
     //if ( this.isOn && props.collapse === true && this.dummyEl && this.dummyEl.offsetHeight && this.state.style.height !== this.dummyEl.offsetHeight )
     //  this.setState({ style: { ...this.state.style, height: this.dummyEl.offsetHeight } });
@@ -392,6 +400,7 @@ class RevealBase extends React.Component {
   }
 
   getChild() {
+
     if (this.savedChild && !this.props.disabled)
       return this.savedChild;
     if (typeof this.props.children === 'object') {
@@ -405,17 +414,19 @@ class RevealBase extends React.Component {
   }
 
   render() {
-    //if (this.props.cascade) console.log('Render:', this.props);
-    let child = this.getChild();
+    let mount;
+    if (!this.state.hasAppeared)
+      mount = !this.props.mountOnEnter || this.isOn;
+    else
+      mount = !this.props.unmountOnExit || !this.state.hasExited || this.isOn;
+    const child = this.getChild();
     //if (this.props.disabled)
     //  return child;
     if (typeof child.ref === 'function')
       this.childRef = child.ref;
     let
       newChildren = false,
       { style, className, children } = child.props;
-      //style = { ...style, ...this.props.style };
-      //className = this.props.className ? (className||'') + ' ' + this.props.className : className;
     let
       newClass = this.props.disabled ? className : `${ this.props.outEffect ? namespace : '' }${ this.state.className ? ' ' + this.state.className : '' }${ className ? ' ' + className : '' }`||void 0,
       newStyle;
@@ -428,16 +439,12 @@ class RevealBase extends React.Component {
     const props = { ...this.props.props, className: newClass, style: newStyle, [this.props.refProp]: this.saveRef };
     //if (this.props.collapse && !this.props.disabled)
     //  props.key = 1;
-    const el = React.cloneElement(child, props, newChildren||children);
+    const el = React.cloneElement(child, props, mount ? newChildren||children :  undefined);
     if ( 'collapse' in this.props )
       return this.props.collapseEl
-        ? React.cloneElement(this.props.collapseEl, { style: {...this.props.collapseEl.style, ...(this.props.disabled ? undefined : this.state.collapse)}, children: el })
+        ? React.cloneElement(this.props.collapseEl, { style: {...this.props.collapseEl.style, ...(this.props.disabled ? undefined : this.state.collapse)}, children: (el) })
         : <div style={ this.props.disabled ? undefined : this.state.collapse } children={el} />;
       //return <div {...this.props.collapse} style={ this.props.disabled ? undefined : this.state.collapse } children={el} />;
-    //if ( 'collapse' in this.props )
-    //  return typeof this.props.collapse === 'object'
-    //    ? <div {...this.props.collapse.props} style={{...this.props.collapse.style,...(this.props.disabled?undefined:this.state.collapse)}} children={el} />
-    //    : <div style={this.props.disabled?undefined:this.state.collapse} children={el} />;
     return el;
   }
 

diff --git a/src/lib/makeCarousel.js b/src/lib/makeCarousel.js
@@ -117,25 +117,29 @@ function makeCarousel(WrappedComponent, config = {}) {
           children={[
             <div ref={ node => this.beforeNode = node } key={1} style={{ position: 'absolute', left: 0, top: 0, width: '100%', height: '100%', zIndex: swap ? 1 : 2 }}>
               <before.type
-                    appear
-                    wait={this.props.defaultWait}
-                    {...before.props}
-                    opposite
-                    when={!swap}
-                    mirror={backwards}
-                    onReveal={!swap ? this.handleReveal : void 0}
-                  />
+                mountOnEnter
+                unmountOnExit
+                appear
+                wait={this.props.defaultWait}
+                {...before.props}
+                opposite
+                when={!swap}
+                mirror={backwards}
+                onReveal={!swap ? this.handleReveal : void 0}
+              />
             </div>,
             <div key={2} ref={ node => this.afterNode = node } style={{ position: 'absolute', left: 0, top: 0, width: '100%', height: '100%', zIndex: swap ? 2 : 1 }}>
               <after.type
-                    appear
-                    wait={this.props.defaultWait}
-                    {...after.props}
-                    opposite
-                    when={swap}
-                    mirror={backwards}
-                    onReveal={swap ? this.handleReveal : void 0}
-                  />
+                mountOnEnter
+                unmountOnExit
+                appear
+                wait={this.props.defaultWait}
+                {...after.props}
+                opposite
+                when={swap}
+                mirror={backwards}
+                onReveal={swap ? this.handleReveal : void 0}
+              />
             </div>
           ]}
         />