choerodon-ui/es/animate/AnimateChild.js

An enterprise-class UI design language and React-based implementation

import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _typeof from "@babel/runtime/helpers/typeof";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";

function _createSuper(Derived) {
  function isNativeReflectConstruct() {
    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
    if (Reflect.construct.sham) return false;
    if (typeof Proxy === "function") return true;

    try {
      Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
      return true;
    } catch (e) {
      return false;
    }
  }

  return function () {
    var Super = _getPrototypeOf(Derived),
        result;

    if (isNativeReflectConstruct()) {
      var NewTarget = _getPrototypeOf(this).constructor;

      result = Reflect.construct(Super, arguments, NewTarget);
    } else {
      result = Super.apply(this, arguments);
    }

    return _possibleConstructorReturn(this, result);
  };
}

import { cloneElement, isValidElement, PureComponent } from 'react';
import { findDOMNode } from 'react-dom';
import isEqual from 'lodash/isEqual';
import omit from 'lodash/omit';
import PropTypes from 'prop-types';
import cssAnimate, { isCssAnimationSupported } from 'css-animation';
import animUtil from './util';
var transitionMap = {
  enter: 'transitionEnter',
  appear: 'transitionAppear',
  leave: 'transitionLeave'
};

var AnimateChild =
/*#__PURE__*/
function (_PureComponent) {
  _inherits(AnimateChild, _PureComponent);

  var _super = _createSuper(AnimateChild);

  function AnimateChild() {
    _classCallCheck(this, AnimateChild);

    return _super.apply(this, arguments);
  }

  _createClass(AnimateChild, [{
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      this.stop();
    }
  }, {
    key: "componentWillEnter",
    value: function componentWillEnter(done) {
      if (animUtil.isEnterSupported(this.props)) {
        this.transition('enter', done);
      } else {
        done(this);
      }
    }
  }, {
    key: "componentWillAppear",
    value: function componentWillAppear(done) {
      if (animUtil.isAppearSupported(this.props)) {
        this.transition('appear', done);
      } else {
        done(this);
      }
    }
  }, {
    key: "componentWillLeave",
    value: function componentWillLeave(done) {
      if (animUtil.isLeaveSupported(this.props)) {
        this.transition('leave', done);
      } else {
        done(this);
      }
    }
  }, {
    key: "transition",
    value: function transition(animationType, finishCallback) {
      var _this = this;

      var node = findDOMNode(this);

      if (node) {
        var props = this.props;
        var transitionName = props.transitionName,
            _props$animation = props.animation,
            animation = _props$animation === void 0 ? {} : _props$animation;
        var nameIsObj = _typeof(transitionName) === 'object';
        this.stop();

        var end = function end() {
          _this.stopper = null;
          finishCallback(_this);
        };

        if ((isCssAnimationSupported || !animation[animationType]) && transitionName && props[transitionMap[animationType]]) {
          var name = nameIsObj ? transitionName[animationType] : "".concat(transitionName, "-").concat(animationType);
          var activeName = "".concat(name, "-active");

          if (nameIsObj && transitionName["".concat(animationType, "Active")]) {
            activeName = transitionName["".concat(animationType, "Active")];
          }

          this.stopper = cssAnimate(node, {
            name: name,
            active: activeName
          }, end);
        } else {
          this.stopper = animation[animationType](node, end);
        }
      }
    }
  }, {
    key: "stop",
    value: function stop() {
      var stopper = this.stopper;

      if (stopper) {
        this.stopper = null;
        stopper.stop();
      }
    }
  }, {
    key: "getStyle",
    value: function getStyle(style) {
      if (isEqual(style, this.style)) {
        return this.style;
      }

      this.style = style;
      return style;
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props = this.props,
          children = _this$props.children,
          otherProps = _objectWithoutProperties(_this$props, ["children"]);

      if (isValidElement(children)) {
        var props = omit(otherProps, ['animation', 'transitionName', 'transitionEnter', 'transitionAppear', 'transitionLeave']);
        var style = children.props.style;
        return cloneElement(children, _objectSpread({}, props, {
          style: this.getStyle(_objectSpread({}, props.style, {}, style))
        }));
      }

      return children;
    }
  }]);

  return AnimateChild;
}(PureComponent);

export { AnimateChild as default };
AnimateChild.displayName = 'AnimateChild';
AnimateChild.propTypes = {
  children: PropTypes.any,
  transitionName: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
  animation: PropTypes.any
};
//# sourceMappingURL=AnimateChild.js.map