@nutui/nutui-react
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
288 lines (287 loc) • 13.8 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "PullToRefresh", {
enumerable: true,
get: function() {
return PullToRefresh;
}
});
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 _define_property = require("@swc/helpers/_/_define_property");
var _instanceof = require("@swc/helpers/_/_instanceof");
var _object_spread = require("@swc/helpers/_/_object_spread");
var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
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 _react1 = require("@use-gesture/react");
var _web = require("@react-spring/web");
var _iconsreact = require("@nutui/icons-react");
var _configprovider = require("../configprovider");
var _getscrollparent = require("../../utils/get-scroll-parent");
var _rubberband = require("../../utils/rubberband");
var _sleep = require("../../utils/sleep");
var _supportspassive = require("../../utils/supports-passive");
var _typings = require("../../utils/typings");
var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
type: 'default',
pullingText: '',
canReleaseText: '',
refreshingText: '',
completeText: '',
completeDelay: 500,
disabled: false,
headHeight: 80,
threshold: 60,
onRefresh: function onRefresh() {}
});
var PullToRefresh = function PullToRefresh(p) {
var doRefresh = function doRefresh() {
return _doRefresh.apply(this, arguments);
};
var classPrefix = 'nut-pulltorefresh';
var locale = (0, _configprovider.useConfig)().locale;
var props = (0, _object_spread._)({}, defaultProps, p, {
pullingText: p.pullingText || locale.pullToRefresh.pullingText,
canReleaseText: p.canReleaseText || locale.pullToRefresh.canReleaseText,
refreshingText: p.refreshingText || locale.pullToRefresh.refreshingText,
completeText: p.completeText || locale.pullToRefresh.completeText
});
var classes = (0, _classnames.default)(classPrefix, props.className, "".concat(classPrefix, "-").concat(props.type));
var headHeight = props.headHeight;
var threshold = props.threshold;
var _useState = (0, _sliced_to_array._)((0, _react.useState)('pulling'), 2), status = _useState[0], setStatus = _useState[1];
var _useSpring = (0, _sliced_to_array._)((0, _web.useSpring)(function() {
return {
from: {
height: 0
},
config: {
tension: 300,
friction: 30,
clamp: true
}
};
}), 2), springStyles = _useSpring[0], api = _useSpring[1];
var elementRef = (0, _react.useRef)(null);
var pullingRef = (0, _react.useRef)(false);
(0, _react.useEffect)(function() {
var _elementRef_current;
(_elementRef_current = elementRef.current) === null || _elementRef_current === void 0 ? void 0 : _elementRef_current.addEventListener('touchmove', function() {});
}, []);
function _doRefresh() {
_doRefresh = (0, _async_to_generator._)(function() {
var e;
return (0, _ts_generator._)(this, function(_state) {
switch(_state.label){
case 0:
api.start({
height: headHeight
});
setStatus('refreshing');
_state.label = 1;
case 1:
_state.trys.push([
1,
3,
,
4
]);
return [
4,
props.onRefresh()
];
case 2:
_state.sent();
setStatus('complete');
return [
3,
4
];
case 3:
e = _state.sent();
api.start({
to: /*#__PURE__*/ function() {
var _ref = (0, _async_to_generator._)(function(next) {
return (0, _ts_generator._)(this, function(_state) {
switch(_state.label){
case 0:
return [
4,
next({
height: 0
})
];
case 1:
_state.sent();
setStatus('pulling');
return [
2
];
}
});
});
return function(next) {
return _ref.apply(this, arguments);
};
}()
});
throw e;
case 4:
if (!(props.completeDelay > 0)) return [
3,
6
];
return [
4,
(0, _sleep.sleep)(props.completeDelay)
];
case 5:
_state.sent();
_state.label = 6;
case 6:
api.start({
to: /*#__PURE__*/ function() {
var _ref = (0, _async_to_generator._)(function(next) {
return (0, _ts_generator._)(this, function(_state) {
switch(_state.label){
case 0:
return [
4,
next({
height: 0
})
];
case 1:
_state.sent();
setStatus('pulling');
return [
2
];
}
});
});
return function(next) {
return _ref.apply(this, arguments);
};
}()
});
return [
2
];
}
});
});
return _doRefresh.apply(this, arguments);
}
(0, _react1.useDrag)(function(state) {
var getScrollTop = function getScrollTop(element) {
return 'scrollTop' in element ? element.scrollTop : element.scrollY;
};
if (status === 'refreshing' || status === 'complete') return;
var event = state.event;
// 最后一个事件，检查是否可以刷新或是否是开始状态（第一个状态也是最后一个状态）
if (state.last) {
pullingRef.current = false;
if (status === 'canRelease') {
doRefresh();
} else {
api.start({
height: 0
});
}
return;
}
// 手指位置
var _state_movement = (0, _sliced_to_array._)(state.movement, 2), y = _state_movement[1];
// 第一个事件，并且手指位置大于0
if (state.first && y > 0) {
var target = state.event.target;
if (!target || !(0, _instanceof._)(target, Element)) return;
var scrollParent = (0, _getscrollparent.getScrollParent)(target);
while(true){
if (!scrollParent) return;
var scrollTop = getScrollTop(scrollParent);
if (scrollTop > 0) {
return;
}
// 查找到 window 说明到顶了
if ((0, _instanceof._)(scrollParent, Window)) {
break;
}
// 递归查找
scrollParent = (0, _getscrollparent.getScrollParent)(scrollParent.parentNode);
}
pullingRef.current = true;
}
if (!pullingRef.current) return;
if (event.cancelable) {
event.preventDefault();
}
event.stopPropagation();
var height = Math.max((0, _rubberband.rubberbandIfOutOfBounds)(y, 0, 0, headHeight * 5, 0.5), 0);
api.start({
height: height
});
setStatus(height > threshold ? 'canRelease' : 'pulling');
}, {
pointer: {
touch: true
},
axis: 'y',
target: elementRef,
enabled: !props.disabled,
eventOptions: _supportspassive.passiveSupported ? {
passive: false
} : false
});
var renderIcons = function renderIcons(status) {
return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/ _react.default.createElement("i", {
className: "".concat(classPrefix, "-head-content-icons")
}, (status === 'pulling' || status === 'complete') && /*#__PURE__*/ _react.default.createElement(_iconsreact.Loading, null), (status === 'canRelease' || status === 'refreshing') && /*#__PURE__*/ _react.default.createElement(_iconsreact.More, null)));
};
var renderStatusIcon = function renderStatusIcon() {
if (props.renderIcon) {
var _props_renderIcon;
return (_props_renderIcon = props.renderIcon) === null || _props_renderIcon === void 0 ? void 0 : _props_renderIcon.call(props, status);
}
return renderIcons(status);
};
var renderStatusText = function renderStatusText() {
if (props.renderText) {
var _props_renderText;
return (_props_renderText = props.renderText) === null || _props_renderText === void 0 ? void 0 : _props_renderText.call(props, status);
}
if (status === 'pulling') return props.pullingText;
if (status === 'canRelease') return props.canReleaseText;
if (status === 'refreshing') return props.refreshingText;
if (status === 'complete') return props.completeText;
return '';
};
var _obj, _obj1, _obj2, _obj3, _obj4;
return /*#__PURE__*/ _react.default.createElement(_web.animated.div, {
ref: elementRef,
className: classes,
style: props.style
}, /*#__PURE__*/ _react.default.createElement(_web.animated.div, {
style: springStyles,
className: (0, _classnames.default)((_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-head"), true), (0, _define_property._)(_obj, "".concat(classPrefix, "-primary-head"), props.type === 'primary'), _obj))
}, /*#__PURE__*/ _react.default.createElement("div", {
className: (0, _classnames.default)((_obj1 = {}, (0, _define_property._)(_obj1, "".concat(classPrefix, "-head-content"), true), (0, _define_property._)(_obj1, "".concat(classPrefix, "-primary-head-content"), props.type === 'primary'), _obj1)),
style: {
height: headHeight
}
}, /*#__PURE__*/ _react.default.createElement("div", {
className: (0, _classnames.default)((_obj2 = {}, (0, _define_property._)(_obj2, "".concat(classPrefix, "-status-icon"), true), (0, _define_property._)(_obj2, "".concat(classPrefix, "-primary-status-icon"), props.type === 'primary'), _obj2))
}, renderStatusIcon()), /*#__PURE__*/ _react.default.createElement("div", {
className: (0, _classnames.default)((_obj3 = {}, (0, _define_property._)(_obj3, "".concat(classPrefix, "-status-text"), true), (0, _define_property._)(_obj3, "".concat(classPrefix, "-primary-status-text"), props.type === 'primary'), _obj3))
}, renderStatusText()))), /*#__PURE__*/ _react.default.createElement("div", {
className: (0, _classnames.default)((_obj4 = {}, (0, _define_property._)(_obj4, "".concat(classPrefix, "-content"), true), (0, _define_property._)(_obj4, "".concat(classPrefix, "-primary-content}"), props.type === 'primary'), _obj4))
}, props.children));
};
PullToRefresh.displayName = 'NutPullToRefresh';