MotionTreeNode.js 4.2 KB

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