43 lines
1.2 KiB
TypeScript
43 lines
1.2 KiB
TypeScript
import { View, Text } from '@tarojs/components'
|
|
import { 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'
|
|
|
|
interface LoadMoreEvent {
|
|
onClick?: () => void
|
|
}
|
|
|
|
interface LoadMorePropsType extends LoadMoreEvent {
|
|
status: LoadMoreStatus
|
|
moreText?: string
|
|
loadingText?: string
|
|
noMoreText?: string
|
|
}
|
|
|
|
const LoadMore: FC<LoadMorePropsType> = props => {
|
|
const { status, moreText = '查看更多', loadingText = '加载中', noMoreText = '没有更多', 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 {
|
|
component = <Text>{noMoreText}</Text>
|
|
}
|
|
return <View className={styles.loadMore}>{component}</View>
|
|
}
|
|
export default LoadMore
|