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

Commit ae9b421

Browse files
guguMatt Goo
authored and
Matt Goo
committed
fix(tab-scroller): upgrade mdc-web to 1.0.0 (#743)
1 parent 1b29dd9 commit ae9b421

File tree

6 files changed

+182
-104
lines changed

6 files changed

+182
-104
lines changed

package-lock.json

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

package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@
8585
"@material/tab": "^0.41.0",
8686
"@material/tab-bar": "^0.41.0",
8787
"@material/tab-indicator": "^1.0.0",
88-
"@material/tab-scroller": "^0.41.0",
88+
"@material/tab-scroller": "^1.0.0",
8989
"@material/textfield": "^0.41.0",
9090
"@material/top-app-bar": "^0.41.0",
9191
"@material/typography": "^0.41.0",
@@ -162,3 +162,4 @@
162162
"webpack-dev-server": "^2.11.2"
163163
}
164164
}
165+

packages/tab-scroller/index.tsx

Lines changed: 24 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -22,12 +22,9 @@
2222

2323
import * as React from 'react';
2424
import classnames from 'classnames';
25-
import {
26-
MDCTabScrollerFoundation,
27-
util,
28-
// @ts-ignore no .d.ts file
29-
} from '@material/tab-scroller/dist/mdc.tabScroller';
30-
// @ts-ignore no mdc .d.ts file
25+
import {MDCTabScrollerFoundation} from '@material/tab-scroller/foundation';
26+
import {MDCTabScrollerAdapter} from '@material/tab-scroller/adapter';
27+
import * as util from '@material/tab-scroller/util';
3128
import {matches} from '@material/dom/ponyfill';
3229

3330
const convertDashToCamelCase = (propName: string) =>
@@ -55,7 +52,7 @@ export default class TabScroller extends React.Component<
5552
> {
5653
areaElement: React.RefObject<HTMLDivElement> = React.createRef();
5754
contentElement: React.RefObject<HTMLDivElement> = React.createRef();
58-
foundation?: MDCTabScrollerFoundation;
55+
foundation!: MDCTabScrollerFoundation;
5956

6057
state: TabScrollerState = {
6158
classList: new Set(),
@@ -113,7 +110,7 @@ export default class TabScroller extends React.Component<
113110
});
114111
};
115112

116-
get adapter() {
113+
get adapter(): MDCTabScrollerAdapter {
117114
return {
118115
eventTargetMatchesSelector: (evtTarget: HTMLDivElement, selector: string) => {
119116
if (selector) {
@@ -141,25 +138,27 @@ export default class TabScroller extends React.Component<
141138
setScrollContentStyleProperty: (prop: string, value: string) =>
142139
this.setStyleToElement(prop, value, 'scrollContentStyleProperty'),
143140
getScrollContentStyleValue: (propName: string) =>
144-
this.contentElement.current &&
145-
window
146-
.getComputedStyle(this.contentElement.current)
147-
.getPropertyValue(propName),
141+
this.contentElement.current ?
142+
window
143+
.getComputedStyle(this.contentElement.current)
144+
.getPropertyValue(propName) : '',
148145
setScrollAreaScrollLeft: (scrollX: number) => {
149146
if (!this.areaElement.current) return;
150147
this.areaElement.current.scrollLeft = scrollX;
151148
},
152149
getScrollAreaScrollLeft: () =>
153-
this.areaElement.current && this.areaElement.current.scrollLeft,
150+
this.areaElement.current ? this.areaElement.current.scrollLeft : 0,
154151
getScrollContentOffsetWidth: this.getScrollContentWidth,
155152
getScrollAreaOffsetWidth: () =>
156-
this.areaElement.current && this.areaElement.current.offsetWidth,
153+
this.areaElement.current ? this.areaElement.current.offsetWidth : 0,
157154
computeScrollAreaClientRect: () =>
158-
this.areaElement.current &&
159-
this.areaElement.current.getBoundingClientRect(),
155+
this.areaElement.current ?
156+
this.areaElement.current.getBoundingClientRect() :
157+
new ClientRect(),
160158
computeScrollContentClientRect: () =>
161-
this.contentElement.current &&
162-
this.contentElement.current.getBoundingClientRect(),
159+
this.contentElement.current ?
160+
this.contentElement.current.getBoundingClientRect() :
161+
new ClientRect(),
163162
computeHorizontalScrollbarHeight: () =>
164163
util.computeHorizontalScrollbarHeight(document),
165164
};
@@ -172,7 +171,7 @@ export default class TabScroller extends React.Component<
172171
// needs to be public class method for react tab-bar
173172
getScrollContentWidth = () => {
174173
return (
175-
this.contentElement.current && this.contentElement.current.offsetWidth
174+
this.contentElement.current ? this.contentElement.current.offsetWidth : 0
176175
);
177176
};
178177

@@ -186,32 +185,32 @@ export default class TabScroller extends React.Component<
186185

187186
handleWheel_ = (evt: React.WheelEvent<HTMLDivElement>) => {
188187
this.props.onWheel && this.props.onWheel(evt);
189-
this.foundation.handleInteraction(evt);
188+
this.foundation.handleInteraction();
190189
};
191190

192191
handleTouchStart_ = (evt: React.TouchEvent<HTMLDivElement>) => {
193192
this.props.onTouchStart && this.props.onTouchStart(evt);
194-
this.foundation.handleInteraction(evt);
193+
this.foundation.handleInteraction();
195194
};
196195

197196
handlePointerDown_ = (evt: React.PointerEvent<HTMLDivElement>) => {
198197
this.props.onPointerDown && this.props.onPointerDown(evt);
199-
this.foundation.handleInteraction(evt);
198+
this.foundation.handleInteraction();
200199
};
201200

202201
handleMouseDown_ = (evt: React.MouseEvent<HTMLDivElement>) => {
203202
this.props.onMouseDown && this.props.onMouseDown(evt);
204-
this.foundation.handleInteraction(evt);
203+
this.foundation.handleInteraction();
205204
};
206205

207206
handleKeyDown_ = (evt: React.KeyboardEvent<HTMLDivElement>) => {
208207
this.props.onKeyDown && this.props.onKeyDown(evt);
209-
this.foundation.handleInteraction(evt);
208+
this.foundation.handleInteraction();
210209
};
211210

212211
handleTransitionEnd_ = (evt: React.TransitionEvent<HTMLDivElement>) => {
213212
this.props.onTransitionEnd && this.props.onTransitionEnd(evt);
214-
this.foundation.handleTransitionEnd(evt);
213+
this.foundation.handleTransitionEnd(evt.nativeEvent);
215214
};
216215

217216
render() {

packages/tab-scroller/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@
1818
"url": "https://github.com/material-components/material-components-web-react.git"
1919
},
2020
"dependencies": {
21-
"@material/dom": "^0.41.0",
22-
"@material/tab-scroller": "^0.41.0",
21+
"@material/dom": "^1.0.0",
22+
"@material/tab-scroller": "^1.0.0",
2323
"classnames": "^2.2.6",
2424
"react": "^16.4.2"
2525
},

0 commit comments

Comments
 (0)