diff --git a/src/pull-refresh/index.js b/src/pull-refresh/index.tsx similarity index 81% rename from src/pull-refresh/index.js rename to src/pull-refresh/index.tsx index 7bb5fabcf..0b759d52c 100644 --- a/src/pull-refresh/index.js +++ b/src/pull-refresh/index.tsx @@ -15,6 +15,13 @@ const [createComponent, bem, t] = createNamespace('pull-refresh'); const DEFAULT_HEAD_HEIGHT = 50; const TEXT_STATUS = ['pulling', 'loosing', 'success']; +type PullRefreshStatus = + | 'normal' + | 'loading' + | 'loosing' + | 'pulling' + | 'success'; + export default createComponent({ props: { disabled: Boolean, @@ -43,13 +50,13 @@ export default createComponent({ emits: ['refresh', 'update:modelValue'], setup(props, { emit, slots }) { - let reachTop; + let reachTop: boolean; const root = ref(); const scrollParent = useScrollParent(root); const state = reactive({ - status: 'normal', + status: 'normal' as PullRefreshStatus, distance: 0, duration: 0, }); @@ -69,7 +76,7 @@ export default createComponent({ state.status !== 'success' && !props.disabled; - const ease = (distance) => { + const ease = (distance: number) => { const headHeight = +props.headHeight; if (distance > headHeight) { @@ -83,7 +90,7 @@ export default createComponent({ return Math.round(distance); }; - const setStatus = (distance, isLoading) => { + const setStatus = (distance: number, isLoading?: boolean) => { state.distance = distance; 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 { status, distance } = state; if (slots[status]) { - return slots[status]({ distance }); + return slots[status]!({ distance }); } const nodes = []; - const text = (status !== 'normal' && props[`${status}Text`]) || t(status); if (TEXT_STATUS.indexOf(status) !== -1) { - nodes.push(