1 | "use strict";
|
2 |
|
3 | var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4 | var _typeof = require("@babel/runtime/helpers/typeof");
|
5 | Object.defineProperty(exports, "__esModule", {
|
6 | value: true
|
7 | });
|
8 | exports.default = exports.MotionEntity = exports.MOTION_KEY = void 0;
|
9 | exports.getMinimumRangeTransitionRange = getMinimumRangeTransitionRange;
|
10 | var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime/helpers/objectDestructuringEmpty"));
|
11 | var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
12 | var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
13 | var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
14 | var _useLayoutEffect = _interopRequireDefault(require("rc-util/lib/hooks/useLayoutEffect"));
|
15 | var _rcVirtualList = _interopRequireDefault(require("rc-virtual-list"));
|
16 | var React = _interopRequireWildcard(require("react"));
|
17 | var _MotionTreeNode = _interopRequireDefault(require("./MotionTreeNode"));
|
18 | var _diffUtil = require("./utils/diffUtil");
|
19 | var _treeUtil = require("./utils/treeUtil");
|
20 | var _excluded = ["prefixCls", "data", "selectable", "checkable", "expandedKeys", "selectedKeys", "checkedKeys", "loadedKeys", "loadingKeys", "halfCheckedKeys", "keyEntities", "disabled", "dragging", "dragOverNodeKey", "dropPosition", "motion", "height", "itemHeight", "virtual", "focusable", "activeItem", "focused", "tabIndex", "onKeyDown", "onFocus", "onBlur", "onActiveChange", "onListChangeStart", "onListChangeEnd"];
|
21 |
|
22 |
|
23 |
|
24 | function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
25 | function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
26 | var HIDDEN_STYLE = {
|
27 | width: 0,
|
28 | height: 0,
|
29 | display: 'flex',
|
30 | overflow: 'hidden',
|
31 | opacity: 0,
|
32 | border: 0,
|
33 | padding: 0,
|
34 | margin: 0
|
35 | };
|
36 | var noop = function noop() {};
|
37 | var MOTION_KEY = "RC_TREE_MOTION_".concat(Math.random());
|
38 | exports.MOTION_KEY = MOTION_KEY;
|
39 | var MotionNode = {
|
40 | key: MOTION_KEY
|
41 | };
|
42 | var MotionEntity = {
|
43 | key: MOTION_KEY,
|
44 | level: 0,
|
45 | index: 0,
|
46 | pos: '0',
|
47 | node: MotionNode,
|
48 | nodes: [MotionNode]
|
49 | };
|
50 | exports.MotionEntity = MotionEntity;
|
51 | var MotionFlattenData = {
|
52 | parent: null,
|
53 | children: [],
|
54 | pos: MotionEntity.pos,
|
55 | data: MotionNode,
|
56 | title: null,
|
57 | key: MOTION_KEY,
|
58 |
|
59 | isStart: [],
|
60 | isEnd: []
|
61 | };
|
62 |
|
63 |
|
64 |
|
65 | function getMinimumRangeTransitionRange(list, virtual, height, itemHeight) {
|
66 | if (virtual === false || !height) {
|
67 | return list;
|
68 | }
|
69 | return list.slice(0, Math.ceil(height / itemHeight) + 1);
|
70 | }
|
71 | function itemKey(item) {
|
72 | var key = item.key,
|
73 | pos = item.pos;
|
74 | return (0, _treeUtil.getKey)(key, pos);
|
75 | }
|
76 | function getAccessibilityPath(item) {
|
77 | var path = String(item.data.key);
|
78 | var current = item;
|
79 | while (current.parent) {
|
80 | current = current.parent;
|
81 | path = "".concat(current.data.key, " > ").concat(path);
|
82 | }
|
83 | return path;
|
84 | }
|
85 | var NodeList = React.forwardRef(function (props, ref) {
|
86 | var prefixCls = props.prefixCls,
|
87 | data = props.data,
|
88 | selectable = props.selectable,
|
89 | checkable = props.checkable,
|
90 | expandedKeys = props.expandedKeys,
|
91 | selectedKeys = props.selectedKeys,
|
92 | checkedKeys = props.checkedKeys,
|
93 | loadedKeys = props.loadedKeys,
|
94 | loadingKeys = props.loadingKeys,
|
95 | halfCheckedKeys = props.halfCheckedKeys,
|
96 | keyEntities = props.keyEntities,
|
97 | disabled = props.disabled,
|
98 | dragging = props.dragging,
|
99 | dragOverNodeKey = props.dragOverNodeKey,
|
100 | dropPosition = props.dropPosition,
|
101 | motion = props.motion,
|
102 | height = props.height,
|
103 | itemHeight = props.itemHeight,
|
104 | virtual = props.virtual,
|
105 | focusable = props.focusable,
|
106 | activeItem = props.activeItem,
|
107 | focused = props.focused,
|
108 | tabIndex = props.tabIndex,
|
109 | onKeyDown = props.onKeyDown,
|
110 | onFocus = props.onFocus,
|
111 | onBlur = props.onBlur,
|
112 | onActiveChange = props.onActiveChange,
|
113 | onListChangeStart = props.onListChangeStart,
|
114 | onListChangeEnd = props.onListChangeEnd,
|
115 | domProps = (0, _objectWithoutProperties2.default)(props, _excluded);
|
116 |
|
117 | var listRef = React.useRef(null);
|
118 | var indentMeasurerRef = React.useRef(null);
|
119 | React.useImperativeHandle(ref, function () {
|
120 | return {
|
121 | scrollTo: function scrollTo(scroll) {
|
122 | listRef.current.scrollTo(scroll);
|
123 | },
|
124 | getIndentWidth: function getIndentWidth() {
|
125 | return indentMeasurerRef.current.offsetWidth;
|
126 | }
|
127 | };
|
128 | });
|
129 |
|
130 | var _React$useState = React.useState(expandedKeys),
|
131 | _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
|
132 | prevExpandedKeys = _React$useState2[0],
|
133 | setPrevExpandedKeys = _React$useState2[1];
|
134 | var _React$useState3 = React.useState(data),
|
135 | _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
|
136 | prevData = _React$useState4[0],
|
137 | setPrevData = _React$useState4[1];
|
138 | var _React$useState5 = React.useState(data),
|
139 | _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
|
140 | transitionData = _React$useState6[0],
|
141 | setTransitionData = _React$useState6[1];
|
142 | var _React$useState7 = React.useState([]),
|
143 | _React$useState8 = (0, _slicedToArray2.default)(_React$useState7, 2),
|
144 | transitionRange = _React$useState8[0],
|
145 | setTransitionRange = _React$useState8[1];
|
146 | var _React$useState9 = React.useState(null),
|
147 | _React$useState10 = (0, _slicedToArray2.default)(_React$useState9, 2),
|
148 | motionType = _React$useState10[0],
|
149 | setMotionType = _React$useState10[1];
|
150 |
|
151 | var dataRef = React.useRef(data);
|
152 | dataRef.current = data;
|
153 | function onMotionEnd() {
|
154 | var latestData = dataRef.current;
|
155 | setPrevData(latestData);
|
156 | setTransitionData(latestData);
|
157 | setTransitionRange([]);
|
158 | setMotionType(null);
|
159 | onListChangeEnd();
|
160 | }
|
161 |
|
162 |
|
163 | (0, _useLayoutEffect.default)(function () {
|
164 | setPrevExpandedKeys(expandedKeys);
|
165 | var diffExpanded = (0, _diffUtil.findExpandedKeys)(prevExpandedKeys, expandedKeys);
|
166 | if (diffExpanded.key !== null) {
|
167 | if (diffExpanded.add) {
|
168 | var keyIndex = prevData.findIndex(function (_ref) {
|
169 | var key = _ref.key;
|
170 | return key === diffExpanded.key;
|
171 | });
|
172 | var rangeNodes = getMinimumRangeTransitionRange((0, _diffUtil.getExpandRange)(prevData, data, diffExpanded.key), virtual, height, itemHeight);
|
173 | var newTransitionData = prevData.slice();
|
174 | newTransitionData.splice(keyIndex + 1, 0, MotionFlattenData);
|
175 | setTransitionData(newTransitionData);
|
176 | setTransitionRange(rangeNodes);
|
177 | setMotionType('show');
|
178 | } else {
|
179 | var _keyIndex = data.findIndex(function (_ref2) {
|
180 | var key = _ref2.key;
|
181 | return key === diffExpanded.key;
|
182 | });
|
183 | var _rangeNodes = getMinimumRangeTransitionRange((0, _diffUtil.getExpandRange)(data, prevData, diffExpanded.key), virtual, height, itemHeight);
|
184 | var _newTransitionData = data.slice();
|
185 | _newTransitionData.splice(_keyIndex + 1, 0, MotionFlattenData);
|
186 | setTransitionData(_newTransitionData);
|
187 | setTransitionRange(_rangeNodes);
|
188 | setMotionType('hide');
|
189 | }
|
190 | } else if (prevData !== data) {
|
191 |
|
192 | setPrevData(data);
|
193 | setTransitionData(data);
|
194 | }
|
195 | }, [expandedKeys, data]);
|
196 |
|
197 | React.useEffect(function () {
|
198 | if (!dragging) {
|
199 | onMotionEnd();
|
200 | }
|
201 | }, [dragging]);
|
202 | var mergedData = motion ? transitionData : data;
|
203 | var treeNodeRequiredProps = {
|
204 | expandedKeys: expandedKeys,
|
205 | selectedKeys: selectedKeys,
|
206 | loadedKeys: loadedKeys,
|
207 | loadingKeys: loadingKeys,
|
208 | checkedKeys: checkedKeys,
|
209 | halfCheckedKeys: halfCheckedKeys,
|
210 | dragOverNodeKey: dragOverNodeKey,
|
211 | dropPosition: dropPosition,
|
212 | keyEntities: keyEntities
|
213 | };
|
214 | return React.createElement(React.Fragment, null, focused && activeItem && React.createElement("span", {
|
215 | style: HIDDEN_STYLE,
|
216 | "aria-live": "assertive"
|
217 | }, getAccessibilityPath(activeItem)), React.createElement("div", null, React.createElement("input", {
|
218 | style: HIDDEN_STYLE,
|
219 | disabled: focusable === false || disabled,
|
220 | tabIndex: focusable !== false ? tabIndex : null,
|
221 | onKeyDown: onKeyDown,
|
222 | onFocus: onFocus,
|
223 | onBlur: onBlur,
|
224 | value: "",
|
225 | onChange: noop,
|
226 | "aria-label": "for screen reader"
|
227 | })), React.createElement("div", {
|
228 | className: "".concat(prefixCls, "-treenode"),
|
229 | "aria-hidden": true,
|
230 | style: {
|
231 | position: 'absolute',
|
232 | pointerEvents: 'none',
|
233 | visibility: 'hidden',
|
234 | height: 0,
|
235 | overflow: 'hidden',
|
236 | border: 0,
|
237 | padding: 0
|
238 | }
|
239 | }, React.createElement("div", {
|
240 | className: "".concat(prefixCls, "-indent")
|
241 | }, React.createElement("div", {
|
242 | ref: indentMeasurerRef,
|
243 | className: "".concat(prefixCls, "-indent-unit")
|
244 | }))), React.createElement(_rcVirtualList.default, (0, _extends2.default)({}, domProps, {
|
245 | data: mergedData,
|
246 | itemKey: itemKey,
|
247 | height: height,
|
248 | fullHeight: false,
|
249 | virtual: virtual,
|
250 | itemHeight: itemHeight,
|
251 | prefixCls: "".concat(prefixCls, "-list"),
|
252 | ref: listRef,
|
253 | onVisibleChange: function onVisibleChange(originList, fullList) {
|
254 | var originSet = new Set(originList);
|
255 | var restList = fullList.filter(function (item) {
|
256 | return !originSet.has(item);
|
257 | });
|
258 |
|
259 | if (restList.some(function (item) {
|
260 | return itemKey(item) === MOTION_KEY;
|
261 | })) {
|
262 | onMotionEnd();
|
263 | }
|
264 | }
|
265 | }), function (treeNode) {
|
266 | var pos = treeNode.pos,
|
267 | restProps = (0, _extends2.default)({}, ((0, _objectDestructuringEmpty2.default)(treeNode.data), treeNode.data)),
|
268 | title = treeNode.title,
|
269 | key = treeNode.key,
|
270 | isStart = treeNode.isStart,
|
271 | isEnd = treeNode.isEnd;
|
272 | var mergedKey = (0, _treeUtil.getKey)(key, pos);
|
273 | delete restProps.key;
|
274 | delete restProps.children;
|
275 | var treeNodeProps = (0, _treeUtil.getTreeNodeProps)(mergedKey, treeNodeRequiredProps);
|
276 | return React.createElement(_MotionTreeNode.default, (0, _extends2.default)({}, restProps, treeNodeProps, {
|
277 | title: title,
|
278 | active: !!activeItem && key === activeItem.key,
|
279 | pos: pos,
|
280 | data: treeNode.data,
|
281 | isStart: isStart,
|
282 | isEnd: isEnd,
|
283 | motion: motion,
|
284 | motionNodes: key === MOTION_KEY ? transitionRange : null,
|
285 | motionType: motionType,
|
286 | onMotionStart: onListChangeStart,
|
287 | onMotionEnd: onMotionEnd,
|
288 | treeNodeRequiredProps: treeNodeRequiredProps,
|
289 | onMouseMove: function onMouseMove() {
|
290 | onActiveChange(null);
|
291 | }
|
292 | }));
|
293 | }));
|
294 | });
|
295 | NodeList.displayName = 'NodeList';
|
296 | var _default = NodeList;
|
297 | exports.default = _default; |
\ | No newline at end of file |