Skip to content

Commit acda6ff

Browse files
pedronauckpedronauck
committed
add onMount api method
1 parent 24d7437 commit acda6ff

9 files changed

+70
-31
lines changed

‎README.md

+9-3
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ Installing this component is very easy and it has just one dependency: [React](h
2424
$ bower install --save react-simpletabs
2525
```
2626

27-
- Or if you want to [download the lastest release](https://github.com/pedronauck/react-simpletabs/archive/v0.3.1.zip) and put in your website, it will work too!
27+
- Or if you want to [download the lastest release](https://github.com/pedronauck/react-simpletabs/archive/v0.4.1.zip) and put in your website, it will work too!
2828

2929
**NOTICE:** You need just one thing to make the component work. Put the [base component style](./dist/react-simpletabs.css) at the `<header>` tag. If you don't wanna use the `.css` extension, you can get the `.styl` or `.scss` extension at the folder `./lib`.
3030

@@ -120,6 +120,9 @@ And if you want to do something before or after the changed tab, you can do use
120120

121121
```javascript
122122
...
123+
handleMount: function(selectedIndex, $selectedPanel, $selectedTabMenu) {
124+
console.log('on mount, showing tab ' + selectedIndex);
125+
},
123126
handleBefore: function(selectedIndex, $selectedPanel, $selectedTabMenu) {
124127
console.log('Something before tab ' + selectedIndex);
125128
},
@@ -131,7 +134,8 @@ And if you want to do something before or after the changed tab, you can do use
131134
<Tabs
132135
tabActive={2}
133136
onBeforeChange={this.handleBefore}
134-
onAfterChange={this.handleAfter}>
137+
onAfterChange={this.handleAfter}
138+
onMount={this.handleMount}>
135139
...
136140
</Tabs>
137141
);
@@ -148,8 +152,10 @@ For more details, check out the API below.
148152
Property | Type | Default | Required | Description
149153
-------- | ---- | ------- | -------- |-----------
150154
tabActive | `Number` | 1 | no | The default tab active
155+
onMount | `Function` | n/a | no | The function that will be executed when the component is mounted
151156
onBeforeChange | `Function` | n/a | no | The function that will be executed **before** the state of the component change
152-
onAfterChange | `Function` | n/a | no | The function that will be executed **after** the state of the component change
157+
onAfterChange | `Function` | n/a | no | The function that will be executed **
158+
after** the state of the component change
153159

154160
`<Tab.Panel>` component:
155161

‎bower.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-simpletabs",
3-
"version": "0.3.1",
3+
"version": "0.4.1",
44
"homepage": "https://github.com/pedronauck/react-simpletabs",
55
"authors": [
66
"Pedro Nauck <[email protected]> (https://github.com/pedronauck)"

‎dist/react-simpletabs.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/*!
22
*
33
* React Simpletabs - Just a simple tabs component built with React
4-
* @version v0.3.0
4+
* @version v0.3.1
55
* @link https://github.com/pedronauck/react-simpletabs
66
* @license MIT
77
* @author Pedro Nauck (https://github.com/pedronauck)

‎dist/react-simpletabs.js

+24-11
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/*!
22
*
33
* React Simpletabs - Just a simple tabs component built with React
4-
* @version v0.3.0
4+
* @version v0.3.1
55
* @link https://github.com/pedronauck/react-simpletabs
66
* @license MIT
77
* @author Pedro Nauck (https://github.com/pedronauck)
@@ -77,6 +77,7 @@ return /******/ (function(modules) { // webpackBootstrap
7777
displayName: 'Tabs',
7878
propTypes: {
7979
tabActive: React.PropTypes.number,
80+
onMount: React.PropTypes.func,
8081
onBeforeChange: React.PropTypes.func,
8182
onAfterChange: React.PropTypes.func,
8283
children: React.PropTypes.oneOfType([
@@ -88,7 +89,18 @@ return /******/ (function(modules) { // webpackBootstrap
8889
return { tabActive: 1 };
8990
},
9091
getInitialState:function () {
91-
return { tabActive: this.props.tabActive };
92+
return {
93+
tabActive: this.props.tabActive
94+
};
95+
},
96+
componentDidMount:function() {
97+
var index = this.state.tabActive;
98+
var $selectedPanel = this.refs['tab-panel'];
99+
var $selectedMenu = this.refs[("tab-menu-" + index)];
100+
101+
if (this.props.onMount) {
102+
this.props.onMount(index, $selectedPanel, $selectedMenu);
103+
}
92104
},
93105
render:function () {
94106
return (
@@ -98,20 +110,19 @@ return /******/ (function(modules) { // webpackBootstrap
98110
)
99111
);
100112
},
101-
setActive:function (e) {
102-
var id = parseInt(e.target.getAttribute('data-tab-id'));
113+
setActive:function(index, e) {
103114
var onAfterChange = this.props.onAfterChange;
104115
var onBeforeChange = this.props.onBeforeChange;
105-
var $selectedPanel = this.refs[("tab-panel-" + id)];
106-
var $selectedTabMenu = this.refs[("tab-menu-" + id)];
116+
var $selectedPanel = this.refs['tab-panel'];
117+
var $selectedTabMenu = this.refs[("tab-menu-" + index)];
107118

108119
if (onBeforeChange) {
109-
onBeforeChange(id, $selectedPanel, $selectedTabMenu);
120+
onBeforeChange(index, $selectedPanel, $selectedTabMenu);
110121
}
111122

112-
this.setState({ tabActive: id }, function() {
123+
this.setState({ tabActive: index }, function() {
113124
if (onAfterChange) {
114-
onAfterChange(id, $selectedPanel, $selectedTabMenu);
125+
onAfterChange(index, $selectedPanel, $selectedTabMenu);
115126
}
116127
});
117128

@@ -136,7 +147,9 @@ return /******/ (function(modules) { // webpackBootstrap
136147

137148
return (
138149
React.createElement("li", {ref: ref, key: index, className: classes},
139-
React.createElement("a", {href: "#", "data-tab-id": index + 1, onClick: this.setActive}, title)
150+
React.createElement("a", {href: "#", onClick: this.setActive.bind(this, index + 1)},
151+
title
152+
)
140153
)
141154
);
142155
}.bind(this));
@@ -152,7 +165,7 @@ return /******/ (function(modules) { // webpackBootstrap
152165
var $panel = this.props.children[index];
153166

154167
return (
155-
React.createElement("article", {ref: ("tab-panel-" + (index + 1)), className: "tab-panel"},
168+
React.createElement("article", {ref: "tab-panel", className: "tab-panel"},
156169
$panel
157170
)
158171
);

‎dist/react-simpletabs.min.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/*!
22
*
33
* React Simpletabs - Just a simple tabs component built with React
4-
* @version v0.3.0
4+
* @version v0.3.1
55
* @link https://github.com/pedronauck/react-simpletabs
66
* @license MIT
77
* @author Pedro Nauck (https://github.com/pedronauck)

‎dist/react-simpletabs.min.js

+2-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example/app.js

+8-1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@
33

44
var Tabs = ReactSimpleTabs;
55
var App = React.createClass({
6+
onMount: function(selectedIndex, $selectedPanel, $selectedTabMenu) {
7+
console.log('on mount, showing tab ' + selectedIndex);
8+
},
69
onBeforeChange: function(selectedIndex, $selectedPanel, $selectedTabMenu) {
710
console.log('before the tab ' + selectedIndex);
811
},
@@ -11,7 +14,11 @@ var App = React.createClass({
1114
},
1215
render: function() {
1316
return (
14-
<Tabs tabActive={2} onBeforeChange={this.onBeforeChange} onAfterChange={this.onAfterChange}>
17+
<Tabs
18+
tabActive={2}
19+
onBeforeChange={this.onBeforeChange}
20+
onAfterChange={this.onAfterChange}
21+
onMount={this.onMount}>
1522
<Tabs.Panel title='Tab #1'>
1623
<h2>Content #1</h2>
1724
</Tabs.Panel>

‎lib/react-simpletabs.jsx

+23-10
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ var Tabs = React.createClass({
1212
displayName: 'Tabs',
1313
propTypes: {
1414
tabActive: React.PropTypes.number,
15+
onMount: React.PropTypes.func,
1516
onBeforeChange: React.PropTypes.func,
1617
onAfterChange: React.PropTypes.func,
1718
children: React.PropTypes.oneOfType([
@@ -23,7 +24,18 @@ var Tabs = React.createClass({
2324
return { tabActive: 1 };
2425
},
2526
getInitialState () {
26-
return { tabActive: this.props.tabActive };
27+
return {
28+
tabActive: this.props.tabActive
29+
};
30+
},
31+
componentDidMount() {
32+
var index = this.state.tabActive;
33+
var $selectedPanel = this.refs['tab-panel'];
34+
var $selectedMenu = this.refs[`tab-menu-${index}`];
35+
36+
if (this.props.onMount) {
37+
this.props.onMount(index, $selectedPanel, $selectedMenu);
38+
}
2739
},
2840
render () {
2941
return (
@@ -33,20 +45,19 @@ var Tabs = React.createClass({
3345
</div>
3446
);
3547
},
36-
setActive (e) {
37-
var id = parseInt(e.target.getAttribute('data-tab-id'));
48+
setActive(index, e) {
3849
var onAfterChange = this.props.onAfterChange;
3950
var onBeforeChange = this.props.onBeforeChange;
40-
var $selectedPanel = this.refs[`tab-panel-${id}`];
41-
var $selectedTabMenu = this.refs[`tab-menu-${id}`];
51+
var $selectedPanel = this.refs['tab-panel'];
52+
var $selectedTabMenu = this.refs[`tab-menu-${index}`];
4253

4354
if (onBeforeChange) {
44-
onBeforeChange(id, $selectedPanel, $selectedTabMenu);
55+
onBeforeChange(index, $selectedPanel, $selectedTabMenu);
4556
}
4657

47-
this.setState({ tabActive: id }, () => {
58+
this.setState({ tabActive: index }, () => {
4859
if (onAfterChange) {
49-
onAfterChange(id, $selectedPanel, $selectedTabMenu);
60+
onAfterChange(index, $selectedPanel, $selectedTabMenu);
5061
}
5162
});
5263

@@ -71,7 +82,9 @@ var Tabs = React.createClass({
7182

7283
return (
7384
<li ref={ref} key={index} className={classes}>
74-
<a href='#' data-tab-id={index + 1} onClick={this.setActive}>{title}</a>
85+
<a href='#' onClick={this.setActive.bind(this, index + 1)}>
86+
{title}
87+
</a>
7588
</li>
7689
);
7790
});
@@ -87,7 +100,7 @@ var Tabs = React.createClass({
87100
var $panel = this.props.children[index];
88101

89102
return (
90-
<article ref={`tab-panel-${index + 1}`} className='tab-panel'>
103+
<article ref='tab-panel' className='tab-panel'>
91104
{$panel}
92105
</article>
93106
);

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-simpletabs",
3-
"version": "0.3.1",
3+
"version": "0.4.1",
44
"description": "Just a simple tabs component built with React",
55
"author": {
66
"name": "Pedro Nauck",

0 commit comments

Comments
 (0)