blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-05-23 15:09:16 +08:00
Code Issues Projects Releases Wiki Activity

chore(PullRefresh): use tsx

Browse Source
This commit is contained in:
chenjiahan 2020-10-10 18:00:22 +08:00
parent 99d42852e5
commit 5370eaafce
2 changed files with 30 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/pull-refresh/index.js → src/pull-refresh/index.tsx
View File

@ -15,6 +15,13 @@ const [createComponent, bem, t] = createNamespace('pull-refresh');
const DEFAULT_HEAD_HEIGHT = 50; const DEFAULT_HEAD_HEIGHT = 50;
const TEXT_STATUS = ['pulling', 'loosing', 'success']; const TEXT_STATUS = ['pulling', 'loosing', 'success'];
type PullRefreshStatus =
| 'normal'
| 'loading'
| 'loosing'
| 'pulling'
| 'success';
export default createComponent({ export default createComponent({
props: { props: {
disabled: Boolean, disabled: Boolean,
@ -43,13 +50,13 @@ export default createComponent({
emits: ['refresh', 'update:modelValue'], emits: ['refresh', 'update:modelValue'],
setup(props, { emit, slots }) { setup(props, { emit, slots }) {
let reachTop; let reachTop: boolean;
const root = ref(); const root = ref();
const scrollParent = useScrollParent(root); const scrollParent = useScrollParent(root);
const state = reactive({ const state = reactive({
status: 'normal', status: 'normal' as PullRefreshStatus,
distance: 0, distance: 0,
duration: 0, duration: 0,
}); });
@ -69,7 +76,7 @@ export default createComponent({
state.status !== 'success' && state.status !== 'success' &&
!props.disabled; !props.disabled;
const ease = (distance) => { const ease = (distance: number) => {
const headHeight = +props.headHeight; const headHeight = +props.headHeight;
if (distance > headHeight) { if (distance > headHeight) {
@ -83,7 +90,7 @@ export default createComponent({
return Math.round(distance); return Math.round(distance);
}; };
const setStatus = (distance, isLoading) => { const setStatus = (distance: number, isLoading?: boolean) => {
state.distance = distance; state.distance = distance;
if (isLoading) { if (isLoading) {
@ -97,22 +104,28 @@ export default createComponent({
} }
}; };
const getStatusText = () => {
const { status } = state;
if (status === 'normal') {
return '';
}
return (props as any)[`${status}Text`] || t(status);
};
const renderStatus = () => { const renderStatus = () => {
const { status, distance } = state; const { status, distance } = state;
if (slots[status]) { if (slots[status]) {
return slots[status]({ distance }); return slots[status]!({ distance });
} }
const nodes = []; const nodes = [];
const text = (status !== 'normal' && props[`${status}Text`]) || t(status);
if (TEXT_STATUS.indexOf(status) !== -1) { if (TEXT_STATUS.indexOf(status) !== -1) {
nodes.push(<div class={bem('text')}>{text}</div>); nodes.push(<div class={bem('text')}>{getStatusText()}</div>);
} }
if (status === 'loading') { if (status === 'loading') {
nodes.push(<Loading size="16">{text}</Loading>); nodes.push(<Loading size="16">{getStatusText()}</Loading>);
} }
return nodes; return nodes;
@ -123,11 +136,11 @@ export default createComponent({
setTimeout(() => { setTimeout(() => {
setStatus(0); setStatus(0);
}, props.successDuration); }, +props.successDuration);
}; };
const checkPosition = (event) => { const checkPosition = (event: TouchEvent) => {
reachTop = getScrollTop(scrollParent.value) === 0; reachTop = getScrollTop(scrollParent.value!) === 0;
if (reachTop) { if (reachTop) {
state.duration = 0; state.duration = 0;
@ -135,13 +148,13 @@ export default createComponent({
} }
}; };
const onTouchStart = (event) => { const onTouchStart = (event: TouchEvent) => {
if (isTouchable()) { if (isTouchable()) {
checkPosition(event); checkPosition(event);
} }
}; };
const onTouchMove = (event) => { const onTouchMove = (event: TouchEvent) => {
if (isTouchable()) { if (isTouchable()) {
if (!reachTop) { if (!reachTop) {
checkPosition(event); checkPosition(event);
@ -159,7 +172,7 @@ export default createComponent({
const onTouchEnd = () => { const onTouchEnd = () => {
if (reachTop && touch.deltaY.value && isTouchable()) { if (reachTop && touch.deltaY.value && isTouchable()) {
state.duration = props.animationDuration; state.duration = +props.animationDuration;
if (state.status === 'loosing') { if (state.status === 'loosing') {
setStatus(+props.headHeight, true); setStatus(+props.headHeight, true);
@ -178,7 +191,7 @@ export default createComponent({
watch( watch(
() => props.modelValue, () => props.modelValue,
(value) => { (value) => {
state.duration = props.animationDuration; state.duration = +props.animationDuration;
if (value) { if (value) {
setStatus(+props.headHeight, true); setStatus(+props.headHeight, true);

2
src/utils/dom/scroll.ts
View File

@ -1,6 +1,6 @@
import { isIOS as checkIsIOS } from '../validate/system'; import { isIOS as checkIsIOS } from '../validate/system';
type ScrollElement = HTMLElement | Window; type ScrollElement = Element | Window;
function isWindow(val: unknown): val is Window { function isWindow(val: unknown): val is Window {
return val === window; return val === window;