MotionTreeNode.js
3.87 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
"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;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var React = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _rcMotion = _interopRequireDefault(require("rc-motion"));
var _TreeNode = _interopRequireDefault(require("./TreeNode"));
var _treeUtil = require("./utils/treeUtil");
var _contextTypes = require("./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 = (0, _objectWithoutProperties2.default)(_ref, ["className", "style", "motion", "motionNodes", "motionType", "onMotionStart", "onMotionEnd", "active", "treeNodeRequiredProps"]);
var _React$useState = React.useState(true),
_React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
visible = _React$useState2[0],
setVisible = _React$useState2[1];
var _React$useContext = React.useContext(_contextTypes.TreeContext),
prefixCls = _React$useContext.prefixCls;
var motionedRef = React.useRef(false);
var onMotionEnd = function onMotionEnd() {
if (!motionedRef.current) {
onOriginMotionEnd();
}
motionedRef.current = true;
};
(0, React.useEffect)(function () {
if (motionNodes && motionType === 'hide' && visible) {
setVisible(false);
}
}, [motionNodes]);
(0, React.useEffect)(function () {
// Trigger motion only when patched
if (motionNodes) {
onOriginMotionStart();
}
return function () {
if (motionNodes) {
onMotionEnd();
}
};
}, []);
if (motionNodes) {
return /*#__PURE__*/React.createElement(_rcMotion.default, 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: (0, _classnames.default)("".concat(prefixCls, "-treenode-motion"), motionClassName),
style: motionStyle
}, motionNodes.map(function (treeNode) {
var _treeNode$data = treeNode.data,
key = _treeNode$data.key,
restProps = (0, _objectWithoutProperties2.default)(_treeNode$data, ["key"]),
isStart = treeNode.isStart,
isEnd = treeNode.isEnd;
delete restProps.children;
var treeNodeProps = (0, _treeUtil.getTreeNodeProps)(key, treeNodeRequiredProps);
return /*#__PURE__*/React.createElement(_TreeNode.default, Object.assign({}, restProps, treeNodeProps, {
active: active,
data: treeNode.data,
key: key,
isStart: isStart,
isEnd: isEnd
}));
}));
});
}
return /*#__PURE__*/React.createElement(_TreeNode.default, Object.assign({
domRef: ref,
className: className,
style: style
}, props, {
active: active
}));
};
MotionTreeNode.displayName = 'MotionTreeNode';
var RefMotionTreeNode = /*#__PURE__*/React.forwardRef(MotionTreeNode);
var _default = RefMotionTreeNode;
exports.default = _default;