react-common-use-components
Version:
A React mobile commonly used component library
87 lines (86 loc) • 4.11 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importStar(require("react"));
const utils_1 = require("../../utils");
const InfiniteScroll = ({ children, hasMore, loadMore, loading, end, threshold = 0, total, dataLength }) => {
const [showLoading, setShowLoading] = (0, react_1.useState)(false);
const scrollTopRef = (0, react_1.useRef)(0);
const topValueRef = (0, react_1.useRef)(0);
const getScrollTop = () => {
var _a, _b;
return ((_a = document === null || document === void 0 ? void 0 : document.documentElement) === null || _a === void 0 ? void 0 : _a.scrollTop) || ((_b = document === null || document === void 0 ? void 0 : document.body) === null || _b === void 0 ? void 0 : _b.scrollTop) || 0;
};
const handleScroll = (0, utils_1.debounce)(() => {
const scrollTop = getScrollTop();
scrollTopRef.current = scrollTop;
const marginBottom = document.documentElement.scrollHeight - (document.documentElement.scrollTop + document.body.scrollTop) - document.documentElement.clientHeight;
if (marginBottom <= threshold && scrollTop > topValueRef.current && hasMore) {
setShowLoading(true);
setTimeout(() => {
setShowLoading(false);
if (loadMore) {
loadMore();
}
}, 500);
}
}, 200);
(0, react_1.useEffect)(() => {
window.addEventListener('scroll', handleScroll);
return () => {
window.removeEventListener('scroll', handleScroll);
};
}, [hasMore, loadMore, threshold]);
(0, react_1.useEffect)(() => {
topValueRef.current = scrollTopRef.current;
}, [dataLength]);
return (<div>
{children}
<style>
{`
@keyframes loading {
0% { transform: rotate(0deg); }
25% { transform: rotate(-3deg); }
50% { transform: rotate(3deg); }
75% { transform: rotate(-3deg); }
100% { transform: rotate(0deg); }
}
`}
</style>
{(hasMore && showLoading) && <div style={{ paddingBottom: "1rem" }}>
{loading ? loading :
<div style={{ display: "flex", justifyContent: "center", alignItems: "center", }}>
<div style={{ fontSize: "0.75rem", color: "#b3b3b3", margin: "0.5rem", animation: 'loading 1s infinite', }}>加载中...</div>
</div>}
</div>}
{(dataLength === total) && <div style={{ paddingBottom: "1rem" }}>
{end ? end :
<div style={{ display: "flex", justifyContent: "center", alignItems: "center", }}>
<div style={{ fontSize: "0.75rem", color: "#b3b3b3", margin: "0.5rem" }}>没有更多了</div>
</div>}
</div>}
</div>);
};
exports.default = InfiniteScroll;