MotionTreeNode.js
3.32 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
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import * as React from 'react';
import { useEffect } from 'react';
import classNames from 'classnames';
import CSSMotion from 'rc-motion';
import TreeNode from './TreeNode';
import { getTreeNodeProps } from './utils/treeUtil';
import { TreeContext } from './contextTypes';
var MotionTreeNode = function MotionTreeNode(_ref, ref) {
var className = _ref.className,
style = _ref.style,
motion = _ref.motion,
motionNodes = _ref.motionNodes,
motionType = _ref.motionType,
onOriginMotionStart = _ref.onMotionStart,
onOriginMotionEnd = _ref.onMotionEnd,
active = _ref.active,
treeNodeRequiredProps = _ref.treeNodeRequiredProps,
props = _objectWithoutProperties(_ref, ["className", "style", "motion", "motionNodes", "motionType", "onMotionStart", "onMotionEnd", "active", "treeNodeRequiredProps"]);
var _React$useState = React.useState(true),
_React$useState2 = _slicedToArray(_React$useState, 2),
visible = _React$useState2[0],
setVisible = _React$useState2[1];
var _React$useContext = React.useContext(TreeContext),
prefixCls = _React$useContext.prefixCls;
var motionedRef = React.useRef(false);
var onMotionEnd = function onMotionEnd() {
if (!motionedRef.current) {
onOriginMotionEnd();
}
motionedRef.current = true;
};
useEffect(function () {
if (motionNodes && motionType === 'hide' && visible) {
setVisible(false);
}
}, [motionNodes]);
useEffect(function () {
// Trigger motion only when patched
if (motionNodes) {
onOriginMotionStart();
}
return function () {
if (motionNodes) {
onMotionEnd();
}
};
}, []);
if (motionNodes) {
return /*#__PURE__*/React.createElement(CSSMotion, Object.assign({
ref: ref,
visible: visible
}, motion, {
motionAppear: motionType === 'show',
onAppearEnd: onMotionEnd,
onLeaveEnd: onMotionEnd
}), function (_ref2, motionRef) {
var motionClassName = _ref2.className,
motionStyle = _ref2.style;
return /*#__PURE__*/React.createElement("div", {
ref: motionRef,
className: classNames("".concat(prefixCls, "-treenode-motion"), motionClassName),
style: motionStyle
}, motionNodes.map(function (treeNode) {
var _treeNode$data = treeNode.data,
key = _treeNode$data.key,
restProps = _objectWithoutProperties(_treeNode$data, ["key"]),
isStart = treeNode.isStart,
isEnd = treeNode.isEnd;
delete restProps.children;
var treeNodeProps = getTreeNodeProps(key, treeNodeRequiredProps);
return /*#__PURE__*/React.createElement(TreeNode, Object.assign({}, restProps, treeNodeProps, {
active: active,
data: treeNode.data,
key: key,
isStart: isStart,
isEnd: isEnd
}));
}));
});
}
return /*#__PURE__*/React.createElement(TreeNode, Object.assign({
domRef: ref,
className: className,
style: style
}, props, {
active: active
}));
};
MotionTreeNode.displayName = 'MotionTreeNode';
var RefMotionTreeNode = /*#__PURE__*/React.forwardRef(MotionTreeNode);
export default RefMotionTreeNode;