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 _createSuper from "@babel/runtime/helpers/createSuper";
var _excluded = ["children"];
import { cloneElement, isValidElement, PureComponent } from 'react';
import { findDOMNode } from 'react-dom';
import isEqual from 'lodash/isEqual';
import omit from 'lodash/omit';
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, _excluded);

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

      return children;
    }
  }]);

  return AnimateChild;
}(PureComponent);

export { AnimateChild as default };
AnimateChild.displayName = 'AnimateChild';
//# sourceMappingURL=AnimateChild.js.map