import _defineProperty from "@babel/runtime/helpers/esm/defineProperty"; import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2"; import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray"; import _typeof from "@babel/runtime/helpers/esm/typeof"; /* eslint-disable react/default-props-match-prop-types, react/no-multi-comp, react/prop-types */ import classNames from 'classnames'; import findDOMNode from "rc-util/es/Dom/findDOMNode"; import { fillRef, supportRef } from "rc-util/es/ref"; import * as React from 'react'; import { useRef } from 'react'; import { Context } from "./context"; import DomWrapper from "./DomWrapper"; import useStatus from "./hooks/useStatus"; import { isActive } from "./hooks/useStepQueue"; import { STATUS_NONE, STEP_PREPARE, STEP_START } from "./interface"; import { getTransitionName, supportTransition } from "./util/motion"; /** * `transitionSupport` is used for none transition test case. * Default we use browser transition event support check. */ export function genCSSMotion(config) { var transitionSupport = config; if (_typeof(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), contextMotion = _React$useContext.motion; var supportMotion = isSupportTransition(props, contextMotion); // Ref to the react node, it may be a HTMLElement var nodeRef = useRef(); // Ref to the dom wrapper in case ref can not pass to HTMLElement var wrapperNodeRef = 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 : findDOMNode(wrapperNodeRef.current); } catch (e) { // Only happen when `motionDeadline` trigger but element removed. return null; } } var _useStatus = useStatus(supportMotion, visible, getDomElement, props), _useStatus2 = _slicedToArray(_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; fillRef(ref, node); }, [ref]); // ===================== Render ===================== var motionChildren; var mergedProps = _objectSpread(_objectSpread({}, eventProps), {}, { visible: visible }); if (!children) { // No children motionChildren = null; } else if (status === STATUS_NONE) { // Stable children if (mergedVisible) { motionChildren = children(_objectSpread({}, mergedProps), setNodeRef); } else if (!removeOnLeave && renderedRef.current && leavedClassName) { motionChildren = children(_objectSpread(_objectSpread({}, mergedProps), {}, { className: leavedClassName }), setNodeRef); } else if (forceRender || !removeOnLeave && !leavedClassName) { motionChildren = children(_objectSpread(_objectSpread({}, mergedProps), {}, { style: { display: 'none' } }), setNodeRef); } else { motionChildren = null; } } else { var _classNames; // In motion var statusSuffix; if (statusStep === STEP_PREPARE) { statusSuffix = 'prepare'; } else if (isActive(statusStep)) { statusSuffix = 'active'; } else if (statusStep === STEP_START) { statusSuffix = 'start'; } var motionCls = getTransitionName(motionName, "".concat(status, "-").concat(statusSuffix)); motionChildren = children(_objectSpread(_objectSpread({}, mergedProps), {}, { className: classNames(getTransitionName(motionName, status), (_classNames = {}, _defineProperty(_classNames, motionCls, motionCls && statusSuffix), _defineProperty(_classNames, motionName, typeof motionName === 'string'), _classNames)), style: statusStyle }), setNodeRef); } // Auto inject ref if child node not have `ref` props if ( /*#__PURE__*/React.isValidElement(motionChildren) && supportRef(motionChildren)) { var _ref = motionChildren, originNodeRef = _ref.ref; if (!originNodeRef) { motionChildren = /*#__PURE__*/React.cloneElement(motionChildren, { ref: setNodeRef }); } } return /*#__PURE__*/React.createElement(DomWrapper, { ref: wrapperNodeRef }, motionChildren); }); CSSMotion.displayName = 'CSSMotion'; return CSSMotion; } export default genCSSMotion(supportTransition);