virtualizedtableforantd-temp
Version:
The virtualized table component for ant design, using typescript.
1,493 lines (1,200 loc) • 50.7 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.VTComponents = VTComponents;
exports.getVTContext = getVTContext;
exports.setComponents = setComponents;
exports.getVTComponents = getVTComponents;
exports.VTScroll = VTScroll;
exports.vt_context = void 0;
var React = _interopRequireWildcard(require("react"));
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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; }
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
function _iterableToArrayLimit(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) { return; } var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
/**
* `INIT` -> `LOADED` -> `RUNNING` -> `SUSPENDED`
* `SUSPENDED` -> `WAITING` -> `RUNNING`
*/
var e_VT_STATE;
(function (e_VT_STATE) {
e_VT_STATE[e_VT_STATE["INIT"] = 1] = "INIT";
e_VT_STATE[e_VT_STATE["LOADED"] = 2] = "LOADED";
e_VT_STATE[e_VT_STATE["RUNNING"] = 4] = "RUNNING";
e_VT_STATE[e_VT_STATE["SUSPENDED"] = 8] = "SUSPENDED";
e_VT_STATE[e_VT_STATE["WAITING"] = 16] = "WAITING";
e_VT_STATE[e_VT_STATE["PROTECTION"] = 128] = "PROTECTION";
})(e_VT_STATE || (e_VT_STATE = {}));
/**
* `L`: fixed: "left", `R`: fixed: "right"
*/
var e_FIXED;
(function (e_FIXED) {
e_FIXED[e_FIXED["UNKNOW"] = -1] = "UNKNOW";
e_FIXED[e_FIXED["NEITHER"] = 0] = "NEITHER";
e_FIXED[e_FIXED["L"] = 1] = "L";
e_FIXED[e_FIXED["R"] = 2] = "R";
})(e_FIXED || (e_FIXED = {}));
/**
* @global
*/
var vt_context = new Map();
/* overload __DIAGNOSIS__. */
exports.vt_context = vt_context;
function __DIAGNOSIS__(ctx) {
Object.defineProperty(ctx, "__DIAGNOSIS__", {
get: function get() {
console.debug("OoOoOoO DIAGNOSIS OoOoOoO");
var total = 0;
for (var i = 0; i < ctx.row_count; ++i) {
total += ctx.row_height[i];
}
var color;
if (total > ctx.computed_h) {
color = "color:rgb(15, 179, 9)"; // green
} else if (total < ctx.computed_h) {
color = "color:rgb(202, 61, 81)"; // red
} else {
color = "color:rgba(0, 0, 0, 0.85)";
}
console.debug("Verify %c%d(%d)", color, total, ctx.computed_h - total);
console.debug("OoOoOoOoOoOoOOoOoOoOoOoOo");
},
configurable: false,
enumerable: false
});
}
function log_debug(ctx, msg) {
if (ctx.debug) {
ctx = _objectSpread({}, ctx);
__DIAGNOSIS__(ctx);
var ts = new Date().getTime();
console.debug("%c[".concat(ctx.id, "][").concat(ts, "][").concat(msg, "] vt"), "color:#a00", ctx);
}
}
/**
* THE EVENTS OF SCROLLING.
*/
// const SCROLLEVT_NULL = (0<<0);
var SCROLLEVT_INIT = 1 << 0;
var SCROLLEVT_RECOMPUTE = 1 << 1;
var SCROLLEVT_RESTORETO = 1 << 2;
var SCROLLEVT_NATIVE = 1 << 3;
var SCROLLEVT_BARRIER = 1 << 4; // It only for `SCROLLEVT_RECOMPUTE`.
// the factory function returns a SimEvent.
function _make_evt(ne) {
var target = ne.target;
return {
target: {
scrollTop: target.scrollTop,
scrollLeft: target.scrollLeft
},
endOfElements: target.scrollHeight - target.clientHeight === target.scrollTop,
flags: SCROLLEVT_NATIVE
};
}
/**
* Implementation Layer.
*/
/** AntD.TableComponent.table */
var Table = React.forwardRef(function Table(props, ref) {
var style = props.style,
children = props.children,
rest = _objectWithoutProperties(props, ["style", "children"]);
return React.createElement("table", Object.assign({
ref: ref,
style: style
}, rest), children);
});
/** AntD.TableComponent.body.wrapper */
function Wrapper(props) {
var children = props.children,
rest = _objectWithoutProperties(props, ["children"]);
return React.createElement("tbody", Object.assign({}, rest), children);
}
/** AntD.TableComponent.body.row */
var Row = React.forwardRef(function Row(props, ref) {
var children = props.children,
rest = _objectWithoutProperties(props, ["children"]);
return React.createElement("tr", Object.assign({}, rest, {
ref: ref
}), children);
});
/**
* define CONSTANTs.
*/
// const MIN_FRAME = 16;
/**
* the following functions bind the `ctx`.
*/
// set the variables for offset top/head/tail.
function _set_offset(ctx, top, head, tail) {
ctx._offset_top = 0 | top;
ctx._offset_head = 0 | head;
ctx._offset_tail = 0 | tail;
} // the func a component to rerender.
function _RC_rerender(ctx, top, head, tail) {
var handler = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null;
_set_offset(ctx, top, head, tail);
ctx._React_ptr.forceUpdate(handler);
}
/** update to ColumnProps.fixed synchronously */
function _RC_fixed_rerender(ctx) {
if (ctx._lvt_ctx) ctx._lvt_ctx._React_ptr.forceUpdate();
if (ctx._rvt_ctx) ctx._rvt_ctx._React_ptr.forceUpdate();
}
function _Update_wrap_style(ctx, h) {
// a component has unmounted.
if (!ctx.wrap_inst.current) return;
if (ctx.vt_state === e_VT_STATE.WAITING) h = 0;
ctx.wrap_inst.current.style.height = "".concat(h, "px");
ctx.wrap_inst.current.style.maxHeight = "".concat(h, "px");
}
/** non-block, just create a macro tack, then only update once. */
function update_wrap_style(ctx, h) {
if (ctx.WH === h) return;
ctx.WH = h;
_Update_wrap_style(ctx, h);
/* update the `ColumnProps.fixed` synchronously */
if (ctx._lvt_ctx) _Update_wrap_style(ctx._lvt_ctx, h);
if (ctx._rvt_ctx) _Update_wrap_style(ctx._rvt_ctx, h);
} // scrolls the parent element to specified location.
function _scroll_to(ctx, top, left) {
if (!ctx.wrap_inst.current) return;
var ele = ctx.wrap_inst.current.parentElement;
/** ie */
ele.scrollTop = top;
ele.scrollLeft = left;
} // a wrapper function for `_scroll_to`.
function scroll_to(ctx, top, left) {
_scroll_to(ctx, top, left);
if (ctx._lvt_ctx) _scroll_to(ctx._lvt_ctx, top, left);
if (ctx._rvt_ctx) _scroll_to(ctx._rvt_ctx, top, left);
}
function add_h(ctx, idx, h) {
console.assert(h !== void 0, "failed to apply height with index ".concat(idx, "!"));
ctx.row_height[idx] = h;
ctx.computed_h += h; // just do add up.
if (ctx.debug) console.info("add", idx, h);
}
function free_h(ctx, idx) {
console.assert(ctx.row_height[idx] !== void 0, "failed to free this tr[".concat(idx, "]."));
ctx.computed_h -= ctx.row_height[idx];
if (ctx.debug) console.info("free", idx, ctx.row_height[idx]);
}
function _repainting(ctx) {
return requestAnimationFrame(function () {
var PAINT_ADD = ctx.PAINT_ADD,
PAINT_SADD = ctx.PAINT_SADD,
PAINT_FREE = ctx.PAINT_FREE,
PAINT_SFREE = ctx.PAINT_SFREE;
log_debug(ctx, "START-REPAINTING");
if (PAINT_FREE.size) {
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;
try {
for (var _iterator = PAINT_FREE[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
var idx = _step.value;
free_h(ctx, idx);
}
} catch (err) {
_didIteratorError = true;
_iteratorError = err;
} finally {
try {
if (!_iteratorNormalCompletion && _iterator.return != null) {
_iterator.return();
}
} finally {
if (_didIteratorError) {
throw _iteratorError;
}
}
}
console.assert(ctx.computed_h !== void 0);
console.assert(ctx.computed_h >= 0);
}
if (PAINT_SFREE.size) {
var _iteratorNormalCompletion2 = true;
var _didIteratorError2 = false;
var _iteratorError2 = undefined;
try {
for (var _iterator2 = PAINT_SFREE[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
var _idx = _step2.value;
free_h(ctx, _idx);
}
} catch (err) {
_didIteratorError2 = true;
_iteratorError2 = err;
} finally {
try {
if (!_iteratorNormalCompletion2 && _iterator2.return != null) {
_iterator2.return();
}
} finally {
if (_didIteratorError2) {
throw _iteratorError2;
}
}
}
console.assert(ctx.computed_h !== void 0);
console.assert(ctx.computed_h >= 0);
}
if (PAINT_ADD.size) {
var _iteratorNormalCompletion3 = true;
var _didIteratorError3 = false;
var _iteratorError3 = undefined;
try {
for (var _iterator3 = PAINT_ADD[Symbol.iterator](), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) {
var _step3$value = _slicedToArray(_step3.value, 2),
_idx2 = _step3$value[0],
el = _step3$value[1];
add_h(ctx, _idx2, el.offsetHeight);
}
} catch (err) {
_didIteratorError3 = true;
_iteratorError3 = err;
} finally {
try {
if (!_iteratorNormalCompletion3 && _iterator3.return != null) {
_iterator3.return();
}
} finally {
if (_didIteratorError3) {
throw _iteratorError3;
}
}
}
console.assert(ctx.computed_h !== void 0);
console.assert(ctx.computed_h >= 0);
}
if (PAINT_SADD.size) {
var _iteratorNormalCompletion4 = true;
var _didIteratorError4 = false;
var _iteratorError4 = undefined;
try {
for (var _iterator4 = PAINT_SADD[Symbol.iterator](), _step4; !(_iteratorNormalCompletion4 = (_step4 = _iterator4.next()).done); _iteratorNormalCompletion4 = true) {
var _step4$value = _slicedToArray(_step4.value, 2),
_idx3 = _step4$value[0],
h = _step4$value[1];
add_h(ctx, _idx3, h);
}
} catch (err) {
_didIteratorError4 = true;
_iteratorError4 = err;
} finally {
try {
if (!_iteratorNormalCompletion4 && _iterator4.return != null) {
_iterator4.return();
}
} finally {
if (_didIteratorError4) {
throw _iteratorError4;
}
}
}
console.assert(ctx.computed_h !== void 0);
console.assert(ctx.computed_h >= 0);
} // clear
PAINT_SFREE.clear();
PAINT_FREE.clear();
PAINT_ADD.clear();
PAINT_SADD.clear();
if (ctx.vt_state === e_VT_STATE.RUNNING) {
// output to the buffer
update_wrap_style(ctx, ctx.computed_h);
} // free this handle manually.
ctx.HND_PAINT = 0;
log_debug(ctx, "END-REPAINTING");
});
}
/** non-block */
function repainting_with_add(ctx, idx, tr) {
// prevent to add the same index repeatedly.
ctx.PAINT_SADD.delete(idx);
ctx.PAINT_ADD.set(idx, tr);
if (ctx.HND_PAINT > 0) return;
ctx.HND_PAINT = _repainting(ctx);
}
/** non-block */
function repainting_with_sadd(ctx, idx, h) {
ctx.PAINT_SADD.set(idx, h);
if (ctx.HND_PAINT > 0) return;
ctx.HND_PAINT = _repainting(ctx);
}
/** non-block */
function repainting_with_free(ctx, idx) {
// prevent to free the same index repeatedly.
if (ctx.PAINT_SFREE.has(idx)) return;
ctx.PAINT_FREE.add(idx);
if (ctx.HND_PAINT > 0) return;
ctx.HND_PAINT = _repainting(ctx);
}
/** non-block */
function repainting_with_sfree(ctx, idx) {
ctx.PAINT_SFREE.add(idx);
if (ctx.HND_PAINT > 0) return;
ctx.HND_PAINT = _repainting(ctx);
}
/** Shadow Rows. */
function srs_diff(ctx, PSR, begin, end, prev_begin, prev_end) {
var row_height = ctx.row_height,
possible_hight_per_tr = ctx.possible_hight_per_tr;
if (begin > prev_begin) {
for (var i = prev_begin; i < begin; ++i) {
repainting_with_sfree(ctx, i);
}
} else if (begin < prev_begin) {
for (var _i2 = begin; _i2 < prev_begin; ++_i2) {
repainting_with_sadd(ctx, _i2, row_height[_i2] === void 0 ? possible_hight_per_tr : row_height[_i2]);
}
}
if (end > prev_end) {
for (var _i3 = prev_end; _i3 < end; ++_i3) {
repainting_with_sadd(ctx, _i3, row_height[_i3] === void 0 ? possible_hight_per_tr : row_height[_i3]);
}
} else if (end < prev_end) {
for (var _i4 = end; _i4 < prev_end; ++_i4) {
repainting_with_sfree(ctx, _i4);
}
}
PSR[0] = begin;
PSR[1] = end;
}
function set_tr_cnt(ctx, n) {
ctx.re_computed = n - ctx.row_count;
ctx.prev_row_count = ctx.row_count;
ctx.row_count = n;
}
var VTContext = {
// using closure
Switch: function Switch(ID) {
var ctx = vt_context.get(ID);
var S = React.createContext({
fixed: e_FIXED.UNKNOW
});
var VTRow =
/*#__PURE__*/
function (_React$Component) {
_inherits(VTRow, _React$Component);
function VTRow(props, context) {
var _this;
_classCallCheck(this, VTRow);
_this = _possibleConstructorReturn(this, _getPrototypeOf(VTRow).call(this, props, context));
_this.inst = React.createRef();
_this.fixed = e_FIXED.UNKNOW;
return _this;
}
_createClass(VTRow, [{
key: "render",
value: function render() {
var _this2 = this;
var _this$props = this.props,
children = _this$props.children,
restProps = _objectWithoutProperties(_this$props, ["children"]);
return React.createElement(S.Consumer, null, function (_ref) {
var fixed = _ref.fixed;
if (_this2.fixed === e_FIXED.UNKNOW) _this2.fixed = fixed;
var Row = ctx.components.body.row;
return React.createElement(Row, Object.assign({}, restProps, {
ref: _this2.inst
}), children);
});
}
}, {
key: "componentDidMount",
value: function componentDidMount() {
if (this.fixed !== e_FIXED.NEITHER) return;
var props = this.props;
var index = props.children[0].props.index;
if (ctx._index_persister.size && ctx._index_persister.delete(index)) {
return;
}
if (ctx.vt_state === e_VT_STATE.RUNNING) {
var key = String(props["data-row-key"]);
if (ctx._keys2free.delete(key)) {
repainting_with_free(ctx, index);
}
repainting_with_add(ctx, index, this.inst.current);
} else {
/* init context */
console.assert(ctx.vt_state === e_VT_STATE.INIT);
ctx.vt_state = e_VT_STATE.LOADED;
var h = this.inst.current.offsetHeight;
if (ctx.possible_hight_per_tr === -1) {
/* assign only once */
ctx.possible_hight_per_tr = h;
}
ctx.computed_h = 0; // reset initial value.
add_h(ctx, index, h);
}
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate() {
if (this.fixed !== e_FIXED.NEITHER) return;
var index = this.props.children[0].props.index;
if (ctx.PAINT_FREE.size && ctx.PAINT_FREE.has(index)) {
repainting_with_add(ctx, index, this.inst.current);
} else {
repainting_with_free(ctx, index);
repainting_with_add(ctx, index, this.inst.current);
}
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
if (this.fixed !== e_FIXED.NEITHER) return;
var props = this.props;
var index = props.children[0].props.index; // `RUNNING` -> `SUSPENDED`
if (ctx.vt_state === e_VT_STATE.SUSPENDED) {
ctx._index_persister.add(index);
return;
}
if (ctx._keys2insert > 0) {
ctx._keys2insert--; // nothing to do... just return.
return;
}
repainting_with_free(ctx, index);
}
}]);
return VTRow;
}(React.Component);
var VTWrapper =
/*#__PURE__*/
function (_React$Component2) {
_inherits(VTWrapper, _React$Component2);
function VTWrapper(props, context) {
_classCallCheck(this, VTWrapper);
return _possibleConstructorReturn(this, _getPrototypeOf(VTWrapper).call(this, props, context));
}
_createClass(VTWrapper, [{
key: "render",
value: function render() {
var _this$props2 = this.props,
children = _this$props2.children,
restProps = _objectWithoutProperties(_this$props2, ["children"]);
return React.createElement(S.Consumer, null, function (_ref2) {
var fixed = _ref2.fixed;
var _offset_head = ctx._offset_head,
_offset_tail = ctx._offset_tail;
var head = _offset_head;
var tail = _offset_tail;
var trs = [];
var len = children.length;
var Wrapper = ctx.components.body.wrapper;
if (ctx.vt_state === e_VT_STATE.WAITING) {
// waitting for loading data as soon, just return this as following.
return React.createElement(Wrapper, Object.assign({}, restProps), trs);
}
if (len >= 0 && fixed === e_FIXED.NEITHER) {
if (ctx.vt_state === e_VT_STATE.INIT) {
/* init trs [0, 1] */
for (var i = head; i < tail; ++i) {
trs.push(children[i]);
}
if (ctx.row_count !== len) {
set_tr_cnt(ctx, len);
}
} else if (ctx.vt_state & e_VT_STATE.RUNNING) {
var offset = 0;
if (tail > len) {
offset = tail - len;
tail -= offset;
head -= offset;
if (head < 0) head = 0;
if (tail < 0) tail = 0; // update the `head` and `tail`.
_set_offset(ctx, ctx._offset_top, head, tail);
}
var PSRA = ctx.PSRA,
PSRB = ctx.PSRB;
var fixed_PSRA0 = PSRA[0] - offset,
fixed_PSRA1 = PSRA[1] - offset;
if (fixed_PSRA0 < 0) fixed_PSRA0 = 0;
if (fixed_PSRA1 < 0) fixed_PSRA1 = 0;
var fixed_PSRB0 = PSRB[0] - offset,
fixed_PSRB1 = PSRB[1] - offset;
if (fixed_PSRB0 < 0) fixed_PSRB0 = 0;
if (fixed_PSRB1 < 0) fixed_PSRB1 = 0;
if (ctx.row_count !== len) {
set_tr_cnt(ctx, len);
}
len = ctx.row_count;
var prev_len = ctx.prev_row_count;
if (ctx.vt_state & e_VT_STATE.PROTECTION) {
ctx.vt_state &= ~e_VT_STATE.PROTECTION;
prev_len = len;
}
/**
* start rendering phase.
* to render rows to filter.
*/
if (len > prev_len) {
/**
* the current keys of trs's the previous keys of trs's
* =================================================================
* shadow 10 +9
* 11 10
* 12 11
* -------head----------------------------head----------------------
* render 13 12
* 14 13
* 15 14
* 16 15
* -------tail----------------------------tail----------------------
* shadow 17 16
* 18 17
* 18
* =================================================================
* +: a new reocrd that will be inserted.
* NOTE: both of `head` and `tail` won't be changed.
*/
console.assert(PSRA[1] === head && PSRB[0] === tail);
var keys = new Set();
ctx._keys2insert = 0;
for (var _i5 = head; _i5 < tail; ++_i5) {
var child = children[_i5];
keys.add(child.key);
if (!ctx._prev_keys.has(child.key)) {
ctx._keys2insert++; // insert a row at index `i` with height `0`.
ctx.row_height.splice(_i5, 0, 0);
}
trs.push(child);
}
ctx._prev_keys = keys;
} else {
var _keys = new Set();
ctx._keys2free.clear();
for (var _i6 = head; _i6 < tail; ++_i6) {
var _child = children[_i6];
if (fixed_PSRA1 === head && fixed_PSRB0 === tail && // no movement occurred
!ctx._prev_keys.has(_child.key)) {
// then, manually free this index befor mounting React Component.
ctx._keys2free.add(_child.key);
}
trs.push(_child);
_keys.add(_child.key);
}
ctx._prev_keys = _keys;
}
/**
* start srs_diff phase.
* first up, Previous-Shadow-Rows below `trs`,
* then Previous-Shadow-Rows above `trs`.
*/
// how many Shadow Rows need to be deleted.
var SR_n2delete = 0,
SR_n2insert = 0;
/* PSR's range: [begin, end) */
if (PSRB[0] === -1) {
// init Rows.
var rows = new Array(tail - 1
/* substract the first row */
).fill(0, 0, tail - 1);
ctx.row_height = ctx.row_height.concat(rows); // init Shadow Rows.
var shadow_rows = new Array(len - tail).fill(ctx.possible_hight_per_tr, 0, len - tail);
ctx.row_height = ctx.row_height.concat(shadow_rows);
ctx.computed_h = ctx.computed_h + ctx.possible_hight_per_tr * (len - tail);
PSRB[0] = tail;
PSRB[1] = len;
} else {
if (len < prev_len) {
/* free some rows */
SR_n2delete = prev_len - len - (PSRB[1] - len);
srs_diff(ctx, PSRB, tail, len, fixed_PSRB0, PSRB[1]);
} else if (len > prev_len) {
/* insert some rows */
SR_n2insert = ctx._keys2insert;
srs_diff(ctx, PSRB, tail, len, PSRB[0], PSRB[1] + SR_n2insert);
} else {
srs_diff(ctx, PSRB, tail, len, PSRB[0], PSRB[1]);
}
}
if (PSRA[0] === -1) {
// init Shadow Rows.
PSRA[0] = 0;
PSRA[1] = 0;
} else {
srs_diff(ctx, PSRA, 0, head, PSRA[0], fixed_PSRA1 + SR_n2delete);
}
ctx.prev_row_count = ctx.row_count;
}
/* RUNNING */
}
/* len && this.fixed === e_FIXED.NEITHER */
/* fixed L R */
if (len >= 0 && fixed !== e_FIXED.NEITHER) {
for (var _i7 = head; _i7 < tail; ++_i7) {
trs.push(children[_i7]);
}
}
return React.createElement(Wrapper, Object.assign({}, restProps), trs);
});
}
}, {
key: "shouldComponentUpdate",
value: function shouldComponentUpdate(nextProps, nextState) {
return true;
}
}]);
return VTWrapper;
}(React.Component);
var VTable =
/*#__PURE__*/
function (_React$Component3) {
_inherits(VTable, _React$Component3);
function VTable(props, context) {
var _this3;
_classCallCheck(this, VTable);
_this3 = _possibleConstructorReturn(this, _getPrototypeOf(VTable).call(this, props, context));
_this3.inst = React.createRef();
_this3.wrap_inst = React.createRef();
_this3.scrollTop = 0;
_this3.scrollLeft = 0;
var fixed = _this3.props.children[0].props.fixed;
if (fixed === "left") {
_this3.fixed = e_FIXED.L;
} else if (fixed === "right") {
_this3.fixed = e_FIXED.R;
} else {
_this3.fixed = e_FIXED.NEITHER;
}
if (_this3.fixed === e_FIXED.NEITHER) {
_this3.restoring = false;
_this3.user_context = {};
var reflection = ctx.reflection || [];
if (typeof reflection === "string") {
reflection = [reflection];
}
for (var i = 0; i < reflection.length; ++i) {
_this3.user_context[reflection[i]] = _this3.props[reflection[i]];
}
_this3.event_queue = [];
_this3.nevent_queue = [];
_this3.update_self = _this3.update_self.bind(_assertThisInitialized(_this3));
_this3.HNDID_RAF = 0;
}
if (ctx.vt_state === e_VT_STATE.INIT) {
if (_this3.fixed === e_FIXED.NEITHER) {
ctx.possible_hight_per_tr = -1;
ctx.computed_h = 0;
ctx.re_computed = 0;
ctx.row_height = [];
ctx.row_count = 0;
ctx.prev_row_count = 0;
ctx.PSRA = [-1, -1];
ctx.PSRB = [-1, -1];
ctx.PAINT_ADD = new Map();
ctx.PAINT_SADD = new Map();
ctx.PAINT_FREE = new Set();
ctx.PAINT_SFREE = new Set();
/* init keys */
ctx._prev_keys = new Set();
ctx._keys2free = new Set();
ctx._keys2insert = 0;
__DIAGNOSIS__(ctx);
ctx._index_persister = new Set();
ctx._offset_top = 0 | 0;
ctx._offset_head = 0 | 0;
ctx._offset_tail = 0 | 1;
} // init context for all of the `L` `R` and `NEITHER`.
ctx.WH = 0;
} else {
if (_this3.fixed === e_FIXED.NEITHER) {
console.assert(ctx.vt_state === e_VT_STATE.SUSPENDED);
/* `SUSPENDED` -> `WAITING` */
ctx.vt_state = e_VT_STATE.WAITING;
var _ctx$_React_ptr = ctx._React_ptr,
scrollTop = _ctx$_React_ptr.scrollTop,
scrollLeft = _ctx$_React_ptr.scrollLeft;
_this3.scrollTop = scrollTop;
_this3.scrollLeft = scrollLeft;
}
}
if (_this3.fixed === e_FIXED.NEITHER) {
ctx.VTScroll = _this3.scroll.bind(_assertThisInitialized(_this3));
ctx._React_ptr = _assertThisInitialized(_this3);
}
return _this3;
}
_createClass(VTable, [{
key: "render",
value: function render() {
var _offset_top = ctx._offset_top;
var _this$props3 = this.props,
style = _this$props3.style,
children = _this$props3.children,
rest = _objectWithoutProperties(_this$props3, ["style", "children"]);
style.position = "absolute";
style.top = _offset_top;
var width = style.width,
rest_style = _objectWithoutProperties(style, ["width"]);
var Table = ctx.components.table;
return React.createElement("div", {
ref: this.wrap_inst,
style: {
width: width,
position: "relative",
transform: "matrix(1, 0, 0, 1, 0, 0)"
}
}, React.createElement(S.Provider, {
value: _objectSpread({
fixed: this.fixed
}, this.user_context)
}, React.createElement(Table, Object.assign({}, rest, {
ref: this.inst,
style: rest_style
}), children)));
}
}, {
key: "componentDidMount",
value: function componentDidMount() {
switch (this.fixed) {
case e_FIXED.L:
{
/* registers the `_lvt_ctx` at the `ctx`. */
vt_context.set(0 - ID, {
_React_ptr: this
});
ctx._lvt_ctx = vt_context.get(0 - ID);
ctx._lvt_ctx.wrap_inst = this.wrap_inst;
_Update_wrap_style(ctx._lvt_ctx, ctx.computed_h);
var _ctx$_React_ptr2 = ctx._React_ptr,
scrollTop = _ctx$_React_ptr2.scrollTop,
scrollLeft = _ctx$_React_ptr2.scrollLeft;
_scroll_to(ctx._lvt_ctx, scrollTop, scrollLeft);
_RC_fixed_rerender(ctx);
this.wrap_inst.current.setAttribute("vt-left", "[".concat(ID, "]"));
}
return;
case e_FIXED.R:
{
/* registers the `_rvt_ctx` at the `ctx`. */
vt_context.set((1 << 31) + ID, {
_React_ptr: this
});
ctx._rvt_ctx = vt_context.get((1 << 31) + ID);
ctx._rvt_ctx.wrap_inst = this.wrap_inst;
_Update_wrap_style(ctx._rvt_ctx, ctx.computed_h);
var _ctx$_React_ptr3 = ctx._React_ptr,
_scrollTop = _ctx$_React_ptr3.scrollTop,
_scrollLeft = _ctx$_React_ptr3.scrollLeft;
_scroll_to(ctx._rvt_ctx, _scrollTop, _scrollLeft);
_RC_fixed_rerender(ctx);
this.wrap_inst.current.setAttribute("vt-right", "[".concat(ID, "]"));
}
return;
default:
ctx.wrap_inst = this.wrap_inst; // ctx.re_computed = 0;
this.wrap_inst.current.parentElement.onscroll = this.scrollHook.bind(this);
_Update_wrap_style(ctx, ctx.computed_h);
this.wrap_inst.current.setAttribute("vt", "[".concat(ID, "]"));
break;
} // 0 - head, 2 - body
var children = this.props.children[2].props.children;
if (ctx.vt_state === e_VT_STATE.WAITING) {
/* switch `SUSPENDED` to `WAITING` from VT's constructor. */
if (children.length) {
// just only switch to `RUNNING`.
ctx.vt_state = e_VT_STATE.RUNNING;
}
} else {
if (children.length) {
// `vt_state` is changed by `VTRow`.
console.assert(ctx.vt_state === e_VT_STATE.LOADED);
ctx.vt_state = e_VT_STATE.RUNNING | e_VT_STATE.PROTECTION;
this.scrollHook({
target: {
scrollTop: 0,
scrollLeft: 0
},
flags: SCROLLEVT_INIT
});
} else {
console.assert(ctx.vt_state === e_VT_STATE.INIT);
}
}
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate() {
if (this.fixed !== e_FIXED.NEITHER) return;
if (ctx.vt_state === e_VT_STATE.INIT) {
return;
}
if (ctx.vt_state === e_VT_STATE.LOADED) {
// `LOADED` -> `RUNNING`.
ctx.vt_state = e_VT_STATE.RUNNING | e_VT_STATE.PROTECTION; // force update for initialization
this.scrollHook({
target: {
scrollTop: 0,
scrollLeft: 0
},
flags: SCROLLEVT_INIT
});
}
if (ctx.vt_state === e_VT_STATE.WAITING) {
// Do you get the previous data back?
if (this.props.children[2].props.children.length) {
// Y, `WAITING` -> `RUNNING`.
ctx.vt_state = e_VT_STATE.RUNNING;
} else {
// N, keep `WAITING` then just return.
return;
}
}
if (ctx.vt_state & e_VT_STATE.RUNNING) {
if (this.restoring) {
this.restoring = false;
this.scrollHook({
target: {
scrollTop: this.scrollTop,
scrollLeft: this.scrollLeft
},
flags: SCROLLEVT_RESTORETO
});
}
if (ctx.re_computed !== 0) {
// rerender
ctx.re_computed = 0;
this.scrollHook({
target: {
scrollTop: this.scrollTop,
scrollLeft: this.scrollLeft
},
flags: SCROLLEVT_RECOMPUTE
});
}
}
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
if (this.fixed !== e_FIXED.NEITHER) return;
if (ctx.destroy) {
vt_context.delete(0 - ID); // fixed left
vt_context.delete((1 << 31) + ID); // fixed right
vt_context.delete(ID);
} else {
ctx.vt_state = e_VT_STATE.SUSPENDED;
var _ctx$_React_ptr4 = ctx._React_ptr,
scrollTop = _ctx$_React_ptr4.scrollTop,
scrollLeft = _ctx$_React_ptr4.scrollLeft;
ctx._React_ptr = {
scrollTop: scrollTop,
scrollLeft: scrollLeft
};
}
}
}, {
key: "shouldComponentUpdate",
value: function shouldComponentUpdate(nextProps, nextState) {
return true;
} // returns [head, tail, top]
}, {
key: "scroll_with_computed",
value: function scroll_with_computed(top) {
var row_height = ctx.row_height,
row_count = ctx.row_count,
possible_hight_per_tr = ctx.possible_hight_per_tr,
overscanRowCount = ctx.overscanRowCount;
var overscan = overscanRowCount;
try {
var props = this.props.children[2].props.children[0].props;
if (typeof props.scroll.y === "number") {
ctx._raw_y = props.scroll.y;
ctx._y = ctx._raw_y;
} else if (typeof props.scroll.y === "string") {
/* a string, like "calc(100vh - 300px)" */
if (ctx.debug) console.warn("AntD.Table.scroll.y: ".concat(props.scroll.y, ", it may cause performance problems."));
ctx._raw_y = props.scroll.y;
ctx._y = this.wrap_inst.current.parentElement.offsetHeight;
} else {
if (ctx.debug) console.warn("AntD.Table.scroll.y: ".concat(props.scroll.y, ", it may cause performance problems."));
console.info("VT will not works well, did you forget to set `scroll.y`?");
ctx._raw_y = null;
ctx._y = this.wrap_inst.current.parentElement.offsetHeight;
}
} catch (_unused) {
// return it if there is no children.
return [0 | 0, 0 | 0, 0 | 0];
}
console.assert(ctx._y >= 0); // to calc `accumulate_top` with `row_height` and `overscan`.
var accumulate_top = 0,
i = 0;
for (; i < row_count && accumulate_top <= top; ++i) {
accumulate_top += row_height[i];
}
while (i > 0 && overscan--) {
accumulate_top -= row_height[--i];
} // the height to render.
var torender_h = 0,
j = i;
for (; j < row_count && torender_h < ctx._y; ++j) {
torender_h += row_height[i] === void 0 ? possible_hight_per_tr : row_height[j];
}
j += overscanRowCount * 2;
if (j > row_count) j = row_count; // returns [head, tail, top].
return [0 | i, 0 | j, 0 | accumulate_top];
}
}, {
key: "scrollHook",
value: function scrollHook(e) {
if (e) {
// preprocess.
if (e.flags) {
this.event_queue.push(e);
} else {
this.nevent_queue.push(e);
}
}
if (this.nevent_queue.length || this.event_queue.length) {
if (this.HNDID_RAF) cancelAnimationFrame(this.HNDID_RAF); // requestAnimationFrame, ie >= 10
this.HNDID_RAF = requestAnimationFrame(this.update_self);
}
}
}, {
key: "update_self",
value: function update_self(timestamp) {
var _this4 = this;
if (ctx.vt_state === e_VT_STATE.WAITING) {
return;
}
var nevq = this.nevent_queue,
evq = this.event_queue;
var e; // consume the `evq` first.
if (evq.length) {
e = evq.shift();
} else if (nevq.length) {
// take the last event from the `nevq`.
e = _make_evt(nevq.pop());
nevq.length = 0;
} else {
return;
}
var scrollTop = e.target.scrollTop;
var scrollLeft = e.target.scrollLeft;
var flags = e.flags;
if (ctx.debug) {
console.debug("[".concat(ctx.id, "][SCROLL] top: %d, left: %d"), scrollTop, scrollLeft);
}
var head = 0 | 0;
var tail = 0 | 0;
var top = 0 | 0;
if (flags & SCROLLEVT_RESTORETO || !(flags & (SCROLLEVT_INIT | SCROLLEVT_RECOMPUTE)) && scrollTop === this.scrollTop) {
head = ctx._offset_head;
tail = ctx._offset_tail;
top = ctx._offset_top;
} else {
// checks every tr's height, so it may be take some times...
var offset = this.scroll_with_computed(scrollTop);
head = offset[0];
tail = offset[1];
top = offset[2];
}
var prev_head = ctx._offset_head,
prev_tail = ctx._offset_tail,
prev_top = ctx._offset_top;
if (flags & SCROLLEVT_INIT) {
log_debug(ctx, "SCROLLEVT_INIT");
console.assert(scrollTop === 0 && scrollLeft === 0);
_RC_rerender(ctx, top, head, tail, function () {
scroll_to(ctx, 0, 0); // init this vtable by (0, 0).
_this4.HNDID_RAF = 0;
flags &= ~SCROLLEVT_INIT;
flags &= ~SCROLLEVT_BARRIER;
if (_this4.event_queue.length) _this4.scrollHook(null); // consume the next.
});
_RC_fixed_rerender(ctx);
return;
}
if (flags & SCROLLEVT_RECOMPUTE) {
log_debug(ctx, "SCROLLEVT_RECOMPUTE");
if (head === prev_head && tail === prev_tail && top === prev_top) {
this.HNDID_RAF = 0;
flags &= ~SCROLLEVT_BARRIER;
flags &= ~SCROLLEVT_RECOMPUTE;
if (this.event_queue.length) this.scrollHook(null); // consume the next.
return;
}
_RC_rerender(ctx, top, head, tail, function () {
scroll_to(ctx, scrollTop, scrollLeft);
_this4.HNDID_RAF = 0;
flags &= ~SCROLLEVT_BARRIER;
flags &= ~SCROLLEVT_RECOMPUTE;
if (_this4.event_queue.length) _this4.scrollHook(null); // consume the next.
});
_RC_fixed_rerender(ctx);
return;
}
if (flags & SCROLLEVT_RESTORETO) {
log_debug(ctx, "SCROLLEVT_RESTORETO");
_RC_rerender(ctx, top, head, tail, function () {
// to force update style assign `WH` to 0.
ctx.WH = 0;
update_wrap_style(ctx, ctx.computed_h);
scroll_to(ctx, scrollTop, scrollLeft);
_this4.HNDID_RAF = 0;
flags &= ~SCROLLEVT_BARRIER;
flags &= ~SCROLLEVT_RESTORETO;
if (_this4.event_queue.length) _this4.scrollHook(null); // consume the next.
});
_RC_fixed_rerender(ctx);
return;
}
if (flags & SCROLLEVT_NATIVE) {
log_debug(ctx, "SCROLLEVT_NATIVE");
this.scrollLeft = scrollLeft;
this.scrollTop = scrollTop;
var _cb_scroll = function _cb_scroll() {
if (ctx.onScroll) {
ctx.onScroll({
top: scrollTop,
left: scrollLeft,
isEnd: e.endOfElements
});
}
};
if (head === prev_head && tail === prev_tail && top === prev_top) {
this.HNDID_RAF = 0;
flags &= ~SCROLLEVT_NATIVE;
_cb_scroll();
return;
}
_RC_rerender(ctx, top, head, tail, function () {
_this4.HNDID_RAF = 0;
flags &= ~SCROLLEVT_NATIVE;
_cb_scroll();
});
_RC_fixed_rerender(ctx);
return;
}
} // returns the last state.
}, {
key: "scroll",
value: function scroll(param) {
var _this5 = this;
if (param) {
if (this.restoring) {
return {
top: this.scrollTop,
left: this.scrollLeft
};
}
var lst_top = this.scrollTop;
var lst_left = this.scrollLeft;
this.restoring = true;
if (typeof param.top === "number") {
this.scrollTop = param.top;
}
if (typeof param.left === "number") {
this.scrollLeft = param.left;
}
if (ctx.vt_state === e_VT_STATE.RUNNING && ctx.row_count >= 0) {
setTimeout(function () {
return _this5.forceUpdate();
}, 0);
}
return {
top: lst_top,
left: lst_left
};
} else {
return {
top: this.scrollTop,
left: this.scrollLeft
};
}
}
}]);
return VTable;
}(React.Component);
return {
VTable: VTable,
VTWrapper: VTWrapper,
VTRow: VTRow,
S: S
};
} // _context
}; // VT
function ASSERT_ID(id) {
console.assert(typeof id === "number" && id > 0);
}
function _set_components(ctx, components) {
var table = components.table,
body = components.body,
header = components.header;
ctx.components.body = _objectSpread({}, ctx.components.body, {}, body);
if (body && body.cell) {
ctx._vtcomponents.body.cell = body.cell;
}
if (header) {
ctx.components.header = header;
ctx._vtcomponents.header = header;
}
if (table) {
ctx.components.table = table;
}
}
function init_vt(id) {
ASSERT_ID(id);
var inside = vt_context.get(id) || {};
if (!inside._vtcomponents) {
vt_context.set(id, inside);
var _VTContext$Switch = VTContext.Switch(id),
VTable = _VTContext$Switch.VTable,
VTWrapper = _VTContext$Switch.VTWrapper,
VTRow = _VTContext$Switch.VTRow,
S = _VTContext$Switch.S; // set the virtual layer.
inside._vtcomponents = {
table: VTable,
body: {
wrapper: VTWrapper,
row: VTRow
}
}; // set the default implementation layer.
inside.components = {};
_set_components(inside, {
table: Table,
body: {
wrapper: Wrapper,
row: Row
}
});
inside._store = S; // start -> `INIT`
inside.vt_state = e_VT_STATE.INIT;
}
return inside;
}
function VTComponents(vt_opts) {
if (Object.hasOwnProperty.call(vt_opts, "height")) {
console.warn("The property `vt_opts.height` has been deprecated.\n Now it depends entirely on `scroll.y`.");
}
if (Object.hasOwnProperty.call(vt_opts, "reflection")) {
console.warn("The property `vt_opts.reflection`\n will be deprecated in the next release.");
}
var inside = init_vt(vt_opts.id);
Object.assign(inside, {
overscanRowCount: 5,
debug: false,
destroy: false
}, vt_opts);
if (vt_opts.debug)