Skip to content
This repository was archived by the owner on Jan 14, 2025. It is now read-only.

Commit 580c850

Browse files
guguMatt Goo
authored and
Matt Goo
committed
fix(tab-bar): upgrade mdc-web to v1 (#770)
1 parent 45fef89 commit 580c850

File tree

6 files changed

+147
-103
lines changed

6 files changed

+147
-103
lines changed

package-lock.json

Lines changed: 101 additions & 75 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@
8484
"@material/snackbar": "^1.0.0",
8585
"@material/switch": "^0.41.0",
8686
"@material/tab": "^1.0.0",
87-
"@material/tab-bar": "^0.41.0",
87+
"@material/tab-bar": "^1.0.0",
8888
"@material/tab-indicator": "^1.0.0",
8989
"@material/tab-scroller": "^1.0.0",
9090
"@material/textfield": "^0.41.0",

packages/tab-bar/index.tsx

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,14 @@ import * as React from 'react';
22
import classnames from 'classnames';
33
import TabScroller from '@material/react-tab-scroller';
44
import Tab, {TabProps} from '@material/react-tab'; // eslint-disable-line no-unused-vars
5-
// @ts-ignore No mdc .d.ts files
6-
import {MDCTabBarFoundation} from '@material/tab-bar/dist/mdc.tabBar';
5+
import {MDCTabBarFoundation} from '@material/tab-bar/foundation';
6+
import {MDCTabBarAdapter} from '@material/tab-bar/adapter';
77

88
export interface TabBarProps extends React.HTMLAttributes<HTMLDivElement> {
99
indexInView?: number;
1010
activeIndex: number;
1111
handleActiveIndexUpdate?: (index: number) => void;
12+
onActivated?: (index: number) => void;
1213
className?: string;
1314
isRtl?: boolean;
1415
children: React.ReactElement<TabProps> | React.ReactElement<TabProps>[];
@@ -24,7 +25,7 @@ class TabBar extends React.Component<
2425
tabBarRef: React.RefObject<HTMLDivElement> = React.createRef();
2526
tabScrollerRef: React.RefObject<TabScroller> = React.createRef();
2627
tabList: Tab[] = [];
27-
foundation?: MDCTabBarFoundation;
28+
foundation!: MDCTabBarFoundation;
2829

2930
constructor(props: TabBarProps) {
3031
super(props);
@@ -60,7 +61,7 @@ class TabBar extends React.Component<
6061
};
6162
this.tabList[activeIndex].activate(defaultDOMRect /* previousIndicatorClientRect */);
6263
}
63-
this.foundation.scrollIntoView(indexInView);
64+
this.foundation.scrollIntoView(indexInView!);
6465
}
6566

6667
componentDidUpdate(prevProps: TabBarProps) {
@@ -70,7 +71,7 @@ class TabBar extends React.Component<
7071
);
7172
}
7273
if (this.props.indexInView !== prevProps.indexInView) {
73-
this.foundation.scrollIntoView(this.props.indexInView);
74+
this.foundation.scrollIntoView(this.props.indexInView!);
7475
}
7576
}
7677

@@ -82,7 +83,7 @@ class TabBar extends React.Component<
8283
return classnames('mdc-tab-bar', this.props.className);
8384
}
8485

85-
get adapter() {
86+
get adapter(): MDCTabBarAdapter {
8687
return {
8788
scrollTo: (scrollX: number) => {
8889
this.tabScrollerRef.current && this.tabScrollerRef.current.scrollTo(scrollX);
@@ -91,15 +92,15 @@ class TabBar extends React.Component<
9192
this.tabScrollerRef.current && this.tabScrollerRef.current.incrementScroll(scrollXIncrement);
9293
},
9394
getScrollPosition: () => {
94-
if (!this.tabScrollerRef.current) return;
95+
if (!this.tabScrollerRef.current) return 0;
9596
return this.tabScrollerRef.current.getScrollPosition();
9697
},
9798
getScrollContentWidth: () => {
98-
if (!this.tabScrollerRef.current) return;
99+
if (!this.tabScrollerRef.current) return 0;
99100
return this.tabScrollerRef.current.getScrollContentWidth();
100101
},
101102
getOffsetWidth: () => {
102-
if (this.tabBarRef.current === null) return;
103+
if (this.tabBarRef.current === null) return 0;
103104
return this.tabBarRef.current.offsetWidth;
104105
},
105106
isRTL: () => !!this.props.isRtl,
@@ -127,8 +128,9 @@ class TabBar extends React.Component<
127128
}
128129
return -1;
129130
},
130-
getIndexOfTab: (tabToFind: Tab) => this.tabList.indexOf(tabToFind),
131+
getIndexOfTabById: (id: string) => this.tabList.map((tab) => tab.props.id).indexOf(id),
131132
getTabListLength: () => this.tabList.length,
133+
notifyTabActivated: (index: number) => this.props.onActivated && this.props.onActivated(index),
132134
};
133135
}
134136

@@ -140,7 +142,7 @@ class TabBar extends React.Component<
140142
// Persist the synthetic event to access its `key`.
141143
e.persist();
142144
this.setState({previousActiveIndex: this.props.activeIndex}, () =>
143-
this.foundation.handleKeyDown(e)
145+
this.foundation.handleKeyDown(e.nativeEvent)
144146
);
145147
if (this.props.onKeyDown) {
146148
this.props.onKeyDown(e);

packages/tab-bar/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
"dependencies": {
2121
"@material/react-tab": "^0.11.0",
2222
"@material/react-tab-scroller": "^0.11.0",
23-
"@material/tab-bar": "^0.41.0",
23+
"@material/tab-bar": "^1.0.0",
2424
"classnames": "^2.2.6",
2525
"react": "^16.3.2"
2626
},

packages/tab/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -165,7 +165,7 @@ export default class Tab extends React.Component<TabProps, TabState> {
165165
}
166166

167167
computeIndicatorClientRect = () => {
168-
if (!this.tabIndicatorRef.current) return;
168+
if (!this.tabIndicatorRef.current) return {} as ClientRect;
169169
return this.tabIndicatorRef.current.computeContentClientRect();
170170
};
171171

0 commit comments

Comments
 (0)