CSSMotion.js 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. var _typeof3 = require("@babel/runtime/helpers/typeof");
  4. Object.defineProperty(exports, "__esModule", {
  5. value: true
  6. });
  7. exports.default = void 0;
  8. exports.genCSSMotion = genCSSMotion;
  9. var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
  10. var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
  11. var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
  12. var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
  13. var _classnames = _interopRequireDefault(require("classnames"));
  14. var _findDOMNode = _interopRequireDefault(require("rc-util/lib/Dom/findDOMNode"));
  15. var _ref = require("rc-util/lib/ref");
  16. var _react = _interopRequireWildcard(require("react"));
  17. var React = _react;
  18. var _context = require("./context");
  19. var _DomWrapper = _interopRequireDefault(require("./DomWrapper"));
  20. var _useStatus3 = _interopRequireDefault(require("./hooks/useStatus"));
  21. var _useStepQueue = require("./hooks/useStepQueue");
  22. var _interface = require("./interface");
  23. var _motion = require("./util/motion");
  24. function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
  25. function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
  26. /* eslint-disable react/default-props-match-prop-types, react/no-multi-comp, react/prop-types */
  27. /**
  28. * `transitionSupport` is used for none transition test case.
  29. * Default we use browser transition event support check.
  30. */
  31. function genCSSMotion(config) {
  32. var transitionSupport = config;
  33. if ((0, _typeof2.default)(config) === 'object') {
  34. transitionSupport = config.transitionSupport;
  35. }
  36. function isSupportTransition(props, contextMotion) {
  37. return !!(props.motionName && transitionSupport && contextMotion !== false);
  38. }
  39. var CSSMotion = /*#__PURE__*/React.forwardRef(function (props, ref) {
  40. var _props$visible = props.visible,
  41. visible = _props$visible === void 0 ? true : _props$visible,
  42. _props$removeOnLeave = props.removeOnLeave,
  43. removeOnLeave = _props$removeOnLeave === void 0 ? true : _props$removeOnLeave,
  44. forceRender = props.forceRender,
  45. children = props.children,
  46. motionName = props.motionName,
  47. leavedClassName = props.leavedClassName,
  48. eventProps = props.eventProps;
  49. var _React$useContext = React.useContext(_context.Context),
  50. contextMotion = _React$useContext.motion;
  51. var supportMotion = isSupportTransition(props, contextMotion);
  52. // Ref to the react node, it may be a HTMLElement
  53. var nodeRef = (0, _react.useRef)();
  54. // Ref to the dom wrapper in case ref can not pass to HTMLElement
  55. var wrapperNodeRef = (0, _react.useRef)();
  56. function getDomElement() {
  57. try {
  58. // Here we're avoiding call for findDOMNode since it's deprecated
  59. // in strict mode. We're calling it only when node ref is not
  60. // an instance of DOM HTMLElement. Otherwise use
  61. // findDOMNode as a final resort
  62. return nodeRef.current instanceof HTMLElement ? nodeRef.current : (0, _findDOMNode.default)(wrapperNodeRef.current);
  63. } catch (e) {
  64. // Only happen when `motionDeadline` trigger but element removed.
  65. return null;
  66. }
  67. }
  68. var _useStatus = (0, _useStatus3.default)(supportMotion, visible, getDomElement, props),
  69. _useStatus2 = (0, _slicedToArray2.default)(_useStatus, 4),
  70. status = _useStatus2[0],
  71. statusStep = _useStatus2[1],
  72. statusStyle = _useStatus2[2],
  73. mergedVisible = _useStatus2[3];
  74. // Record whether content has rendered
  75. // Will return null for un-rendered even when `removeOnLeave={false}`
  76. var renderedRef = React.useRef(mergedVisible);
  77. if (mergedVisible) {
  78. renderedRef.current = true;
  79. }
  80. // ====================== Refs ======================
  81. var setNodeRef = React.useCallback(function (node) {
  82. nodeRef.current = node;
  83. (0, _ref.fillRef)(ref, node);
  84. }, [ref]);
  85. // ===================== Render =====================
  86. var motionChildren;
  87. var mergedProps = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, eventProps), {}, {
  88. visible: visible
  89. });
  90. if (!children) {
  91. // No children
  92. motionChildren = null;
  93. } else if (status === _interface.STATUS_NONE) {
  94. // Stable children
  95. if (mergedVisible) {
  96. motionChildren = children((0, _objectSpread2.default)({}, mergedProps), setNodeRef);
  97. } else if (!removeOnLeave && renderedRef.current && leavedClassName) {
  98. motionChildren = children((0, _objectSpread2.default)((0, _objectSpread2.default)({}, mergedProps), {}, {
  99. className: leavedClassName
  100. }), setNodeRef);
  101. } else if (forceRender || !removeOnLeave && !leavedClassName) {
  102. motionChildren = children((0, _objectSpread2.default)((0, _objectSpread2.default)({}, mergedProps), {}, {
  103. style: {
  104. display: 'none'
  105. }
  106. }), setNodeRef);
  107. } else {
  108. motionChildren = null;
  109. }
  110. } else {
  111. // In motion
  112. var statusSuffix;
  113. if (statusStep === _interface.STEP_PREPARE) {
  114. statusSuffix = 'prepare';
  115. } else if ((0, _useStepQueue.isActive)(statusStep)) {
  116. statusSuffix = 'active';
  117. } else if (statusStep === _interface.STEP_START) {
  118. statusSuffix = 'start';
  119. }
  120. var motionCls = (0, _motion.getTransitionName)(motionName, "".concat(status, "-").concat(statusSuffix));
  121. motionChildren = children((0, _objectSpread2.default)((0, _objectSpread2.default)({}, mergedProps), {}, {
  122. className: (0, _classnames.default)((0, _motion.getTransitionName)(motionName, status), (0, _defineProperty2.default)((0, _defineProperty2.default)({}, motionCls, motionCls && statusSuffix), motionName, typeof motionName === 'string')),
  123. style: statusStyle
  124. }), setNodeRef);
  125. }
  126. // Auto inject ref if child node not have `ref` props
  127. if ( /*#__PURE__*/React.isValidElement(motionChildren) && (0, _ref.supportRef)(motionChildren)) {
  128. var originNodeRef = (0, _ref.getNodeRef)(motionChildren);
  129. if (!originNodeRef) {
  130. motionChildren = /*#__PURE__*/React.cloneElement(motionChildren, {
  131. ref: setNodeRef
  132. });
  133. }
  134. }
  135. return /*#__PURE__*/React.createElement(_DomWrapper.default, {
  136. ref: wrapperNodeRef
  137. }, motionChildren);
  138. });
  139. CSSMotion.displayName = 'CSSMotion';
  140. return CSSMotion;
  141. }
  142. var _default = exports.default = genCSSMotion(_motion.supportTransition);