Skip to content

Commit 4285ec5

Browse files
existentialismexistentialism
committed
Upgrade to react 0.14
1 parent bd1ef91 commit 4285ec5

File tree

8 files changed

+145
-140
lines changed

8 files changed

+145
-140
lines changed

‎README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@ http://rackt.github.io/react-tabs/example/
1515
## Example
1616

1717
```js
18-
/** @jsx React.DOM */
1918
var React = require('react');
19+
var ReactDOM = require('react-dom');
2020
var ReactTabs = require('react-tabs');
2121
var Tab = ReactTabs.Tab;
2222
var Tabs = ReactTabs.Tabs;
@@ -99,7 +99,7 @@ var App = React.createClass({
9999
}
100100
});
101101

102-
React.render(<App/>, document.getElementById('container'));
102+
ReactDOM.render(<App/>, document.getElementById('container'));
103103

104104
```
105105

‎examples/basic/app.js

Lines changed: 64 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,89 +1,89 @@
11
import React from 'react';
2+
import ReactDOM from 'react-dom';
23
import { Tab, Tabs, TabList, TabPanel } from '../../lib/main';
34

45
const App = React.createClass({
56
render() {
67
return (
7-
<div>
8-
<p>
9-
<em>Hint:</em>
10-
<ul>
11-
<li>use keyboard tab to focus tabs</li>
12-
<li>use arrow keys to navigate focused tabs</li>
13-
</ul>
14-
</p>
15-
<Tabs>
16-
<TabList>
17-
<Tab>React</Tab>
18-
<Tab>Ember</Tab>
19-
<Tab>Angular</Tab>
20-
</TabList>
8+
<div>
9+
<p><em>Hint:</em></p>
10+
<ul>
11+
<li>use keyboard tab to focus tabs</li>
12+
<li>use arrow keys to navigate focused tabs</li>
13+
</ul>
2114

22-
<TabPanel>
23-
<h2>Just The UI</h2>
24-
<p>Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.</p>
15+
<Tabs>
16+
<TabList>
17+
<Tab>React</Tab>
18+
<Tab>Ember</Tab>
19+
<Tab>Angular</Tab>
20+
</TabList>
2521

26-
<h2>Virtual DOM</h2>
27-
<p>React uses a virtual DOM diff implementation for ultra-high performance. It can also render on the server using Node.js — no heavy browser DOM required.</p>
22+
<TabPanel>
23+
<h2>Just The UI</h2>
24+
<p>Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.</p>
2825

29-
<h2>Data Flow</h2>
30-
<p>React implements one-way reactive data flow which reduces boilerplate and is easier to reason about than traditional data binding.</p>
26+
<h2>Virtual DOM</h2>
27+
<p>React uses a virtual DOM diff implementation for ultra-high performance. It can also render on the server using Node.js — no heavy browser DOM required.</p>
3128

32-
<p>Source: <a href="http://facebook.github.io/react/" target="_blank">React</a></p>
33-
</TabPanel>
34-
<TabPanel>
35-
<h2>Handlebars</h2>
36-
<p>Write dramatically less code with Ember's Handlebars integrated templates that update automatically when the underlying data changes.</p>
29+
<h2>Data Flow</h2>
30+
<p>React implements one-way reactive data flow which reduces boilerplate and is easier to reason about than traditional data binding.</p>
3731

38-
<h2>Architecture</h2>
39-
<p>Don't waste time making trivial choices. Ember.js incorporates common idioms so you can focus on what makes your app special, not reinventing the wheel.</p>
32+
<p>Source: <a href="http://facebook.github.io/react/" target="_blank">React</a></p>
33+
</TabPanel>
34+
<TabPanel>
35+
<h2>Handlebars</h2>
36+
<p>Write dramatically less code with Ember's Handlebars integrated templates that update automatically when the underlying data changes.</p>
4037

41-
<h2>Productivity</h2>
42-
<p>Ember.js is built for productivity. Designed with developer ergonomics in mind, its friendly APIs help you get your job done—fast.</p>
38+
<h2>Architecture</h2>
39+
<p>Don't waste time making trivial choices. Ember.js incorporates common idioms so you can focus on what makes your app special, not reinventing the wheel.</p>
4340

44-
<p>Source: <a href="http://emberjs.com/" target="_blank">Ember</a></p>
45-
</TabPanel>
46-
<TabPanel>
47-
<h2>Why AngularJS?</h2>
48-
<p>HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.</p>
41+
<h2>Productivity</h2>
42+
<p>Ember.js is built for productivity. Designed with developer ergonomics in mind, its friendly APIs help you get your job done—fast.</p>
4943

50-
<h2>Alternatives</h2>
51-
<p>Other frameworks deal with HTML’s shortcomings by either abstracting away HTML, CSS, and/or JavaScript or by providing an imperative way for manipulating the DOM. Neither of these address the root problem that HTML was not designed for dynamic views.</p>
44+
<p>Source: <a href="http://emberjs.com/" target="_blank">Ember</a></p>
45+
</TabPanel>
46+
<TabPanel>
47+
<h2>Why AngularJS?</h2>
48+
<p>HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.</p>
49+
50+
<h2>Alternatives</h2>
51+
<p>Other frameworks deal with HTML’s shortcomings by either abstracting away HTML, CSS, and/or JavaScript or by providing an imperative way for manipulating the DOM. Neither of these address the root problem that HTML was not designed for dynamic views.</p>
5252

53-
<h2>Extensibility</h2>
54-
<p>AngularJS is a toolset for building the framework most suited to your application development. It is fully extensible and works well with other libraries. Every feature can be modified or replaced to suit your unique development workflow and feature needs. Read on to find out how.</p>
53+
<h2>Extensibility</h2>
54+
<p>AngularJS is a toolset for building the framework most suited to your application development. It is fully extensible and works well with other libraries. Every feature can be modified or replaced to suit your unique development workflow and feature needs. Read on to find out how.</p>
5555

56-
<p>Source: <a href="https://angularjs.org/" target="_blank">Angular</a></p>
57-
</TabPanel>
58-
</Tabs>
56+
<p>Source: <a href="https://angularjs.org/" target="_blank">Angular</a></p>
57+
</TabPanel>
58+
</Tabs>
5959

60-
<Tabs>
61-
<TabList>
62-
<Tab>Mario</Tab>
63-
<Tab disabled={true}>Luigi</Tab>
60+
<Tabs>
61+
<TabList>
62+
<Tab>Mario</Tab>
63+
<Tab disabled={true}>Luigi</Tab>
6464
<Tab>Peach</Tab>
65-
<Tab>Yoshi</Tab>
66-
</TabList>
65+
<Tab>Yoshi</Tab>
66+
</TabList>
6767

68-
<TabPanel>
69-
<p>Mario (Japanese: マリオ Hepburn: Mario?) is a fictional character in the Mario video game franchise by Nintendo, created by Japanese video game designer Shigeru Miyamoto. Serving as Nintendo's mascot and the eponymous protagonist of the series, he has a younger brother Luigi. Mario has appeared in over 200 video games since his creation. Depicted as a short, pudgy, Italian plumber who resides in the Mushroom Kingdom, he repeatedly rescues Princess Peach from the Koopa villain Bowser and stops his numerous plans to destroy him and take over the kingdom.</p>
70-
<p>Source: <a href="http://en.wikipedia.org/wiki/Mario" target="_blank">Wikipedia</a></p>
71-
</TabPanel>
72-
<TabPanel>
73-
<p>Luigi (Japanese: ルイージ Hepburn: Ruīji?) is a fictional character featured in video games and related media released by Nintendo. Created by prominent game designer Shigeru Miyamoto, Luigi is portrayed as the slightly younger but taller fraternal twin brother of Nintendo's mascot Mario, and appears in many games throughout the Mario franchise, frequently as a sidekick to his brother.</p>
74-
<p>Source: <a href="http://en.wikipedia.org/wiki/Luigi" target="_blank">Wikipedia</a></p>
75-
</TabPanel>
68+
<TabPanel>
69+
<p>Mario (Japanese: マリオ Hepburn: Mario?) is a fictional character in the Mario video game franchise by Nintendo, created by Japanese video game designer Shigeru Miyamoto. Serving as Nintendo's mascot and the eponymous protagonist of the series, he has a younger brother Luigi. Mario has appeared in over 200 video games since his creation. Depicted as a short, pudgy, Italian plumber who resides in the Mushroom Kingdom, he repeatedly rescues Princess Peach from the Koopa villain Bowser and stops his numerous plans to destroy him and take over the kingdom.</p>
70+
<p>Source: <a href="http://en.wikipedia.org/wiki/Mario" target="_blank">Wikipedia</a></p>
71+
</TabPanel>
72+
<TabPanel>
73+
<p>Luigi (Japanese: ルイージ Hepburn: Ruīji?) is a fictional character featured in video games and related media released by Nintendo. Created by prominent game designer Shigeru Miyamoto, Luigi is portrayed as the slightly younger but taller fraternal twin brother of Nintendo's mascot Mario, and appears in many games throughout the Mario franchise, frequently as a sidekick to his brother.</p>
74+
<p>Source: <a href="http://en.wikipedia.org/wiki/Luigi" target="_blank">Wikipedia</a></p>
75+
</TabPanel>
7676
<TabPanel>
7777
<p>Princess Peach (Japanese: ピーチ姫 Hepburn: Pīchi-hime?) is a character in Nintendo's Mario franchise. Originally created by Shigeru Miyamoto, Peach is the princess of the fictional Mushroom Kingdom, which is constantly under attack by Bowser. She often plays the damsel in distress role within the series and is the lead female.[1] She is often portrayed as Mario's love interest and has appeared in nearly all the Mario games to date with the notable exception of Super Princess Peach, where she is the main playable character.</p>
7878
</TabPanel>
79-
<TabPanel>
80-
<p>Yoshi (ヨッシー Yosshī?) /ˈjoʊʃi/ or /ˈjɒʃi/, once romanized as Yossy, is a fictional anthropomorphic dinosaur (referred to as a dragon at times) who appears in video games published by Nintendo. He debuted in Super Mario World (1990) on the Super Nintendo Entertainment System as Mario and Luigi's sidekick (a role he has often reprised), and he later established his own series with several platform and puzzle games, including Super Mario World 2: Yoshi's Island. He has also appeared in many of the spin-off Mario games including the Mario Party, the Mario Kart, and the Super Smash Bros. series, as well as in other various Mario sports titles. Yoshi also appears in New Super Mario Bros. Wii (2009) as the characters' companion and steed, similar to his original debut role in Super Mario World. Yoshi belongs to the species of the same name which comes in various colors, with green being the most common.</p>
81-
<p>Source: <a href="http://en.wikipedia.org/wiki/Yoshi" target="_blank">Wikipedia</a></p>
82-
</TabPanel>
83-
</Tabs>
84-
</div>
85-
);
79+
<TabPanel>
80+
<p>Yoshi (ヨッシー Yosshī?) /ˈjoʊʃi/ or /ˈjɒʃi/, once romanized as Yossy, is a fictional anthropomorphic dinosaur (referred to as a dragon at times) who appears in video games published by Nintendo. He debuted in Super Mario World (1990) on the Super Nintendo Entertainment System as Mario and Luigi's sidekick (a role he has often reprised), and he later established his own series with several platform and puzzle games, including Super Mario World 2: Yoshi's Island. He has also appeared in many of the spin-off Mario games including the Mario Party, the Mario Kart, and the Super Smash Bros. series, as well as in other various Mario sports titles. Yoshi also appears in New Super Mario Bros. Wii (2009) as the characters' companion and steed, similar to his original debut role in Super Mario World. Yoshi belongs to the species of the same name which comes in various colors, with green being the most common.</p>
81+
<p>Source: <a href="http://en.wikipedia.org/wiki/Yoshi" target="_blank">Wikipedia</a></p>
82+
</TabPanel>
83+
</Tabs>
84+
</div>
85+
);
8686
}
8787
});
8888

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

‎examples/dyno/app.js

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React from 'react';
2+
import ReactDOM from 'react-dom';
23
import Modal from 'react-modal';
34
import { Tab, Tabs, TabList, TabPanel } from '../../lib/main';
45

@@ -20,12 +21,12 @@ const App = React.createClass({
2021

2122
render() {
2223
return (
23-
<div style={{padding: 50}}>
24+
<div style={{padding: 50}}>
2425
<p>
2526
<button onClick={this.openModal}>+ Add</button>
2627
</p>
2728
<Tabs>
28-
<TabList>
29+
<TabList>
2930
{this.state.tabs.map((tab, i) => {
3031
return (
3132
<Tab key={i}>
@@ -37,7 +38,7 @@ const App = React.createClass({
3738
{this.state.tabs.map((tab, i) => {
3839
return <TabPanel key={i}>{tab.content}</TabPanel>;
3940
})}
40-
</Tabs>
41+
</Tabs>
4142
<Modal
4243
isOpen={this.state.isModalOpen}
4344
onRequestClose={this.closeModal}
@@ -51,8 +52,8 @@ const App = React.createClass({
5152
<button onClick={this.addTab}>OK</button>{' '}
5253
<button onClick={this.closeModal}>Cancel</button>
5354
</Modal>
54-
</div>
55-
);
55+
</div>
56+
);
5657
},
5758

5859
openModal() {
@@ -68,8 +69,8 @@ const App = React.createClass({
6869
},
6970

7071
addTab() {
71-
const label = this.refs.label.getDOMNode().value;
72-
const content = this.refs.content.getDOMNode().value;
72+
const label = this.refs.label.value;
73+
const content = this.refs.content.value;
7374

7475
this.state.tabs.push({
7576
label: label,
@@ -84,6 +85,4 @@ const App = React.createClass({
8485
}
8586
});
8687

87-
React.render(<App/>, document.getElementById('example'));
88-
89-
88+
ReactDOM.render(<App/>, document.getElementById('example'));

‎examples/focus/app.js

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React from 'react';
2+
import ReactDOM from 'react-dom';
23
import { Tab, Tabs, TabList, TabPanel } from '../../lib/main';
34

45
const App = React.createClass({
@@ -8,27 +9,26 @@ const App = React.createClass({
89

910
render() {
1011
return (
11-
<div style={{padding: 50}}>
12+
<div style={{padding: 50}}>
1213
<Tabs>
13-
<TabList>
14-
<Tab>First</Tab>
15-
<Tab>Second</Tab>
16-
</TabList>
17-
<TabPanel>
14+
<TabList>
15+
<Tab>First</Tab>
16+
<Tab>Second</Tab>
17+
</TabList>
18+
<TabPanel>
1819
<p>Tab to focus `First`, then arrow to select `Second`.</p>
19-
</TabPanel>
20-
<TabPanel>
20+
</TabPanel>
21+
<TabPanel>
2122
<p>Tab to focus input, then begin typing. Focus should stay.</p>
2223
<input
2324
type="text"
2425
onChange={this.handleInputChange}
2526
/>
26-
</TabPanel>
27-
</Tabs>
28-
</div>
29-
);
27+
</TabPanel>
28+
</Tabs>
29+
</div>
30+
);
3031
}
3132
});
3233

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

‎lib/components/Tab.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React, {PropTypes} from 'react';
2+
import { findDOMNode } from 'react-dom';
23

34
function syncNodeAttributes(node, props) {
45
if (props.selected) {
@@ -38,11 +39,11 @@ module.exports = React.createClass({
3839
},
3940

4041
componentDidMount() {
41-
syncNodeAttributes(this.getDOMNode(), this.props);
42+
syncNodeAttributes(findDOMNode(this), this.props);
4243
},
4344

4445
componentDidUpdate() {
45-
syncNodeAttributes(this.getDOMNode(), this.props);
46+
syncNodeAttributes(findDOMNode(this), this.props);
4647
},
4748

4849
render() {

‎lib/components/Tabs.js

Lines changed: 18 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import React, {PropTypes} from 'react/addons';
1+
import React, {PropTypes, cloneElement} from 'react';
2+
import { findDOMNode } from 'react-dom';
23
import jss from 'js-stylesheet';
34
import uuid from '../helpers/uuid';
45
import childrenPropType from '../helpers/childrenPropType';
@@ -119,15 +120,15 @@ module.exports = React.createClass({
119120
// Look for non-disabled tab from index to the last tab on the right
120121
for (let i = index + 1; i < count; i++) {
121122
const tab = this.getTab(i);
122-
if (!isTabDisabled(tab.getDOMNode())) {
123+
if (!isTabDisabled(findDOMNode(tab))) {
123124
return i;
124125
}
125126
}
126127

127128
// If no tab found, continue searching from first on left to index
128129
for (let i = 0; i < index; i++) {
129130
const tab = this.getTab(i);
130-
if (!isTabDisabled(tab.getDOMNode())) {
131+
if (!isTabDisabled(findDOMNode(tab))) {
131132
return i;
132133
}
133134
}
@@ -142,7 +143,7 @@ module.exports = React.createClass({
142143
// Look for non-disabled tab from index to first tab on the left
143144
while (i--) {
144145
const tab = this.getTab(i);
145-
if (!isTabDisabled(tab.getDOMNode())) {
146+
if (!isTabDisabled(findDOMNode(tab))) {
146147
return i;
147148
}
148149
}
@@ -151,7 +152,7 @@ module.exports = React.createClass({
151152
i = this.getTabsCount();
152153
while (i-- > index) {
153154
const tab = this.getTab(i);
154-
if (!isTabDisabled(tab.getDOMNode())) {
155+
if (!isTabDisabled(findDOMNode(tab))) {
155156
return i;
156157
}
157158
}
@@ -206,7 +207,7 @@ module.exports = React.createClass({
206207
// Clone TabList and Tab components to have refs
207208
if (count++ === 0) {
208209
// TODO try setting the uuid in the "constructor" for `Tab`/`TabPanel`
209-
result = React.addons.cloneWithProps(child, {
210+
result = cloneElement(child, {
210211
ref: 'tablist',
211212
children: React.Children.map(child.props.children, (tab) => {
212213
const ref = 'tabs-' + index;
@@ -217,12 +218,12 @@ module.exports = React.createClass({
217218

218219
index++;
219220

220-
return React.addons.cloneWithProps(tab, {
221-
ref: ref,
222-
id: id,
223-
panelId: panelId,
224-
selected: selected,
225-
focus: focus
221+
return cloneElement(tab, {
222+
ref,
223+
id,
224+
panelId,
225+
selected,
226+
focus
226227
});
227228
})
228229
});
@@ -239,11 +240,11 @@ module.exports = React.createClass({
239240

240241
index++;
241242

242-
result = React.addons.cloneWithProps(child, {
243-
ref: ref,
244-
id: id,
245-
tabId: tabId,
246-
selected: selected
243+
result = cloneElement(child, {
244+
ref,
245+
id,
246+
tabId,
247+
selected
247248
});
248249
}
249250

0 commit comments

Comments
 (0)