MotionTreeNode.js 5.4 KB

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