diff --git a/site/mobile/components/style/index.less b/site/mobile/components/style/index.less index 10e578a0..fbe4680f 100644 --- a/site/mobile/components/style/index.less +++ b/site/mobile/components/style/index.less @@ -6,10 +6,12 @@ #app { min-height: 100vh; + height: 100vh; display: flex; flex-direction: column; } .tdesign-mobile-demo { flex: 1; + overflow-y: scroll; } \ No newline at end of file diff --git a/site/mobile/mobile.config.js b/site/mobile/mobile.config.js index 425871ef..f0bbfb9a 100644 --- a/site/mobile/mobile.config.js +++ b/site/mobile/mobile.config.js @@ -35,6 +35,11 @@ export default { name: 'grid', component: () => import('tdesign-mobile-react/grid/_example/index.tsx'), }, + { + title: 'List 列表', + name: 'list', + component: () => import('tdesign-mobile-react/list/_example/index.tsx'), + }, { title: 'Image 图片', name: 'image', diff --git a/site/web/site.config.js b/site/web/site.config.js index cad7b9ef..31b2d3dd 100644 --- a/site/web/site.config.js +++ b/site/web/site.config.js @@ -388,12 +388,12 @@ export const docs = [ // path: '/mobile-react/components/image-viewer', // component: () => import('tdesign-mobile-react/image-viewer/image-viewer.md'), // }, - // { - // title: 'List 列表', - // name: 'list', - // path: '/mobile-react/components/list', - // component: () => import('tdesign-mobile-react/list/list.md'), - // }, + { + title: 'List 列表', + name: 'list', + path: '/mobile-react/components/list', + component: () => import('tdesign-mobile-react/list/list.md'), + }, { title: 'Progress 进度条', titleEn: 'Progress', diff --git a/src/index.ts b/src/index.ts index 03282dfb..27cbaba8 100644 --- a/src/index.ts +++ b/src/index.ts @@ -47,6 +47,7 @@ export * from './sticky'; export * from './swiper'; export * from './swipe-cell'; export * from './tag'; +export * from './list'; export * from './result'; export * from './table'; export * from './empty'; diff --git a/src/list/_example/base.tsx b/src/list/_example/base.tsx new file mode 100644 index 00000000..30f3cec9 --- /dev/null +++ b/src/list/_example/base.tsx @@ -0,0 +1,66 @@ +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: ListItem[] = []; + const total = 100; + for (let i = 0; i < total; i++) { + dataSource.push({ + id: i, + content: '列表内容列表内容列表内容', + icon: 'https://tdesign.gtimg.com/list-icon.png', + title: '列表主内容', + }); + } + + // 模拟请求 + const fetchData = async (pageInfo) => { + if (isLoading) return; + setIsLoading(true); + try { + setTimeout(() => { + 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; + setIsLoading(false); + }, 0); + } catch (err) { + stateRef.current = []; + } + }; + + const onScroll = (scrollBottom) => { + if (!scrollBottom && stateRef.current.length < total) { + fetchData({ pageNum: pageRef.current + 1, pageSize }); + } + }; + + useEffect(() => { + fetchData({ pageNum: pageRef.current, pageSize }); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + + return ( + + {stateRef.current.map((item) => ( + + {item.id} + + ))} + + ); +} diff --git a/src/list/_example/err-tip.tsx b/src/list/_example/err-tip.tsx new file mode 100644 index 00000000..4a30637c --- /dev/null +++ b/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([]); + 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 ( + +
+ 请求失败，点击重新加载 +
+ + ) + } + > + {listError.current.map((item) => ( + + {item} + + ))} + + ); +} diff --git a/src/list/_example/index.tsx b/src/list/_example/index.tsx new file mode 100644 index 00000000..a7ed93ce --- /dev/null +++ b/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 ( +
+
+ {currentTab === 'info' && ( +
+

List 列表

+

+ 瀑布流滚动加载，用于展示同一类型信息的长列表。当列表即将滚动到底部时，会触发事件并加载更多列表项。 +

+ + + + + +
+ )} + {currentTab === 'base' && } + {currentTab === 'error-tip' && } + {currentTab === 'pull-refresh' && ( +
+ +
+ )} +
+
+ ); +} diff --git a/src/list/_example/pull-refresh.tsx b/src/list/_example/pull-refresh.tsx new file mode 100644 index 00000000..5ff17987 --- /dev/null +++ b/src/list/_example/pull-refresh.tsx @@ -0,0 +1,71 @@ +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 listData = useRef([]); + + const MAX_DATA_LEN = 60; + + const loadData = (isRefresh) => { + const ONCE_LOAD_NUM = 20; + return new Promise(() => { + setTimeout(() => { + const temp: string[] = []; + for (let i = 0; i < ONCE_LOAD_NUM; i++) { + if (isRefresh) { + temp.push(`${i + 1}`); + } else { + temp.push(`${listData.current.length + 1 + i}`); + } + } + + if (isRefresh) { + listData.current = temp; + } else { + listData.current = [...listData.current, ...temp]; + } + setLoading(''); + setRefreshing(false); + }, 1000); + }); + }; + + const onLoadData = (isRefresh?) => { + if ((listData.current.length >= MAX_DATA_LEN && !isRefresh) || loading.value) { + return; + } + setLoading('loading'); + loadData(isRefresh); + }; + + const onScroll = (scrollBottom) => { + if (scrollBottom < 50) { + onLoadData(); + } + }; + + const onRefresh = () => { + setRefreshing(true); + onLoadData(true); + }; + + useEffect(() => { + onLoadData(); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + + return ( + setRefreshing(val)} onRefresh={onRefresh}> + + {listData.current.map((item) => ( + + {item} + + ))} + + + ); +} diff --git a/src/list/_example/style/index.less b/src/list/_example/style/index.less new file mode 100644 index 00000000..e1a5a2b8 --- /dev/null +++ b/src/list/_example/style/index.less @@ -0,0 +1,30 @@ +.list-demo { + .t-list { + .cell { + width: 100%; + text-align: center; + } + .error { + text-align: center; + color: #969799; + font-size: 14px; + margin-top: 8px; + } + } + .custom-error { + font-size: 14px; + color: #969799; + text-align: center; + padding-top: 16px; + cursor: default; + + span { + color: #0052d9; + cursor: pointer; + } + } + .t-button { + margin: 0 16px 16px 16px; + width: calc(100% - 32px); + } +} \ No newline at end of file diff --git a/src/list/index.ts b/src/list/index.ts new file mode 100644 index 00000000..26d5e2a0 --- /dev/null +++ b/src/list/index.ts @@ -0,0 +1,8 @@ +import _List from './list'; + +import './style/index.js'; + +export * from './type'; + +export const List = _List; +export default List; diff --git a/src/list/list.en-US.md b/src/list/list.en-US.md new file mode 100644 index 00000000..4f3b36f2 --- /dev/null +++ b/src/list/list.en-US.md @@ -0,0 +1,15 @@ +:: BASE_DOC :: + +## API + +### List Props + +name | type | default | description | required +-- | -- | -- | -- | -- +className | String | - | className of component | N +style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N +asyncLoading | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +footer | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +header | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +onLoadMore | Function | | Typescript：`() => void`
| N +onScroll | Function | | Typescript：`(bottomDistance: number, scrollTop: number) => void`
| N diff --git a/src/list/list.md b/src/list/list.md new file mode 100644 index 00000000..1873eb5f --- /dev/null +++ b/src/list/list.md @@ -0,0 +1,15 @@ +:: BASE_DOC :: + +## API + +### List Props + +名称 | 类型 | 默认值 | 描述 | 必传 +-- | -- | -- | -- | -- +className | String | - | 类名 | N +style | Object | - | 样式，TS 类型：`React.CSSProperties` | N +asyncLoading | TNode | - | 自定义加载中。值为空不显示加载中，值为 'loading' 显示加载中状态，值为 'load-more' 显示加载更多状态。值类型为函数，则表示自定义加载状态呈现内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +footer | TNode | - | 底部。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +header | TNode | - | 头部。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +onLoadMore | Function | | TS 类型：`() => void`
点击加载更多时触发 | N +onScroll | Function | | TS 类型：`(bottomDistance: number, scrollTop: number) => void`
列表滚动时触发，bottomDistance 表示底部距离；scrollTop 表示顶部滚动距离 | N diff --git a/src/list/list.tsx b/src/list/list.tsx new file mode 100644 index 00000000..61a7c967 --- /dev/null +++ b/src/list/list.tsx @@ -0,0 +1,73 @@ +import React, { useRef, useEffect, ReactNode } from 'react'; +import { useMemoizedFn } from 'ahooks'; +import classNames from 'classnames'; +import { TdListProps } from './type'; +import TLoading from '../loading'; +import type { StyledProps } from '../common'; +import parseTNode from '../_util/parseTNode'; +import getScrollParent from '../_util/getScrollParent'; +import { usePrefixClass } from '../hooks/useClass'; +import useDefaultProps from '../hooks/useDefaultProps'; + +export interface ListProps extends TdListProps, StyledProps { + children?: ReactNode; +} + +const List: React.FC = (props) => { + const { className, style, asyncLoading, header, footer, children, onScroll } = useDefaultProps(props, {}); + + const listClass = usePrefixClass('list'); + + const LOADING_TEXT_MAP = { + loading: '加载中', // TODO: i18n + 'load-more': '加载更多', + }; + + const wrapperRef = useRef(null); + + const onLoadMore = () => { + if (asyncLoading === 'load-more') { + props.onLoadMore?.(); + } + }; + + const handleScroll = useMemoizedFn((e: React.WheelEvent | Event): void => { + const targetElement = e.currentTarget as HTMLElement; + const { scrollTop, offsetHeight, scrollHeight } = targetElement; + const bottomDistance = scrollHeight - scrollTop - offsetHeight; + + onScroll?.(bottomDistance, scrollTop); + }); + + useEffect(() => { + const element = wrapperRef.current; + if (!element) return; + + const scrollParent = getScrollParent(element); + if (!scrollParent) return; + + scrollParent.addEventListener('scroll', handleScroll); + return () => { + removeEventListener('scroll', handleScroll); + }; + }, [handleScroll]); + + return ( +
+ {parseTNode(header)} + {parseTNode(children)} +
+ {typeof props.asyncLoading === 'string' && ['loading', 'load-more'].includes(props.asyncLoading) && ( + + )} +
+ {parseTNode(footer)} +
+ ); +}; + +export default List; diff --git a/src/list/style/css.js b/src/list/style/css.js new file mode 100644 index 00000000..6a9a4b13 --- /dev/null +++ b/src/list/style/css.js @@ -0,0 +1 @@ +import './index.css'; diff --git a/src/list/style/index.js b/src/list/style/index.js new file mode 100644 index 00000000..fdbefc78 --- /dev/null +++ b/src/list/style/index.js @@ -0,0 +1 @@ +import '../../_common/style/mobile/components/list/_index.less'; diff --git a/src/list/type.ts b/src/list/type.ts new file mode 100644 index 00000000..dd6c0c8b --- /dev/null +++ b/src/list/type.ts @@ -0,0 +1,30 @@ +/* eslint-disable */ + +/** + * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC + * */ + +import { TNode } from '../common'; + +export interface TdListProps { + /** + * 自定义加载中。值为空不显示加载中，值为 'loading' 显示加载中状态，值为 'load-more' 显示加载更多状态。值类型为函数，则表示自定义加载状态呈现内容 + */ + asyncLoading?: TNode; + /** + * 底部 + */ + footer?: TNode; + /** + * 头部 + */ + header?: TNode; + /** + * 点击加载更多时触发 + */ + onLoadMore?: () => void; + /** + * 列表滚动时触发，bottomDistance 表示底部距离；scrollTop 表示顶部滚动距离 + */ + onScroll?: (bottomDistance: number, scrollTop: number) => void; +} diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap index 78754d57..d2ba4836 100644 --- a/test/snap/__snapshots__/csr.test.jsx.snap +++ b/test/snap/__snapshots__/csr.test.jsx.snap @@ -50228,6 +50228,209 @@ exports[`csr snapshot test > csr test src/link/_example/underline.tsx 1`] = ` `; +exports[`csr snapshot test > csr test src/list/_example/base.tsx 1`] = ` +
+
+
+
+
+`; + +exports[`csr snapshot test > csr test src/list/_example/err-tip.tsx 1`] = ` +
+
+
+
+ + +
+ + + + 加载中 + +
+ + + +`; + +exports[`csr snapshot test > csr test src/list/_example/index.tsx 1`] = ` +
+
+
+
+

+ List 列表 +

+

+ 瀑布流滚动加载，用于展示同一类型信息的长列表。当列表即将滚动到底部时，会触发事件并加载更多列表项。 +

+
+
+

+ 01 类型 +

+

+ 基础列表 +

+
+
+ + + +
+
+
+
+
+
+`; + +exports[`csr snapshot test > csr test src/list/_example/pull-refresh.tsx 1`] = ` +
+
+
+
+
+
+ 刷新完成 +
+
+
+
+
+
+ + +
+ + + + 加载中 + +
+ + + + + +`; + exports[`csr snapshot test > csr test src/loading/_example/attach.tsx 1`] = `
ssr test src/link/_example/theme.tsx 1`] = `"
ssr test src/link/_example/underline.tsx 1`] = `"
跳转链接跳转链接
"`; +exports[`ssr snapshot test > ssr test src/list/_example/base.tsx 1`] = `"
"`; + +exports[`ssr snapshot test > ssr test src/list/_example/err-tip.tsx 1`] = `"
"`; + +exports[`ssr snapshot test > ssr test src/list/_example/index.tsx 1`] = `"

List 列表

瀑布流滚动加载，用于展示同一类型信息的长列表。当列表即将滚动到底部时，会触发事件并加载更多列表项。

01 类型

基础列表

"`; + +exports[`ssr snapshot test > ssr test src/list/_example/pull-refresh.tsx 1`] = `"
"`; + exports[`ssr snapshot test > ssr test src/loading/_example/attach.tsx 1`] = `"
Hello, I\`'m Alice. I\`'m going to be a front-end developer.
关
"`; exports[`ssr snapshot test > ssr test src/loading/_example/base.tsx 1`] = `"
"`; diff --git a/test/snap/__snapshots__/ssr.test.jsx.snap b/test/snap/__snapshots__/ssr.test.jsx.snap index 2e005d9f..9ea2e334 100644 --- a/test/snap/__snapshots__/ssr.test.jsx.snap +++ b/test/snap/__snapshots__/ssr.test.jsx.snap @@ -282,6 +282,14 @@ exports[`ssr snapshot test > ssr test src/link/_example/theme.tsx 1`] = `"
ssr test src/link/_example/underline.tsx 1`] = `"
跳转链接跳转链接
"`; +exports[`ssr snapshot test > ssr test src/list/_example/base.tsx 1`] = `"
"`; + +exports[`ssr snapshot test > ssr test src/list/_example/err-tip.tsx 1`] = `"
"`; + +exports[`ssr snapshot test > ssr test src/list/_example/index.tsx 1`] = `"

List 列表

瀑布流滚动加载，用于展示同一类型信息的长列表。当列表即将滚动到底部时，会触发事件并加载更多列表项。

01 类型

基础列表

"`; + +exports[`ssr snapshot test > ssr test src/list/_example/pull-refresh.tsx 1`] = `"
"`; + exports[`ssr snapshot test > ssr test src/loading/_example/attach.tsx 1`] = `"
Hello, I\`'m Alice. I\`'m going to be a front-end developer.
关
"`; exports[`ssr snapshot test > ssr test src/loading/_example/base.tsx 1`] = `"
"`;