@antmjs/vantui
Version:
一套适用于Taro3及React的vantui组件库
173 lines (172 loc) • 8.02 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = PullToRefresh;
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = require("react");
var _components = require("@tarojs/components");
var _loading = require("../loading");
var _utils = require("../common/utils");
var _defaultProps = require("../default-props");
var _jsxRuntime = require("react/jsx-runtime");
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var initIndex = 0;
var clsPrefix = 'van-pull-to-refresh';
var SUCESS_DURATION = 1000;
var TOUCH_MIN_TIME = 400;
function PullToRefresh(props) {
var _useState = (0, _react.useState)((0, _defaultProps.get)().PullToRefresh),
_useState2 = (0, _slicedToArray2.default)(_useState, 1),
d = _useState2[0];
var _d$props = _objectSpread(_objectSpread({}, d), props),
children = _d$props.children,
_d$props$loadingText = _d$props.loadingText,
loadingText = _d$props$loadingText === void 0 ? '加载中...' : _d$props$loadingText,
_d$props$successText = _d$props.successText,
successText = _d$props$successText === void 0 ? '刷新成功' : _d$props$successText,
_d$props$pullText = _d$props.pullText,
pullText = _d$props$pullText === void 0 ? '下拉刷新' : _d$props$pullText,
_d$props$releaseText = _d$props.releaseText,
releaseText = _d$props$releaseText === void 0 ? '松开刷新' : _d$props$releaseText,
_d$props$headHeight = _d$props.headHeight,
headHeight = _d$props$headHeight === void 0 ? 60 : _d$props$headHeight,
renderLoading = _d$props.renderLoading,
onRefresh = _d$props.onRefresh,
_d$props$touchMaxStar = _d$props.touchMaxStart,
touchMaxStart = _d$props$touchMaxStar === void 0 ? 300 : _d$props$touchMaxStar,
_d$props$disable = _d$props.disable,
disable = _d$props$disable === void 0 ? false : _d$props$disable,
_d$props$successDurat = _d$props.successDuration,
successDuration = _d$props$successDurat === void 0 ? SUCESS_DURATION : _d$props$successDurat,
_d$props$touchMinTime = _d$props.touchMinTime,
touchMinTime = _d$props$touchMinTime === void 0 ? TOUCH_MIN_TIME : _d$props$touchMinTime,
rectWrapper = _d$props.rectWrapper;
var _useState3 = (0, _react.useState)(0),
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
statusHeight = _useState4[0],
setStatusHeight = _useState4[1];
var _useState5 = (0, _react.useState)('pull'),
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
status = _useState6[0],
setStatus = _useState6[1]; // 待拖拽
var _useState7 = (0, _react.useState)(initIndex++),
_useState8 = (0, _slicedToArray2.default)(_useState7, 1),
componentIndex = _useState8[0];
var _useState9 = (0, _react.useState)({
start: 0,
time: 0,
maxStart: 0
}),
_useState10 = (0, _slicedToArray2.default)(_useState9, 1),
touch = _useState10[0];
var renderHeight = (0, _react.useMemo)(function () {
return statusHeight > headHeight ? headHeight : statusHeight;
}, [headHeight, statusHeight]);
var rendermarginTop = (0, _react.useMemo)(function () {
var marginTop = 0;
var ly = statusHeight - headHeight;
if (ly > 30) {
marginTop = 30;
}
return marginTop;
}, [headHeight, statusHeight]);
var reset = (0, _react.useCallback)(function () {
touch.start = 0;
touch.time = 0;
setStatusHeight(0);
setStatus('pull');
}, [touch]);
var onTouchStart = (0, _react.useCallback)(function (event) {
if (!disable && status === 'pull') {
var start = event.touches[0].clientY;
if (start < touch.maxStart) {
touch.start = event.touches[0].clientY;
touch.time = Date.now();
} else {
touch.time = Date.now() + 9999 * 1000;
}
}
}, [disable, status, touch]);
var onTouchMove = (0, _react.useCallback)(function (event) {
if (!disable && Date.now() - touch.time > touchMinTime && (status === 'pull' || status === 'release')) {
event.preventDefault();
event.stopPropagation();
var y = event.touches[0].clientY - touch.start;
if (y < 0) y = 0;
setStatusHeight(y);
}
}, [disable, status, touch.start, touch.time, touchMinTime]);
var onTouchEnd = (0, _react.useCallback)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
return _regenerator.default.wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
if (!(status === 'release' && rendermarginTop === 30)) {
_context.next = 9;
break;
}
setStatus('loading');
setStatusHeight(headHeight);
_context.next = 5;
return onRefresh();
case 5:
setStatus('success');
setTimeout(function () {
reset();
}, successDuration);
_context.next = 10;
break;
case 9:
reset();
case 10:
case "end":
return _context.stop();
}
}, _callee);
})), [headHeight, onRefresh, rendermarginTop, reset, status, successDuration]);
(0, _react.useEffect)(function () {
setTimeout(function () {
(0, _utils.getRect)(null, ".".concat(clsPrefix, "-status").concat(componentIndex), rectWrapper).then(function (res) {
touch.maxStart = res.top + touchMaxStart;
});
}, 100);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
(0, _react.useEffect)(function () {
if (rendermarginTop === 30) {
setStatus('release');
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [rendermarginTop]);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.View, {
onTouchStart: onTouchStart,
onTouchMove: onTouchMove,
onTouchEnd: onTouchEnd,
className: "".concat(clsPrefix),
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.View, {
className: "".concat(clsPrefix, "-status ").concat(clsPrefix, "-status").concat(componentIndex),
style: {
height: renderHeight,
lineHeight: renderHeight,
marginTop: rendermarginTop
},
children: [status === 'loading' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
children: renderLoading || /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_loading.Loading, {
size: 30
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Text, {
style: {
paddingLeft: 8
},
children: loadingText
})]
})
}), status === 'release' && releaseText, status === 'pull' && pullText, status === 'success' && successText]
}), children]
});
}