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

fix(tab-indicator): upgrade mdc-web to 1.0.0 #742

Merged
merged 3 commits into from
Mar 14, 2019
Merged

fix(tab-indicator): upgrade mdc-web to 1.0.0 #742

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ff36b12
fix(tab-indicator): typescript conversion
gugu Mar 13, 2019
666ca20
Merge branch 'rc0.11.0' into typescript-tab
Mar 14, 2019
678d8f8
Update package-lock.json
moog16 Mar 14, 2019
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
55 changes: 49 additions & 6 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@
"@material/switch": "^0.41.0",
"@material/tab": "^0.41.0",
"@material/tab-bar": "^0.41.0",
"@material/tab-indicator": "^0.41.0",
"@material/tab-indicator": "^1.0.0",
"@material/tab-scroller": "^0.41.0",
"@material/textfield": "^0.41.0",
"@material/top-app-bar": "^0.41.0",
Expand Down
22 changes: 11 additions & 11 deletions packages/tab-indicator/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,9 @@

import * as React from 'react';
import classnames from 'classnames';
import {
MDCFadingTabIndicatorFoundation,
MDCSlidingTabIndicatorFoundation,
// @ts-ignore no .d.ts file
} from '@material/tab-indicator/dist/mdc.tabIndicator';
import {MDCSlidingTabIndicatorFoundation} from '@material/tab-indicator/sliding-foundation';
import {MDCFadingTabIndicatorFoundation} from '@material/tab-indicator/fading-foundation';
import {MDCTabIndicatorAdapter} from '@material/tab-indicator/adapter';

export interface TabIndicatorProps extends React.HTMLAttributes<HTMLSpanElement> {
active?: boolean;
Expand All @@ -38,7 +36,7 @@ export interface TabIndicatorProps extends React.HTMLAttributes<HTMLSpanElement>

export default class TabIndicator extends React.Component<TabIndicatorProps, {}> {
private tabIndicatorElement: React.RefObject<HTMLSpanElement> = React.createRef();
foundation?: MDCFadingTabIndicatorFoundation | MDCSlidingTabIndicatorFoundation;
foundation!: MDCFadingTabIndicatorFoundation | MDCSlidingTabIndicatorFoundation;

static defaultProps: Partial<TabIndicatorProps> = {
active: false,
Expand Down Expand Up @@ -88,7 +86,7 @@ export default class TabIndicator extends React.Component<TabIndicatorProps, {}>
});
}

get adapter() {
get adapter(): MDCTabIndicatorAdapter {
return {
addClass: (className: string) => {
if (!this.tabIndicatorElement.current) return;
Expand All @@ -109,15 +107,17 @@ export default class TabIndicator extends React.Component<TabIndicatorProps, {}>
computeContentClientRect: this.computeContentClientRect,
// setContentStyleProperty was using setState, but due to the method's
// async nature, its not condusive to the FLIP technique
setContentStyleProperty: (prop: keyof CSSStyleDeclaration, value: string) => {
setContentStyleProperty: (prop: string, value: string) => {
const contentElement = this.getNativeContentElement() as HTMLElement;
// we need to cast prop from string (interface requirement) to CSSStyleDeclaration;
const typedProp = prop as keyof CSSStyleDeclaration;
// length and parentRule are readonly properties of CSSStyleDeclaration that
// cannot be set
if (!contentElement || prop === 'length' || prop === 'parentRule') {
if (!contentElement || typedProp === 'length' || typedProp === 'parentRule') {
return;
}
// https://github.com/Microsoft/TypeScript/issues/11914
contentElement.style[prop] = value;
contentElement.style[typedProp] = value;
},
};
}
Expand All @@ -132,7 +132,7 @@ export default class TabIndicator extends React.Component<TabIndicatorProps, {}>

computeContentClientRect = () => {
const contentElement = this.getNativeContentElement();
if (!(contentElement && contentElement.getBoundingClientRect)) return;
if (!(contentElement && contentElement.getBoundingClientRect)) return new ClientRect();
return contentElement.getBoundingClientRect();
};

Expand Down
2 changes: 1 addition & 1 deletion packages/tab-indicator/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
"url": "https://github.com/material-components/material-components-web-react.git"
},
"dependencies": {
"@material/tab-indicator": "^0.41.0",
"@material/tab-indicator": "^1.0.0",
"classnames": "^2.2.5",
"react": "^16.4.2"
},
Expand Down
6 changes: 3 additions & 3 deletions test/unit/tab-indicator/index.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,15 +40,15 @@ test('adds the underline class to the content element by default', () => {

test('if props.active changes from true to false, it calls deactivate', () => {
const wrapper = mount<TabIndicator>(<TabIndicator active />);
wrapper.instance().foundation.deactivate = td.func();
wrapper.instance().foundation.deactivate = td.func<() => null>();
wrapper.setProps({active: false});
td.verify(wrapper.instance().foundation.deactivate(), {times: 1});
});

test('if props.active changes from false to true, it calls activate', () => {
const previousIndicatorClientRect = coerceForTesting<ClientRect>({width: 20});
const wrapper = shallow<TabIndicator>(<TabIndicator previousIndicatorClientRect={previousIndicatorClientRect} />);
wrapper.instance().foundation.activate = td.func();
wrapper.instance().foundation.activate = td.func<() => null>();
wrapper.setProps({active: true});
td.verify(wrapper.instance().foundation.activate(previousIndicatorClientRect), {times: 1});
});
Expand Down Expand Up @@ -135,7 +135,7 @@ test('child custom element should have content classes', () => {
test('#componentWillUnmount destroys foundation', () => {
const wrapper = shallow<TabIndicator>(<TabIndicator />);
const foundation = wrapper.instance().foundation;
foundation.destroy = td.func();
foundation.destroy = td.func<() => null>();
Copy link

@moog16 moog16 Mar 14, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oh wow - i've been using the coereceForTesting function, but this is a lot cleaner and shorter! :)

wrapper.unmount();
td.verify(foundation.destroy(), {times: 1});
});