NodeList.js 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. Object.defineProperty(exports, "__esModule", {
  4. value: true
  5. });
  6. exports.default = exports.MotionEntity = exports.MOTION_KEY = void 0;
  7. exports.getMinimumRangeTransitionRange = getMinimumRangeTransitionRange;
  8. var _vue = require("vue");
  9. var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime/helpers/objectDestructuringEmpty"));
  10. var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
  11. var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
  12. var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
  13. var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
  14. var _vcVirtualList = _interopRequireDefault(require("../vc-virtual-list"));
  15. var _omit = _interopRequireDefault(require("../_util/omit"));
  16. var _contextTypes = require("./contextTypes");
  17. var _MotionTreeNode = _interopRequireDefault(require("./MotionTreeNode"));
  18. var _props = require("./props");
  19. var _diffUtil = require("./utils/diffUtil");
  20. var _treeUtil = require("./utils/treeUtil");
  21. var _excluded = ["prefixCls", "selectable", "checkable", "disabled", "motion", "height", "itemHeight", "virtual", "focusable", "activeItem", "focused", "tabindex", "onKeydown", "onFocus", "onBlur", "onListChangeStart", "onListChangeEnd"];
  22. /**
  23. * Handle virtual list of the TreeNodes.
  24. */
  25. var HIDDEN_STYLE = {
  26. width: 0,
  27. height: 0,
  28. display: 'flex',
  29. overflow: 'hidden',
  30. opacity: 0,
  31. border: 0,
  32. padding: 0,
  33. margin: 0
  34. };
  35. var noop = function noop() {};
  36. var MOTION_KEY = "RC_TREE_MOTION_".concat(Math.random());
  37. exports.MOTION_KEY = MOTION_KEY;
  38. var MotionNode = {
  39. key: MOTION_KEY
  40. };
  41. var MotionEntity = {
  42. key: MOTION_KEY,
  43. level: 0,
  44. index: 0,
  45. pos: '0',
  46. node: MotionNode,
  47. nodes: [MotionNode]
  48. };
  49. exports.MotionEntity = MotionEntity;
  50. var MotionFlattenData = {
  51. parent: null,
  52. children: [],
  53. pos: MotionEntity.pos,
  54. data: MotionNode,
  55. title: null,
  56. key: MOTION_KEY,
  57. /** Hold empty list here since we do not use it */
  58. isStart: [],
  59. isEnd: []
  60. };
  61. /**
  62. * We only need get visible content items to play the animation.
  63. */
  64. function getMinimumRangeTransitionRange(list, virtual, height, itemHeight) {
  65. if (virtual === false || !height) {
  66. return list;
  67. }
  68. return list.slice(0, Math.ceil(height / itemHeight) + 1);
  69. }
  70. function itemKey(item) {
  71. var key = item.key,
  72. pos = item.pos;
  73. return (0, _treeUtil.getKey)(key, pos);
  74. }
  75. function getAccessibilityPath(item) {
  76. var path = String(item.key);
  77. var current = item;
  78. while (current.parent) {
  79. current = current.parent;
  80. path = "".concat(current.key, " > ").concat(path);
  81. }
  82. return path;
  83. }
  84. var _default2 = (0, _vue.defineComponent)({
  85. compatConfig: {
  86. MODE: 3
  87. },
  88. name: 'NodeList',
  89. inheritAttrs: false,
  90. props: _props.nodeListProps,
  91. setup: function setup(props, _ref) {
  92. var expose = _ref.expose,
  93. attrs = _ref.attrs;
  94. // =============================== Ref ================================
  95. var listRef = (0, _vue.ref)();
  96. var indentMeasurerRef = (0, _vue.ref)();
  97. var _useInjectKeysState = (0, _contextTypes.useInjectKeysState)(),
  98. expandedKeys = _useInjectKeysState.expandedKeys,
  99. flattenNodes = _useInjectKeysState.flattenNodes;
  100. expose({
  101. scrollTo: function scrollTo(scroll) {
  102. listRef.value.scrollTo(scroll);
  103. },
  104. getIndentWidth: function getIndentWidth() {
  105. return indentMeasurerRef.value.offsetWidth;
  106. }
  107. });
  108. // ============================== Motion ==============================
  109. var transitionData = (0, _vue.shallowRef)(flattenNodes.value);
  110. var transitionRange = (0, _vue.shallowRef)([]);
  111. var motionType = (0, _vue.ref)(null);
  112. function onMotionEnd() {
  113. transitionData.value = flattenNodes.value;
  114. transitionRange.value = [];
  115. motionType.value = null;
  116. props.onListChangeEnd();
  117. }
  118. var context = (0, _contextTypes.useInjectTreeContext)();
  119. (0, _vue.watch)([function () {
  120. return expandedKeys.value.slice();
  121. }, flattenNodes], function (_ref2, _ref3) {
  122. var _ref4 = (0, _slicedToArray2.default)(_ref2, 2),
  123. expandedKeys = _ref4[0],
  124. data = _ref4[1];
  125. var _ref5 = (0, _slicedToArray2.default)(_ref3, 2),
  126. prevExpandedKeys = _ref5[0],
  127. prevData = _ref5[1];
  128. var diffExpanded = (0, _diffUtil.findExpandedKeys)(prevExpandedKeys, expandedKeys);
  129. if (diffExpanded.key !== null) {
  130. var virtual = props.virtual,
  131. height = props.height,
  132. itemHeight = props.itemHeight;
  133. if (diffExpanded.add) {
  134. var keyIndex = prevData.findIndex(function (_ref6) {
  135. var key = _ref6.key;
  136. return key === diffExpanded.key;
  137. });
  138. var rangeNodes = getMinimumRangeTransitionRange((0, _diffUtil.getExpandRange)(prevData, data, diffExpanded.key), virtual, height, itemHeight);
  139. var newTransitionData = prevData.slice();
  140. newTransitionData.splice(keyIndex + 1, 0, MotionFlattenData);
  141. transitionData.value = newTransitionData;
  142. transitionRange.value = rangeNodes;
  143. motionType.value = 'show';
  144. } else {
  145. var _keyIndex = data.findIndex(function (_ref7) {
  146. var key = _ref7.key;
  147. return key === diffExpanded.key;
  148. });
  149. var _rangeNodes = getMinimumRangeTransitionRange((0, _diffUtil.getExpandRange)(data, prevData, diffExpanded.key), virtual, height, itemHeight);
  150. var _newTransitionData = data.slice();
  151. _newTransitionData.splice(_keyIndex + 1, 0, MotionFlattenData);
  152. transitionData.value = _newTransitionData;
  153. transitionRange.value = _rangeNodes;
  154. motionType.value = 'hide';
  155. }
  156. } else if (prevData !== data) {
  157. transitionData.value = data;
  158. }
  159. });
  160. // We should clean up motion if is changed by dragging
  161. (0, _vue.watch)(function () {
  162. return context.value.dragging;
  163. }, function (dragging) {
  164. if (!dragging) {
  165. onMotionEnd();
  166. }
  167. });
  168. var mergedData = (0, _vue.computed)(function () {
  169. return props.motion === undefined ? transitionData.value : flattenNodes.value;
  170. });
  171. var onActiveChange = function onActiveChange() {
  172. props.onActiveChange(null);
  173. };
  174. return function () {
  175. var _props$attrs = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), attrs),
  176. prefixCls = _props$attrs.prefixCls,
  177. selectable = _props$attrs.selectable,
  178. checkable = _props$attrs.checkable,
  179. disabled = _props$attrs.disabled,
  180. motion = _props$attrs.motion,
  181. height = _props$attrs.height,
  182. itemHeight = _props$attrs.itemHeight,
  183. virtual = _props$attrs.virtual,
  184. focusable = _props$attrs.focusable,
  185. activeItem = _props$attrs.activeItem,
  186. focused = _props$attrs.focused,
  187. tabindex = _props$attrs.tabindex,
  188. onKeydown = _props$attrs.onKeydown,
  189. onFocus = _props$attrs.onFocus,
  190. onBlur = _props$attrs.onBlur,
  191. onListChangeStart = _props$attrs.onListChangeStart,
  192. onListChangeEnd = _props$attrs.onListChangeEnd,
  193. domProps = (0, _objectWithoutProperties2.default)(_props$attrs, _excluded);
  194. return (0, _vue.createVNode)(_vue.Fragment, null, [focused && activeItem && (0, _vue.createVNode)("span", {
  195. "style": HIDDEN_STYLE,
  196. "aria-live": "assertive"
  197. }, [getAccessibilityPath(activeItem)]), (0, _vue.createVNode)("div", null, [(0, _vue.createVNode)("input", {
  198. "style": HIDDEN_STYLE,
  199. "disabled": focusable === false || disabled,
  200. "tabindex": focusable !== false ? tabindex : null,
  201. "onKeydown": onKeydown,
  202. "onFocus": onFocus,
  203. "onBlur": onBlur,
  204. "value": "",
  205. "onChange": noop,
  206. "aria-label": "for screen reader"
  207. }, null)]), (0, _vue.createVNode)("div", {
  208. "class": "".concat(prefixCls, "-treenode"),
  209. "aria-hidden": true,
  210. "style": {
  211. position: 'absolute',
  212. pointerEvents: 'none',
  213. visibility: 'hidden',
  214. height: 0,
  215. overflow: 'hidden'
  216. }
  217. }, [(0, _vue.createVNode)("div", {
  218. "class": "".concat(prefixCls, "-indent")
  219. }, [(0, _vue.createVNode)("div", {
  220. "ref": indentMeasurerRef,
  221. "class": "".concat(prefixCls, "-indent-unit")
  222. }, null)])]), (0, _vue.createVNode)(_vcVirtualList.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, (0, _omit.default)(domProps, ['onActiveChange'])), {}, {
  223. "data": mergedData.value,
  224. "itemKey": itemKey,
  225. "height": height,
  226. "fullHeight": false,
  227. "virtual": virtual,
  228. "itemHeight": itemHeight,
  229. "prefixCls": "".concat(prefixCls, "-list"),
  230. "ref": listRef,
  231. "onVisibleChange": function onVisibleChange(originList, fullList) {
  232. var originSet = new Set(originList);
  233. var restList = fullList.filter(function (item) {
  234. return !originSet.has(item);
  235. });
  236. // Motion node is not render. Skip motion
  237. if (restList.some(function (item) {
  238. return itemKey(item) === MOTION_KEY;
  239. })) {
  240. onMotionEnd();
  241. }
  242. }
  243. }), {
  244. default: function _default(treeNode) {
  245. var pos = treeNode.pos,
  246. restProps = (0, _extends2.default)({}, ((0, _objectDestructuringEmpty2.default)(treeNode.data), treeNode.data)),
  247. title = treeNode.title,
  248. key = treeNode.key,
  249. isStart = treeNode.isStart,
  250. isEnd = treeNode.isEnd;
  251. var mergedKey = (0, _treeUtil.getKey)(key, pos);
  252. delete restProps.key;
  253. delete restProps.children;
  254. return (0, _vue.createVNode)(_MotionTreeNode.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, restProps), {}, {
  255. "eventKey": mergedKey,
  256. "title": title,
  257. "active": !!activeItem && key === activeItem.key,
  258. "data": treeNode.data,
  259. "isStart": isStart,
  260. "isEnd": isEnd,
  261. "motion": motion,
  262. "motionNodes": key === MOTION_KEY ? transitionRange.value : null,
  263. "motionType": motionType.value,
  264. "onMotionStart": onListChangeStart,
  265. "onMotionEnd": onMotionEnd,
  266. "onMousemove": onActiveChange
  267. }), null);
  268. }
  269. })]);
  270. };
  271. }
  272. });
  273. exports.default = _default2;