Skip to content

Commit 3ba4a6d

Browse files
petermikitshpetermikitsh
committed
Support for React 16
1 parent 3cc8239 commit 3ba4a6d

File tree

16 files changed

+63
-70
lines changed

16 files changed

+63
-70
lines changed

‎docs/pages/Button/index.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ class ButtonDocs extends React.Component {
3838
fab={fab}
3939
focusRippleDisabled={focusRippleDisabled}
4040
>
41-
{fab ? <Add fill={fill} focusable={false} /> : children}
41+
{fab ? <Add fill={fill} focusable="false" /> : children}
4242
</Button>
4343
}
4444
buildYourOwnControlPanel={[
@@ -87,10 +87,10 @@ class ButtonDocs extends React.Component {
8787
</div>
8888
<div className={Styles.flex}>
8989
<Button fab buttonColor={Variables.$primary} textColor="#FFF">
90-
<Add fill="#FFF" focusable={false} />
90+
<Add fill="#FFF" focusable="false" />
9191
</Button>
9292
<Button fab buttonColor={Variables.$accent} textColor="#FFF">
93-
<Edit fill="#FFF" focusable={false} />
93+
<Edit fill="#FFF" focusable="false" />
9494
</Button>
9595
</div>
9696
</div>

‎karma.conf.js

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -93,10 +93,10 @@ module.exports = function (config) {
9393
browsers: [
9494
'PhantomJSWithArgs'
9595
],
96-
browserNoActivityTimeout: 300e3,
97-
browserDisconnectTimeout: 300e3,
96+
browserNoActivityTimeout: 60e3,
97+
browserDisconnectTimeout: 60e3,
9898
browserDisconnectTolerance: 3,
99-
captureTimeout: 300e3,
99+
captureTimeout: 60e3,
100100
client: {
101101
captureConsole: true,
102102
mocha: {
@@ -125,6 +125,7 @@ module.exports = function (config) {
125125
}
126126
},
127127
files: [
128+
'./node_modules/core-js/client/core.js',
128129
'./node_modules/phantomjs-polyfill-object-assign/object-assign-polyfill.js',
129130
'test/test_index.js'
130131
],
@@ -205,7 +206,7 @@ module.exports = function (config) {
205206
new webpack.DefinePlugin({
206207
__TEST__: true,
207208
'process.env': {
208-
NODE_ENV: JSON.stringify('production')
209+
NODE_ENV: JSON.stringify('development')
209210
}
210211
})
211212
]

‎package.json

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,8 @@
2828
"author": "Peter Mikitsh",
2929
"license": "MIT",
3030
"peerDependencies": {
31-
"react": "^15.5.4",
32-
"react-dom": "^15.5.4"
31+
"react": "^15.5.4 || ^16.0.0",
32+
"react-dom": "^15.5.4 || ^16.0.0"
3333
},
3434
"dependencies": {
3535
"babel-cli": "6.24.1",
@@ -45,7 +45,7 @@
4545
"keycode": "2.1.9",
4646
"material-design-icons": "3.0.1",
4747
"react-scrollbar-size": "2.0.0",
48-
"react-transition-group": "1.2.0",
48+
"react-transition-group": "1.2.1",
4949
"tinycolor2": "1.4.1",
5050
"uuid": "3.1.0"
5151
},
@@ -61,8 +61,10 @@
6161
"babel-plugin-transform-runtime": "6.23.0",
6262
"babel-polyfill": "6.23.0",
6363
"case-sensitive-paths-webpack-plugin": "2.1.1",
64+
"core-js": "2.5.1",
6465
"css-loader": "0.28.4",
65-
"enzyme": "2.9.1",
66+
"enzyme": "3.1.0",
67+
"enzyme-adapter-react-16": "1.0.2",
6668
"eslint": "3.19.0",
6769
"eslint-config-airbnb": "15.0.2",
6870
"eslint-plugin-import": "2.7.0",
@@ -91,14 +93,13 @@
9193
"prismjs": "1.6.0",
9294
"prop-types": "15.5.10",
9395
"raw-loader": "0.5.1",
94-
"react": "15.6.1",
95-
"react-addons-test-utils": "15.6.0",
96-
"react-dom": "15.6.1",
97-
"react-hot-loader": "3.0.0-beta.7",
98-
"react-router-dom": "4.1.2",
99-
"react-svg-loader": "2.0.0-alpha.1",
100-
"react-tap-event-plugin": "2.0.1",
101-
"react-test-renderer": "15.6.1",
96+
"react": "16.0.0",
97+
"react-dom": "16.0.0",
98+
"react-hot-loader": "3.1.1",
99+
"react-router-dom": "4.2.2",
100+
"react-svg-loader": "2.1.0",
101+
"react-tap-event-plugin": "3.0.2",
102+
"react-test-renderer": "16.0.0",
102103
"sinon": "2.3.8",
103104
"style-loader": "0.18.2",
104105
"stylelint": "8.0.0",

‎src/Button/Button.js

Lines changed: 2 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -48,11 +48,8 @@ class Button extends React.Component {
4848
this.setState({hover: true});
4949
});
5050

51-
onMouseLeave = rippleMiddleware(this, 'mouseLeave', (e) => {
51+
onMouseLeave = rippleMiddleware(this, 'mouseLeave', () => {
5252
this.setState({hover: false});
53-
if (this.button !== document.activeElement) {
54-
this.ripple.remove(e);
55-
}
5653
});
5754

5855
onKeyDown = rippleMiddleware(this, 'keyDown', (e, ...args) => {
@@ -121,17 +118,12 @@ class Button extends React.Component {
121118
return tinycolor.mostReadable(buttonColor, colors).toString();
122119
};
123120

124-
registerButton = (c) => {
125-
this.button = c;
126-
this.props.domRef(c);
127-
};
128-
129121
registerRipple = (c) => {
130122
this.ripple = c;
131123
};
132124

133125
render() {
134-
const {buttonColor, children, className, component, domRef,
126+
const {buttonColor, children, className, component,
135127
focusRippleDisabled, icon, fab, style, textColor, ...other} = this.props;
136128
const Component = component;
137129
const readableTextColor = this.readableTextColor();
@@ -160,7 +152,6 @@ class Button extends React.Component {
160152
backgroundColor: this.getBackgroundColor(),
161153
...style
162154
}}
163-
ref={this.registerButton}
164155
>
165156
<Typography
166157
type="button"
@@ -183,7 +174,6 @@ Button.defaultProps = {
183174
children: null,
184175
className: null,
185176
component: 'button',
186-
domRef: () => {},
187177
fab: false,
188178
focusRippleDisabled: false,
189179
icon: false,
@@ -197,7 +187,6 @@ Button.propTypes = {
197187
children: PropTypes.node,
198188
className: PropTypes.string,
199189
component: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
200-
domRef: PropTypes.func,
201190
fab: PropTypes.bool,
202191
focusRippleDisabled: PropTypes.bool,
203192
icon: PropTypes.bool,

‎src/Button/Button.spec.js

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -77,23 +77,31 @@ describe('Button', () => {
7777
const wrapper = mount(<Button>Label</Button>);
7878
wrapper.simulate('focus', fakeEventProps);
7979
assert(wrapper.find(`.${Styles.container}`).length === 1);
80-
wrapper.simulate('keydown', {keyCode: keycode('space'), ...fakeEventProps});
81-
assert(wrapper.find(`.${Styles.container}`).length === 2);
80+
setTimeout(() => {
81+
wrapper.simulate('keydown', {keyCode: keycode('space'), ...fakeEventProps});
82+
assert(wrapper.find(`.${Styles.container}`).length === 2);
83+
}, 200);
8284
// sometime later, the space keypress ripple is removed
8385
setTimeout(() => {
84-
assert(wrapper.find(`.${Styles.container}`).length === 1);
86+
const DOM = wrapper.html();
87+
const count = (DOM.match(Styles.container) || []).length;
88+
assert(count === 1);
8589
done();
86-
}, 1000);
90+
}, 700);
8791
});
8892

8993
it('should add and remove ripples through the click interaction lifecycle', (done) => {
9094
const wrapper = mount(<Button>Label</Button>);
91-
wrapper.find('button').node.focus();
95+
wrapper.find('button').instance().focus();
9296
wrapper.simulate('mousedown', fakeEventProps);
93-
wrapper.simulate('mouseup', fakeEventProps);
97+
setTimeout(() => {
98+
wrapper.simulate('mouseup', fakeEventProps);
99+
}, 200);
94100
// sometime later, the mouseup ripple is removed
95101
setTimeout(() => {
96-
assert(wrapper.find(`.${Styles.container}`).length === 0);
102+
const DOM = wrapper.html();
103+
const count = (DOM.match(Styles.container) || []).length;
104+
assert(count === 0);
97105
done();
98106
}, 1000);
99107
});
@@ -104,7 +112,9 @@ describe('Button', () => {
104112
wrapper.simulate('touchend', fakeEventProps);
105113
// sometime later, the mouseup ripple is removed
106114
setTimeout(() => {
107-
assert(wrapper.find(`.${Styles.container}`).length === 0);
115+
const DOM = wrapper.html();
116+
const count = (DOM.match(Styles.container) || []).length;
117+
assert(count === 0);
108118
done();
109119
}, 1000);
110120
});

‎src/Dialog/Dialog.spec.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ describe('Dialog', () => {
6363
wrapper.find(`.${Styles.root}`).simulate('keydown', {keyCode: keycode('esc')});
6464
}, 500);
6565
setTimeout(() => {
66-
assert(wrapper.find(`.${Styles.root}`).length === 0);
66+
assert(wrapper.html() === null);
6767
}, 1000);
6868
}, 2000));
6969

@@ -83,14 +83,14 @@ describe('Dialog', () => {
8383
]}
8484
/>
8585
);
86-
wrapper.find('button').nodes[1].focus();
86+
wrapper.find('button').last().instance().focus();
8787

8888
setTimeout(() => {
8989
wrapper.find(`.${Styles.root}`).simulate('keydown', {keyCode: keycode('tab')});
9090
}, 500);
9191

9292
setTimeout(() => {
93-
assert(document.activeElement === wrapper.find('button').nodes[0]);
93+
assert(document.activeElement === wrapper.find('button').first().instance());
9494
}, 750);
9595
}));
9696

@@ -106,14 +106,14 @@ describe('Dialog', () => {
106106
]}
107107
/>
108108
);
109-
wrapper.find('button').nodes[0].focus();
109+
wrapper.find('button').first().instance().focus();
110110

111111
setTimeout(() => {
112112
wrapper.find(`.${Styles.root}`).simulate('keydown', {keyCode: keycode('tab'), shiftKey: true});
113113
}, 500);
114114

115115
setTimeout(() => {
116-
assert(document.activeElement === wrapper.find('button').nodes[1]);
116+
assert(document.activeElement === wrapper.find('button').last().instance());
117117
}, 750);
118118
}));
119119
});

‎src/Dialog/DialogInner.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ class DialogInner extends React.Component {
8686
ref={c => (this.root = c)}
8787
role="document"
8888
tabIndex={-1}
89-
onKeyDown={__TEST__ && this.onKeyDown}
89+
onKeyDown={__TEST__ ? this.onKeyDown : ontouchmove}
9090
>
9191
<div
9292
onClick={this.props.onClose}

‎src/List/List.spec.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -40,16 +40,16 @@ describe('List', () => {
4040
);
4141
const wrapper = mount(component);
4242

43-
wrapper.find('#first button').node.focus();
43+
wrapper.find('#first button').instance().focus();
4444

4545
setTimeout(() => {
4646
wrapper.find('#first button').simulate('keyDown', {keyCode: keycode('down')});
47-
assert(document.activeElement === wrapper.find('#second button').node);
47+
assert(document.activeElement === wrapper.find('#second button').instance());
4848
}, 250);
4949

5050
setTimeout(() => {
5151
wrapper.find('#second button').simulate('keyDown', {keyCode: keycode('up')});
52-
assert(document.activeElement === wrapper.find('#first button').node);
52+
assert(document.activeElement === wrapper.find('#first button').instance());
5353
}, 750);
5454
}));
5555
});

‎src/List/ListItem.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ class ListItem extends React.Component {
1717
>
1818
{avatar && (
1919
<div className={Styles.avatar}>
20-
{React.cloneElement(avatar, {focusable: false})}
20+
{React.cloneElement(avatar, {focusable: 'false'})}
2121
</div>
2222
)}
2323
<div

‎src/Paper/Paper.js

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,11 @@ import Styles from './Paper.css';
55

66
class Paper extends React.Component {
77
render() {
8-
const {backgroundColor, children, className, domRef, elevation, style, ...other} = this.props;
8+
const {backgroundColor, children, className, elevation, style, ...other} = this.props;
99
return (
1010
<div
1111
{...other}
1212
className={makeClass(className, Styles.root, Styles[`elevation${elevation}`])}
13-
ref={domRef}
1413
style={Object.assign({}, style, {backgroundColor})}
1514
>
1615
{children}
@@ -23,7 +22,6 @@ Paper.defaultProps = {
2322
backgroundColor: '#fff',
2423
children: null,
2524
className: '',
26-
domRef: () => {},
2725
elevation: 1,
2826
style: {}
2927
};
@@ -32,7 +30,6 @@ Paper.propTypes = {
3230
backgroundColor: PropTypes.string,
3331
children: PropTypes.node,
3432
className: PropTypes.string,
35-
domRef: PropTypes.func,
3633
elevation: PropTypes.number,
3734
style: PropTypes.object
3835
};

0 commit comments

Comments
 (0)