MotionTreeNode.js 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
  1. import _objectDestructuringEmpty from "@babel/runtime/helpers/esm/objectDestructuringEmpty";
  2. import _extends from "@babel/runtime/helpers/esm/extends";
  3. import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
  4. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  5. var _excluded = ["motion", "motionNodes", "motionType", "active", "eventKey"];
  6. import { withDirectives as _withDirectives, vShow as _vShow, createVNode as _createVNode, resolveDirective as _resolveDirective } from "vue";
  7. import TreeNode from './TreeNode';
  8. import { useInjectTreeContext } from './contextTypes';
  9. import { computed, nextTick, defineComponent, onBeforeUnmount, onMounted, ref, Transition, watch } from 'vue';
  10. import { treeNodeProps } from './props';
  11. import collapseMotion from '../_util/collapseMotion';
  12. export default defineComponent({
  13. compatConfig: {
  14. MODE: 3
  15. },
  16. name: 'MotionTreeNode',
  17. inheritAttrs: false,
  18. props: _objectSpread(_objectSpread({}, treeNodeProps), {}, {
  19. active: Boolean,
  20. motion: Object,
  21. motionNodes: {
  22. type: Array
  23. },
  24. onMotionStart: Function,
  25. onMotionEnd: Function,
  26. motionType: String
  27. // treeNodeRequiredProps: { type: Object as PropType<TreeNodeRequiredProps> },
  28. }),
  29. slots: ['title', 'icon', 'switcherIcon', 'checkable'],
  30. setup: function setup(props, _ref) {
  31. var attrs = _ref.attrs,
  32. slots = _ref.slots;
  33. var visible = ref(true);
  34. var context = useInjectTreeContext();
  35. var motionedRef = ref(false);
  36. var transitionProps = computed(function () {
  37. if (props.motion) {
  38. return props.motion;
  39. } else {
  40. return collapseMotion();
  41. }
  42. });
  43. var onMotionEnd = function onMotionEnd(node, type) {
  44. if (type === 'appear') {
  45. var _transitionProps$valu, _transitionProps$valu2;
  46. (_transitionProps$valu = transitionProps.value) === null || _transitionProps$valu === void 0 ? void 0 : (_transitionProps$valu2 = _transitionProps$valu.onAfterEnter) === null || _transitionProps$valu2 === void 0 ? void 0 : _transitionProps$valu2.call(_transitionProps$valu, node);
  47. } else if (type === 'leave') {
  48. var _transitionProps$valu3, _transitionProps$valu4;
  49. (_transitionProps$valu3 = transitionProps.value) === null || _transitionProps$valu3 === void 0 ? void 0 : (_transitionProps$valu4 = _transitionProps$valu3.onAfterLeave) === null || _transitionProps$valu4 === void 0 ? void 0 : _transitionProps$valu4.call(_transitionProps$valu3, node);
  50. }
  51. if (!motionedRef.value) {
  52. props.onMotionEnd();
  53. }
  54. motionedRef.value = true;
  55. };
  56. watch(function () {
  57. return props.motionNodes;
  58. }, function () {
  59. if (props.motionNodes && props.motionType === 'hide' && visible.value) {
  60. nextTick(function () {
  61. visible.value = false;
  62. });
  63. }
  64. }, {
  65. immediate: true,
  66. flush: 'post'
  67. });
  68. onMounted(function () {
  69. props.motionNodes && props.onMotionStart();
  70. });
  71. onBeforeUnmount(function () {
  72. props.motionNodes && onMotionEnd();
  73. });
  74. return function () {
  75. var motion = props.motion,
  76. motionNodes = props.motionNodes,
  77. motionType = props.motionType,
  78. active = props.active,
  79. eventKey = props.eventKey,
  80. otherProps = _objectWithoutProperties(props, _excluded);
  81. if (motionNodes) {
  82. return _createVNode(Transition, _objectSpread(_objectSpread({}, transitionProps.value), {}, {
  83. "appear": motionType === 'show',
  84. "onAfterAppear": function onAfterAppear(node) {
  85. return onMotionEnd(node, 'appear');
  86. },
  87. "onAfterLeave": function onAfterLeave(node) {
  88. return onMotionEnd(node, 'leave');
  89. }
  90. }), {
  91. default: function _default() {
  92. return [_withDirectives(_createVNode("div", {
  93. "class": "".concat(context.value.prefixCls, "-treenode-motion")
  94. }, [motionNodes.map(function (treeNode) {
  95. var restProps = _extends({}, (_objectDestructuringEmpty(treeNode.data), treeNode.data)),
  96. title = treeNode.title,
  97. key = treeNode.key,
  98. isStart = treeNode.isStart,
  99. isEnd = treeNode.isEnd;
  100. delete restProps.children;
  101. return _createVNode(TreeNode, _objectSpread(_objectSpread({}, restProps), {}, {
  102. "title": title,
  103. "active": active,
  104. "data": treeNode.data,
  105. "key": key,
  106. "eventKey": key,
  107. "isStart": isStart,
  108. "isEnd": isEnd
  109. }), slots);
  110. })]), [[_vShow, visible.value]])];
  111. }
  112. });
  113. }
  114. return _createVNode(TreeNode, _objectSpread(_objectSpread({
  115. "domRef": ref,
  116. "class": attrs.class,
  117. "style": attrs.style
  118. }, otherProps), {}, {
  119. "active": active,
  120. "eventKey": eventKey
  121. }), slots);
  122. };
  123. }
  124. });