Skip to content

Commit 442df4e

Browse files
author
Long Ho
committed
fix #11
add react to devDependencies for travis
1 parent e6a27be commit 442df4e

File tree

6 files changed

+121
-62
lines changed

6 files changed

+121
-62
lines changed

‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -151,6 +151,7 @@ For more details, check out the API below.
151151

152152
Property | Type | Default | Required | Description
153153
-------- | ---- | ------- | -------- |-----------
154+
className | `Array\|Object\|String` | n/a | no | Additional class names for wrapping div
154155
tabActive | `Number` | 1 | no | The default tab active
155156
onMount | `Function` | n/a | no | The function that will be executed when the component is mounted
156157
onBeforeChange | `Function` | n/a | no | The function that will be executed **before** the state of the component change. Return `false` to cancel the change to the active tab.

‎dist/react-simpletabs.js

+53-29
Original file line numberDiff line numberDiff line change
@@ -20,41 +20,41 @@
2020
return /******/ (function(modules) { // webpackBootstrap
2121
/******/ // The module cache
2222
/******/ var installedModules = {};
23-
/******/
23+
2424
/******/ // The require function
2525
/******/ function __webpack_require__(moduleId) {
26-
/******/
26+
2727
/******/ // Check if module is in cache
2828
/******/ if(installedModules[moduleId])
2929
/******/ return installedModules[moduleId].exports;
30-
/******/
30+
3131
/******/ // Create a new module (and put it into the cache)
3232
/******/ var module = installedModules[moduleId] = {
3333
/******/ exports: {},
3434
/******/ id: moduleId,
3535
/******/ loaded: false
3636
/******/ };
37-
/******/
37+
3838
/******/ // Execute the module function
3939
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
40-
/******/
40+
4141
/******/ // Flag the module as loaded
4242
/******/ module.loaded = true;
43-
/******/
43+
4444
/******/ // Return the exports of the module
4545
/******/ return module.exports;
4646
/******/ }
47-
/******/
48-
/******/
47+
48+
4949
/******/ // expose the modules object (__webpack_modules__)
5050
/******/ __webpack_require__.m = modules;
51-
/******/
51+
5252
/******/ // expose the module cache
5353
/******/ __webpack_require__.c = installedModules;
54-
/******/
54+
5555
/******/ // __webpack_public_path__
5656
/******/ __webpack_require__.p = "";
57-
/******/
57+
5858
/******/ // Load entry module and return exports
5959
/******/ return __webpack_require__(0);
6060
/******/ })
@@ -67,7 +67,7 @@ return /******/ (function(modules) { // webpackBootstrap
6767
'use strict';
6868

6969
var React = __webpack_require__(1);
70-
var classSet = __webpack_require__(2);
70+
var classNames = __webpack_require__(2);
7171

7272
if (true) {
7373
__webpack_require__(3);
@@ -76,6 +76,11 @@ return /******/ (function(modules) { // webpackBootstrap
7676
var Tabs = React.createClass({
7777
displayName: 'Tabs',
7878
propTypes: {
79+
className: React.PropTypes.oneOfType([
80+
React.PropTypes.array,
81+
React.PropTypes.string,
82+
React.PropTypes.object
83+
]),
7984
tabActive: React.PropTypes.number,
8085
onMount: React.PropTypes.func,
8186
onBeforeChange: React.PropTypes.func,
@@ -106,8 +111,9 @@ return /******/ (function(modules) { // webpackBootstrap
106111
if(newProps.tabActive){ this.setState({tabActive: newProps.tabActive}) }
107112
},
108113
render:function () {
114+
var className = classNames('tabs', this.props.className);
109115
return (
110-
React.createElement("div", {className: "tabs"},
116+
React.createElement("div", {className: className},
111117
this._getMenuItems(),
112118
this._getSelectedPanel()
113119
)
@@ -147,10 +153,10 @@ return /******/ (function(modules) { // webpackBootstrap
147153
.map(function($panel, index) {
148154
var ref = ("tab-menu-" + (index + 1));
149155
var title = $panel.props.title;
150-
var classes = classSet({
151-
'tabs-menu-item': true,
152-
'is-active': this.state.tabActive === (index + 1)
153-
});
156+
var classes = classNames(
157+
'tabs-menu-item',
158+
this.state.tabActive === (index + 1) && 'is-active'
159+
);
154160

155161
return (
156162
React.createElement("li", {ref: ref, key: index, className: classes},
@@ -206,19 +212,36 @@ return /******/ (function(modules) { // webpackBootstrap
206212
/* 2 */
207213
/***/ function(module, exports, __webpack_require__) {
208214

209-
/** @jsx React.DOM *//**
210-
* Produces the same result as React.addons.classSet
211-
* @param {object} classes
212-
* @return {string}
213-
*
214-
* @author Ciro S. Costa <https://github.com/cirocosta>
215-
*/
215+
/** @jsx React.DOM */function classNames() {
216+
var classes = '';
217+
var arg;
216218

217-
module.exports = function(classes) {
218-
return typeof classes !== 'object' ?
219-
Array.prototype.join.call(arguments, ' ') :
220-
Object.keys(classes).filter(function(className) {return classes[className];}).join(' ');
221-
};
219+
for (var i = 0; i < arguments.length; i++) {
220+
arg = arguments[i];
221+
if (!arg) {
222+
continue;
223+
}
224+
225+
if ('string' === typeof arg || 'number' === typeof arg) {
226+
classes += ' ' + arg;
227+
} else if (Object.prototype.toString.call(arg) === '[object Array]') {
228+
classes += ' ' + classNames.apply(null, arg);
229+
} else if ('object' === typeof arg) {
230+
for (var key in arg) {
231+
if (!arg.hasOwnProperty(key) || !arg[key]) {
232+
continue;
233+
}
234+
classes += ' ' + key;
235+
}
236+
}
237+
}
238+
return classes.substr(1);
239+
}
240+
241+
// safely export classNames in case the script is included directly on a page
242+
if (typeof module !== 'undefined' && module.exports) {
243+
module.exports = classNames;
244+
}
222245

223246

224247
/***/ },
@@ -230,3 +253,4 @@ return /******/ (function(modules) { // webpackBootstrap
230253
/***/ }
231254
/******/ ])
232255
});
256+
;

‎lib/__tests__/test-reactsimpletabs.jsx

+51-14
Original file line numberDiff line numberDiff line change
@@ -30,13 +30,13 @@ describe('Tabs', function() {
3030
expect(Tabs).toBeDefined();
3131
});
3232

33-
it('should throw if no children pannels passed to Tabs', function() {
33+
it('should throw if no children panels passed to Tabs', function() {
3434
expect(function () {
3535
TU.renderIntoDocument(<Tabs></Tabs>);
3636
}).throws;
3737
});
3838

39-
it('be renderable if pannels passed to tabs', function() {
39+
it('be renderable if panels passed to tabs', function() {
4040
var instance = TU.renderIntoDocument(
4141
<Tabs><Tabs.Panel></Tabs.Panel></Tabs>
4242
);
@@ -52,8 +52,45 @@ describe('Tabs', function() {
5252
expect(!!usedPropsAreInPropTypes(instance)).toBe(true);
5353
});
5454

55+
describe('when passed className as props', function () {
56+
it('should render extra className correctly', function() {
57+
var instance = TU.renderIntoDocument(
58+
<Tabs className="extra-class"><Tabs.Panel></Tabs.Panel></Tabs>
59+
);
60+
61+
expect(function () {
62+
TU.findRenderedDOMComponentWithClass(instance, 'tabs extra-class');
63+
}).not.toThrow();
64+
});
65+
66+
it('should render className as object correctly', function() {
67+
var instance = TU.renderIntoDocument(
68+
<Tabs className={{ tabs2: true }}><Tabs.Panel></Tabs.Panel></Tabs>
69+
);
70+
71+
expect(function () {
72+
TU.findRenderedDOMComponentWithClass(instance, 'tabs3');
73+
}).toThrow();
74+
75+
expect(function () {
76+
TU.findRenderedDOMComponentWithClass(instance, 'tabs tabs2');
77+
}).not.toThrow();
78+
});
79+
80+
it('should render className as array correctly', function() {
81+
var instance = TU.renderIntoDocument(
82+
<Tabs className={['extra-class']}><Tabs.Panel></Tabs.Panel></Tabs>
83+
);
84+
85+
expect(function () {
86+
TU.findRenderedDOMComponentWithClass(instance, 'tabs extra-class');
87+
}).not.toThrow();
88+
89+
});
90+
});
91+
5592
describe('regarding its functionality,', function() {
56-
it('show only one pannel at a time, multiple tabs', function() {
93+
it('show only one panel at a time, multiple tabs', function() {
5794
var instance = TU.renderIntoDocument(
5895
<Tabs>
5996
<Tabs.Panel><h1>1</h1></Tabs.Panel>
@@ -64,10 +101,10 @@ describe('Tabs', function() {
64101
expect(TU.scryRenderedDOMComponentsWithTag(instance, 'li').length).toEqual(2);
65102
expect(function () {
66103
TU.findRenderedDOMComponentWithClass(instance, 'is-active');
67-
}).not.toThrow;
104+
}).not.toThrow();
68105
});
69106

70-
it('show the first pannel if no active passed', function() {
107+
it('show the first panel if no active passed', function() {
71108
var instance = TU.renderIntoDocument(
72109
<Tabs>
73110
<Tabs.Panel title='item1'>content1</Tabs.Panel>
@@ -76,13 +113,13 @@ describe('Tabs', function() {
76113
);
77114

78115
var menuItem = TU.findRenderedDOMComponentWithClass(instance, 'tabs-menu-item is-active');
79-
var pannel = TU.findRenderedDOMComponentWithClass(instance, 'tab-panel');
116+
var panel = TU.findRenderedDOMComponentWithClass(instance, 'tab-panel');
80117

81-
expect(pannel.getDOMNode().children[0].innerHTML).toEqual('content1');
118+
expect(panel.getDOMNode().children[0].innerHTML).toEqual('content1');
82119
expect(menuItem.getDOMNode().children[0].innerHTML).toEqual('item1');
83120
});
84121

85-
it('show the second pannel if tabActive == 2', function() {
122+
it('show the second panel if tabActive == 2', function() {
86123
var instance = TU.renderIntoDocument(
87124
<Tabs tabActive={2}>
88125
<Tabs.Panel title='item1'>content1</Tabs.Panel>
@@ -91,9 +128,9 @@ describe('Tabs', function() {
91128
);
92129

93130
var menuItem = TU.findRenderedDOMComponentWithClass(instance, 'tabs-menu-item is-active');
94-
var pannel = TU.findRenderedDOMComponentWithClass(instance, 'tab-panel');
131+
var panel = TU.findRenderedDOMComponentWithClass(instance, 'tab-panel');
95132

96-
expect(pannel.getDOMNode().children[0].innerHTML).toEqual('content2');
133+
expect(panel.getDOMNode().children[0].innerHTML).toEqual('content2');
97134
expect(menuItem.getDOMNode().children[0].innerHTML).toEqual('item2');
98135
});
99136

@@ -106,8 +143,8 @@ describe('Tabs', function() {
106143
</Tabs>, document.body
107144
);
108145
var menuItem = find(instance, 'tabs-menu-item is-active');
109-
var pannel = find(instance, 'tab-panel');
110-
expect(pannel.getDOMNode().children[0].innerHTML).toEqual('content2');
146+
var panel = find(instance, 'tab-panel');
147+
expect(panel.getDOMNode().children[0].innerHTML).toEqual('content2');
111148
expect(menuItem.getDOMNode().children[0].innerHTML).toEqual('item2');
112149
instance = React.render(
113150
<Tabs tabActive={1}>
@@ -116,8 +153,8 @@ describe('Tabs', function() {
116153
</Tabs>, document.body
117154
);
118155
menuItem = find(instance, 'tabs-menu-item is-active');
119-
pannel = find(instance, 'tab-panel');
120-
expect(pannel.getDOMNode().children[0].innerHTML).toEqual('content1');
156+
panel = find(instance, 'tab-panel');
157+
expect(panel.getDOMNode().children[0].innerHTML).toEqual('content1');
121158
expect(menuItem.getDOMNode().children[0].innerHTML).toEqual('item1');
122159
});
123160
});

‎lib/react-simpletabs.jsx

+12-6
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
'use strict';
33

44
var React = require('react');
5-
var classSet = require('../utils/classSet');
5+
var classNames = require('classnames');
66

77
if (process.env.NODE_ENV !== 'test') {
88
require('./react-simpletabs.css');
@@ -11,6 +11,11 @@ if (process.env.NODE_ENV !== 'test') {
1111
var Tabs = React.createClass({
1212
displayName: 'Tabs',
1313
propTypes: {
14+
className: React.PropTypes.oneOfType([
15+
React.PropTypes.array,
16+
React.PropTypes.string,
17+
React.PropTypes.object
18+
]),
1419
tabActive: React.PropTypes.number,
1520
onMount: React.PropTypes.func,
1621
onBeforeChange: React.PropTypes.func,
@@ -41,8 +46,9 @@ var Tabs = React.createClass({
4146
if(newProps.tabActive){ this.setState({tabActive: newProps.tabActive}) }
4247
},
4348
render () {
49+
var className = classNames('tabs', this.props.className);
4450
return (
45-
<div className='tabs'>
51+
<div className={className}>
4652
{this._getMenuItems()}
4753
{this._getSelectedPanel()}
4854
</div>
@@ -82,10 +88,10 @@ var Tabs = React.createClass({
8288
.map(($panel, index) => {
8389
var ref = `tab-menu-${index + 1}`;
8490
var title = $panel.props.title;
85-
var classes = classSet({
86-
'tabs-menu-item': true,
87-
'is-active': this.state.tabActive === (index + 1)
88-
});
91+
var classes = classNames(
92+
'tabs-menu-item',
93+
this.state.tabActive === (index + 1) && 'is-active'
94+
);
8995

9096
return (
9197
<li ref={ref} key={index} className={classes}>

‎package.json

+4
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,9 @@
4747
"peerDependencies": {
4848
"react": "^0.12.2"
4949
},
50+
"dependencies": {
51+
"classnames": "^1.2.0"
52+
},
5053
"devDependencies": {
5154
"browser-sync": "^1.5.2",
5255
"css-loader": "^0.9.0",
@@ -56,6 +59,7 @@
5659
"jest-cli": "^0.1.18",
5760
"jsx-loader": "^0.12.2",
5861
"lodash": "^2.4.1",
62+
"react": "^0.12.2",
5963
"react-tools": "^0.12.2",
6064
"style-loader": "^0.8.1",
6165
"webpack": "^1.4.4"

‎utils/classSet.js

-13
This file was deleted.

0 commit comments

Comments
 (0)