123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137 |
- 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, getNodeRef, 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 {
- // 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), _defineProperty(_defineProperty({}, motionCls, motionCls && statusSuffix), motionName, typeof motionName === 'string')),
- style: statusStyle
- }), setNodeRef);
- }
- // Auto inject ref if child node not have `ref` props
- if ( /*#__PURE__*/React.isValidElement(motionChildren) && supportRef(motionChildren)) {
- var originNodeRef = getNodeRef(motionChildren);
- 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);
|