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

Common library for the Shopgate Connect PWA.

import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
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!
 */
let Transition = /*#__PURE__*/function (_Component) {
  function Transition() {
    return _Component.apply(this, arguments) || this;
  }
  _inheritsLoose(Transition, _Component);
  var _proto = Transition.prototype;
  /**
   * Runs the transition animation initially.
   */
  _proto.componentDidMount = function componentDidMount() {
    this.animate();
  }

  /**
   * Checks if transition related props (from/to) have updated and runs the animation.
   * @param {Object} nextProps - The received props.
   */;
  _proto.UNSAFE_componentWillReceiveProps = 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}
   */;
  _proto.getFirstChild = function getFirstChild() {
    return React.Children.map(this.props.children, (element, idx) => (/*#__PURE__*/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.
   */;
  _proto.animate = function animate(props = this.props) {
    // eslint-disable-next-line react/no-find-dom-node, react/no-string-refs
    const element = findDOMNode(this.refs[0]);
    const duration = props.duration / 1000;
    const 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, {
        ...props.to,
        ...transitionSettings
      });
    } else if (props.from) {
      // Starts a {from} only transition.
      this.tween = gsap.from(element, duration, {
        ...props.from,
        ...transitionSettings
      });
    } else if (props.to) {
      // Starts a {to} only transition.
      this.tween = gsap.to(element, duration, {
        ...props.to,
        ...transitionSettings
      });
    }
  }

  /**
   * Renders the component.
   * @returns {JSX}
   */;
  _proto.render = function render() {
    return React.Children.only(this.getFirstChild());
  };
  return Transition;
}(Component);
Transition.defaultProps = {
  easing: 'Power1.easeOut',
  origin: '0 0 0',
  duration: 150,
  from: null,
  onComplete: () => {},
  set: null,
  to: null
};
export default Transition;