Skip to content

Commit b50c77e

Browse files
danezdanez
committed
Fix examples
1 parent 88721f8 commit b50c77e

File tree

13 files changed

+832
-221
lines changed

13 files changed

+832
-221
lines changed

‎examples/basic/app.js

Lines changed: 109 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -1,91 +1,114 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom';
33
import { Tab, Tabs, TabList, TabPanel } from '../../src/main';
4-
5-
const App = React.createClass({
6-
render() {
7-
return (
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>
14-
15-
<Tabs>
16-
<TabList>
17-
<Tab>React</Tab>
18-
<Tab>Ember</Tab>
19-
<Tab>Angular</Tab>
20-
21-
<span>+</span>
22-
</TabList>
23-
24-
<TabPanel>
25-
<h2>Just The UI</h2>
26-
<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>
27-
28-
<h2>Virtual DOM</h2>
29-
<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>
30-
31-
<h2>Data Flow</h2>
32-
<p>React implements one-way reactive data flow which reduces boilerplate and is easier to reason about than traditional data binding.</p>
33-
34-
<p>Source: <a href="http://facebook.github.io/react/" target="_blank">React</a></p>
35-
</TabPanel>
36-
<TabPanel>
37-
<h2>Handlebars</h2>
38-
<p>Write dramatically less code with Ember's Handlebars integrated templates that update automatically when the underlying data changes.</p>
39-
40-
<h2>Architecture</h2>
41-
<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>
42-
43-
<h2>Productivity</h2>
44-
<p>Ember.js is built for productivity. Designed with developer ergonomics in mind, its friendly APIs help you get your job done—fast.</p>
45-
46-
<p>Source: <a href="http://emberjs.com/" target="_blank">Ember</a></p>
47-
</TabPanel>
48-
<TabPanel>
49-
<h2>Why AngularJS?</h2>
50-
<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>
51-
52-
<h2>Alternatives</h2>
53-
<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>
54-
55-
<h2>Extensibility</h2>
56-
<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>
57-
58-
<p>Source: <a href="https://angularjs.org/" target="_blank">Angular</a></p>
59-
</TabPanel>
60-
</Tabs>
61-
62-
<Tabs>
63-
<TabList>
64-
<Tab>Mario</Tab>
65-
<Tab disabled>Luigi</Tab>
66-
<Tab>Peach</Tab>
67-
<Tab>Yoshi</Tab>
68-
</TabList>
69-
70-
<TabPanel>
71-
<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>
72-
<p>Source: <a href="http://en.wikipedia.org/wiki/Mario" target="_blank">Wikipedia</a></p>
73-
</TabPanel>
74-
<TabPanel>
75-
<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>
76-
<p>Source: <a href="http://en.wikipedia.org/wiki/Luigi" target="_blank">Wikipedia</a></p>
77-
</TabPanel>
78-
<TabPanel>
79-
<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>
80-
</TabPanel>
81-
<TabPanel>
82-
<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>
83-
<p>Source: <a href="http://en.wikipedia.org/wiki/Yoshi" target="_blank">Wikipedia</a></p>
84-
</TabPanel>
85-
</Tabs>
86-
</div>
87-
);
88-
},
89-
});
4+
import '../../style/react-tabs.css';
5+
6+
const App = () => {
7+
return (
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>
14+
15+
<Tabs>
16+
<TabList>
17+
<Tab>React</Tab>
18+
<Tab>Ember</Tab>
19+
<Tab>Angular</Tab>
20+
21+
<span>+</span>
22+
</TabList>
23+
24+
<TabPanel>
25+
<h2>Just The UI</h2>
26+
<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>
27+
28+
<h2>Virtual DOM</h2>
29+
<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>
30+
31+
<h2>Data Flow</h2>
32+
<p>React implements one-way reactive data flow which reduces boilerplate and is easier to reason about than traditional data binding.</p>
33+
34+
<p>Source: <a href="http://facebook.github.io/react/" target="_blank">React</a></p>
35+
</TabPanel>
36+
<TabPanel>
37+
<h2>Handlebars</h2>
38+
<p>Write dramatically less code with Ember's Handlebars integrated templates that update automatically when the underlying data changes.</p>
39+
40+
<h2>Architecture</h2>
41+
<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>
42+
43+
<h2>Productivity</h2>
44+
<p>Ember.js is built for productivity. Designed with developer ergonomics in mind, its friendly APIs help you get your job done—fast.</p>
45+
46+
<p>Source: <a href="http://emberjs.com/" target="_blank">Ember</a></p>
47+
</TabPanel>
48+
<TabPanel>
49+
<h2>Why AngularJS?</h2>
50+
<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>
51+
52+
<h2>Alternatives</h2>
53+
<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>
54+
55+
<h2>Extensibility</h2>
56+
<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>
57+
58+
<p>Source: <a href="https://angularjs.org/" target="_blank">Angular</a></p>
59+
</TabPanel>
60+
</Tabs>
61+
62+
<Tabs>
63+
<TabList>
64+
<Tab>Mario</Tab>
65+
<Tab disabled>Luigi</Tab>
66+
<Tab>Peach</Tab>
67+
<Tab>Yoshi</Tab>
68+
</TabList>
69+
70+
<TabPanel>
71+
<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>
72+
<p>Source: <a href="http://en.wikipedia.org/wiki/Mario" target="_blank">Wikipedia</a></p>
73+
</TabPanel>
74+
<TabPanel>
75+
<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>
76+
<p>Source: <a href="http://en.wikipedia.org/wiki/Luigi" target="_blank">Wikipedia</a></p>
77+
</TabPanel>
78+
<TabPanel>
79+
<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>
80+
</TabPanel>
81+
<TabPanel>
82+
<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>
83+
<p>Source: <a href="http://en.wikipedia.org/wiki/Yoshi" target="_blank">Wikipedia</a></p>
84+
</TabPanel>
85+
</Tabs>
86+
87+
<Tabs>
88+
<TabList>
89+
<small style={{ padding: '0 10px' }}>Tabs:</small>
90+
<Tab>Tab A</Tab>
91+
<Tab>Tab B</Tab>
92+
<code style={{ padding: '0 10px' }}>(separator)</code>
93+
<Tab>Tab C</Tab>
94+
<span style={{ padding: '0 10px' }}><small>End of tabs</small></span>
95+
</TabList>
96+
97+
<TabPanel>
98+
<h2>This is Tab A</h2>
99+
<p>You can put arbitrary elements inside <code>{'<TabList>'}</code>.</p>
100+
</TabPanel>
101+
<TabPanel>
102+
<h2>This is Tab B</h2>
103+
<p>Navigating through the tabs with the keyboard will skip these arbitrary elements.</p>
104+
</TabPanel>
105+
<TabPanel>
106+
<h2>This is Tab C</h2>
107+
<p>Just mind that the output might be invalid HTML (<code>{'<div>'}</code> inside a <code>{'<ul>'}</code> for instance).</p>
108+
</TabPanel>
109+
</Tabs>
110+
</div>
111+
);
112+
};
90113

91114
ReactDOM.render(<App />, document.getElementById('example'));

‎examples/basic/index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,5 +14,5 @@ <h2>React tabs component</h2>
1414
</header>
1515
<div id="example" class="padbox"></div>
1616
<a href="https://github.com/reactjs/react-tabs" target="_blank"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/e7bbb0521b397edbd5fe43e7f760759336b5e05f/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677265656e5f3030373230302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png"></a>
17-
<script src="../__build__/shared.js"></script>
18-
<script src="../__build__/basic.js"></script>
17+
<script src="/__build__/shared.js"></script>
18+
<script src="/__build__/basic.js"></script>

‎examples/conditional/app.js

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,24 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom';
33
import { Tab, Tabs, TabList, TabPanel } from '../../src/main';
4+
import '../../style/react-tabs.css';
45

5-
const App = React.createClass({
6-
getInitialState() {
7-
return {
6+
class App extends React.Component {
7+
constructor(props) {
8+
super(props);
9+
10+
this.state = {
811
showA: true,
912
showB: true,
1013
showC: true,
1114
};
12-
},
15+
}
1316

14-
handleCheckClicked(e) {
17+
handleCheckClicked = (e) => {
1518
this.setState({
1619
[e.target.name]: e.target.checked,
1720
});
18-
},
21+
}
1922

2023
render() {
2124
return (
@@ -46,8 +49,8 @@ const App = React.createClass({
4649
</Tabs>
4750
</div>
4851
);
49-
},
50-
});
52+
}
53+
}
5154

5255
ReactDOM.render(<App />, document.getElementById('example'));
5356

‎examples/conditional/index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,6 @@
33
<title>React Tabs</title>
44
<body>
55
<div id="example"></div>
6-
<script src="../__build__/shared.js"></script>
7-
<script src="../__build__/conditional.js"></script>
6+
<script src="/__build__/shared.js"></script>
7+
<script src="/__build__/conditional.js"></script>
88

‎examples/dyno/app.js

Lines changed: 18 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,15 @@ import React from 'react';
22
import ReactDOM from 'react-dom';
33
import Modal from 'react-modal';
44
import { Tab, Tabs, TabList, TabPanel } from '../../src/main';
5+
import '../../style/react-tabs.css';
56

67
Modal.setAppElement(document.getElementById('example'));
78

8-
const App = React.createClass({
9-
getInitialState() {
10-
return {
9+
class App extends React.Component {
10+
constructor(props) {
11+
super(props);
12+
13+
this.state = {
1114
isModalOpen: false,
1215
selectedIndex: -1,
1316
tabs: [
@@ -17,21 +20,21 @@ const App = React.createClass({
1720
{ label: 'Zap', content: 'This is zap' },
1821
],
1922
};
20-
},
23+
}
2124

22-
openModal() {
25+
openModal = () => {
2326
this.setState({
2427
isModalOpen: true,
2528
});
26-
},
29+
}
2730

28-
closeModal() {
31+
closeModal = () => {
2932
this.setState({
3033
isModalOpen: false,
3134
});
32-
},
35+
}
3336

34-
addTab() {
37+
addTab = () => {
3538
const label = this.refs.label.value;
3639
const content = this.refs.content.value;
3740

@@ -43,14 +46,14 @@ const App = React.createClass({
4346
selectedIndex: this.state.tabs.length,
4447
});
4548
this.closeModal();
46-
},
49+
}
4750

48-
removeTab(index) {
51+
removeTab = (index) => {
4952
this.setState({
5053
tabs: this.state.tabs.filter((tab, i) => i !== index),
5154
selectedIndex: this.state.selectedIndex - 1,
5255
});
53-
},
56+
}
5457

5558
render() {
5659
return (
@@ -75,6 +78,7 @@ const App = React.createClass({
7578
isOpen={this.state.isModalOpen}
7679
onRequestClose={this.closeModal}
7780
style={{ width: 400, height: 350, margin: '0 auto' }}
81+
contentLabel="tabs"
7882
>
7983
<h2>Add a Tab</h2>
8084
<label htmlFor="label">Label:</label><br />
@@ -86,7 +90,7 @@ const App = React.createClass({
8690
</Modal>
8791
</div>
8892
);
89-
},
90-
});
93+
}
94+
}
9195

9296
ReactDOM.render(<App />, document.getElementById('example'));

‎examples/dyno/index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,5 @@
33
<title>React Tabs</title>
44
<body>
55
<div id="example"></div>
6-
<script src="../__build__/shared.js"></script>
7-
<script src="../__build__/dyno.js"></script>
6+
<script src="/__build__/shared.js"></script>
7+
<script src="/__build__/dyno.js"></script>

‎examples/focus/app.js

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,19 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom';
33
import { Tab, Tabs, TabList, TabPanel } from '../../src/main';
4+
import '../../style/react-tabs.css';
45

5-
const App = React.createClass({
6-
getInitialState() {
7-
return { inputValue: '' };
8-
},
6+
class App extends React.Component {
7+
constructor(props) {
8+
super(props);
9+
10+
this.state = { inputValue: '' };
11+
}
912

1013
handleInputChange(e) {
1114
this.forceUpdate();
1215
this.setState({ inputValue: e.target.value });
13-
},
16+
}
1417

1518
render() {
1619
return (
@@ -33,8 +36,8 @@ const App = React.createClass({
3336
</TabPanel>
3437
</Tabs>
3538
</div>
36-
);
37-
},
38-
});
39+
);
40+
}
41+
}
3942

4043
ReactDOM.render(<App />, document.getElementById('example'));

‎examples/focus/index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,6 @@
33
<title>React Tabs</title>
44
<body>
55
<div id="example"></div>
6-
<script src="../__build__/shared.js"></script>
7-
<script src="../__build__/focus.js"></script>
6+
<script src="/__build__/shared.js"></script>
7+
<script src="/__build__/focus.js"></script>
88

0 commit comments

Comments
 (0)