"use strict"; var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); var _typeof = require("@babel/runtime/helpers/typeof"); Object.defineProperty(exports, "__esModule", { value: true }); exports.default = exports.MotionEntity = exports.MOTION_KEY = void 0; exports.getMinimumRangeTransitionRange = getMinimumRangeTransitionRange; var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime/helpers/objectDestructuringEmpty")); var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")); var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray")); var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties")); var _useLayoutEffect = _interopRequireDefault(require("rc-util/lib/hooks/useLayoutEffect")); var _rcVirtualList = _interopRequireDefault(require("rc-virtual-list")); var React = _interopRequireWildcard(require("react")); var _MotionTreeNode = _interopRequireDefault(require("./MotionTreeNode")); var _diffUtil = require("./utils/diffUtil"); var _treeUtil = require("./utils/treeUtil"); 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"]; /** * Handle virtual list of the TreeNodes. */ 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); } 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; } var HIDDEN_STYLE = { width: 0, height: 0, display: 'flex', overflow: 'hidden', opacity: 0, border: 0, padding: 0, margin: 0 }; var noop = function noop() {}; var MOTION_KEY = "RC_TREE_MOTION_".concat(Math.random()); exports.MOTION_KEY = MOTION_KEY; var MotionNode = { key: MOTION_KEY }; var MotionEntity = { key: MOTION_KEY, level: 0, index: 0, pos: '0', node: MotionNode, nodes: [MotionNode] }; exports.MotionEntity = MotionEntity; var MotionFlattenData = { parent: null, children: [], pos: MotionEntity.pos, data: MotionNode, title: null, key: MOTION_KEY, /** Hold empty list here since we do not use it */ isStart: [], isEnd: [] }; /** * We only need get visible content items to play the animation. */ function getMinimumRangeTransitionRange(list, virtual, height, itemHeight) { if (virtual === false || !height) { return list; } return list.slice(0, Math.ceil(height / itemHeight) + 1); } function itemKey(item) { var key = item.key, pos = item.pos; return (0, _treeUtil.getKey)(key, pos); } function getAccessibilityPath(item) { var path = String(item.data.key); var current = item; while (current.parent) { current = current.parent; path = "".concat(current.data.key, " > ").concat(path); } return path; } var NodeList = /*#__PURE__*/React.forwardRef(function (props, ref) { var prefixCls = props.prefixCls, data = props.data, selectable = props.selectable, checkable = props.checkable, expandedKeys = props.expandedKeys, selectedKeys = props.selectedKeys, checkedKeys = props.checkedKeys, loadedKeys = props.loadedKeys, loadingKeys = props.loadingKeys, halfCheckedKeys = props.halfCheckedKeys, keyEntities = props.keyEntities, disabled = props.disabled, dragging = props.dragging, dragOverNodeKey = props.dragOverNodeKey, dropPosition = props.dropPosition, motion = props.motion, height = props.height, itemHeight = props.itemHeight, virtual = props.virtual, focusable = props.focusable, activeItem = props.activeItem, focused = props.focused, tabIndex = props.tabIndex, onKeyDown = props.onKeyDown, onFocus = props.onFocus, onBlur = props.onBlur, onActiveChange = props.onActiveChange, onListChangeStart = props.onListChangeStart, onListChangeEnd = props.onListChangeEnd, domProps = (0, _objectWithoutProperties2.default)(props, _excluded); // =============================== Ref ================================ var listRef = React.useRef(null); var indentMeasurerRef = React.useRef(null); React.useImperativeHandle(ref, function () { return { scrollTo: function scrollTo(scroll) { listRef.current.scrollTo(scroll); }, getIndentWidth: function getIndentWidth() { return indentMeasurerRef.current.offsetWidth; } }; }); // ============================== Motion ============================== var _React$useState = React.useState(expandedKeys), _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2), prevExpandedKeys = _React$useState2[0], setPrevExpandedKeys = _React$useState2[1]; var _React$useState3 = React.useState(data), _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2), prevData = _React$useState4[0], setPrevData = _React$useState4[1]; var _React$useState5 = React.useState(data), _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2), transitionData = _React$useState6[0], setTransitionData = _React$useState6[1]; var _React$useState7 = React.useState([]), _React$useState8 = (0, _slicedToArray2.default)(_React$useState7, 2), transitionRange = _React$useState8[0], setTransitionRange = _React$useState8[1]; var _React$useState9 = React.useState(null), _React$useState10 = (0, _slicedToArray2.default)(_React$useState9, 2), motionType = _React$useState10[0], setMotionType = _React$useState10[1]; // When motion end but data change, this will makes data back to previous one var dataRef = React.useRef(data); dataRef.current = data; function onMotionEnd() { var latestData = dataRef.current; setPrevData(latestData); setTransitionData(latestData); setTransitionRange([]); setMotionType(null); onListChangeEnd(); } // Do animation if expanded keys changed // layoutEffect here to avoid blink of node removing (0, _useLayoutEffect.default)(function () { setPrevExpandedKeys(expandedKeys); var diffExpanded = (0, _diffUtil.findExpandedKeys)(prevExpandedKeys, expandedKeys); if (diffExpanded.key !== null) { if (diffExpanded.add) { var keyIndex = prevData.findIndex(function (_ref) { var key = _ref.key; return key === diffExpanded.key; }); var rangeNodes = getMinimumRangeTransitionRange((0, _diffUtil.getExpandRange)(prevData, data, diffExpanded.key), virtual, height, itemHeight); var newTransitionData = prevData.slice(); newTransitionData.splice(keyIndex + 1, 0, MotionFlattenData); setTransitionData(newTransitionData); setTransitionRange(rangeNodes); setMotionType('show'); } else { var _keyIndex = data.findIndex(function (_ref2) { var key = _ref2.key; return key === diffExpanded.key; }); var _rangeNodes = getMinimumRangeTransitionRange((0, _diffUtil.getExpandRange)(data, prevData, diffExpanded.key), virtual, height, itemHeight); var _newTransitionData = data.slice(); _newTransitionData.splice(_keyIndex + 1, 0, MotionFlattenData); setTransitionData(_newTransitionData); setTransitionRange(_rangeNodes); setMotionType('hide'); } } else if (prevData !== data) { // If whole data changed, we just refresh the list setPrevData(data); setTransitionData(data); } }, [expandedKeys, data]); // We should clean up motion if is changed by dragging React.useEffect(function () { if (!dragging) { onMotionEnd(); } }, [dragging]); var mergedData = motion ? transitionData : data; var treeNodeRequiredProps = { expandedKeys: expandedKeys, selectedKeys: selectedKeys, loadedKeys: loadedKeys, loadingKeys: loadingKeys, checkedKeys: checkedKeys, halfCheckedKeys: halfCheckedKeys, dragOverNodeKey: dragOverNodeKey, dropPosition: dropPosition, keyEntities: keyEntities }; return /*#__PURE__*/React.createElement(React.Fragment, null, focused && activeItem && /*#__PURE__*/React.createElement("span", { style: HIDDEN_STYLE, "aria-live": "assertive" }, getAccessibilityPath(activeItem)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("input", { style: HIDDEN_STYLE, disabled: focusable === false || disabled, tabIndex: focusable !== false ? tabIndex : null, onKeyDown: onKeyDown, onFocus: onFocus, onBlur: onBlur, value: "", onChange: noop, "aria-label": "for screen reader" })), /*#__PURE__*/React.createElement("div", { className: "".concat(prefixCls, "-treenode"), "aria-hidden": true, style: { position: 'absolute', pointerEvents: 'none', visibility: 'hidden', height: 0, overflow: 'hidden', border: 0, padding: 0 } }, /*#__PURE__*/React.createElement("div", { className: "".concat(prefixCls, "-indent") }, /*#__PURE__*/React.createElement("div", { ref: indentMeasurerRef, className: "".concat(prefixCls, "-indent-unit") }))), /*#__PURE__*/React.createElement(_rcVirtualList.default, (0, _extends2.default)({}, domProps, { data: mergedData, itemKey: itemKey, height: height, fullHeight: false, virtual: virtual, itemHeight: itemHeight, prefixCls: "".concat(prefixCls, "-list"), ref: listRef, onVisibleChange: function onVisibleChange(originList, fullList) { var originSet = new Set(originList); var restList = fullList.filter(function (item) { return !originSet.has(item); }); // Motion node is not render. Skip motion if (restList.some(function (item) { return itemKey(item) === MOTION_KEY; })) { onMotionEnd(); } } }), function (treeNode) { var pos = treeNode.pos, restProps = (0, _extends2.default)({}, ((0, _objectDestructuringEmpty2.default)(treeNode.data), treeNode.data)), title = treeNode.title, key = treeNode.key, isStart = treeNode.isStart, isEnd = treeNode.isEnd; var mergedKey = (0, _treeUtil.getKey)(key, pos); delete restProps.key; delete restProps.children; var treeNodeProps = (0, _treeUtil.getTreeNodeProps)(mergedKey, treeNodeRequiredProps); return /*#__PURE__*/React.createElement(_MotionTreeNode.default, (0, _extends2.default)({}, restProps, treeNodeProps, { title: title, active: !!activeItem && key === activeItem.key, pos: pos, data: treeNode.data, isStart: isStart, isEnd: isEnd, motion: motion, motionNodes: key === MOTION_KEY ? transitionRange : null, motionType: motionType, onMotionStart: onListChangeStart, onMotionEnd: onMotionEnd, treeNodeRequiredProps: treeNodeRequiredProps, onMouseMove: function onMouseMove() { onActiveChange(null); } })); })); }); NodeList.displayName = 'NodeList'; var _default = NodeList; exports.default = _default;