@shopgate/pwa-common/components/Transition/index.js

Common library for the Shopgate Connect PWA.

function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=_getPrototypeOf(derived);return _possibleConstructorReturn(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],_getPrototypeOf(_this).constructor):derived.apply(_this,args));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import isEqual from'lodash/isEqual';import React,{Component}from'react';import PropTypes from'prop-types';import{findDOMNode}from'react-dom';import gsap from'gsap';/**
 * Handles a transition of an object.
 * This component only can have one child element at a time!
 */var Transition=/*#__PURE__*/function(_Component){function Transition(){_classCallCheck(this,Transition);return _callSuper(this,Transition,arguments);}_inherits(Transition,_Component);return _createClass(Transition,[{key:"componentDidMount",value:/**
   * Runs the transition animation initially.
   */function componentDidMount(){this.animate();}/**
   * Checks if transition related props (from/to) have updated and runs the animation.
   * @param {Object} nextProps - The received props.
   */},{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(nextProps){if(!isEqual(this.props.from,nextProps.from)||!isEqual(this.props.to,nextProps.to)){this.animate(nextProps);}}/**
   * Returns the first child of children.
   * @returns {React.Element}
   */},{key:"getFirstChild",value:function getFirstChild(){return React.Children.map(this.props.children,function(element,idx){return React.cloneElement(element,{ref:idx});})[0];}/**
   * Sets the transition state and runs the transition animation.
   * @param {Object} props - The props object the animation should be based upon.
   */},{key:"animate",value:function animate(){var props=arguments.length>0&&arguments[0]!==undefined?arguments[0]:this.props;// eslint-disable-next-line react/no-find-dom-node, react/no-string-refs
var element=findDOMNode(this.refs[0]);var duration=props.duration/1000;var transitionSettings={ease:props.easing,transformOrigin:props.origin,onComplete:props.onComplete,force3D:true,immediateRender:true};if(props.set){// Sets properties to an absolute state.
gsap.set(element,props.set);}if(this.tween){// Remove previously set tween.
this.tween.kill();}if(props.from&&props.to){// Starts a {from} -> {to} transition.
this.tween=gsap.fromTo(element,duration,props.from,_extends({},props.to,{},transitionSettings));}else if(props.from){// Starts a {from} only transition.
this.tween=gsap.from(element,duration,_extends({},props.from,{},transitionSettings));}else if(props.to){// Starts a {to} only transition.
this.tween=gsap.to(element,duration,_extends({},props.to,{},transitionSettings));}}/**
   * Renders the component.
   * @returns {JSX}
   */},{key:"render",value:function render(){return React.Children.only(this.getFirstChild());}}]);}(Component);_defineProperty(Transition,"defaultProps",{easing:'Power1.easeOut',origin:'0 0 0',duration:150,from:null,onComplete:function onComplete(){},set:null,to:null});export default Transition;