Skip to content

Commit 3a8ed76

Browse files
anlyyaoanlyyao
committed
fix: fix cr
1 parent 6be53d7 commit 3a8ed76

File tree

5 files changed

+247
-46
lines changed

5 files changed

+247
-46
lines changed

‎site/mobile/mobile.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ export default {
3838
{
3939
title: 'List 列表',
4040
name: 'list',
41-
component: () => import('tdesign-mobile-react/list/_example/index.jsx'),
41+
component: () => import('tdesign-mobile-react/list/_example/index.tsx'),
4242
},
4343
{
4444
title: 'Image 图片',

‎src/hooks/useWindowHeight.ts‎

Lines changed: 0 additions & 12 deletions
This file was deleted.

‎src/list/list.tsx‎

Lines changed: 27 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,64 @@
1-
import React, { useRef, useEffect, useCallback } from 'react';
1+
import React, { useRef, useEffect } from 'react';
2+
import { useMemoizedFn } from 'ahooks';
23
import { TdListProps } from './type';
3-
import useConfig from '../_util/useConfig';
4-
54
import TLoading from '../loading';
5+
import type { StyledProps } from '../common';
66
import parseTNode from '../_util/parseTNode';
77
import getScrollParent from '../_util/getScrollParent';
8-
import useWindowHeight from '../hooks/useWindowHeight';
8+
import { usePrefixClass } from '../hooks/useClass';
9+
import useDefaultProps from '../hooks/useDefaultProps';
910

10-
export interface ListProps extends TdListProps {
11-
required?: boolean;
12-
readonly?: boolean;
13-
}
11+
export interface ListProps extends TdListProps, StyledProps {}
1412

1513
const List: React.FC<ListProps> = (props) => {
16-
const { classPrefix } = useConfig();
17-
const { asyncLoading, header, footer, children } = props;
18-
const name = classPrefix;
14+
const { asyncLoading, header, footer, children, onScroll } = useDefaultProps(props, {});
15+
16+
const listClass = usePrefixClass('list');
1917

2018
const LOADING_TEXT_MAP = {
2119
loading: '加载中', // TODO: i18n
2220
'load-more': '加载更多',
2321
};
2422

25-
const root = useRef(null);
26-
27-
const height = useWindowHeight();
23+
const wrapperRef = useRef<HTMLDivElement>(null);
2824

2925
const onLoadMore = () => {
3026
if (asyncLoading === 'load-more') {
3127
props.onLoadMore?.();
3228
}
3329
};
3430

35-
const handleScroll = useCallback((e: WheelEvent<HTMLDivElement> | Event): void => {
36-
const scrollHeight =
37-
(e.target as HTMLElement).scrollHeight ||
38-
Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
31+
const handleScroll = useMemoizedFn((e: React.WheelEvent<HTMLDivElement> | Event): void => {
32+
const targetElement = e.currentTarget as HTMLElement;
33+
const { scrollTop, offsetHeight, scrollHeight } = targetElement;
34+
const bottomDistance = scrollHeight - scrollTop - offsetHeight;
3935

40-
const scrollTop =
41-
(e.target as HTMLElement).scrollTop || document.documentElement.scrollTop || document.body.scrollTop;
42-
43-
const offsetHeight = (e.target as HTMLElement).offsetHeight || height;
44-
const bottomDistance = scrollHeight - (scrollTop + offsetHeight);
45-
props.onScroll?.(bottomDistance, scrollTop);
46-
// eslint-disable-next-line react-hooks/exhaustive-deps
47-
}, []);
36+
onScroll?.(bottomDistance, scrollTop);
37+
});
4838

4939
useEffect(() => {
50-
const scorllParent = getScrollParent(root.current);
51-
if (scorllParent === root.current) return;
52-
scorllParent.addEventListener('scroll', handleScroll);
40+
const element = wrapperRef.current;
41+
if (!element) return;
42+
43+
const scrollParent = getScrollParent(element);
44+
if (!scrollParent) return;
45+
46+
scrollParent.addEventListener('scroll', handleScroll);
5347
return () => {
5448
removeEventListener('scroll', handleScroll);
5549
};
56-
}, [height, handleScroll]);
50+
}, [handleScroll]);
5751

5852
return (
59-
<div ref={root} className={`${name}-list`} onScroll={(e) => handleScroll(e)}>
53+
<div ref={wrapperRef} className={listClass}>
6054
{parseTNode(header)}
6155
{parseTNode(children)}
62-
<div className={`${name}-list__loading--wrapper`} onClick={() => onLoadMore()}>
56+
<div className={`${listClass}__loading--wrapper`} onClick={onLoadMore}>
6357
{typeof props.asyncLoading === 'string' && ['loading', 'load-more'].includes(props.asyncLoading) && (
6458
<TLoading
6559
indicator={props.asyncLoading === 'loading'}
6660
text={typeof props.asyncLoading === 'string' ? LOADING_TEXT_MAP[props.asyncLoading] : ''}
67-
className={`${name}-list__loading`}
61+
className={`${listClass}__loading`}
6862
/>
6963
)}
7064
</div>

‎test/snap/__snapshots__/csr.test.jsx.snap‎

Lines changed: 211 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50228,6 +50228,209 @@ exports[`csr snapshot test > csr test src/link/_example/underline.tsx 1`] = `
5022850228
</div>
5022950229
`;
5023050230

50231+
exports[`csr snapshot test > csr test src/list/_example/base.tsx 1`] = `
50232+
<div>
50233+
<div
50234+
class="t-list"
50235+
>
50236+
<div
50237+
class="t-list__loading--wrapper"
50238+
/>
50239+
</div>
50240+
</div>
50241+
`;
50242+
50243+
exports[`csr snapshot test > csr test src/list/_example/err-tip.tsx 1`] = `
50244+
<div>
50245+
<div
50246+
class="t-list"
50247+
>
50248+
<div
50249+
class="t-list__loading--wrapper"
50250+
>
50251+
<div
50252+
class="t-loading t-loading--center t-list__loading"
50253+
style="font-size: 20px;"
50254+
>
50255+
<svg
50256+
class="t-loading__gradient t-icon-loading"
50257+
height="1em"
50258+
style="animation: t-spin 0.8s linear infinite; animation-direction: normal;"
50259+
version="1.1"
50260+
viewBox="0 0 14 14"
50261+
width="1em"
50262+
xmlns="http://www.w3.org/2000/svg"
50263+
>
50264+
<foreignobject
50265+
height="12"
50266+
width="12"
50267+
x="1"
50268+
y="1"
50269+
>
50270+
<div
50271+
class="t-loading__gradient-conic"
50272+
/>
50273+
</foreignobject>
50274+
</svg>
50275+
<span
50276+
class="t-loading__text"
50277+
>
50278+
加载中
50279+
</span>
50280+
</div>
50281+
</div>
50282+
</div>
50283+
</div>
50284+
`;
50285+
50286+
exports[`csr snapshot test > csr test src/list/_example/index.tsx 1`] = `
50287+
<div>
50288+
<div
50289+
class="tdesign-mobile-demo"
50290+
>
50291+
<div
50292+
class="list-demo"
50293+
>
50294+
<div>
50295+
<h1
50296+
class="title"
50297+
>
50298+
List 列表
50299+
</h1>
50300+
<p
50301+
class="summary"
50302+
>
50303+
瀑布流滚动加载，用于展示同一类型信息的长列表。当列表即将滚动到底部时，会触发事件并加载更多列表项。
50304+
</p>
50305+
<div
50306+
class="tdesign-mobile-demo-block"
50307+
>
50308+
<div
50309+
class="tdesign-mobile-demo-block__header"
50310+
>
50311+
<h2
50312+
class="tdesign-mobile-demo-block__title"
50313+
>
50314+
01 类型
50315+
</h2>
50316+
<p
50317+
class="tdesign-mobile-demo-block__summary"
50318+
>
50319+
基础列表
50320+
</p>
50321+
</div>
50322+
<div
50323+
class="tdesign-mobile-demo-block__slot"
50324+
>
50325+
<button
50326+
class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle"
50327+
type="button"
50328+
>
50329+
<span
50330+
class="t-button__content"
50331+
>
50332+
50333+
50334+
基础列表
50335+
50336+
</span>
50337+
</button>
50338+
<button
50339+
class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle"
50340+
type="button"
50341+
>
50342+
<span
50343+
class="t-button__content"
50344+
>
50345+
50346+
下拉刷新
50347+
</span>
50348+
</button>
50349+
<button
50350+
class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle"
50351+
type="button"
50352+
>
50353+
<span
50354+
class="t-button__content"
50355+
>
50356+
50357+
错误提示
50358+
</span>
50359+
</button>
50360+
</div>
50361+
</div>
50362+
</div>
50363+
</div>
50364+
</div>
50365+
</div>
50366+
`;
50367+
50368+
exports[`csr snapshot test > csr test src/list/_example/pull-refresh.tsx 1`] = `
50369+
<div>
50370+
<div
50371+
class="t-pull-down-refresh"
50372+
>
50373+
<div
50374+
class="t-pull-down-refresh__track t-pull-down-refresh__track--loosing"
50375+
style="transform: translate3d(0, 0px, 0);"
50376+
>
50377+
<div
50378+
class="t-pull-down-refresh__tips"
50379+
>
50380+
<div
50381+
class="t-pull-down-refresh__loading"
50382+
style="height: 50px; max-height: 50px;"
50383+
>
50384+
<div
50385+
class="t-pull-down-refresh__text"
50386+
>
50387+
刷新完成
50388+
</div>
50389+
</div>
50390+
</div>
50391+
<div
50392+
class="t-list"
50393+
>
50394+
<div
50395+
class="t-list__loading--wrapper"
50396+
>
50397+
<div
50398+
class="t-loading t-loading--center t-list__loading"
50399+
style="font-size: 20px;"
50400+
>
50401+
<svg
50402+
class="t-loading__gradient t-icon-loading"
50403+
height="1em"
50404+
style="animation: t-spin 0.8s linear infinite; animation-direction: normal;"
50405+
version="1.1"
50406+
viewBox="0 0 14 14"
50407+
width="1em"
50408+
xmlns="http://www.w3.org/2000/svg"
50409+
>
50410+
<foreignobject
50411+
height="12"
50412+
width="12"
50413+
x="1"
50414+
y="1"
50415+
>
50416+
<div
50417+
class="t-loading__gradient-conic"
50418+
/>
50419+
</foreignobject>
50420+
</svg>
50421+
<span
50422+
class="t-loading__text"
50423+
>
50424+
加载中
50425+
</span>
50426+
</div>
50427+
</div>
50428+
</div>
50429+
</div>
50430+
</div>
50431+
</div>
50432+
`;
50433+
5023150434
exports[`csr snapshot test > csr test src/loading/_example/attach.tsx 1`] = `
5023250435
<div>
5023350436
<div
@@ -96578,6 +96781,14 @@ exports[`ssr snapshot test > ssr test src/link/_example/theme.tsx 1`] = `"<div c
9657896781

9657996782
exports[`ssr snapshot test > ssr test src/link/_example/underline.tsx 1`] = `"<div class="demo-content"><a class="t-link t-link--medium t-link--primary t-link--underline"><span class="t-link__content">跳转链接</span></a><a class="t-link t-link--medium t-link--default t-link--underline t-link--hover"><span class="t-link__content">跳转链接</span></a></div>"`;
9658096783

96784+
exports[`ssr snapshot test > ssr test src/list/_example/base.tsx 1`] = `"<div class="t-list"><div class="t-list__loading--wrapper"></div></div>"`;
96785+
96786+
exports[`ssr snapshot test > ssr test src/list/_example/err-tip.tsx 1`] = `"<div class="t-list"><div class="t-list__loading--wrapper"></div></div>"`;
96787+
96788+
exports[`ssr snapshot test > ssr test src/list/_example/index.tsx 1`] = `"<div class="tdesign-mobile-demo"><div class="list-demo"><div><h1 class="title">List 列表</h1><p class="summary">瀑布流滚动加载，用于展示同一类型信息的长列表。当列表即将滚动到底部时，会触发事件并加载更多列表项。</p><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">01 类型</h2><p class="tdesign-mobile-demo-block__summary">基础列表</p></div><div class="tdesign-mobile-demo-block__slot"><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle"><span class="t-button__content"> <!-- --> <!-- -->基础列表<!-- --> </span></button><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle"><span class="t-button__content"> <!-- -->下拉刷新</span></button><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle"><span class="t-button__content"> <!-- -->错误提示</span></button></div></div></div></div></div>"`;
96789+
96790+
exports[`ssr snapshot test > ssr test src/list/_example/pull-refresh.tsx 1`] = `"<div class="t-pull-down-refresh"><div class="t-pull-down-refresh__track t-pull-down-refresh__track--loosing" style="transform:translate3d(0, 0px, 0)"><div class="t-pull-down-refresh__tips"><div class="t-pull-down-refresh__loading" style="height:50px;max-height:50px"><div class="t-pull-down-refresh__text"></div></div></div><div class="t-list"><div class="t-list__loading--wrapper"></div></div></div></div>"`;
96791+
9658196792
exports[`ssr snapshot test > ssr test src/loading/_example/attach.tsx 1`] = `"<div class="loading-demo"><div id="alice" class="loading-attach-demo__title">Hello, I\`&#x27;m Alice. I\`&#x27;m going to be a front-end developer.</div><div class="t-switch t-switch--small"><div class="t-switch__dot t-switch__dot--small"><div class="t-switch__label t-switch__label--small">关</div></div></div></div>"`;
9658296793

9658396794
exports[`ssr snapshot test > ssr test src/loading/_example/base.tsx 1`] = `"<div class="t-loading t-loading--center" style="font-size:20px"><svg style="animation:t-spin 0.8s linear infinite;animation-direction:normal" class="t-loading__gradient t-icon-loading" viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg"><foreignObject x="1" y="1" width="12" height="12"><div class="t-loading__gradient-conic"></div></foreignObject></svg></div><div class="t-loading t-loading--center" style="font-size:20px"><span style="animation:t-rotate 0.8s infinite linear;animation-timing-function:steps(12);animation-direction:normal" class="t-loading__spinner"><i class="t-loading__spinner--line t-loading__spinner--line-1"></i><i class="t-loading__spinner--line t-loading__spinner--line-2"></i><i class="t-loading__spinner--line t-loading__spinner--line-3"></i><i class="t-loading__spinner--line t-loading__spinner--line-4"></i><i class="t-loading__spinner--line t-loading__spinner--line-5"></i><i class="t-loading__spinner--line t-loading__spinner--line-6"></i><i class="t-loading__spinner--line t-loading__spinner--line-7"></i><i class="t-loading__spinner--line t-loading__spinner--line-8"></i><i class="t-loading__spinner--line t-loading__spinner--line-9"></i><i class="t-loading__spinner--line t-loading__spinner--line-10"></i><i class="t-loading__spinner--line t-loading__spinner--line-11"></i><i class="t-loading__spinner--line t-loading__spinner--line-12"></i></span></div><div class="t-loading t-loading--center" style="font-size:40px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:40px;height:40px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div>"`;

‎test/snap/__snapshots__/ssr.test.jsx.snap‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -282,6 +282,14 @@ exports[`ssr snapshot test > ssr test src/link/_example/theme.tsx 1`] = `"<div c
282282

283283
exports[`ssr snapshot test > ssr test src/link/_example/underline.tsx 1`] = `"<div class="demo-content"><a class="t-link t-link--medium t-link--primary t-link--underline"><span class="t-link__content">跳转链接</span></a><a class="t-link t-link--medium t-link--default t-link--underline t-link--hover"><span class="t-link__content">跳转链接</span></a></div>"`;
284284

285+
exports[`ssr snapshot test > ssr test src/list/_example/base.tsx 1`] = `"<div class="t-list"><div class="t-list__loading--wrapper"></div></div>"`;
286+
287+
exports[`ssr snapshot test > ssr test src/list/_example/err-tip.tsx 1`] = `"<div class="t-list"><div class="t-list__loading--wrapper"></div></div>"`;
288+
289+
exports[`ssr snapshot test > ssr test src/list/_example/index.tsx 1`] = `"<div class="tdesign-mobile-demo"><div class="list-demo"><div><h1 class="title">List 列表</h1><p class="summary">瀑布流滚动加载，用于展示同一类型信息的长列表。当列表即将滚动到底部时，会触发事件并加载更多列表项。</p><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">01 类型</h2><p class="tdesign-mobile-demo-block__summary">基础列表</p></div><div class="tdesign-mobile-demo-block__slot"><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle"><span class="t-button__content"> <!-- --> <!-- -->基础列表<!-- --> </span></button><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle"><span class="t-button__content"> <!-- -->下拉刷新</span></button><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle"><span class="t-button__content"> <!-- -->错误提示</span></button></div></div></div></div></div>"`;
290+
291+
exports[`ssr snapshot test > ssr test src/list/_example/pull-refresh.tsx 1`] = `"<div class="t-pull-down-refresh"><div class="t-pull-down-refresh__track t-pull-down-refresh__track--loosing" style="transform:translate3d(0, 0px, 0)"><div class="t-pull-down-refresh__tips"><div class="t-pull-down-refresh__loading" style="height:50px;max-height:50px"><div class="t-pull-down-refresh__text"></div></div></div><div class="t-list"><div class="t-list__loading--wrapper"></div></div></div></div>"`;
292+
285293
exports[`ssr snapshot test > ssr test src/loading/_example/attach.tsx 1`] = `"<div class="loading-demo"><div id="alice" class="loading-attach-demo__title">Hello, I\`&#x27;m Alice. I\`&#x27;m going to be a front-end developer.</div><div class="t-switch t-switch--small"><div class="t-switch__dot t-switch__dot--small"><div class="t-switch__label t-switch__label--small">关</div></div></div></div>"`;
286294

287295
exports[`ssr snapshot test > ssr test src/loading/_example/base.tsx 1`] = `"<div class="t-loading t-loading--center" style="font-size:20px"><svg style="animation:t-spin 0.8s linear infinite;animation-direction:normal" class="t-loading__gradient t-icon-loading" viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg"><foreignObject x="1" y="1" width="12" height="12"><div class="t-loading__gradient-conic"></div></foreignObject></svg></div><div class="t-loading t-loading--center" style="font-size:20px"><span style="animation:t-rotate 0.8s infinite linear;animation-timing-function:steps(12);animation-direction:normal" class="t-loading__spinner"><i class="t-loading__spinner--line t-loading__spinner--line-1"></i><i class="t-loading__spinner--line t-loading__spinner--line-2"></i><i class="t-loading__spinner--line t-loading__spinner--line-3"></i><i class="t-loading__spinner--line t-loading__spinner--line-4"></i><i class="t-loading__spinner--line t-loading__spinner--line-5"></i><i class="t-loading__spinner--line t-loading__spinner--line-6"></i><i class="t-loading__spinner--line t-loading__spinner--line-7"></i><i class="t-loading__spinner--line t-loading__spinner--line-8"></i><i class="t-loading__spinner--line t-loading__spinner--line-9"></i><i class="t-loading__spinner--line t-loading__spinner--line-10"></i><i class="t-loading__spinner--line t-loading__spinner--line-11"></i><i class="t-loading__spinner--line t-loading__spinner--line-12"></i></span></div><div class="t-loading t-loading--center" style="font-size:40px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:40px;height:40px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div>"`;

0 commit comments

Comments
 (0)