choerodon-ui/lib/animate/AnimateChild.js

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

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));

var _react = require("react");

var _reactDom = require("react-dom");

var _isEqual = _interopRequireDefault(require("lodash/isEqual"));

var _omit = _interopRequireDefault(require("lodash/omit"));

var _cssAnimation = _interopRequireWildcard(require("css-animation"));

var _util = _interopRequireDefault(require("./util"));

var _excluded = ["children"];
var transitionMap = {
  enter: 'transitionEnter',
  appear: 'transitionAppear',
  leave: 'transitionLeave'
};

var AnimateChild = /*#__PURE__*/function (_PureComponent) {
  (0, _inherits2["default"])(AnimateChild, _PureComponent);

  var _super = (0, _createSuper2["default"])(AnimateChild);

  function AnimateChild() {
    (0, _classCallCheck2["default"])(this, AnimateChild);
    return _super.apply(this, arguments);
  }

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

      var node = (0, _reactDom.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 = (0, _typeof2["default"])(transitionName) === 'object';
        this.stop();

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

        if ((_cssAnimation.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 = (0, _cssAnimation["default"])(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 ((0, _isEqual["default"])(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 = (0, _objectWithoutProperties2["default"])(_this$props, _excluded);

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

      return children;
    }
  }]);
  return AnimateChild;
}(_react.PureComponent);

exports["default"] = AnimateChild;
AnimateChild.displayName = 'AnimateChild';
//# sourceMappingURL=AnimateChild.js.map