Skip to content

Commit

Permalink
Merge pull request #21 from longlho/master
Browse files Browse the repository at this point in the history 
fix #11
  • Loading branch information
@pedronauck
pedronauck committed Mar 28, 2015
2 parents e6a27be + 442df4e commit 313de7c
Show file tree
Hide file tree
Showing 6 changed files with 121 additions and 62 deletions.
1 change: 1 addition & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -151,6 +151,7 @@ For more details, check out the API below.

Property | Type | Default | Required | Description
-------- | ---- | ------- | -------- |-----------
className | `Array\|Object\|String` | n/a | no | Additional class names for wrapping div
tabActive | `Number` | 1 | no | The default tab active
onMount | `Function` | n/a | no | The function that will be executed when the component is mounted
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.
Expand Down
82 changes: 53 additions & 29 deletions dist/react-simpletabs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,41 +20,41 @@
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/

/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/

/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/

/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/

/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/

/******/ // Flag the module as loaded
/******/ module.loaded = true;
/******/

/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/


/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/

/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/

/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/

/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
Expand All @@ -67,7 +67,7 @@ return /******/ (function(modules) { // webpackBootstrap
'use strict';

var React = __webpack_require__(1);
var classSet = __webpack_require__(2);
var classNames = __webpack_require__(2);

if (true) {
__webpack_require__(3);
Expand All @@ -76,6 +76,11 @@ return /******/ (function(modules) { // webpackBootstrap
var Tabs = React.createClass({
displayName: 'Tabs',
propTypes: {
className: React.PropTypes.oneOfType([
React.PropTypes.array,
React.PropTypes.string,
React.PropTypes.object
]),
tabActive: React.PropTypes.number,
onMount: React.PropTypes.func,
onBeforeChange: React.PropTypes.func,
Expand Down Expand Up @@ -106,8 +111,9 @@ return /******/ (function(modules) { // webpackBootstrap
if(newProps.tabActive){ this.setState({tabActive: newProps.tabActive}) }
},
render:function () {
var className = classNames('tabs', this.props.className);
return (
React.createElement("div", {className: "tabs"},
React.createElement("div", {className: className},
this._getMenuItems(),
this._getSelectedPanel()
)
Expand Down Expand Up @@ -147,10 +153,10 @@ return /******/ (function(modules) { // webpackBootstrap
.map(function($panel, index) {
var ref = ("tab-menu-" + (index + 1));
var title = $panel.props.title;
var classes = classSet({
'tabs-menu-item': true,
'is-active': this.state.tabActive === (index + 1)
});
var classes = classNames(
'tabs-menu-item',
this.state.tabActive === (index + 1) && 'is-active'
);

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

/** @jsx React.DOM *//**
* Produces the same result as React.addons.classSet
* @param {object} classes
* @return {string}
*
* @author Ciro S. Costa <https://github.com/cirocosta>
*/
/** @jsx React.DOM */function classNames() {
var classes = '';
var arg;

module.exports = function(classes) {
return typeof classes !== 'object' ?
Array.prototype.join.call(arguments, ' ') :
Object.keys(classes).filter(function(className) {return classes[className];}).join(' ');
};
for (var i = 0; i < arguments.length; i++) {
arg = arguments[i];
if (!arg) {
continue;
}

if ('string' === typeof arg || 'number' === typeof arg) {
classes += ' ' + arg;
} else if (Object.prototype.toString.call(arg) === '[object Array]') {
classes += ' ' + classNames.apply(null, arg);
} else if ('object' === typeof arg) {
for (var key in arg) {
if (!arg.hasOwnProperty(key) || !arg[key]) {
continue;
}
classes += ' ' + key;
}
}
}
return classes.substr(1);
}

// safely export classNames in case the script is included directly on a page
if (typeof module !== 'undefined' && module.exports) {
module.exports = classNames;
}


/***/ },
Expand All @@ -230,3 +253,4 @@ return /******/ (function(modules) { // webpackBootstrap
/***/ }
/******/ ])
});
;
65 changes: 51 additions & 14 deletions lib/__tests__/test-reactsimpletabs.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,13 +30,13 @@ describe('Tabs', function() {
expect(Tabs).toBeDefined();
});

it('should throw if no children pannels passed to Tabs', function() {
it('should throw if no children panels passed to Tabs', function() {
expect(function () {
TU.renderIntoDocument(<Tabs></Tabs>);
}).throws;
});

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

describe('when passed className as props', function () {
it('should render extra className correctly', function() {
var instance = TU.renderIntoDocument(
<Tabs className="extra-class"><Tabs.Panel></Tabs.Panel></Tabs>
);

expect(function () {
TU.findRenderedDOMComponentWithClass(instance, 'tabs extra-class');
}).not.toThrow();
});

it('should render className as object correctly', function() {
var instance = TU.renderIntoDocument(
<Tabs className={{ tabs2: true }}><Tabs.Panel></Tabs.Panel></Tabs>
);

expect(function () {
TU.findRenderedDOMComponentWithClass(instance, 'tabs3');
}).toThrow();

expect(function () {
TU.findRenderedDOMComponentWithClass(instance, 'tabs tabs2');
}).not.toThrow();
});

it('should render className as array correctly', function() {
var instance = TU.renderIntoDocument(
<Tabs className={['extra-class']}><Tabs.Panel></Tabs.Panel></Tabs>
);

expect(function () {
TU.findRenderedDOMComponentWithClass(instance, 'tabs extra-class');
}).not.toThrow();

});
});

describe('regarding its functionality,', function() {
it('show only one pannel at a time, multiple tabs', function() {
it('show only one panel at a time, multiple tabs', function() {
var instance = TU.renderIntoDocument(
<Tabs>
<Tabs.Panel><h1>1</h1></Tabs.Panel>
Expand All @@ -64,10 +101,10 @@ describe('Tabs', function() {
expect(TU.scryRenderedDOMComponentsWithTag(instance, 'li').length).toEqual(2);
expect(function () {
TU.findRenderedDOMComponentWithClass(instance, 'is-active');
}).not.toThrow;
}).not.toThrow();
});

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

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

expect(pannel.getDOMNode().children[0].innerHTML).toEqual('content1');
expect(panel.getDOMNode().children[0].innerHTML).toEqual('content1');
expect(menuItem.getDOMNode().children[0].innerHTML).toEqual('item1');
});

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

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

expect(pannel.getDOMNode().children[0].innerHTML).toEqual('content2');
expect(panel.getDOMNode().children[0].innerHTML).toEqual('content2');
expect(menuItem.getDOMNode().children[0].innerHTML).toEqual('item2');
});

Expand All @@ -106,8 +143,8 @@ describe('Tabs', function() {
</Tabs>, document.body
);
var menuItem = find(instance, 'tabs-menu-item is-active');
var pannel = find(instance, 'tab-panel');
expect(pannel.getDOMNode().children[0].innerHTML).toEqual('content2');
var panel = find(instance, 'tab-panel');
expect(panel.getDOMNode().children[0].innerHTML).toEqual('content2');
expect(menuItem.getDOMNode().children[0].innerHTML).toEqual('item2');
instance = React.render(
<Tabs tabActive={1}>
Expand All @@ -116,8 +153,8 @@ describe('Tabs', function() {
</Tabs>, document.body
);
menuItem = find(instance, 'tabs-menu-item is-active');
pannel = find(instance, 'tab-panel');
expect(pannel.getDOMNode().children[0].innerHTML).toEqual('content1');
panel = find(instance, 'tab-panel');
expect(panel.getDOMNode().children[0].innerHTML).toEqual('content1');
expect(menuItem.getDOMNode().children[0].innerHTML).toEqual('item1');
});
});
Expand Down
18 changes: 12 additions & 6 deletions lib/react-simpletabs.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
'use strict';

var React = require('react');
var classSet = require('../utils/classSet');
var classNames = require('classnames');

if (process.env.NODE_ENV !== 'test') {
require('./react-simpletabs.css');
Expand All @@ -11,6 +11,11 @@ if (process.env.NODE_ENV !== 'test') {
var Tabs = React.createClass({
displayName: 'Tabs',
propTypes: {
className: React.PropTypes.oneOfType([
React.PropTypes.array,
React.PropTypes.string,
React.PropTypes.object
]),
tabActive: React.PropTypes.number,
onMount: React.PropTypes.func,
onBeforeChange: React.PropTypes.func,
Expand Down Expand Up @@ -41,8 +46,9 @@ var Tabs = React.createClass({
if(newProps.tabActive){ this.setState({tabActive: newProps.tabActive}) }
},
render () {
var className = classNames('tabs', this.props.className);
return (
<div className='tabs'>
<div className={className}>
{this._getMenuItems()}
{this._getSelectedPanel()}
</div>
Expand Down Expand Up @@ -82,10 +88,10 @@ var Tabs = React.createClass({
.map(($panel, index) => {
var ref = `tab-menu-${index + 1}`;
var title = $panel.props.title;
var classes = classSet({
'tabs-menu-item': true,
'is-active': this.state.tabActive === (index + 1)
});
var classes = classNames(
'tabs-menu-item',
this.state.tabActive === (index + 1) && 'is-active'
);

return (
<li ref={ref} key={index} className={classes}>
Expand Down
4 changes: 4 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,9 @@
"peerDependencies": {
"react": "^0.12.2"
},
"dependencies": {
"classnames": "^1.2.0"
},
"devDependencies": {
"browser-sync": "^1.5.2",
"css-loader": "^0.9.0",
Expand All @@ -56,6 +59,7 @@
"jest-cli": "^0.1.18",
"jsx-loader": "^0.12.2",
"lodash": "^2.4.1",
"react": "^0.12.2",
"react-tools": "^0.12.2",
"style-loader": "^0.8.1",
"webpack": "^1.4.4"
Expand Down
13 changes: 0 additions & 13 deletions utils/classSet.js
View file

This file was deleted.

0 comments on commit 313de7c

Please sign in to comment.