@nutui/nutui-react-taro
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
224 lines (223 loc) • 9.24 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "InfiniteLoading", {
enumerable: true,
get: function() {
return InfiniteLoading;
}
});
var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
var _async_to_generator = require("@swc/helpers/_/_async_to_generator");
var _object_spread = require("@swc/helpers/_/_object_spread");
var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
var _ts_generator = require("@swc/helpers/_/_ts_generator");
var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
var _components = require("@tarojs/components");
var _taro = require("@tarojs/taro");
var _index = require("../configprovider/index");
var _typings = require("../../utils/typings");
var _pxtransform = require("../../utils/taro/px-transform");
var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
type: 'default',
hasMore: true,
threshold: 40,
target: '',
pullRefresh: false
});
var classPrefix = "nut-infiniteloading";
var InfiniteLoading = function InfiniteLoading(props) {
var getBottomTipsText = function getBottomTipsText() {
if (isInfiniting) {
return loadingText || locale.infiniteloading.loadText;
}
if (!hasMore) {
return loadMoreText || locale.infiniteloading.loadMoreText;
}
return null;
};
var locale = (0, _index.useConfig)().locale;
var _ref = (0, _object_spread._)({}, defaultProps, props), children = _ref.children, type = _ref.type, hasMore = _ref.hasMore, threshold = _ref.threshold, target = _ref.target, pullRefresh = _ref.pullRefresh, pullingText = _ref.pullingText, loadingText = _ref.loadingText, loadMoreText = _ref.loadMoreText, className = _ref.className, onRefresh = _ref.onRefresh, onLoadMore = _ref.onLoadMore, onScroll = _ref.onScroll, rest = (0, _object_without_properties._)(_ref, [
"children",
"type",
"hasMore",
"threshold",
"target",
"pullRefresh",
"pullingText",
"loadingText",
"loadMoreText",
"className",
"onRefresh",
"onLoadMore",
"onScroll"
]);
var _useState = (0, _sliced_to_array._)((0, _react.useState)(false), 2), isInfiniting = _useState[0], setIsInfiniting = _useState[1];
var _useState1 = (0, _sliced_to_array._)((0, _react.useState)(0), 2), topDisScoll = _useState1[0], setTopDisScoll = _useState1[1];
var refreshTop = (0, _react.useRef)(null);
var scrollHeight = (0, _react.useRef)(0);
var scrollTop = (0, _react.useRef)(0);
var isTouching = (0, _react.useRef)(false);
var y = (0, _react.useRef)(0);
var refreshMaxH = (0, _react.useRef)(0);
var distance = (0, _react.useRef)(0);
var classes = (0, _classnames.default)(classPrefix, className, "".concat(classPrefix, "-").concat(type));
(0, _react.useEffect)(function() {
refreshMaxH.current = threshold;
var timer = setTimeout(function() {
getScrollHeight();
}, 200);
return function() {
return clearTimeout(timer);
};
}, [
hasMore,
isInfiniting,
threshold
]);
/** 获取需要滚动的距离 */ var getScrollHeight = function getScrollHeight() {
var parentElement = getParentElement('scroller');
parentElement.boundingClientRect(function(rect) {
var _rect_height;
scrollHeight.current = (_rect_height = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _rect_height !== void 0 ? _rect_height : 0;
}).exec();
};
var getStyle = function getStyle() {
return {
height: topDisScoll < 0 ? (0, _pxtransform.pxTransform)(0) : (0, _pxtransform.pxTransform)(topDisScoll),
transition: "height 0.2s cubic-bezier(0.25,0.1,0.25,1)"
};
};
var getParentElement = function getParentElement(el) {
return (0, _taro.createSelectorQuery)().select(target ? "#".concat(target, " #").concat(el) : "#".concat(el));
};
var infiniteDone = function infiniteDone() {
setIsInfiniting(false);
};
var refreshDone = function refreshDone() {
distance.current = 0;
setTopDisScoll(0);
isTouching.current = false;
};
var scrollAction = function scrollAction(e) {
var _e_target;
scrollTop.current = (_e_target = e.target) === null || _e_target === void 0 ? void 0 : _e_target.scrollTop;
if (e.target.scrollTop <= 0) {
// 滚动到最顶部
e.target.scrollTop = 0;
}
onScroll && onScroll(e.target.scrollTop);
};
var lower = function lower() {
return (0, _async_to_generator._)(function() {
return (0, _ts_generator._)(this, function(_state) {
switch(_state.label){
case 0:
if (!hasMore || isInfiniting) {
return [
2,
false
];
}
setIsInfiniting(true);
return [
4,
onLoadMore === null || onLoadMore === void 0 ? void 0 : onLoadMore()
];
case 1:
_state.sent();
infiniteDone();
return [
2
];
}
});
})();
};
var touchStart = function touchStart(event) {
if (scrollTop.current === 0 && !isTouching.current && pullRefresh) {
y.current = event.touches[0].pageY;
isTouching.current = true;
}
};
var touchMove = function touchMove(event) {
distance.current = event.touches[0].pageY - y.current;
if (distance.current > 0 && isTouching.current) {
event.preventDefault();
setTopDisScoll(distance.current);
if (distance.current >= refreshMaxH.current) {
distance.current = refreshMaxH.current;
setTopDisScoll(refreshMaxH.current);
}
} else {
distance.current = 0;
setTopDisScoll(0);
isTouching.current = false;
}
};
var touchEnd = function touchEnd() {
return (0, _async_to_generator._)(function() {
return (0, _ts_generator._)(this, function(_state) {
switch(_state.label){
case 0:
if (!(distance.current < refreshMaxH.current)) return [
3,
1
];
distance.current = 0;
setTopDisScoll(0);
isTouching.current = false;
return [
3,
3
];
case 1:
return [
4,
onRefresh === null || onRefresh === void 0 ? void 0 : onRefresh()
];
case 2:
_state.sent();
refreshDone();
_state.label = 3;
case 3:
return [
2
];
}
});
})();
};
return /*#__PURE__*/ _react.default.createElement(_components.ScrollView, (0, _object_spread_props._)((0, _object_spread._)({}, rest), {
className: classes,
scrollY: true,
id: "scroller",
type: "list",
style: {
height: '100%'
},
onScroll: scrollAction,
onScrollToLower: lower,
onTouchStart: touchStart,
onTouchMove: touchMove,
onTouchEnd: touchEnd
}), /*#__PURE__*/ _react.default.createElement(_components.View, {
className: "nut-infinite-top",
ref: refreshTop,
style: getStyle()
}, /*#__PURE__*/ _react.default.createElement(_components.View, {
className: "nut-infinite-top-tips"
}, pullingText || locale.infiniteloading.pullRefreshText)), /*#__PURE__*/ _react.default.createElement(_components.View, {
className: "nut-infinite-container"
}, children), /*#__PURE__*/ _react.default.createElement(_components.View, {
className: "nut-infinite-bottom"
}, /*#__PURE__*/ _react.default.createElement(_components.View, {
className: "nut-infinite-bottom-tips"
}, getBottomTipsText())));
};
InfiniteLoading.displayName = 'NutInfiniteLoading';