feat(list): add list component

src/list/_example/base.jsx → src/list/_example/base.tsx

@@ -1,13 +1,20 @@
-import React, { useEffect, useState, useRef} from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import './style/index.less';
 import { Cell, List } from 'tdesign-mobile-react';
 
+interface ListItem {
+  id: number;
+  content: string;
+  icon: string;
+  title: string;
+}
+
 export default function ListDemo() {
   const [isLoading, setIsLoading] = useState(false);
   const pageSize = 20;
   const stateRef = useRef([]);
   const pageRef = useRef(1);
-  const dataSource = [];
+  const dataSource: ListItem[] = [];
   const total = 100;
   for (let i = 0; i < total; i++) {
     dataSource.push({
@@ -27,20 +34,20 @@ export default function ListDemo() {
         const { pageNum, pageSize } = pageInfo;
         const newDataSource = dataSource.slice((pageNum - 1) * pageSize, pageNum * pageSize);
         const newListData = stateRef.current.concat(newDataSource);
-        pageRef.current = pageNum
-        stateRef.current = newListData
+        pageRef.current = pageNum;
+        stateRef.current = newListData;
         setIsLoading(false);
       }, 0);
     } catch (err) {
-      stateRef.current = []
+      stateRef.current = [];
     }
   };
 
   const onScroll = (scrollBottom) => {
     if (!scrollBottom && stateRef.current.length < total) {
       fetchData({ pageNum: pageRef.current + 1, pageSize });
     }
-  }
+  };
 
   useEffect(() => {
     fetchData({ pageNum: pageRef.current, pageSize });
@@ -49,11 +56,11 @@ export default function ListDemo() {
 
   return (
     <List asyncLoading={isLoading} onScroll={onScroll}>
-      {
-        stateRef.current.map((item) => <Cell key={item.id} align="middle">
-            <span className="cell">{item.id}</span>
-          </Cell>)
-      }
+      {stateRef.current.map((item) => (
+        <Cell key={item.id} align="middle">
+          <span className="cell">{item.id}</span>
+        </Cell>
+      ))}
     </List>
   );
 }

src/list/_example/err-tip.tsx

@@ -0,0 +1,64 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { Cell, List, Loading } from 'tdesign-mobile-react';
+
+export default function ListDemo() {
+  const listError = useRef<string[]>([]);
+  const [loading, setLoading] = useState('');
+  const [showError, setShowError] = useState(false);
+
+  const onLoadError = () => {
+    setLoading('loading');
+
+    setTimeout(() => {
+      const newVal: string[] = [...listError.current];
+      for (let i = listError.current.length; i < 8; i++) {
+        newVal.push(`${i}`);
+      }
+      listError.current = newVal;
+
+      setShowError(true);
+      setLoading('');
+    }, 1000);
+  };
+
+  const onLoadMore = () => {
+    setShowError(false);
+    if (listError.current.length >= 60 || loading) {
+      return;
+    }
+    setLoading('loading');
+
+    setTimeout(() => {
+      for (let i = 0; i < 15; i++) {
+        listError.current.push(`${listError.current.length + 1}`);
+      }
+      setLoading('');
+    }, 1000);
+  };
+
+  useEffect(() => {
+    onLoadError();
+  }, []);
+
+  return (
+    <List
+      asyncLoading={loading}
+      onScroll={onLoadMore}
+      footer={
+        showError && (
+          <Loading indicator={false}>
+            <div className="custom-error">
+              请求失败，点击重新<span onClick={onLoadMore}>加载</span>
+            </div>
+          </Loading>
+        )
+      }
+    >
+      {listError.current.map((item) => (
+        <Cell key={item} align="middle">
+          <span className="cell">{item}</span>
+        </Cell>
+      ))}
+    </List>
+  );
+}

src/list/_example/index.tsx

@@ -0,0 +1,52 @@
+import React, { useState } from 'react';
+import { Button } from 'tdesign-mobile-react';
+import TDemoBlock from '../../../site/mobile/components/DemoBlock';
+// import TDemoHeader from '../../../site/mobile/components/DemoHeader';
+import './style/index.less';
+
+import BaseList from './base.jsx';
+import ErrTipDemo from './err-tip.jsx';
+import PullRefreshDemo from './pull-refresh.jsx';
+
+export default function ListDemo() {
+  const [currentTab, setCurrentTab] = useState('info');
+
+  const onChangeTab = (val) => {
+    setCurrentTab(val);
+    history.pushState({}, '', '?tab=demo');
+  };
+
+  return (
+    <div className="tdesign-mobile-demo">
+      <div className="list-demo">
+        {currentTab === 'info' && (
+          <div>
+            <h1 className="title">List 列表</h1>
+            <p className="summary">
+              瀑布流滚动加载，用于展示同一类型信息的长列表。当列表即将滚动到底部时，会触发事件并加载更多列表项。
+            </p>
+            <TDemoBlock title="01 类型" summary="基础列表">
+              <Button size="large" variant="outline" theme="primary" onClick={() => onChangeTab('base')}>
+                {' '}
+                基础列表{' '}
+              </Button>
+              <Button size="large" variant="outline" theme="primary" onClick={() => onChangeTab('pull-refresh')}>
+                下拉刷新
+              </Button>
+              <Button size="large" variant="outline" theme="primary" onClick={() => onChangeTab('error-tip')}>
+                错误提示
+              </Button>
+            </TDemoBlock>
+          </div>
+        )}
+        {currentTab === 'base' && <BaseList></BaseList>}
+        {currentTab === 'error-tip' && <ErrTipDemo></ErrTipDemo>}
+        {currentTab === 'pull-refresh' && (
+          <div className="pull-refresh-wrap">
+            <PullRefreshDemo />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

src/list/_example/pull-refresh.jsx → src/list/_example/pull-refresh.tsx

@@ -2,18 +2,18 @@ import React, { useState, useEffect, useRef } from 'react';
 import { Cell, List, PullDownRefresh } from 'tdesign-mobile-react';
 
 export default function ListDemo() {
-  const [loading, setLoading] = useState('')
-  const [refreshing, setRefreshing] = useState(false)
+  const [loading, setLoading] = useState('');
+  const [refreshing, setRefreshing] = useState(false);
 
-  const listData = useRef([])
+  const listData = useRef<string[]>([]);
 
   const MAX_DATA_LEN = 60;
 
   const loadData = (isRefresh) => {
     const ONCE_LOAD_NUM = 20;
-    return new Promise((resolve) => {
+    return new Promise(() => {
       setTimeout(() => {
-        const temp = [];
+        const temp: string[] = [];
         for (let i = 0; i < ONCE_LOAD_NUM; i++) {
           if (isRefresh) {
             temp.push(`${i + 1}`);
@@ -23,22 +23,22 @@ export default function ListDemo() {
         }
 
         if (isRefresh) {
-          listData.current = temp
+          listData.current = temp;
         } else {
-          listData.current= [...listData.current, ...temp ]
+          listData.current = [...listData.current, ...temp];
         }
         setLoading('');
         setRefreshing(false);
       }, 1000);
     });
   };
 
-  const onLoadData = (isRefresh) => {
+  const onLoadData = (isRefresh?) => {
     if ((listData.current.length >= MAX_DATA_LEN && !isRefresh) || loading.value) {
       return;
     }
     setLoading('loading');
-    loadData(isRefresh)
+    loadData(isRefresh);
   };
 
   const onScroll = (scrollBottom) => {
@@ -52,18 +52,19 @@ export default function ListDemo() {
     onLoadData(true);
   };
 
-  useEffect(()=>{
+  useEffect(() => {
     onLoadData();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (
-    <PullDownRefresh value={refreshing} onChange={(val)=>setRefreshing(val)} onRefresh={onRefresh}>
+    <PullDownRefresh value={refreshing} onChange={(val) => setRefreshing(val)} onRefresh={onRefresh}>
       <List asyncLoading={loading} onScroll={onScroll}>
-        {
-          listData.current.map((item) => <Cell key={item} align="middle">
-              <span className="cell">{item}</span>
-            </Cell>)
-        }
+        {listData.current.map((item) => (
+          <Cell key={item} align="middle">
+            <span className="cell">{item}</span>
+          </Cell>
+        ))}
       </List>
     </PullDownRefresh>
   );