Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: list - SFC to TSX #1437

Merged
merged 8 commits into from
Jun 14, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 10 additions & 6 deletions src/list/__test__/__snapshots__/demo.test.jsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,12 @@ exports[`List > List baseVue demo works fine 1`] = `
<!---->




<div
class="t-list__loading--wrapper"
>
<!--v-if-->
<!---->
</div>
<!---->
</div>
Expand All @@ -23,14 +25,14 @@ exports[`List > List errTipVue demo works fine 1`] = `
<!---->




<div
class="t-list__loading--wrapper"
>
<!--v-if-->
<!---->
</div>

<!--v-if-->

<!---->
</div>
`;

Expand Down Expand Up @@ -162,10 +164,12 @@ exports[`List > List pullRefreshVue demo works fine 1`] = `
<!---->




<div
class="t-list__loading--wrapper"
>
<!--v-if-->
<!---->
</div>
<!---->
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/list/__test__/__snapshots__/index.test.jsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -470,7 +470,7 @@ exports[`list > event > : load-more 1`] = `
<div
class="t-list__loading--wrapper"
>
<!--v-if-->
<!---->
</div>
<!---->
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/list/__test__/index.test.jsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { ref } from 'vue';
import { mount } from '@vue/test-utils';
import { describe, it, expect, vi } from 'vitest';
import List from '../list.vue';
import List from '../list';
import TLoading from '../../loading/loading';
import TCell from '../../cell/index';

Expand Down
2 changes: 1 addition & 1 deletion src/list/index.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import List from './list.vue';
import List from './list';
import { withInstall, WithInstallType } from '../shared';

import { TdListProps } from './type';
Expand Down
4 changes: 2 additions & 2 deletions src/list/list.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,11 @@ asyncLoading | String / Slot / Function | - | Typescript:`string | TNode`。[s
footer | String / Slot / Function | - | Typescript:`string | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
header | String / Slot / Function | - | Typescript:`string | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
onLoadMore | Function | | Typescript:`() => void`<br/> | N
onScroll | Function | | Typescript:`(scrollTop: number) => void`<br/> | N
onScroll | Function | | Typescript:`(bottomDistance:number, scrollTop: number)=> void`<br/> | N

### List Events

name | params | description
-- | -- | --
load-more | \- | \-
scroll | `(scrollTop: number)` | \-
scroll | `((bottomDistance:number, scrollTop: number)` | \-
2 changes: 1 addition & 1 deletion src/list/list.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ asyncLoading | String / Slot / Function | - | 自定义加载中。值为空不
footer | String / Slot / Function | - | 底部。TS 类型:`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
header | String / Slot / Function | - | 头部。TS 类型:`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
onLoadMore | Function | | TS 类型:`() => void`<br/>点击加载更多时触发 | N
onScroll | Function | | TS 类型:`(scrollTop: number) => void`<br/>列表滚动时触发,scrollTop 表示顶部滚动距离 | N
onScroll | Function | | TS 类型:`(bottomDistance:number, scrollTop: number) => void`<br/>列表滚动时触发,scrollTop 表示顶部滚动距离 | N

### List Events

Expand Down
63 changes: 24 additions & 39 deletions src/list/list.vue → src/list/list.tsx
Original file line number Diff line number Diff line change
@@ -1,63 +1,40 @@
<template>
<div ref="root" :class="name" @scroll="handleScroll">
<t-node :content="headerContent" />
<slot />
<div :class="`${name}__loading--wrapper`" @click.stop="onLoadMore">
<t-loading
v-if="typeof asyncLoading === 'string' && ['loading', 'load-more'].includes(asyncLoading)"
:indicator="asyncLoading === 'loading'"
:text="typeof asyncLoading === 'string' ? LOADING_TEXT_MAP[asyncLoading] : ''"
:class="`${name}__loading`"
/>
</div>
<t-node :content="footerContent" />
</div>
</template>

<script lang="ts">
import { defineComponent, ref, computed, getCurrentInstance } from 'vue';
import { defineComponent, ref } from 'vue';
import { useWindowSize, useEventListener } from '@vueuse/core';
import { useTNodeJSX } from '../hooks/tnode';
import TLoading from '../loading';
import config from '../config';
import ListProps from './props';
import { renderTNode, TNode, useScrollParent } from '../shared';
import { useScrollParent } from '../shared';
import { useConfig } from '../config-provider/useConfig';

const { prefix } = config;

const name = `${prefix}-list`;

export default defineComponent({
name,
components: {
TLoading,
TNode,
},
props: ListProps,
emits: ['load-more', 'scroll'],
setup(props, context) {
setup(props, { slots }) {
const { globalConfig } = useConfig('list');
const renderTNodeJSX = useTNodeJSX();

const LOADING_TEXT_MAP = {
loading: globalConfig.value.loading,
'load-more': globalConfig.value.loadingMoreText,
};

const root = ref<HTMLElement>();
const empty = ref<HTMLElement>();
const scrollParent = useScrollParent(root);
const { height } = useWindowSize();
const internalInstance = getCurrentInstance();

const headerContent = computed(() => renderTNode(internalInstance, 'header'));
const footerContent = computed(() => renderTNode(internalInstance, 'footer'));

const onLoadMore = (e: MouseEvent) => {
if (props.asyncLoading === 'load-more') {
props.onLoadMore?.();
}
};

const handleScroll = (e: WheelEvent | Event) => {
const scrollHeight =
(e.target as HTMLElement).scrollHeight ||
Expand All @@ -70,17 +47,25 @@ export default defineComponent({
};

useEventListener(scrollParent, 'scroll', handleScroll);

return {
name,
root,
empty,
onLoadMore,
handleScroll,
headerContent,
footerContent,
LOADING_TEXT_MAP,
return () => {
const headerContent = renderTNodeJSX('header');
const footerContent = renderTNodeJSX('footer');
return (
<div ref={root} class={name} onScroll={handleScroll}>
{headerContent}
{slots.default && slots.default()}
<div class={`${name}__loading--wrapper`} onClick={onLoadMore}>
{typeof props.asyncLoading === 'string' && ['loading', 'load-more'].includes(props.asyncLoading) && (
<TLoading
indicator={props.asyncLoading === 'loading'}
text={typeof props.asyncLoading === 'string' ? LOADING_TEXT_MAP[props.asyncLoading] : ''}
class={`${name}__loading`}
/>
)}
</div>
{footerContent}
</div>
);
};
},
});
</script>
55 changes: 20 additions & 35 deletions src/list/pull-refresh.vue → src/list/pull-refresh.tsx
Original file line number Diff line number Diff line change
@@ -1,25 +1,3 @@
<template>
<div :class="name">
<div
:class="`${name}__track`"
:style="trackStyle"
@touchstart.stop="onTouchStart"
@touchmove.stop="onTouchMove"
@touchend.stop="onTouchEnd"
@touchcancel.stop="onTouchEnd"
>
<div :class="`${name}__head`">
<div v-if="SHOW_TEXT_LIST.includes(state.status)">{{ TEXT_MAP[state.status] }}</div>
<div v-if="state.status === 'loading'">
<t-loading :text="globalConfig.loading" />
</div>
</div>
<slot />
</div>
</div>
</template>

<script lang="ts">
import { defineComponent, nextTick, reactive, ref, computed, watch } from 'vue';
import { preventDefault } from '../shared/dom';
import config from '../config';
Expand Down Expand Up @@ -79,6 +57,7 @@ function isElement(node: Element) {
const ELEMENT_NODE_TYPE = 1;
return node.tagName !== 'HTML' && node.tagName !== 'BODY' && node.nodeType === ELEMENT_NODE_TYPE;
}

const getScrollParent = (node: Element) => {
let res = node;
while (res && isElement(res)) {
Expand All @@ -94,7 +73,7 @@ export default defineComponent({
components: { TLoading },
props: PullRefreshProps,
emits: ['refresh', 'update:modelValue'],
setup(props, { emit }) {
setup(props, { emit, slots }) {
const state = reactive({
status: 'normal' as PullRefreshStatus,
distance: 0,
Expand Down Expand Up @@ -175,17 +154,23 @@ export default defineComponent({
},
);

return {
name,
state,
trackStyle,
globalConfig,
TEXT_MAP,
SHOW_TEXT_LIST,
onTouchStart,
onTouchMove,
onTouchEnd,
};
return () => (
<div class={name}>
<div
class={`${name}__track`}
style={trackStyle.value}
onTouchstart={onTouchStart}
onTouchmove={onTouchMove}
onTouchend={onTouchEnd}
onTouchcancel={onTouchEnd}
>
<div class={`${name}__head`}>
{SHOW_TEXT_LIST.includes(state.status) && <div>{TEXT_MAP[state.status]}</div>}
{state.status === 'loading' && <TLoading text={globalConfig.value.loading} />}
</div>
{slots.default && slots.default()}
</div>
</div>
);
},
});
</script>
2 changes: 1 addition & 1 deletion src/list/type.ts
Original file line number Diff line number Diff line change
Expand Up @@ -26,5 +26,5 @@ export interface TdListProps {
/**
* 列表滚动时触发,scrollTop 表示顶部滚动距离
*/
onScroll?: (scrollTop: number) => void;
onScroll?: (bottomDistance: number, scrollTop: number) => void;
}
Loading