react-vtree
Version:
React component for efficiently rendering large tree structures
174 lines (138 loc) • 5.42 kB
JavaScript
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = exports.createTreeComputer = exports.Row = void 0;
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
/* eslint-disable react/no-unused-state,@typescript-eslint/consistent-type-assertions */
// eslint-disable-next-line @typescript-eslint/naming-convention,@typescript-eslint/prefer-readonly-parameter-types
var Row = function Row(_ref) {
var index = _ref.index,
_ref$data = _ref.data,
Node = _ref$data.component,
treeData = _ref$data.treeData,
order = _ref$data.order,
records = _ref$data.records,
style = _ref.style,
isScrolling = _ref.isScrolling;
return /*#__PURE__*/_react.default.createElement(Node, Object.assign({}, records[order[index]], {
style: style,
isScrolling: isScrolling,
treeData: treeData
}));
};
exports.Row = Row;
var createTreeComputer = function createTreeComputer(_ref2) {
var createRecord = _ref2.createRecord,
shouldUpdateRecords = _ref2.shouldUpdateRecords,
updateRecord = _ref2.updateRecord,
updateRecordOnNewData = _ref2.updateRecordOnNewData;
return function (_ref3, state, options) {
var _options$refreshNodes;
var treeWalker = _ref3.treeWalker;
if (options === void 0) {
options = {};
}
var order = [];
var records = (0, _extends2.default)({}, state.records);
var iter = treeWalker((_options$refreshNodes = options.refreshNodes) != null ? _options$refreshNodes : false); // Here we are updating all records to the provided openness state described
// in UpdateOptions. It should be done before the tree re-calculation
// because tree walker omits closed nodes while update is required for all
// of them.
if (shouldUpdateRecords(options)) {
for (var id in records) {
updateRecord(records[id], id, options);
}
}
var isPreviousOpened = false; // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition,no-constant-condition
while (true) {
var _iter$next = iter.next(isPreviousOpened),
done = _iter$next.done,
value = _iter$next.value;
if (done || !value) {
break;
}
var _id = void 0;
if (typeof value === 'string' || typeof value === 'symbol') {
_id = value;
} else {
_id = value.id;
var _record = records[_id];
if (!_record) {
records[_id] = createRecord(value, options, state);
} else {
_record.data = value;
updateRecordOnNewData(_record, options);
}
}
if (records[_id]) {
order.push(_id);
isPreviousOpened = records[_id].isOpen;
} else if (process.env.NODE_ENV === 'development') {
// eslint-disable-next-line no-console
console.error("No record with id " + String(_id) + " found.");
}
}
return {
order: order,
records: records
};
};
};
exports.createTreeComputer = createTreeComputer;
var Tree = /*#__PURE__*/function (_PureComponent) {
(0, _inheritsLoose2.default)(Tree, _PureComponent);
Tree.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
var component = props.children,
treeData = props.itemData,
treeWalker = props.treeWalker;
var computeTree = state.computeTree,
order = state.order,
oldTreeWalker = state.treeWalker;
return (0, _extends2.default)({
component: component,
treeData: treeData,
treeWalker: treeWalker
}, treeWalker !== oldTreeWalker || !order ? computeTree(props, state, {
refreshNodes: true
}) : null);
};
function Tree(props, context) {
var _this;
_this = _PureComponent.call(this, props, context) || this;
_this.list = /*#__PURE__*/_react.default.createRef();
_this.state = {
component: props.children,
recomputeTree: _this.recomputeTree.bind((0, _assertThisInitialized2.default)(_this)),
records: {}
};
return _this;
}
var _proto = Tree.prototype;
_proto.recomputeTree = function recomputeTree(options) {
var _this2 = this;
return new Promise(function (resolve) {
_this2.setState(function (prevState) {
return prevState.computeTree(_this2.props, prevState, options);
}, resolve);
});
};
_proto.scrollTo = function scrollTo(scrollOffset) {
var _this$list$current;
(_this$list$current = this.list.current) == null ? void 0 : _this$list$current.scrollTo(scrollOffset);
};
_proto.scrollToItem = function scrollToItem(id, align) {
var _this$list$current2;
// eslint-disable-next-line react/destructuring-assignment
(_this$list$current2 = this.list.current) == null ? void 0 : _this$list$current2.scrollToItem(this.state.order.indexOf(id), align);
};
return Tree;
}(_react.PureComponent);
Tree.defaultProps = {
rowComponent: Row
};
var _default = Tree;
exports.default = _default;
;