53 lines
1.4 KiB
TypeScript
53 lines
1.4 KiB
TypeScript
import { Text, View } from '@tarojs/components'
|
|
import type { FC } from 'react'
|
|
import Iconfont from '../iconfont/iconfont'
|
|
import LoadingCard from '../loadingCard/index'
|
|
import styles from './index.module.scss'
|
|
|
|
export type LoadMoreStatus = 'more' | 'loading' | 'noMore' | 'empty'
|
|
|
|
interface LoadMoreEvent {
|
|
onClick?: () => void
|
|
}
|
|
|
|
interface LoadMorePropsType extends LoadMoreEvent {
|
|
status: LoadMoreStatus
|
|
moreText?: string
|
|
loadingText?: string
|
|
noMoreText?: string
|
|
emptyText?: string
|
|
}
|
|
|
|
const LoadMore: FC<LoadMorePropsType> = (props) => {
|
|
const { status, moreText = '查看更多', loadingText = '加载中', noMoreText = '没有更多', emptyText = '暂无数据', onClick } = props
|
|
|
|
const handleShowMore = () => {
|
|
onClick && onClick()
|
|
}
|
|
|
|
let component: JSX.Element | null = null
|
|
if (status === 'loading') {
|
|
component = <LoadingCard title={loadingText}></LoadingCard>
|
|
}
|
|
else if (status === 'more') {
|
|
component = (
|
|
<View className="flex-row" onClick={handleShowMore}>
|
|
<Text style={{ marginRight: '5px' }}>{moreText}</Text>
|
|
<Iconfont name="icon-zhankai" size={32}></Iconfont>
|
|
</View>
|
|
)
|
|
}
|
|
else if (status === 'empty') {
|
|
component = (
|
|
<View className={styles.empty}>
|
|
<Text>{emptyText}</Text>
|
|
</View>
|
|
)
|
|
}
|
|
else {
|
|
component = <Text>{noMoreText}</Text>
|
|
}
|
|
return <View className={styles.loadMore}>{component}</View>
|
|
}
|
|
export default LoadMore
|