MotionTreeNode.js 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  1. import _extends from "@babel/runtime/helpers/esm/extends";
  2. import _objectDestructuringEmpty from "@babel/runtime/helpers/esm/objectDestructuringEmpty";
  3. import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
  4. import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
  5. var _excluded = ["className", "style", "motion", "motionNodes", "motionType", "onMotionStart", "onMotionEnd", "active", "treeNodeRequiredProps"];
  6. import classNames from 'classnames';
  7. import CSSMotion from 'rc-motion';
  8. import useLayoutEffect from "rc-util/es/hooks/useLayoutEffect";
  9. import * as React from 'react';
  10. import { TreeContext } from "./contextTypes";
  11. import TreeNode from "./TreeNode";
  12. import useUnmount from "./useUnmount";
  13. import { getTreeNodeProps } from "./utils/treeUtil";
  14. var MotionTreeNode = /*#__PURE__*/React.forwardRef(function (oriProps, ref) {
  15. var className = oriProps.className,
  16. style = oriProps.style,
  17. motion = oriProps.motion,
  18. motionNodes = oriProps.motionNodes,
  19. motionType = oriProps.motionType,
  20. onOriginMotionStart = oriProps.onMotionStart,
  21. onOriginMotionEnd = oriProps.onMotionEnd,
  22. active = oriProps.active,
  23. treeNodeRequiredProps = oriProps.treeNodeRequiredProps,
  24. props = _objectWithoutProperties(oriProps, _excluded);
  25. var _React$useState = React.useState(true),
  26. _React$useState2 = _slicedToArray(_React$useState, 2),
  27. visible = _React$useState2[0],
  28. setVisible = _React$useState2[1];
  29. var _React$useContext = React.useContext(TreeContext),
  30. prefixCls = _React$useContext.prefixCls;
  31. // Calculate target visible here.
  32. // And apply in effect to make `leave` motion work.
  33. var targetVisible = motionNodes && motionType !== 'hide';
  34. useLayoutEffect(function () {
  35. if (motionNodes) {
  36. if (targetVisible !== visible) {
  37. setVisible(targetVisible);
  38. }
  39. }
  40. }, [motionNodes]);
  41. var triggerMotionStart = function triggerMotionStart() {
  42. if (motionNodes) {
  43. onOriginMotionStart();
  44. }
  45. };
  46. // Should only trigger once
  47. var triggerMotionEndRef = React.useRef(false);
  48. var triggerMotionEnd = function triggerMotionEnd() {
  49. if (motionNodes && !triggerMotionEndRef.current) {
  50. triggerMotionEndRef.current = true;
  51. onOriginMotionEnd();
  52. }
  53. };
  54. // Effect if unmount
  55. useUnmount(triggerMotionStart, triggerMotionEnd);
  56. // Motion end event
  57. var onVisibleChanged = function onVisibleChanged(nextVisible) {
  58. if (targetVisible === nextVisible) {
  59. triggerMotionEnd();
  60. }
  61. };
  62. if (motionNodes) {
  63. return /*#__PURE__*/React.createElement(CSSMotion, _extends({
  64. ref: ref,
  65. visible: visible
  66. }, motion, {
  67. motionAppear: motionType === 'show',
  68. onVisibleChanged: onVisibleChanged
  69. }), function (_ref, motionRef) {
  70. var motionClassName = _ref.className,
  71. motionStyle = _ref.style;
  72. return /*#__PURE__*/React.createElement("div", {
  73. ref: motionRef,
  74. className: classNames("".concat(prefixCls, "-treenode-motion"), motionClassName),
  75. style: motionStyle
  76. }, motionNodes.map(function (treeNode) {
  77. var restProps = Object.assign({}, (_objectDestructuringEmpty(treeNode.data), treeNode.data)),
  78. title = treeNode.title,
  79. key = treeNode.key,
  80. isStart = treeNode.isStart,
  81. isEnd = treeNode.isEnd;
  82. delete restProps.children;
  83. var treeNodeProps = getTreeNodeProps(key, treeNodeRequiredProps);
  84. return /*#__PURE__*/React.createElement(TreeNode, _extends({}, restProps, treeNodeProps, {
  85. title: title,
  86. active: active,
  87. data: treeNode.data,
  88. key: key,
  89. isStart: isStart,
  90. isEnd: isEnd
  91. }));
  92. }));
  93. });
  94. }
  95. return /*#__PURE__*/React.createElement(TreeNode, _extends({
  96. domRef: ref,
  97. className: className,
  98. style: style
  99. }, props, {
  100. active: active
  101. }));
  102. });
  103. if (process.env.NODE_ENV !== 'production') {
  104. MotionTreeNode.displayName = 'MotionTreeNode';
  105. }
  106. export default MotionTreeNode;