Skip to content

Commit 28b061b

Browse files
li-jia-nanli-jia-nan
authored
refactor: refactor indicator props (#695)
* refactor: refactor indicator props * update demo * test: fix test case
1 parent ba563b4 commit 28b061b

File tree

5 files changed

+52
-47
lines changed

5 files changed

+52
-47
lines changed

‎docs/examples/indicator.tsx‎

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -26,38 +26,32 @@ export default () => (
2626
<Tabs
2727
tabPosition="top"
2828
items={items}
29-
indicatorSize={origin => origin - 20}
30-
indicatorAlign="start"
29+
indicator={{ size: origin => origin - 20, align: 'start' }}
3130
/>
3231
<Tabs
3332
tabPosition="top"
3433
items={items}
35-
indicatorSize={origin => origin - 20}
36-
indicatorAlign="center"
34+
indicator={{ size: origin => origin - 20, align: 'center' }}
3735
/>
3836
<Tabs
3937
tabPosition="top"
4038
items={items}
41-
indicatorSize={origin => origin - 20}
42-
indicatorAlign="end"
39+
indicator={{ size: origin => origin - 20, align: 'end' }}
4340
/>
4441
<Tabs
4542
tabPosition="left"
4643
items={items}
47-
indicatorSize={origin => origin - 20}
48-
indicatorAlign="start"
44+
indicator={{ size: origin => origin - 20, align: 'start' }}
4945
/>
5046
<Tabs
5147
tabPosition="left"
5248
items={items}
53-
indicatorSize={origin => origin - 20}
54-
indicatorAlign="center"
49+
indicator={{ size: origin => origin - 20, align: 'center' }}
5550
/>
5651
<Tabs
5752
tabPosition="left"
5853
items={items}
59-
indicatorSize={origin => origin - 20}
60-
indicatorAlign="end"
54+
indicator={{ size: origin => origin - 20, align: 'end' }}
6155
/>
6256
</>
6357
);

‎src/TabNavList/index.tsx‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -51,8 +51,13 @@ export interface TabNavListProps {
5151
children?: (node: React.ReactElement) => React.ReactElement;
5252
getPopupContainer?: (node: HTMLElement) => HTMLElement;
5353
popupClassName?: string;
54+
55+
/** @deprecated Use `indicator={ size: ... }` instead */
5456
indicatorSize?: GetIndicatorSize;
55-
indicatorAlign?: 'start' | 'center' | 'end';
57+
indicator?: {
58+
size?: GetIndicatorSize;
59+
align?: 'start' | 'center' | 'end';
60+
};
5661
}
5762

5863
const getTabSize = (tab: HTMLElement, containerRect: { x: number; y: number }) => {
@@ -107,8 +112,13 @@ const TabNavList = React.forwardRef<HTMLDivElement, TabNavListProps>((props, ref
107112
onTabClick,
108113
onTabScroll,
109114
indicatorSize,
110-
indicatorAlign,
115+
indicator,
111116
} = props;
117+
118+
const mergedIndicatorSize = indicator?.size || indicatorSize;
119+
120+
const mergedIndicatorAlign = indicator?.align || 'center';
121+
112122
const { prefixCls, tabs } = React.useContext(TabContext);
113123
const containerRef = useRef<HTMLDivElement>(null);
114124
const extraLeftRef = useRef<HTMLDivElement>(null);
@@ -396,8 +406,10 @@ const TabNavList = React.forwardRef<HTMLDivElement, TabNavListProps>((props, ref
396406
activeTabOffset,
397407
horizontal: tabPositionTopOrBottom,
398408
rtl,
399-
indicatorSize,
400-
indicatorAlign,
409+
indicator: {
410+
size: mergedIndicatorSize,
411+
align: mergedIndicatorAlign,
412+
},
401413
});
402414

403415
// ========================= Effect ========================

‎src/Tabs.tsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -70,9 +70,12 @@ export interface TabsProps
7070

7171
popupClassName?: string;
7272

73-
// Indicator
73+
/** @deprecated Use `indicator={ size: ... }` instead */
7474
indicatorSize?: GetIndicatorSize;
75-
indicatorAlign?: 'start' | 'center' | 'end';
75+
indicator?: {
76+
size?: GetIndicatorSize;
77+
align?: 'start' | 'center' | 'end';
78+
};
7679
}
7780

7881
const Tabs = React.forwardRef<HTMLDivElement, TabsProps>((props, ref) => {
@@ -101,7 +104,7 @@ const Tabs = React.forwardRef<HTMLDivElement, TabsProps>((props, ref) => {
101104
getPopupContainer,
102105
popupClassName,
103106
indicatorSize,
104-
indicatorAlign = 'center',
107+
indicator,
105108
...restProps
106109
} = props;
107110
const tabs = React.useMemo<Tab[]>(
@@ -186,7 +189,7 @@ const Tabs = React.forwardRef<HTMLDivElement, TabsProps>((props, ref) => {
186189
getPopupContainer,
187190
popupClassName,
188191
indicatorSize,
189-
indicatorAlign,
192+
indicator,
190193
};
191194

192195
return (

‎src/hooks/useIndicator.ts‎

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -8,26 +8,28 @@ interface UseIndicatorOptions {
88
activeTabOffset: TabOffset;
99
horizontal: boolean;
1010
rtl: boolean;
11-
indicatorSize: GetIndicatorSize;
12-
indicatorAlign: 'start' | 'center' | 'end';
11+
indicator?: {
12+
size?: GetIndicatorSize;
13+
align?: 'start' | 'center' | 'end';
14+
};
1315
}
1416

1517
const useIndicator = (options: UseIndicatorOptions) => {
16-
const { activeTabOffset, horizontal, rtl, indicatorSize, indicatorAlign } = options;
18+
const { activeTabOffset, horizontal, rtl, indicator } = options;
1719
const [inkStyle, setInkStyle] = useState<React.CSSProperties>();
1820
const inkBarRafRef = useRef<number>();
1921

2022
const getLength = React.useCallback(
2123
(origin: number) => {
22-
if (typeof indicatorSize === 'function') {
23-
return indicatorSize(origin);
24+
if (typeof indicator?.size === 'function') {
25+
return indicator?.size(origin);
2426
}
25-
if (typeof indicatorSize === 'number') {
26-
return indicatorSize;
27+
if (typeof indicator?.size === 'number') {
28+
return indicator?.size;
2729
}
2830
return origin;
2931
},
30-
[indicatorSize],
32+
[indicator],
3133
);
3234

3335
// Delay set ink style to avoid remove tab blink
@@ -42,27 +44,27 @@ const useIndicator = (options: UseIndicatorOptions) => {
4244
if (horizontal) {
4345
newInkStyle.width = getLength(activeTabOffset.width);
4446
const key = rtl ? 'right' : 'left';
45-
if (indicatorAlign === 'start') {
47+
if (indicator?.align === 'start') {
4648
newInkStyle[key] = activeTabOffset[key];
4749
}
48-
if (indicatorAlign === 'center') {
50+
if (indicator?.align === 'center') {
4951
newInkStyle[key] = activeTabOffset[key] + activeTabOffset.width / 2;
5052
newInkStyle.transform = rtl ? 'translateX(50%)' : 'translateX(-50%)';
5153
}
52-
if (indicatorAlign === 'end') {
54+
if (indicator?.align === 'end') {
5355
newInkStyle[key] = activeTabOffset[key] + activeTabOffset.width;
5456
newInkStyle.transform = 'translateX(-100%)';
5557
}
5658
} else {
5759
newInkStyle.height = getLength(activeTabOffset.height);
58-
if (indicatorAlign === 'start') {
60+
if (indicator?.align === 'start') {
5961
newInkStyle.top = activeTabOffset.top;
6062
}
61-
if (indicatorAlign === 'center') {
63+
if (indicator?.align === 'center') {
6264
newInkStyle.top = activeTabOffset.top + activeTabOffset.height / 2;
6365
newInkStyle.transform = 'translateY(-50%)';
6466
}
65-
if (indicatorAlign === 'end') {
67+
if (indicator?.align === 'end') {
6668
newInkStyle.top = activeTabOffset.top + activeTabOffset.height;
6769
newInkStyle.transform = 'translateY(-100%)';
6870
}
@@ -75,7 +77,7 @@ const useIndicator = (options: UseIndicatorOptions) => {
7577
});
7678

7779
return cleanInkBarRaf;
78-
}, [activeTabOffset, horizontal, rtl, indicatorSize, indicatorAlign, getLength]);
80+
}, [activeTabOffset, horizontal, rtl, indicator?.align, getLength]);
7981

8082
return { style: inkStyle };
8183
};

‎tests/index.test.tsx‎

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -653,22 +653,19 @@ describe('Tabs.Basic', () => {
653653
const { container: startContainer } = render(
654654
<Tabs
655655
items={[{ key: 'test', label: 'test', icon: 'test' }]}
656-
indicatorSize={origin => origin - 10}
657-
indicatorAlign="start"
656+
indicator={{ size: origin => origin - 20, align: 'start' }}
658657
/>,
659658
);
660659
const { container: centerContainer } = render(
661660
<Tabs
662661
items={[{ key: 'test', label: 'test', icon: 'test' }]}
663-
indicatorSize={origin => origin - 10}
664-
indicatorAlign="center"
662+
indicator={{ size: origin => origin - 20, align: 'center' }}
665663
/>,
666664
);
667665
const { container: endContainer } = render(
668666
<Tabs
669667
items={[{ key: 'test', label: 'test', icon: 'test' }]}
670-
indicatorSize={origin => origin - 10}
671-
indicatorAlign="end"
668+
indicator={{ size: origin => origin - 20, align: 'end' }}
672669
/>,
673670
);
674671

@@ -689,24 +686,21 @@ describe('Tabs.Basic', () => {
689686
<Tabs
690687
tabPosition="left"
691688
items={[{ key: 'test', label: 'test', icon: 'test' }]}
692-
indicatorSize={origin => origin - 10}
693-
indicatorAlign="start"
689+
indicator={{ size: origin => origin - 20, align: 'start' }}
694690
/>,
695691
);
696692
const { container: centerContainer } = render(
697693
<Tabs
698694
tabPosition="left"
699695
items={[{ key: 'test', label: 'test', icon: 'test' }]}
700-
indicatorSize={origin => origin - 10}
701-
indicatorAlign="center"
696+
indicator={{ size: origin => origin - 20, align: 'center' }}
702697
/>,
703698
);
704699
const { container: endContainer } = render(
705700
<Tabs
706701
tabPosition="left"
707702
items={[{ key: 'test', label: 'test', icon: 'test' }]}
708-
indicatorSize={origin => origin - 10}
709-
indicatorAlign="end"
703+
indicator={{ size: origin => origin - 20, align: 'end' }}
710704
/>,
711705
);
712706

0 commit comments

Comments
 (0)