blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-05 19:41:42 +08:00
Code Issues Projects Releases Wiki Activity

refactor(Tabs): move renderTitle to Tab component (#11781)

Browse Source
This commit is contained in:
neverland 2023-04-27 08:09:08 +08:00 committed by GitHub
parent a052b410cb
commit e696d35bd4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 74 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/vant/src/cascader/test/__snapshots__/index.spec.ts.snap
View File

@ -85,6 +85,7 @@ exports[`should update tabs when previous tab is clicked 1`] = `
class="van-tab van-tab--line van-tab--shrink van-cascader__tab"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text">
Jiangsu
@ -95,6 +96,7 @@ exports[`should update tabs when previous tab is clicked 1`] = `
class="van-tab van-tab--line van-tab--shrink van-tab--active van-cascader__tab van-cascader__tab--unselected"
tabindex="0"
aria-selected="true"
aria-controls="van-tab"
>
<span class="van-tab__text">
Select

8
packages/vant/src/picker-group/test/__snapshots__/demo.spec.ts.snap
View File

@ -29,6 +29,7 @@ exports[`should render demo and match snapshot 1`] = `
class="van-tab van-tab--line van-tab--shrink van-tab--active van-picker-group__tab-title"
tabindex="0"
aria-selected="true"
aria-controls="van-tab"
>
<span class="van-tab__text">
Date
@ -39,6 +40,7 @@ exports[`should render demo and match snapshot 1`] = `
class="van-tab van-tab--line van-tab--shrink van-picker-group__tab-title"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text">
Time
@ -1357,6 +1359,7 @@ exports[`should render demo and match snapshot 1`] = `
class="van-tab van-tab--line van-tab--shrink van-tab--active van-picker-group__tab-title"
tabindex="0"
aria-selected="true"
aria-controls="van-tab"
>
<span class="van-tab__text">
Date
@ -1367,6 +1370,7 @@ exports[`should render demo and match snapshot 1`] = `
class="van-tab van-tab--line van-tab--shrink van-picker-group__tab-title"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text">
Time
@ -2685,6 +2689,7 @@ exports[`should render demo and match snapshot 1`] = `
class="van-tab van-tab--line van-tab--shrink van-tab--active van-picker-group__tab-title"
tabindex="0"
aria-selected="true"
aria-controls="van-tab"
>
<span class="van-tab__text">
Start Date
@ -2695,6 +2700,7 @@ exports[`should render demo and match snapshot 1`] = `
class="van-tab van-tab--line van-tab--shrink van-picker-group__tab-title"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text">
End Date
@ -3677,6 +3683,7 @@ exports[`should render demo and match snapshot 1`] = `
class="van-tab van-tab--line van-tab--shrink van-tab--active van-picker-group__tab-title"
tabindex="0"
aria-selected="true"
aria-controls="van-tab"
>
<span class="van-tab__text">
Start Time
@ -3687,6 +3694,7 @@ exports[`should render demo and match snapshot 1`] = `
class="van-tab van-tab--line van-tab--shrink van-picker-group__tab-title"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text">
End Time

39
packages/vant/src/tab/Tab.tsx
View File

@ -5,6 +5,7 @@ import {
computed,
nextTick,
defineComponent,
getCurrentInstance,
type PropType,
type CSSProperties,
type ExtractPropTypes,
@ -12,11 +13,13 @@ import {
// Utils
import {
pick,
extend,
truthProp,
unknownProp,
numericProp,
createNamespace,
ComponentInstance,
} from '../utils';
import { TABS_KEY } from '../tabs/Tabs';
@ -28,6 +31,7 @@ import { routeProps } from '../composables/use-route';
import { TAB_STATUS_KEY } from '../composables/use-tab-status';
// Components
import { TabTitle } from './TabTitle';
import { SwipeItem } from '../swipe-item';
const [name, bem] = createNamespace('tab');
@ -53,6 +57,7 @@ export default defineComponent({
setup(props, { slots }) {
const id = useId();
const inited = ref(false);
const instance = getCurrentInstance();
const { parent, index } = useParent(TABS_KEY);
if (!parent) {
@ -84,6 +89,33 @@ export default defineComponent({
return isActive;
});
const renderTitle = (
onClickTab: (
instance: ComponentInstance,
index: number,
event: MouseEvent
) => void
) => (
<TabTitle
key={id}
v-slots={{ title: slots.title }}
id={`${parent.id}-${index.value}`}
ref={parent.setTitleRefs(index.value)}
style={props.titleStyle}
class={props.titleClass}
isActive={active.value}
controls={id}
scrollable={parent.scrollable.value}
activeColor={parent.props.titleActiveColor}
inactiveColor={parent.props.titleInactiveColor}
onClick={(event: MouseEvent) =>
onClickTab(instance!.proxy!, index.value, event)
}
{...pick(parent.props, ['type', 'color', 'shrink'])}
{...pick(props, ['dot', 'badge', 'title', 'disabled', 'showZeroBadge'])}
/>
);
const hasInactiveClass = ref(!active.value);
watch(active, (val) => {
@ -109,6 +141,11 @@ export default defineComponent({
provide(TAB_STATUS_KEY, active);
useExpose({
id,
renderTitle,
});
return () => {
const label = `${parent.id}-${index.value}`;
const { animated, swipeable, scrollspy, lazyRender } = parent.props;
@ -137,8 +174,6 @@ export default defineComponent({
const shouldRender = inited.value || scrollspy || !lazyRender;
const Content = shouldRender ? slots.default?.() : null;
useExpose({ id });
return (
<div
v-show={show}

2
packages/vant/src/tabs/TabsTitle.tsx → packages/vant/src/tab/TabTitle.tsx
View File

@ -4,7 +4,7 @@ import { Badge } from '../badge';
const [name, bem] = createNamespace('tab');
export default defineComponent({
export const TabTitle = defineComponent({
name,
props: {

8
packages/vant/src/tab/test/__snapshots__/demo.spec.ts.snap
View File

@ -896,6 +896,7 @@ exports[`should render demo and match snapshot 1`] = `
class="van-tab van-tab--line van-tab--active"
tabindex="0"
aria-selected="true"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
Tab 1
@ -906,6 +907,7 @@ exports[`should render demo and match snapshot 1`] = `
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
Tab 2
@ -916,6 +918,7 @@ exports[`should render demo and match snapshot 1`] = `
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
Tab 3
@ -926,6 +929,7 @@ exports[`should render demo and match snapshot 1`] = `
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
Tab 4
@ -1001,6 +1005,7 @@ exports[`should render demo and match snapshot 1`] = `
class="van-tab van-tab--line van-tab--active"
tabindex="0"
aria-selected="true"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
Tab 1
@ -1011,6 +1016,7 @@ exports[`should render demo and match snapshot 1`] = `
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
Tab 2
@ -1021,6 +1027,7 @@ exports[`should render demo and match snapshot 1`] = `
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
Tab 3
@ -1031,6 +1038,7 @@ exports[`should render demo and match snapshot 1`] = `
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
Tab 4

9
packages/vant/src/tab/test/__snapshots__/index.spec.tsx.snap
View File

@ -347,6 +347,7 @@ exports[`swipe switch tab after swiping tab content 1`] = `
class="van-tab van-tab--line van-tab--active"
tabindex="0"
aria-selected="true"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
title1
@ -357,6 +358,7 @@ exports[`swipe switch tab after swiping tab content 1`] = `
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
title2
@ -367,6 +369,7 @@ exports[`swipe switch tab after swiping tab content 1`] = `
class="van-tab van-tab--line van-tab--disabled"
aria-selected="false"
aria-disabled="true"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
title3
@ -434,6 +437,7 @@ exports[`swipe switch tab after swiping tab content 2`] = `
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
title1
@ -444,6 +448,7 @@ exports[`swipe switch tab after swiping tab content 2`] = `
class="van-tab van-tab--line van-tab--active"
tabindex="0"
aria-selected="true"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
title2
@ -454,6 +459,7 @@ exports[`swipe switch tab after swiping tab content 2`] = `
class="van-tab van-tab--line van-tab--disabled"
aria-selected="false"
aria-disabled="true"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
title3
@ -524,6 +530,7 @@ exports[`swipe switch tab after swiping tab content 3`] = `
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
title1
@ -534,6 +541,7 @@ exports[`swipe switch tab after swiping tab content 3`] = `
class="van-tab van-tab--line van-tab--active"
tabindex="0"
aria-selected="true"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
title2
@ -544,6 +552,7 @@ exports[`swipe switch tab after swiping tab content 3`] = `
class="van-tab van-tab--line van-tab--disabled"
aria-selected="false"
aria-disabled="true"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
title3

3
packages/vant/src/tab/test/__snapshots__/insert.spec.tsx.snap
View File

@ -166,6 +166,7 @@ exports[`should render correctly after inserting a tab from an array 1`] = `
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
1
@ -176,6 +177,7 @@ exports[`should render correctly after inserting a tab from an array 1`] = `
class="van-tab van-tab--line van-tab--active"
tabindex="0"
aria-selected="true"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
2
@ -186,6 +188,7 @@ exports[`should render correctly after inserting a tab from an array 1`] = `
class="van-tab van-tab--line"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
3

34
packages/vant/src/tabs/Tabs.tsx
View File

@ -15,7 +15,6 @@ import {
// Utils
import {
pick,
isDef,
addUnit,
isHidden,
@ -53,7 +52,6 @@ import { useVisibilityChange } from '../composables/use-visibility-change';
// Components
import { Sticky } from '../sticky';
import TabsTitle from './TabsTitle';
import TabsContent from './TabsContent';
// Types
@ -352,34 +350,6 @@ export default defineComponent({
}
};
const renderNav = () =>
children.map((item, index) => (
<TabsTitle
key={item.id}
v-slots={{ title: item.$slots.title }}
id={`${id}-${index}`}
ref={setTitleRefs(index)}
type={props.type}
color={props.color}
style={item.titleStyle}
class={item.titleClass}
shrink={props.shrink}
isActive={index === state.currentIndex}
controls={item.id}
scrollable={scrollable.value}
activeColor={props.titleActiveColor}
inactiveColor={props.titleInactiveColor}
onClick={(event: MouseEvent) => onClickTab(item, index, event)}
{...pick(item, [
'dot',
'badge',
'title',
'disabled',
'showZeroBadge',
])}
/>
));
const renderLine = () => {
if (props.type === 'line' && children.length) {
return <div class={bem('line')} style={state.lineStyle} />;
@ -408,7 +378,7 @@ export default defineComponent({
aria-orientation="horizontal"
>
{slots['nav-left']?.()}
{renderNav()}
{children.map((item) => item.renderTitle(onClickTab))}
{renderLine()}
{slots['nav-right']?.()}
</div>
@ -491,8 +461,10 @@ export default defineComponent({
id,
props,
setLine,
scrollable,
onRendered,
currentName,
setTitleRefs,
scrollIntoView,
});

4
packages/vant/src/tabs/types.ts
View File

@ -15,9 +15,11 @@ export type TabsProvide = {
id: string;
props: TabsProps;
setLine: () => void;
scrollable: ComputedRef<boolean>;
onRendered: (name: Numeric, title?: string) => void;
scrollIntoView: (immediate?: boolean) => void;
currentName: ComputedRef<Numeric | undefined>;
setTitleRefs: (index: number) => (el: unknown) => void;
scrollIntoView: (immediate?: boolean) => void;
};
export type TabsExpose = {