Sample usage for Motion.onRest

TeleportableMotion.jsx

/*  Copyright 2016 Google Inc.
 *  Licensed under the Apache License, Version 2.0 (the "License");
 *  you may not use this file except in compliance with the License.
 *  You may obtain a copy of the License at
 *  
 *  http://www.apache.org/licenses/LICENSE-2.0
 *  
 *  Unless required by applicable law or agreed to in writing, software
 *  distributed under the License is distributed on an "AS IS" BASIS,
 *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *  See the License for the specific language governing permissions and
 *  limitations under the License.
 */
 
var React = require('react');

var {
  Motion,
} = require('react-motion');

var TeleportableMotion = React.createClass(
  {
    propTypes: {
      ...Motion.propTypes,
      home: React.PropTypes.objectOf(React.PropTypes.number),
    },

    lastInterpolatedStyle: {},
    jumpToNextHome: true,

    getDefaultProps() {
      return {
        home: {},
      }
    },

    getInitialState() {
      return {
        style: this.props.style,
      }
    },

    componentWillReceiveProps(nextProps) {
      var {
        style,
        home,
      } = nextProps;
      
      if (
        this.jumpToNextHome && 

        Object.keys(style).every(
          key => style[key].hasOwnProperty('val')
        ) && 

        Object.keys(home).some(
          key => home[key] !== style[key].val
        )
      ) {

        this.setState(
          {
            style: {
              ...style,
              ...home,
            }
          }
        );

        if (this.animationID) {
          cancelAnimationFrame(this.animationID);
        }

        this.animationID = requestAnimationFrame(
          () => {
            this.setState(
              {
                style
              }
            )
            this.jumpToNextHome = false;
            this.animationID = null;
          }
        );
      } else {
        this.setState(
          {
            style,
          }
        )
      }
    },

    render() {
      var {
        home,
        children,
        onRest,

        style: propsStyle,
        ...propsPassthrough
      } = this.props;

      var {
        style,
      } = this.state;

      return (
        <Motion
          onRest = {
            () => {
              this.jumpToNextHome = Object.keys(home).every(
                key => this.lastInterpolatedStyle[key] === home[key]
              );

              if (onRest)
                onRest();
            }
          }

          style = { style }

          { ...propsPassthrough }
        >
          {
            interpolatedStyle => {
              this.lastInterpolatedStyle = interpolatedStyle;

              return children(interpolatedStyle);
            }
          }
        </Motion>
      )
    },
  }
);

module.exports = TeleportableMotion;