fastlion-amis
Version:
一种MIS页面生成工具
202 lines (201 loc) • 10.4 kB
JavaScript
"use strict";
/**
* @file 滚动加载组件
*/
Object.defineProperty(exports, "__esModule", { value: true });
exports.InfinteSroll = void 0;
var tslib_1 = require("tslib");
var react_1 = (0, tslib_1.__importDefault)(require("react"));
var theme_1 = require("../../../../theme");
var locale_1 = require("../../../../locale");
require("./index.scss");
var debounce_1 = (0, tslib_1.__importDefault)(require("lodash/debounce"));
var InfiniteScrollContent = function (props) {
var hasMore = props.hasMore, __ = props.translate;
var renderContent = function () {
return react_1.default.createElement(react_1.default.Fragment, null, hasMore ?
react_1.default.createElement("div", null)
: (react_1.default.createElement("span", null, __('NoMore'))));
};
return renderContent();
};
function isElement(node) {
var ELEMENT_NODE_TYPE = 1;
return node.nodeType === ELEMENT_NODE_TYPE;
}
var getScrollParent = function (el, root) {
if (root === void 0) { root = window; }
var node = el;
var overflowScrollReg = /scroll|auto|overlay/i;
while (node && node !== root && isElement(node)) {
var overflowY = window.getComputedStyle(node).overflowY;
if (overflowScrollReg.test(overflowY)) {
return node;
}
node = node.parentNode;
}
return root;
};
var InfinteSroll = /** @class */ (function (_super) {
(0, tslib_1.__extends)(InfinteSroll, _super);
function InfinteSroll(props) {
var _this = _super.call(this, props) || this;
_this.startY = 0;
_this.scroll = true;
_this.onMove = false;
_this.offsetY = 0;
_this.originWidth = 0;
_this.startLoading = false;
_this.handleTouchstart = function (e) {
var hasMore = _this.props.hasMore;
if (_this.scroll) {
if (!hasMore) {
_this.scroll = false;
_this.onMove = true;
}
else {
_this.onMove = false;
}
_this.offsetY = 0;
}
};
_this.handleTouchend = function (e) {
_this.scroll = true;
if (_this.offsetY === 0)
return;
setTimeout(function () {
_this.emptyRef.current.style.height = '0px';
_this.emptyRef.current.style.transition = 'height 0.5s';
_this.offsetY = 0;
});
};
_this.handleTouchmove = function (e) {
var _a = _this.props, hasMore = _a.hasMore, autoFillHeight = _a.autoFillHeight;
// 没有更多数据就不需要滚动
if (!autoFillHeight || !hasMore) {
return;
}
if (_this.offsetY == 0) {
_this.offsetY = e.touches[0].clientY;
}
if (_this.onMove && _this.offsetY !== 0) {
var height = _this.offsetY - e.touches[0].clientY;
_this.emptyRef.current.style.height = (height > 200 ? 200 : height) + 'px';
_this.emptyRef.current.style.transition = 'none';
}
};
_this.checkData = function (e) {
var _a = _this.props, loadMore = _a.loadMore, hasMore = _a.hasMore, loadmoreLoading = _a.loadmoreLoading, tableLayout = _a.tableLayout, loadDataOnce = _a.loadDataOnce;
if (!loadMore || loadmoreLoading)
return;
if (_this.scroll && (tableLayout !== 'horizontal' || !loadDataOnce)) {
if (e.target.scrollHeight - e.target.offsetHeight == _this.parent.scrollTop && !hasMore) {
_this.scroll = false;
_this.onMove = true;
}
else {
_this.onMove = false;
}
_this.offsetY = 0;
}
_this.loadMore();
};
_this.handleCheck = (0, debounce_1.default)(_this.checkData, 100, { leading: false, trailing: true });
_this.loadMore = function () {
var _a, _b, _c;
var _d = _this.props, loadMore = _d.loadMore, hasMore = _d.hasMore;
if (!hasMore)
return;
var element = _this.elRef.current;
if (!_this.parent)
return;
var rect = element.getBoundingClientRect();
var elementTop = rect.top;
var current = _this.parent === window
? window.innerHeight
: _this.parent.getBoundingClientRect().bottom;
if (current >= elementTop - 75 && (((_a = _this.parent) === null || _a === void 0 ? void 0 : _a.scrollTop) + ((_b = _this.parent) === null || _b === void 0 ? void 0 : _b.clientHeight) - ((_c = _this.parent) === null || _c === void 0 ? void 0 : _c.scrollHeight) > -75)) {
_this.startLoading = true;
loadMore();
}
};
_this.calcData = function (e) {
var _a, _b, _c;
var _d = _this.props, loadMore = _d.loadMore, hasMore = _d.hasMore, ns = _d.classPrefix;
var tableContentHeight = _this.parent.clientHeight;
var tableHeight = (_b = (_a = _this.parent) === null || _a === void 0 ? void 0 : _a.querySelector("." + ns + "Table-table")) === null || _b === void 0 ? void 0 : _b.clientHeight;
if (hasMore && tableHeight && (tableHeight < tableContentHeight)) {
loadMore();
}
else {
(_c = _this.parent) === null || _c === void 0 ? void 0 : _c.removeEventListener('touchmove', _this.handleCalcData);
}
};
_this.handleCalcData = (0, debounce_1.default)(_this.calcData, 1000, { leading: true, trailing: false });
_this.elRef = react_1.default.createRef();
_this.emptyRef = react_1.default.createRef();
return _this;
}
InfinteSroll.prototype.componentDidUpdate = function (prevProps) {
if (prevProps.loadmoreLoading === true && this.props.loadmoreLoading === false) {
this.startLoading = false;
}
if (prevProps.tableRotate !== this.props.tableRotate) {
var element = this.elRef.current;
if (!element)
return;
element.style.width = this.props.tableRotate ? '100vh' : this.originWidth + 'px';
}
};
InfinteSroll.prototype.componentDidMount = function () {
var _a, _b, _c, _d, _e, _f, _g, _h;
var _j = this.props, autoFillHeight = _j.autoFillHeight, ns = _j.classPrefix, tableLayout = _j.tableLayout, loadDataOnce = _j.loadDataOnce;
var element = this.elRef.current;
if (!element)
return;
var previousWidth = (_a = element.previousElementSibling) === null || _a === void 0 ? void 0 : _a.clientWidth;
if (!previousWidth) {
previousWidth = ((_b = element.closest("." + ns + "Tabs-content")) === null || _b === void 0 ? void 0 : _b.clientWidth) || 0;
}
if (!previousWidth) {
previousWidth = ((_c = element.parentElement) === null || _c === void 0 ? void 0 : _c.clientWidth) || 0;
}
element.style.width = previousWidth + 'px';
this.originWidth = previousWidth - 20;
// 获取滚动的dom
this.parent = element.closest(autoFillHeight ? "." + ns + "Table-content" : "." + ns + "Drawer-body") || element.closest("." + ns + "Cards-content") || element.closest("." + ns + "List-items") || element.closest("." + ns + "Page-body");
(_d = this.parent) === null || _d === void 0 ? void 0 : _d.addEventListener('scroll', this.handleCheck);
if (tableLayout == 'horizontal' && loadDataOnce)
return;
(_e = this.parent) === null || _e === void 0 ? void 0 : _e.addEventListener('touchmove', this.handleTouchmove);
(_f = this.parent) === null || _f === void 0 ? void 0 : _f.addEventListener('touchmove', this.handleCalcData);
(_g = this.parent) === null || _g === void 0 ? void 0 : _g.addEventListener('touchstart', this.handleTouchstart);
(_h = this.parent) === null || _h === void 0 ? void 0 : _h.addEventListener('touchend', this.handleTouchend, false);
};
InfinteSroll.prototype.componentWillUnmount = function () {
var _a, _b, _c, _d, _e;
var _f = this.props, tableLayout = _f.tableLayout, loadDataOnce = _f.loadDataOnce;
(_a = this.parent) === null || _a === void 0 ? void 0 : _a.removeEventListener('scroll', this.handleCheck);
if (tableLayout == 'horizontal' && loadDataOnce)
return;
(_b = this.parent) === null || _b === void 0 ? void 0 : _b.removeEventListener('touchmove', this.handleTouchmove);
(_c = this.parent) === null || _c === void 0 ? void 0 : _c.removeEventListener('touchstart', this.handleTouchstart);
(_d = this.parent) === null || _d === void 0 ? void 0 : _d.removeEventListener('touchend', this.handleTouchend);
(_e = this.parent) === null || _e === void 0 ? void 0 : _e.removeEventListener('touchmove', this.handleCalcData);
};
InfinteSroll.prototype.render = function () {
var _a = this.props, hasMore = _a.hasMore, translate = _a.translate, loadMore = _a.loadMore, hasData = _a.hasData, tableRotate = _a.tableRotate;
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("div", { ref: this.elRef, className: 'infinteSroll', style: { position: 'sticky', left: 0 } },
react_1.default.createElement(InfiniteScrollContent, { hasMore: hasMore, translate: translate, loadMore: loadMore, hasData: hasData, tableRotate: tableRotate })),
react_1.default.createElement("div", { ref: this.emptyRef })));
};
InfinteSroll.defaultProps = {
hasMore: true,
threshold: 250
};
return InfinteSroll;
}(react_1.default.Component));
exports.InfinteSroll = InfinteSroll;
exports.default = (0, theme_1.themeable)((0, locale_1.localeable)(InfinteSroll));
//# sourceMappingURL=./renderers/Lion/components/InfinteSroll/index.js.map