@antmjs/vantui
Version:
一套适用于Taro3及React的vantui组件库
168 lines • 7.42 kB
JavaScript
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _regeneratorRuntime from "@babel/runtime/regenerator";
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) { _defineProperty(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; }
import { useState, useCallback, useEffect, useMemo } from 'react';
import { View, Text } from '@tarojs/components';
import { Loading } from '../loading';
import { getRect } from '../common/utils';
import { get } from '../default-props';
import { jsx as _jsx } from "react/jsx-runtime";
import { Fragment as _Fragment } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var initIndex = 0;
var clsPrefix = 'van-pull-to-refresh';
var SUCESS_DURATION = 1000;
var TOUCH_MIN_TIME = 400;
export default function PullToRefresh(props) {
var _useState = useState(get().PullToRefresh),
_useState2 = _slicedToArray(_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 = useState(0),
_useState4 = _slicedToArray(_useState3, 2),
statusHeight = _useState4[0],
setStatusHeight = _useState4[1];
var _useState5 = useState('pull'),
_useState6 = _slicedToArray(_useState5, 2),
status = _useState6[0],
setStatus = _useState6[1]; // 待拖拽
var _useState7 = useState(initIndex++),
_useState8 = _slicedToArray(_useState7, 1),
componentIndex = _useState8[0];
var _useState9 = useState({
start: 0,
time: 0,
maxStart: 0
}),
_useState10 = _slicedToArray(_useState9, 1),
touch = _useState10[0];
var renderHeight = useMemo(function () {
return statusHeight > headHeight ? headHeight : statusHeight;
}, [headHeight, statusHeight]);
var rendermarginTop = useMemo(function () {
var marginTop = 0;
var ly = statusHeight - headHeight;
if (ly > 30) {
marginTop = 30;
}
return marginTop;
}, [headHeight, statusHeight]);
var reset = useCallback(function () {
touch.start = 0;
touch.time = 0;
setStatusHeight(0);
setStatus('pull');
}, [touch]);
var onTouchStart = 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 = 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 = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
return _regeneratorRuntime.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]);
useEffect(function () {
setTimeout(function () {
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
}, []);
useEffect(function () {
if (rendermarginTop === 30) {
setStatus('release');
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [rendermarginTop]);
return /*#__PURE__*/_jsxs(View, {
onTouchStart: onTouchStart,
onTouchMove: onTouchMove,
onTouchEnd: onTouchEnd,
className: "".concat(clsPrefix),
children: [/*#__PURE__*/_jsxs(View, {
className: "".concat(clsPrefix, "-status ").concat(clsPrefix, "-status").concat(componentIndex),
style: {
height: renderHeight,
lineHeight: renderHeight,
marginTop: rendermarginTop
},
children: [status === 'loading' && /*#__PURE__*/_jsx(_Fragment, {
children: renderLoading || /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsx(Loading, {
size: 30
}), /*#__PURE__*/_jsx(Text, {
style: {
paddingLeft: 8
},
children: loadingText
})]
})
}), status === 'release' && releaseText, status === 'pull' && pullText, status === 'success' && successText]
}), children]
});
}