Skip to content

Commit a478e8d

Browse files
mzabriskiemzabriskie
committed
[changed] support for React 0.14.0
1 parent d6cbe65 commit a478e8d

File tree

12 files changed

+264
-290
lines changed

12 files changed

+264
-290
lines changed

‎examples/basic/app.js

Lines changed: 78 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -1,118 +1,87 @@
1-
/** @jsx React.DOM */
2-
var React = require('react');
3-
var Tray = require('../../lib/main');
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import Tray from '../../lib/main';
4+
import cx from 'classnames';
45

5-
function cx(map) {
6-
var className = [];
7-
Object.keys(map).forEach(function (key) {
8-
if (map[key]) {
9-
className.push(key);
10-
}
11-
});
12-
return className.join(' ');
13-
}
14-
15-
var App = React.createClass({
16-
getInitialState: function () {
6+
const App = React.createClass({
7+
getInitialState() {
178
return {
189
orientation: 'left',
1910
isTrayOpen: false
2011
};
2112
},
2213

23-
handleNavClick: function (e) {
24-
var type = e.target.getAttribute('data-type');
14+
handleNavClick(e) {
15+
const type = e.target.getAttribute('data-type');
2516
this.openTray(type);
2617
},
2718

28-
handleNavKeyPress: function (e) {
19+
handleNavKeyPress(e) {
2920
if (e.which === 13 || e.which === 32) {
30-
var type = e.target.getAttribute('data-type');
21+
const type = e.target.getAttribute('data-type');
3122
this.openTray(type);
3223
}
3324
},
3425

35-
handleOrientationChange: function (e) {
26+
handleOrientationChange(e) {
3627
this.setState({
3728
orientation: e.target.value
3829
});
3930
},
4031

41-
openTray: function (type) {
42-
this.setState({
43-
type: type,
44-
isTrayOpen: true
45-
});
46-
},
47-
48-
closeTray: function () {
49-
this.setState({
50-
isTrayOpen: false
51-
}, function () {
52-
setTimeout(function () {
53-
this.setState({
54-
type: null
55-
});
56-
}.bind(this), 150);
57-
});
58-
},
59-
60-
renderTrayContent: function () {
32+
renderTrayContent() {
6133
switch (this.state.type) {
62-
case 'foo':
63-
return (
64-
<div>
65-
<h2>Foo</h2>
66-
<div>Content for foo</div>
67-
<nav role="navigation">
68-
<div><a href="javascript://">A</a></div>
69-
<div><a href="javascript://">B</a></div>
70-
<div><a href="javascript://">C</a></div>
71-
</nav>
72-
</div>
73-
);
74-
break;
75-
case 'bar':
76-
return (
77-
<div>
78-
<h2>Bar</h2>
79-
<div>Lorem Ipsum</div>
80-
<nav role="navigation">
81-
<div><a href="javascript://">A</a></div>
82-
<div><a href="javascript://">B</a></div>
83-
<div><a href="javascript://">C</a></div>
84-
</nav>
85-
</div>
86-
);
87-
break;
88-
case 'baz':
89-
return (
90-
<div>
91-
<h2>Baz</h2>
92-
<div>Other stuff here</div>
93-
<nav role="navigation">
94-
<div><a href="javascript://">A</a></div>
95-
<div><a href="javascript://">B</a></div>
96-
<div><a href="javascript://">C</a></div>
97-
</nav>
98-
</div>
99-
);
100-
break;
101-
default:
102-
return (
103-
<h1>You shouldn't see me</h1>
104-
);
34+
case 'foo':
35+
return (
36+
<div>
37+
<h2>Foo</h2>
38+
<div>Content for foo</div>
39+
<nav role="navigation">
40+
<div><a href="#">A</a></div>
41+
<div><a href="#">B</a></div>
42+
<div><a href="#">C</a></div>
43+
</nav>
44+
</div>
45+
);
46+
case 'bar':
47+
return (
48+
<div>
49+
<h2>Bar</h2>
50+
<div>Lorem Ipsum</div>
51+
<nav role="navigation">
52+
<div><a href="#">A</a></div>
53+
<div><a href="#">B</a></div>
54+
<div><a href="#">C</a></div>
55+
</nav>
56+
</div>
57+
);
58+
case 'baz':
59+
return (
60+
<div>
61+
<h2>Baz</h2>
62+
<div>Other stuff here</div>
63+
<nav role="navigation">
64+
<div><a href="#">A</a></div>
65+
<div><a href="#">B</a></div>
66+
<div><a href="#">C</a></div>
67+
</nav>
68+
</div>
69+
);
70+
default:
71+
return (
72+
<h1>You shouldn't see me</h1>
73+
);
10574
}
10675
},
107-
108-
render: function () {
76+
77+
render() {
10978
return (
11079
<div>
11180
<ul role="menu" className={cx({
112-
'navigation': true,
113-
'navigation-left': this.state.orientation === 'left',
114-
'navigation-right': this.state.orientation === 'right'
115-
})}
81+
'navigation': true,
82+
'navigation-left': this.state.orientation === 'left',
83+
'navigation-right': this.state.orientation === 'right'
84+
})}
11685
>
11786
<li role="menuitem"
11887
className={cx({ active: this.state.type === 'foo' })}
@@ -163,7 +132,26 @@ var App = React.createClass({
163132
</div>
164133
</div>
165134
);
135+
},
136+
137+
openTray(type) {
138+
this.setState({
139+
type: type,
140+
isTrayOpen: true
141+
});
142+
},
143+
144+
closeTray() {
145+
this.setState({
146+
isTrayOpen: false
147+
}, () => {
148+
setTimeout(() => {
149+
this.setState({
150+
type: null
151+
});
152+
}, 150);
153+
});
166154
}
167155
});
168156

169-
React.render(<App/>, document.getElementById('example'));
157+
ReactDOM.render(<App/>, document.getElementById('example'));

‎lib/components/Tray.js

Lines changed: 13 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1-
var React = require('react');
2-
var TrayPortal = React.createFactory(require('./TrayPortal'));
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import TrayPortal from './TrayPortal';
4+
const renderSubtreeIntoContainer = ReactDOM.unstable_renderSubtreeIntoContainer;
35

4-
var Tray = React.createClass({
6+
export default React.createClass({
57
displayName: 'Tray',
68

79
propTypes: {
@@ -10,42 +12,36 @@ var Tray = React.createClass({
1012
closeTimeoutMS: React.PropTypes.number
1113
},
1214

13-
getDefaultProps: function () {
15+
getDefaultProps() {
1416
return {
1517
isOpen: false,
1618
closeTimeoutMS: 0
1719
};
1820
},
1921

20-
componentDidMount: function () {
22+
componentDidMount() {
2123
this.node = document.createElement('div');
2224
this.node.className = 'ReactTrayPortal';
2325
document.body.appendChild(this.node);
2426
this.renderPortal(this.props);
2527
},
2628

27-
componentWillReceiveProps: function (props) {
29+
componentWillReceiveProps(props) {
2830
this.renderPortal(props);
2931
},
3032

31-
componentWillUnmount: function () {
32-
React.unmountComponentAtNode(this.node);
33+
componentWillUnmount() {
34+
ReactDOM.unmountComponentAtNode(this.node);
3335
document.body.removeChild(this.node);
3436
},
3537

36-
renderPortal: function (props) {
38+
renderPortal(props) {
3739
delete props.ref;
3840

39-
if (this.portal) {
40-
this.portal.setProps(props);
41-
} else {
42-
this.portal = React.render(TrayPortal(props), this.node);
43-
}
41+
renderSubtreeIntoContainer(this, <TrayPortal {...props}/>, this.node);
4442
},
4543

46-
render: function () {
44+
render() {
4745
return null;
4846
}
4947
});
50-
51-
module.exports = Tray;

0 commit comments

Comments
 (0)