You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
InternshipProject/node_modules/rc-motion/lib/CSSMotion.js

161 lines
5.8 KiB

"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
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 React = _interopRequireWildcard(require("react"));
var _findDOMNode = _interopRequireDefault(require("rc-util/lib/Dom/findDOMNode"));
var _ref = require("rc-util/lib/ref");
var _classnames = _interopRequireDefault(require("classnames"));
var _motion = require("./util/motion");
var _interface = require("./interface");
var _useStatus3 = _interopRequireDefault(require("./hooks/useStatus"));
var _DomWrapper = _interopRequireDefault(require("./DomWrapper"));
var _useStepQueue = require("./hooks/useStepQueue");
/* 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) {
return !!(props.motionName && transitionSupport);
}
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 supportMotion = isSupportTransition(props); // 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, _ref.fillRef)(ref, node);
}, []); // ===================== 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 || !isSupportTransition(props)) {
// Stable children
if (mergedVisible) {
motionChildren = children((0, _objectSpread2.default)({}, mergedProps), setNodeRef);
} else if (!removeOnLeave && renderedRef.current) {
motionChildren = children((0, _objectSpread2.default)((0, _objectSpread2.default)({}, mergedProps), {}, {
className: leavedClassName
}), setNodeRef);
} else if (forceRender) {
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';
}
motionChildren = children((0, _objectSpread2.default)((0, _objectSpread2.default)({}, mergedProps), {}, {
className: (0, _classnames.default)((0, _motion.getTransitionName)(motionName, status), (_classNames = {}, (0, _defineProperty2.default)(_classNames, (0, _motion.getTransitionName)(motionName, "".concat(status, "-").concat(statusSuffix)), statusSuffix), (0, _defineProperty2.default)(_classNames, motionName, typeof motionName === 'string'), _classNames)),
style: statusStyle
}), setNodeRef);
}
return /*#__PURE__*/React.createElement(_DomWrapper.default, {
ref: wrapperNodeRef
}, motionChildren);
});
CSSMotion.displayName = 'CSSMotion';
return CSSMotion;
}
var _default = genCSSMotion(_motion.supportTransition);
exports.default = _default;