✨ feat(销售统计): 完成销售统计100%

src/components/table/index.tsx

@@ -1,12 +1,12 @@
 import { ScrollView, View, Text } from '@tarojs/components'
 import classnames from 'classnames'
-import { FC, useState } from 'react'
+import { FC, useCallback, useMemo, useState } from 'react'
 import Iconfont from '../iconfont/iconfont'
 import InfiniteScroll from '../infiniteScroll'
 import LoadMore, { LoadMoreStatus } from '../LoadMore'
 import styles from './index.module.scss'
 
-type ColumnsType = {
+export type ColumnsType = {
   title: string
   dataIndex: string
   width: string
@@ -15,29 +15,26 @@ type ColumnsType = {
   ellipsis?: boolean | { isEllipsis: boolean; rows: number }
 }
 
-type RecordType = {
+export type RecordType = {
   key: string
   [Property: string]: any
 }
 
-interface TablePropsType {
+export interface TablePropsType {
   columns: ColumnsType[]
-  dataSource: RecordType[]
+  dataSource?: { list: RecordType[]; total: number }
+  onLoadMore?: () => void
+  height?: number
 }
 
 const Table: FC<TablePropsType> = props => {
-  const { columns, dataSource } = props
-
-
-  const [showMore, setShowMore] = useState(false)
-
-  const [loadMoreStatus, setLoadMoreStatus] = useState<LoadMoreStatus>('loading')
+  const { columns, dataSource, onLoadMore, height=400 } = props
 
   const handleShowMore = () => {
-
+    onLoadMore && onLoadMore()
   }
 
-  const getColumnStyle = (columnConfig: ColumnsType) => {
+  const getColumnStyle = useCallback((columnConfig: ColumnsType) => {
     const columnStyle = {}
     if (typeof columnConfig.ellipsis === 'boolean' && columnConfig.ellipsis) {
       columnStyle[styles.ellipsis_1] = true
@@ -51,13 +48,25 @@ const Table: FC<TablePropsType> = props => {
       }
     }
     return columnStyle
-  }
+  }, [])
+
+  const loadMoreComponent = useMemo(() => {
+    if (dataSource) {
+      if (dataSource.list.length < dataSource.total) {
+        return <LoadMore status='more' onClick={handleShowMore}></LoadMore>
+      } else if (dataSource.list.length >= dataSource.total) {
+        return <LoadMore status='noMore' onClick={handleShowMore}></LoadMore>
+      }
+    } else {
+      return <LoadMore status='loading' onClick={handleShowMore}></LoadMore>
+    }
+  }, [dataSource])
 
   const sourceContainer = () => {
     return (
       <>
-        {!!dataSource.length &&
-          dataSource.map(source => {
+        {!!dataSource?.list?.length &&
+          dataSource.list.map(source => {
             return (
               <View className={classnames(styles.tr, styles['bg-line'])} key={source.key}>
                 {columns.map(column => {
@@ -81,9 +90,7 @@ const Table: FC<TablePropsType> = props => {
               </View>
             )
           })}
-        {showMore && (
-          <LoadMore status={loadMoreStatus} onClick={handleShowMore}></LoadMore>
-        )}
+        {loadMoreComponent}
       </>
     )
   }
@@ -99,7 +106,9 @@ const Table: FC<TablePropsType> = props => {
           )
         })}
       </View>
-      <ScrollView>{sourceContainer()}</ScrollView>
+      <InfiniteScroll enableLoadMoreStatus={false} safeAreaInsetBottom={true}>
+        {sourceContainer()}
+      </InfiniteScroll>
     </View>
   )
 }