CSSMotion.js
5.38 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.genCSSMotion = genCSSMotion;
exports.default = void 0;
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 {
return (0, _findDOMNode.default)(nodeRef.current || 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]; // ====================== Refs ======================
var originRef = (0, React.useRef)(ref);
originRef.current = ref;
var setNodeRef = React.useCallback(function (node) {
nodeRef.current = node;
(0, _ref.fillRef)(originRef.current, 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) {
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;