151 lines
7.5 KiB
JavaScript
151 lines
7.5 KiB
JavaScript
"use strict";
|
|
|
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
var _typeof3 = require("@babel/runtime/helpers/typeof");
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
exports.default = void 0;
|
|
exports.genCSSMotion = genCSSMotion;
|
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
|
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
|
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
var _findDOMNode = _interopRequireDefault(require("rc-util/lib/Dom/findDOMNode"));
|
|
var _ref2 = require("rc-util/lib/ref");
|
|
var React = _interopRequireWildcard(require("react"));
|
|
var _context = require("./context");
|
|
var _DomWrapper = _interopRequireDefault(require("./DomWrapper"));
|
|
var _useStatus3 = _interopRequireDefault(require("./hooks/useStatus"));
|
|
var _useStepQueue = require("./hooks/useStepQueue");
|
|
var _interface = require("./interface");
|
|
var _motion = require("./util/motion");
|
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
/* eslint-disable react/default-props-match-prop-types, react/no-multi-comp, react/prop-types */
|
|
|
|
/**
|
|
* `transitionSupport` is used for none transition test case.
|
|
* Default we use browser transition event support check.
|
|
*/
|
|
function genCSSMotion(config) {
|
|
var transitionSupport = config;
|
|
if ((0, _typeof2.default)(config) === 'object') {
|
|
transitionSupport = config.transitionSupport;
|
|
}
|
|
function isSupportTransition(props, contextMotion) {
|
|
return !!(props.motionName && transitionSupport && contextMotion !== false);
|
|
}
|
|
var CSSMotion = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
var _props$visible = props.visible,
|
|
visible = _props$visible === void 0 ? true : _props$visible,
|
|
_props$removeOnLeave = props.removeOnLeave,
|
|
removeOnLeave = _props$removeOnLeave === void 0 ? true : _props$removeOnLeave,
|
|
forceRender = props.forceRender,
|
|
children = props.children,
|
|
motionName = props.motionName,
|
|
leavedClassName = props.leavedClassName,
|
|
eventProps = props.eventProps;
|
|
var _React$useContext = React.useContext(_context.Context),
|
|
contextMotion = _React$useContext.motion;
|
|
var supportMotion = isSupportTransition(props, contextMotion);
|
|
|
|
// Ref to the react node, it may be a HTMLElement
|
|
var nodeRef = (0, React.useRef)();
|
|
// Ref to the dom wrapper in case ref can not pass to HTMLElement
|
|
var wrapperNodeRef = (0, React.useRef)();
|
|
function getDomElement() {
|
|
try {
|
|
// Here we're avoiding call for findDOMNode since it's deprecated
|
|
// in strict mode. We're calling it only when node ref is not
|
|
// an instance of DOM HTMLElement. Otherwise use
|
|
// findDOMNode as a final resort
|
|
return nodeRef.current instanceof HTMLElement ? nodeRef.current : (0, _findDOMNode.default)(wrapperNodeRef.current);
|
|
} catch (e) {
|
|
// Only happen when `motionDeadline` trigger but element removed.
|
|
return null;
|
|
}
|
|
}
|
|
var _useStatus = (0, _useStatus3.default)(supportMotion, visible, getDomElement, props),
|
|
_useStatus2 = (0, _slicedToArray2.default)(_useStatus, 4),
|
|
status = _useStatus2[0],
|
|
statusStep = _useStatus2[1],
|
|
statusStyle = _useStatus2[2],
|
|
mergedVisible = _useStatus2[3];
|
|
|
|
// Record whether content has rendered
|
|
// Will return null for un-rendered even when `removeOnLeave={false}`
|
|
var renderedRef = React.useRef(mergedVisible);
|
|
if (mergedVisible) {
|
|
renderedRef.current = true;
|
|
}
|
|
|
|
// ====================== Refs ======================
|
|
var setNodeRef = React.useCallback(function (node) {
|
|
nodeRef.current = node;
|
|
(0, _ref2.fillRef)(ref, node);
|
|
}, [ref]);
|
|
|
|
// ===================== Render =====================
|
|
var motionChildren;
|
|
var mergedProps = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, eventProps), {}, {
|
|
visible: visible
|
|
});
|
|
if (!children) {
|
|
// No children
|
|
motionChildren = null;
|
|
} else if (status === _interface.STATUS_NONE) {
|
|
// Stable children
|
|
if (mergedVisible) {
|
|
motionChildren = children((0, _objectSpread2.default)({}, mergedProps), setNodeRef);
|
|
} else if (!removeOnLeave && renderedRef.current && leavedClassName) {
|
|
motionChildren = children((0, _objectSpread2.default)((0, _objectSpread2.default)({}, mergedProps), {}, {
|
|
className: leavedClassName
|
|
}), setNodeRef);
|
|
} else if (forceRender || !removeOnLeave && !leavedClassName) {
|
|
motionChildren = children((0, _objectSpread2.default)((0, _objectSpread2.default)({}, mergedProps), {}, {
|
|
style: {
|
|
display: 'none'
|
|
}
|
|
}), setNodeRef);
|
|
} else {
|
|
motionChildren = null;
|
|
}
|
|
} else {
|
|
var _classNames;
|
|
// In motion
|
|
var statusSuffix;
|
|
if (statusStep === _interface.STEP_PREPARE) {
|
|
statusSuffix = 'prepare';
|
|
} else if ((0, _useStepQueue.isActive)(statusStep)) {
|
|
statusSuffix = 'active';
|
|
} else if (statusStep === _interface.STEP_START) {
|
|
statusSuffix = 'start';
|
|
}
|
|
var motionCls = (0, _motion.getTransitionName)(motionName, "".concat(status, "-").concat(statusSuffix));
|
|
motionChildren = children((0, _objectSpread2.default)((0, _objectSpread2.default)({}, mergedProps), {}, {
|
|
className: (0, _classnames.default)((0, _motion.getTransitionName)(motionName, status), (_classNames = {}, (0, _defineProperty2.default)(_classNames, motionCls, motionCls && statusSuffix), (0, _defineProperty2.default)(_classNames, motionName, typeof motionName === 'string'), _classNames)),
|
|
style: statusStyle
|
|
}), setNodeRef);
|
|
}
|
|
|
|
// Auto inject ref if child node not have `ref` props
|
|
if ( /*#__PURE__*/React.isValidElement(motionChildren) && (0, _ref2.supportRef)(motionChildren)) {
|
|
var _ref = motionChildren,
|
|
originNodeRef = _ref.ref;
|
|
if (!originNodeRef) {
|
|
motionChildren = /*#__PURE__*/React.cloneElement(motionChildren, {
|
|
ref: setNodeRef
|
|
});
|
|
}
|
|
}
|
|
return /*#__PURE__*/React.createElement(_DomWrapper.default, {
|
|
ref: wrapperNodeRef
|
|
}, motionChildren);
|
|
});
|
|
CSSMotion.displayName = 'CSSMotion';
|
|
return CSSMotion;
|
|
}
|
|
var _default = genCSSMotion(_motion.supportTransition);
|
|
exports.default = _default; |