You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

react-draggable-tab

Package Overview
Dependencies
Maintainers
1
Versions
23
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-draggable-tab - npm Package Compare versions

Comparing version

0.4.3
to
0.5.0

12

CHANGELOG.md
## Change Log
### Ver 0.4.4(Next Release)
### Ver 0.6.0
### Ver 0.5.0
* #53 [Context menu on right click](https://github.com/georgeOsdDev/react-draggable-tab/issues/53)
`onTabDoubleClick`, `onTabMouseEnter` and `onTabMouseEnter` are removed from `Tabs`.
All `onXXX` handler except `onClick` are now used on `Tab`.
* Update dependencies libraries version [cf65dbc](https://github.com/georgeOsdDev/react-draggable-tab/commit/cf65dbc8f756561536f53f5e3960bf86afebdc73)
### Ver 0.4.3

@@ -23,3 +29,3 @@

This version updated react from ^0.13.3 to 0.14.X, react-draggable from ^0.8.0 to 1.1.X, and also other dependencies.
Several changes have been made for adopting reactv0.14.x.
Several changes have been made for adopting react v0.14.x.

@@ -46,3 +52,3 @@ * #35 [Update dependencies](https://github.com/georgeOsdDev/react-draggable-tab/issues/35)

* #20 [Remove 'ed' from event handler name](https://github.com/georgeOsdDev/react-draggable-tab/issues/20) (Breaking change)
* #21 [Unexpected behaviour with NODE_ENV=production](https://github.com/georgeOsdDev/react-draggable-tab/issues/21)
* #21 [Unexpected behavior with NODE_ENV=production](https://github.com/georgeOsdDev/react-draggable-tab/issues/21)

@@ -49,0 +55,0 @@ ### Ver 0.2.3

114

example/app.js

@@ -8,4 +8,3 @@ 'use strict';

injectTapEventPlugin();
import {Dialog, TextField, Styles} from 'material-ui';
let ThemeManager = Styles.ThemeManager;
import {Dialog, FlatButton, Menu, MenuItem, TextField} from 'material-ui';
import {Tabs, Tab} from '../lib/index.js';

@@ -48,3 +47,3 @@

tabs:[
(<Tab key={'tab0'} title={'unclosable tab'} disableClose={true} >
(<Tab key={'tab0'} title={'unclosable tab'} disableClose={true} {...this.makeListeners('tab0')}>
<div>

@@ -54,3 +53,3 @@ <h1>This tab cannot close</h1>

</Tab>),
(<Tab key={'tab1'} title={'1stTab'} beforeTitle={icon} >
(<Tab key={'tab1'} title={'1stTab'} beforeTitle={icon} {...this.makeListeners('tab1')}>
<div>

@@ -60,3 +59,3 @@ <h1>This is tab1</h1>

</Tab>),
(<Tab key={'tab2'} title={'2ndTab Too long Toooooooooooooooooo long'} beforeTitle={fonticon} >
(<Tab key={'tab2'} title={'2ndTab Too long Toooooooooooooooooo long'} beforeTitle={fonticon} {...this.makeListeners('tab2')}>
<div>

@@ -67,6 +66,6 @@ <pre>Lorem ipsum dolor sit amet, consectetur adipisicing elit,

</Tab>),
(<Tab key={'tab3'} title={'Dynamic tab'} afterTitle={badge}>
(<Tab key={'tab3'} title={'Dynamic tab'} afterTitle={badge} {...this.makeListeners('tab3')}>
<DynamicTabContent/>
</Tab>),
(<Tab key={'tab4'} title={'Custom container'} containerStyle={{backgroundColor: 'gray', width: '50%'}}>
(<Tab key={'tab4'} title={'Custom container'} containerStyle={{backgroundColor: 'gray', width: '50%'}} {...this.makeListeners('tab4')}>
<div>

@@ -77,3 +76,5 @@ <h1>This is tab4 with custom container style</h1>

],
badgeCount: 0
badgeCount: 0,
menuPosition: {},
showMenu: false
};

@@ -88,2 +89,11 @@ }

makeListeners(key){
return {
onClick: (e) => { console.log('onClick', key, e);}, // never called
onContextMenu: (e) => { console.log('onContextMenu', key, e); this.handleTabContextMenu(key, e)},
onDoubleClick: (e) => { console.log('onDoubleClick', key, e); this.handleTabDoubleClick(key, e)},
onMouseEnter: (e) => { console.log('onMouseEnter', key, e);},
onMouseLeave: (e) => { console.log('onMouseLeave', key, e);}
}
}

@@ -108,3 +118,3 @@ handleTabSelect(e, key, currentTabs) {

const key = 'newTab_' + Date.now();
let newTab = (<Tab key={key} title='untitled' >
let newTab = (<Tab key={key} title='untitled' {...this.makeListeners(key)}>
<div>

@@ -122,20 +132,45 @@ <h1>New Empty Tab</h1>

handleTabDoubleClick(e, key) {
handleTabDoubleClick(key, e) {
this.setState({
editTabKey: key,
dialogOpen: true
});
}
let tab = _.find(this.state.tabs, (t) => {
return t.key === key;
handleTabContextMenu(key, e) {
e.preventDefault();
this.setState({
showMenu: true,
contextTarget: key,
menuPosition: {
top:`${e.pageY}px`,
left:`${e.pageX}px`
}
});
}
cancelContextMenu(){
this.setState({
editTabKey: key
}, () => {
this.refs.dialog.show();
showMenu: false,
contextTarget: null
});
}
handleTabMouseEnter(e, key) {
console.log('tab mouseEnter key:', key);
renameFromContextMenu(){
this.setState({
showMenu: false,
contextTarget: null,
editTabKey: this.state.contextTarget,
dialogOpen: true
});
}
handleTabMouseLeave(e, key) {
console.log('tab mouseLeave key:', key);
closeFromContextMenu(){
let newTabs = _.filter(this.state.tabs, (t) => {return t.key !== this.state.contextTarget;});
this.setState({
showMenu: false,
contextTarget: null,
selectedTab: 'tab0',
tabs: newTabs
});
}

@@ -152,4 +187,5 @@

});
this.setState({tabs: newTabs}, () => {
this.refs.dialog.dismiss();
this.setState({
tabs: newTabs,
dialogOpen: false
});

@@ -159,3 +195,5 @@ }

_onDialogCancel() {
this.refs.dialog.dismiss();
this.setState({
dialogOpen: false
})
}

@@ -181,6 +219,22 @@

let standardActions = [
{ text: 'Cancel', onClick: this._onDialogCancel.bind(this) },
{ text: 'Submit', onClick: this._onDialogSubmit.bind(this), ref: 'submit' }
<FlatButton
label="Cancel"
secondary={true}
onTouchTap={this._onDialogCancel.bind(this)}
/>,
<FlatButton
label="Submit"
primary={true}
keyboardFocused={true}
onTouchTap={this._onDialogSubmit.bind(this)}
/>
];
let menuStyle = {
display: this.state.showMenu ? 'block': 'none',
position: 'absolute',
top: this.state.menuPosition.top,
left: this.state.menuPosition.left,
backgroundColor: '#F0F0F0'
}

@@ -197,5 +251,2 @@ return (

onTabPositionChange={this.handleTabPositionChange.bind(this)}
onTabDoubleClick={this.handleTabDoubleClick.bind(this)}
onTabMouseEnter={this.handleTabMouseEnter.bind(this)}
onTabMouseLeave={this.handleTabMouseLeave.bind(this)}
tabs={this.state.tabs}

@@ -212,2 +263,9 @@ shortCutKeys={

/>
<div style={menuStyle}>
<Menu>
{this.state.contextTarget === 'tab0' ? '' : <MenuItem primaryText="Close" onClick={this.closeFromContextMenu.bind(this)}/>}
<MenuItem primaryText="Rename" onClick={this.renameFromContextMenu.bind(this)}/>
<MenuItem primaryText="Cancel" onClick={this.cancelContextMenu.bind(this)}/>
</Menu>
</div>
<Dialog

@@ -217,4 +275,4 @@ title="Change tab name"

actions={standardActions}
actionFocus="submit"
modal={true}
open={this.state.dialogOpen}
onShow={this._onDialogShow.bind(this)}>

@@ -221,0 +279,0 @@ <TextField

3

karma.conf.js

@@ -13,3 +13,3 @@ // Karma configuration

// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['browserify','mocha'],
frameworks: ['browserify', 'mocha'],

@@ -42,2 +42,3 @@

'es2015',
'stage-2',
'react'

@@ -44,0 +45,0 @@ ]

8

lib/components/CloseIcon.js
'use strict';
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
Object.defineProperty(exports, "__esModule", {

@@ -9,2 +7,4 @@ value: true

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _react = require('react');

@@ -34,3 +34,3 @@

var CloseIcon = (function (_React$Component) {
var CloseIcon = function (_React$Component) {
_inherits(CloseIcon, _React$Component);

@@ -91,3 +91,3 @@

return CloseIcon;
})(_react2.default.Component);
}(_react2.default.Component);

@@ -94,0 +94,0 @@ CloseIcon.defaultProps = {

8

lib/components/CustomDraggable.js
'use strict';
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
Object.defineProperty(exports, "__esModule", {

@@ -9,2 +7,4 @@ value: true

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _reactDraggable = require('react-draggable');

@@ -22,3 +22,3 @@

var CustomDraggable = (function (_Draggable) {
var CustomDraggable = function (_Draggable) {
_inherits(CustomDraggable, _Draggable);

@@ -44,4 +44,4 @@

return CustomDraggable;
})(_reactDraggable2.default);
}(_reactDraggable2.default);
exports.default = CustomDraggable;

8

lib/components/Tab.js
'use strict';
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
Object.defineProperty(exports, "__esModule", {

@@ -9,2 +7,4 @@ value: true

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _react = require('react');

@@ -22,3 +22,3 @@

var Tab = (function (_React$Component) {
var Tab = function (_React$Component) {
_inherits(Tab, _React$Component);

@@ -43,3 +43,3 @@

return Tab;
})(_react2.default.Component);
}(_react2.default.Component);

@@ -46,0 +46,0 @@ Tab.defaultProps = {

8

lib/components/TabContainer.js
'use strict';
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
Object.defineProperty(exports, "__esModule", {

@@ -9,2 +7,4 @@ value: true

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _react = require('react');

@@ -38,3 +38,3 @@

var TabContainer = (function (_React$Component) {
var TabContainer = function (_React$Component) {
_inherits(TabContainer, _React$Component);

@@ -64,3 +64,3 @@

return TabContainer;
})(_react2.default.Component);
}(_react2.default.Component);

@@ -67,0 +67,0 @@ TabContainer.defaultProps = {

196

lib/components/Tabs.js
'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
Object.defineProperty(exports, "__esModule", {

@@ -11,2 +7,6 @@ value: true

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _lodash = require('lodash');

@@ -62,2 +62,4 @@

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

@@ -69,3 +71,3 @@

var Tabs = (function (_React$Component) {
var Tabs = function (_React$Component) {
_inherits(Tabs, _React$Component);

@@ -130,3 +132,3 @@

value: function _getNextTabKey(key) {
var nextKey = undefined;
var nextKey = void 0;
var current = this._getIndexOfTabByKey(key);

@@ -144,3 +146,3 @@ if (current + 1 < this.state.tabs.length) {

value: function _getPrevTabKey(key) {
var prevKey = undefined;
var prevKey = void 0;
var current = this._getIndexOfTabByKey(key);

@@ -278,5 +280,2 @@ if (current > 0) {

}, {
key: 'handleMouseDown',
value: function handleMouseDown(key, e, ui) {}
}, {
key: 'handleDragStart',

@@ -312,3 +311,3 @@ value: function handleDragStart(key, e, ui) {

var deltaX = e.pageX || e.clientX;
var swapedTabs = undefined;
var swapedTabs = void 0;
var newState = {};

@@ -358,5 +357,3 @@ _lodash2.default.each(this.startPositions, function (pos) {

key: 'handleMouseEnter',
value: function handleMouseEnter(key, e) {
var _this8 = this;
value: function handleMouseEnter(key, onMouseEnter, e) {
if (!this.dragging) {

@@ -366,3 +363,3 @@ this.setState({

}, function () {
_this8.props.onTabMouseEnter(e, key);
_lodash2.default.isFunction(onMouseEnter) ? onMouseEnter(e) : null;
});

@@ -373,5 +370,3 @@ }

key: 'handleMouseLeave',
value: function handleMouseLeave(key, e) {
var _this9 = this;
value: function handleMouseLeave(key, onMouseLeave, e) {
if (!this.dragging) {

@@ -382,6 +377,6 @@ if (this.state.hoveredTab === key) {

}, function () {
_this9.props.onTabMouseLeave(e, key);
_lodash2.default.isFunction(onMouseLeave) ? onMouseLeave(e) : null;
});
} else {
this.props.onTabMouseLeave(e, key);
_lodash2.default.isFunction(onMouseLeave) ? onMouseLeave(e) : null;
}

@@ -393,6 +388,6 @@ }

value: function handleCloseButtonClick(key, e) {
var _this10 = this;
var _this8 = this;
e = this._cancelEventSafety(e);
var nextSelected = undefined;
var nextSelected = void 0;

@@ -413,6 +408,6 @@ if (this.state.selectedTab === key) {

}, function () {
var currentOpenTabs = _this10._getCurrentOpenTabs();
_this10.props.onTabClose(e, key, currentOpenTabs);
var currentOpenTabs = _this8._getCurrentOpenTabs();
_this8.props.onTabClose(e, key, currentOpenTabs);
if (shoudBeNotifyTabChange) {
_this10.props.onTabSelect(e, nextSelected, currentOpenTabs);
_this8.props.onTabSelect(e, nextSelected, currentOpenTabs);
}

@@ -429,3 +424,3 @@ });

value: function moveRight(e) {
var _this11 = this;
var _this9 = this;

@@ -438,3 +433,3 @@ var nextSelected = this._getNextTabKey(this.state.selectedTab);

this.setState({ selectedTab: nextSelected }, function () {
_this11.props.onTabSelect(e, nextSelected, _this11._getCurrentOpenTabs());
_this9.props.onTabSelect(e, nextSelected, _this9._getCurrentOpenTabs());
});

@@ -446,3 +441,3 @@ }

value: function moveLeft(e) {
var _this12 = this;
var _this10 = this;

@@ -455,3 +450,3 @@ var nextSelected = this._getPrevTabKey(this.state.selectedTab);

this.setState({ selectedTab: nextSelected }, function () {
_this12.props.onTabSelect(e, nextSelected, _this12._getCurrentOpenTabs());
_this10.props.onTabSelect(e, nextSelected, _this10._getCurrentOpenTabs());
});

@@ -479,14 +474,5 @@ }

}, {
key: 'doubleClickHandlerWithKey',
value: function doubleClickHandlerWithKey(key) {
var _this13 = this;
return function (e) {
_this13.props.onTabDoubleClick(e, key);
};
}
}, {
key: 'render',
value: function render() {
var _this14 = this;
var _this11 = this;

@@ -515,12 +501,12 @@ // override inline tabs styles

// append tabs classNames
var tabClassNames = {};
tabClassNames.tabBar = (0, _classnames2.default)('rdTabBar', this.props.tabsClassNames.tabBar);
tabClassNames.tabBarAfter = (0, _classnames2.default)('rdTabBarAfter', this.props.tabsClassNames.tabBarAfter);
tabClassNames.tab = (0, _classnames2.default)('rdTab', this.props.tabsClassNames.tab);
tabClassNames.tabBefore = (0, _classnames2.default)('rdTabBefore', this.props.tabsClassNames.tabBefore);
tabClassNames.tabAfter = (0, _classnames2.default)('rdTabAfter', this.props.tabsClassNames.tabAfter);
tabClassNames.tabTitle = (0, _classnames2.default)('rdTabTitle', this.props.tabsClassNames.tabTitle);
tabClassNames.tabBeforeTitle = (0, _classnames2.default)('rdTabBeforeTitle', this.props.tabsClassNames.tabBeforeTitle);
tabClassNames.tabAfterTitle = (0, _classnames2.default)('rdTabAfterTitle', this.props.tabsClassNames.tabAfterTitle);
tabClassNames.tabCloseIcon = (0, _classnames2.default)('rdTabCloseIcon', this.props.tabsClassNames.tabCloseIcon);
var _tabClassNames = {};
_tabClassNames.tabBar = (0, _classnames2.default)('rdTabBar', this.props.tabsClassNames.tabBar);
_tabClassNames.tabBarAfter = (0, _classnames2.default)('rdTabBarAfter', this.props.tabsClassNames.tabBarAfter);
_tabClassNames.tab = (0, _classnames2.default)('rdTab', this.props.tabsClassNames.tab);
_tabClassNames.tabBefore = (0, _classnames2.default)('rdTabBefore', this.props.tabsClassNames.tabBefore);
_tabClassNames.tabAfter = (0, _classnames2.default)('rdTabAfter', this.props.tabsClassNames.tabAfter);
_tabClassNames.tabTitle = (0, _classnames2.default)('rdTabTitle', this.props.tabsClassNames.tabTitle);
_tabClassNames.tabBeforeTitle = (0, _classnames2.default)('rdTabBeforeTitle', this.props.tabsClassNames.tabBeforeTitle);
_tabClassNames.tabAfterTitle = (0, _classnames2.default)('rdTabAfterTitle', this.props.tabsClassNames.tabAfterTitle);
_tabClassNames.tabCloseIcon = (0, _classnames2.default)('rdTabCloseIcon', this.props.tabsClassNames.tabCloseIcon);

@@ -530,27 +516,43 @@ var content = [];

if (_this14.state.closedTabs.indexOf(tab.key) > -1) {
if (_this11.state.closedTabs.indexOf(tab.key) > -1) {
return '';
}
var _tab$props = tab.props;
var beforeTitle = _tab$props.beforeTitle;
var title = _tab$props.title;
var afterTitle = _tab$props.afterTitle;
var disableClose = _tab$props.disableClose;
var tabClassNames = _tab$props.tabClassNames;
var tabStyles = _tab$props.tabStyles;
var containerStyle = _tab$props.containerStyle;
var onClick = _tab$props.onClick;
var onMouseEnter = _tab$props.onMouseEnter;
var onMouseLeave = _tab$props.onMouseLeave;
var others = _objectWithoutProperties(_tab$props, ['beforeTitle', 'title', 'afterTitle', 'disableClose', 'tabClassNames', 'tabStyles', 'containerStyle', 'onClick', 'onMouseEnter', 'onMouseLeave']);
// override inline each tab styles
var tabStyle = _styleOverride2.default.merge(tabInlineStyles.tab, tab.props.tabStyles.tab);
var tabBeforeStyle = _styleOverride2.default.merge(tabInlineStyles.tabBefore, tab.props.tabStyles.tabBefore);
var tabAfterStyle = _styleOverride2.default.merge(tabInlineStyles.tabAfter, tab.props.tabStyles.tabAfter);
var tabTiteleStyle = _styleOverride2.default.merge(tabInlineStyles.tabTitle, tab.props.tabStyles.tabTitle);
var tabCloseIconStyle = _styleOverride2.default.merge(tabInlineStyles.tabCloseIcon, tab.props.tabStyles.tabCloseIcon);
var tabClasses = (0, _classnames2.default)(tabClassNames.tab, tab.props.tabClassNames.tab);
var tabBeforeClasses = (0, _classnames2.default)(tabClassNames.tabBefore, tab.props.tabClassNames.tabBefore);
var tabAfterClasses = (0, _classnames2.default)(tabClassNames.tabAfter, tab.props.tabClassNames.tabAfter);
var tabTitleClasses = (0, _classnames2.default)(tabClassNames.tabTitle, tab.props.tabClassNames.tabTitle);
var tabBeforeTitleClasses = (0, _classnames2.default)(tabClassNames.tabBeforeTitle, tab.props.tabClassNames.tabBeforeTitle);
var tabAfterTitleClasses = (0, _classnames2.default)(tabClassNames.tabAfterTitle, tab.props.tabClassNames.tabAfterTitle);
var tabCloseIconClasses = (0, _classnames2.default)(tabClassNames.tabCloseIcon, tab.props.tabClassNames.tabCloseIcon);
if (_this14.state.selectedTab === tab.key) {
tabStyle = _styleOverride2.default.merge(_styleOverride2.default.merge(tabInlineStyles.tab, tabInlineStyles.tabActive), tab.props.tabStyles.tabActive);
tabBeforeStyle = _styleOverride2.default.merge(_styleOverride2.default.merge(tabInlineStyles.tabBefore, tabInlineStyles.tabBeforeActive), tab.props.tabStyles.tabBeforeActive);
tabAfterStyle = _styleOverride2.default.merge(_styleOverride2.default.merge(tabInlineStyles.tabAfter, tabInlineStyles.tabAfterActive), tab.props.tabStyles.tabAfterActive);
tabTiteleStyle = _styleOverride2.default.merge(_styleOverride2.default.merge(tabInlineStyles.tabTitle, tabInlineStyles.tabTitleActive), tab.props.tabStyles.tabTitleActive);
tabClasses = (0, _classnames2.default)(tabClassNames.tab, 'rdTabActive', _this14.props.tabsClassNames.tabActive, tab.props.tabClassNames.tabActive);
var tabStyle = _styleOverride2.default.merge(tabInlineStyles.tab, tabStyles.tab);
var tabBeforeStyle = _styleOverride2.default.merge(tabInlineStyles.tabBefore, tabStyles.tabBefore);
var tabAfterStyle = _styleOverride2.default.merge(tabInlineStyles.tabAfter, tabStyles.tabAfter);
var tabTiteleStyle = _styleOverride2.default.merge(tabInlineStyles.tabTitle, tabStyles.tabTitle);
var tabCloseIconStyle = _styleOverride2.default.merge(tabInlineStyles.tabCloseIcon, tabStyles.tabCloseIcon);
var tabClasses = (0, _classnames2.default)(_tabClassNames.tab, tabClassNames.tab);
var tabBeforeClasses = (0, _classnames2.default)(_tabClassNames.tabBefore, tabClassNames.tabBefore);
var tabAfterClasses = (0, _classnames2.default)(_tabClassNames.tabAfter, tabClassNames.tabAfter);
var tabTitleClasses = (0, _classnames2.default)(_tabClassNames.tabTitle, tabClassNames.tabTitle);
var tabBeforeTitleClasses = (0, _classnames2.default)(_tabClassNames.tabBeforeTitle, tabClassNames.tabBeforeTitle);
var tabAfterTitleClasses = (0, _classnames2.default)(_tabClassNames.tabAfterTitle, tabClassNames.tabAfterTitle);
var tabCloseIconClasses = (0, _classnames2.default)(_tabClassNames.tabCloseIcon, tabClassNames.tabCloseIcon);
if (_this11.state.selectedTab === tab.key) {
tabStyle = _styleOverride2.default.merge(_styleOverride2.default.merge(tabInlineStyles.tab, tabInlineStyles.tabActive), tabStyles.tabActive);
tabBeforeStyle = _styleOverride2.default.merge(_styleOverride2.default.merge(tabInlineStyles.tabBefore, tabInlineStyles.tabBeforeActive), tabStyles.tabBeforeActive);
tabAfterStyle = _styleOverride2.default.merge(_styleOverride2.default.merge(tabInlineStyles.tabAfter, tabInlineStyles.tabAfterActive), tabStyles.tabAfterActive);
tabTiteleStyle = _styleOverride2.default.merge(_styleOverride2.default.merge(tabInlineStyles.tabTitle, tabInlineStyles.tabTitleActive), tabStyles.tabTitleActive);
tabClasses = (0, _classnames2.default)(tabClasses, 'rdTabActive', _this11.props.tabsClassNames.tabActive, tabClassNames.tabActive);
content.push(_react2.default.createElement(

@@ -562,8 +564,8 @@ _TabContainer2.default,

} else {
if (_this14.state.hoveredTab === tab.key) {
tabStyle = _styleOverride2.default.merge(_styleOverride2.default.merge(tabStyle, tabInlineStyles.tabOnHover), tab.props.tabStyles.tabOnHover);
tabBeforeStyle = _styleOverride2.default.merge(_styleOverride2.default.merge(tabBeforeStyle, tabInlineStyles.tabBeforeOnHover), tab.props.tabStyles.tabBeforeOnHover);
tabAfterStyle = _styleOverride2.default.merge(_styleOverride2.default.merge(tabAfterStyle, tabInlineStyles.tabAfterOnHover), tab.props.tabStyles.tabAfterOnHover);
tabTiteleStyle = _styleOverride2.default.merge(_styleOverride2.default.merge(tabTiteleStyle, tabInlineStyles.tabTitleOnHover), tab.props.tabStyles.tabTitleOnHover);
tabClasses = (0, _classnames2.default)(tabClasses, 'rdTabHover', _this14.props.tabsClassNames.tabHover, tab.props.tabClassNames.tabHover);
if (_this11.state.hoveredTab === tab.key) {
tabStyle = _styleOverride2.default.merge(_styleOverride2.default.merge(tabStyle, tabInlineStyles.tabOnHover), tabStyles.tabOnHover);
tabBeforeStyle = _styleOverride2.default.merge(_styleOverride2.default.merge(tabBeforeStyle, tabInlineStyles.tabBeforeOnHover), tabStyles.tabBeforeOnHover);
tabAfterStyle = _styleOverride2.default.merge(_styleOverride2.default.merge(tabAfterStyle, tabInlineStyles.tabAfterOnHover), tabStyles.tabAfterOnHover);
tabTiteleStyle = _styleOverride2.default.merge(_styleOverride2.default.merge(tabTiteleStyle, tabInlineStyles.tabTitleOnHover), tabStyles.tabTitleOnHover);
tabClasses = (0, _classnames2.default)(tabClasses, 'rdTabHover', _this11.props.tabsClassNames.tabHover, tabClassNames.tabHover);
}

@@ -583,8 +585,7 @@ content.push(_react2.default.createElement(

// }
var tabTitle = tab.props.title;
var extraAttribute = {};
if (typeof tabTitle === 'string') {
extraAttribute.title = tab.props.title;
if (typeof title === 'string') {
extraAttribute.title = title;
}
var closeButton = _this14.getCloseButton(tab, tabCloseIconStyle, tabCloseIconClasses, tabInlineStyles.tabCloseIconOnHover);
var closeButton = _this11.getCloseButton(tab, tabCloseIconStyle, tabCloseIconClasses, tabInlineStyles.tabCloseIconOnHover);

@@ -601,17 +602,17 @@ return _react2.default.createElement(

bounds: 'parent',
onStart: _this14.handleDragStart.bind(_this14, tab.key),
onDrag: _this14.handleDrag.bind(_this14, tab.key),
onStop: _this14.handleDragStop.bind(_this14, tab.key) },
onStart: _this11.handleDragStart.bind(_this11, tab.key),
onDrag: _this11.handleDrag.bind(_this11, tab.key),
onStop: _this11.handleDragStop.bind(_this11, tab.key) },
_react2.default.createElement(
'li',
{ style: tabStyle, className: tabClasses,
onClick: _this14.handleTabClick.bind(_this14, tab.key),
onMouseDown: _this14.handleMouseDown.bind(_this14, tab.key),
onMouseEnter: _this14.handleMouseEnter.bind(_this14, tab.key),
onMouseLeave: _this14.handleMouseLeave.bind(_this14, tab.key),
ref: tab.key },
_extends({ style: tabStyle, className: tabClasses,
onClick: _this11.handleTabClick.bind(_this11, tab.key),
onMouseEnter: _this11.handleMouseEnter.bind(_this11, tab.key, onMouseEnter),
onMouseLeave: _this11.handleMouseLeave.bind(_this11, tab.key, onMouseLeave),
ref: tab.key
}, others),
_react2.default.createElement(
'span',
{ style: _TabStyles2.default.beforeTitle, className: tabBeforeTitleClasses },
tab.props.beforeTitle
beforeTitle
),

@@ -621,6 +622,5 @@ _react2.default.createElement(

_extends({ style: tabTiteleStyle,
className: tabTitleClasses,
onDoubleClick: _this14.doubleClickHandlerWithKey(tab.key)
className: tabTitleClasses
}, extraAttribute),
tabTitle
title
),

@@ -630,3 +630,3 @@ _react2.default.createElement(

{ style: _TabStyles2.default.afterTitle, className: tabAfterTitleClasses },
tab.props.afterTitle
afterTitle
),

@@ -648,3 +648,3 @@ closeButton,

'ul',
{ tabIndex: '-1', style: tabInlineStyles.tabBar, className: tabClassNames.tabBar },
{ tabIndex: '-1', style: tabInlineStyles.tabBar, className: _tabClassNames.tabBar },
tabs,

@@ -657,3 +657,3 @@ _react2.default.createElement(

),
_react2.default.createElement('span', { style: tabInlineStyles.tabBarAfter, className: tabClassNames.tabBarAfter })
_react2.default.createElement('span', { style: tabInlineStyles.tabBarAfter, className: _tabClassNames.tabBarAfter })
),

@@ -666,3 +666,3 @@ content

return Tabs;
})(_react2.default.Component);
}(_react2.default.Component);

@@ -694,5 +694,2 @@ Tabs.defaultProps = {

onTabPositionChange: function onTabPositionChange() {},
onTabDoubleClick: function onTabDoubleClick() {},
onTabMouseEnter: function onTabMouseEnter() {},
onTabMouseLeave: function onTabMouseLeave() {},
keepSelectedTab: false

@@ -747,5 +744,2 @@ };

onTabPositionChange: _react2.default.PropTypes.func,
onTabDoubleClick: _react2.default.PropTypes.func,
onTabMouseEnter: _react2.default.PropTypes.func,
onTabMouseLeave: _react2.default.PropTypes.func,
keepSelectedTab: _react2.default.PropTypes.bool

@@ -752,0 +746,0 @@ };

8

lib/components/TabStyles.js

@@ -1,5 +0,1 @@

/* Inspired from Atom
https://github.com/atom/tabs
https://github.com/atom/atom-dark-ui
*/
'use strict';

@@ -10,2 +6,6 @@

});
/* Inspired from Atom
https://github.com/atom/tabs
https://github.com/atom/atom-dark-ui
*/
var TabStyles = {

@@ -12,0 +12,0 @@

2

lib/helpers/styleOverride.js

@@ -7,3 +7,3 @@ 'use strict';

var _immutable = require("immutable");
var _immutable = require('immutable');

@@ -10,0 +10,0 @@ var _immutable2 = _interopRequireDefault(_immutable);

4

lib/helpers/utils.js

@@ -1,2 +0,2 @@

'use strict';
"use strict";

@@ -7,3 +7,3 @@ Object.defineProperty(exports, "__esModule", {

var slideArray = function slideArray(array, a, b) {
var retArr = undefined;
var retArr = void 0;
var _array = array.slice(0);

@@ -10,0 +10,0 @@

66

package.json
{
"name": "react-draggable-tab",
"version": "0.4.3",
"version": "0.5.0",
"description": "Draggable chrome like tab react component ",

@@ -32,42 +32,43 @@ "main": "./lib/index.js",

"devDependencies": {
"babel-cli": "^6.3.17",
"babel-core": "^6.3.21",
"babel-eslint": "^5.0.0-beta4",
"babel-preset-es2015": "^6.1.18",
"babel-preset-react": "^6.1.18",
"babel-cli": "^6.6.5",
"babel-core": "^6.7.2",
"babel-eslint": "^5.0.0",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-2": "^6.5.0",
"babelify": "^7.2.0",
"browser-sync": "^2.10.0",
"browserify": "^12.0.1",
"chai": "^3.4.1",
"eslint": "^1.10.2",
"eslint-plugin-react": "^3.11.1",
"karma": "^0.13.15",
"karma-browserify": "^4.4.1",
"browser-sync": "^2.11.1",
"browserify": "^13.0.0",
"chai": "^3.5.0",
"eslint": "^2.4.0",
"eslint-plugin-react": "^4.2.3",
"karma": "^0.13.22",
"karma-browserify": "^5.0.2",
"karma-chai": "^0.1.0",
"karma-chrome-launcher": "^0.2.1",
"karma-cli": "0.1.1",
"karma-chrome-launcher": "^0.2.2",
"karma-cli": "0.1.2",
"karma-firefox-launcher": "^0.1.7",
"karma-mocha": "^0.2.1",
"karma-mocha": "^0.2.2",
"karma-safari-launcher": "^0.1.1",
"karma-spec-reporter": "0.0.23",
"material-ui": "^0.13.4",
"mocha": "^2.3.4",
"react-addons-test-utils": "^0.14.3",
"react-notification-badge": "^1.0.0",
"react-tap-event-plugin": "^0.2.1",
"watchify": "^3.6.1"
"karma-spec-reporter": "0.0.24",
"material-ui": "^0.15.0-alpha.1",
"mocha": "^2.4.5",
"react-addons-test-utils": "^0.14.7",
"react-notification-badge": "^1.1.0",
"react-tap-event-plugin": "^0.2.2",
"watchify": "^3.7.0"
},
"dependencies": {
"immutable": "^3.7.5",
"react": "^0.14.3",
"react-draggable": "^1.1.3",
"classnames": "^2.2.1",
"lodash": "^3.10.1",
"classnames": "^2.2.3",
"immutable": "^3.7.6",
"invariant": "^2.2.1",
"lodash": "^4.6.1",
"mousetrap": "^1.5.3",
"react-dom": "^0.14.3",
"invariant": "^2.2.0"
"react": "^0.14.7",
"react-dom": "^0.14.7",
"react-draggable": "^1.3.4"
},
"peerDependencies": {
"react": "^0.14.3",
"react-dom": "^0.14.3"
"react": "^0.14.7",
"react-dom": "^0.14.7"
},

@@ -82,2 +83,3 @@ "browserify": {

"es2015",
"stage-2",
"react"

@@ -84,0 +86,0 @@ ]

11

README.md

@@ -75,2 +75,7 @@ # React-draggable-tab [![Build Status](https://travis-ci.org/georgeOsdDev/react-draggable-tab.svg?branch=develop)](https://travis-ci.org/georgeOsdDev/react-draggable-tab) [![npm version](https://badge.fury.io/js/react-draggable-tab.svg)](http://badge.fury.io/js/react-draggable-tab)

##### Events
All other props like `onXX` handler set to `Tab` will be passed to rendered element except `onClick`
You can use any `onXX` for [Supported events](https://facebook.github.io/react/docs/events.html#supported-events) for tab element.
### `Tabs`

@@ -148,7 +153,7 @@

* `onTabDoubleClick(e, key)`: Called when `title` was double clicked.
~~* `onTabDoubleClick(e, key)`: Called when `title` was double clicked.~~ Removed from v0.5.0
* `onTabMouseEnter(e, key)`: Called when mouse enter to `tab`.
~~* `onTabMouseEnter(e, key)`: Called when mouse enter to `tab`.~~ Removed from v0.5.0
* `onTabMouseLeave(e, key)`: Called when mouse leave from `tab`.
~~* `onTabMouseLeave(e, key)`: Called when mouse leave from `tab`.~~ Removed from v0.5.0

@@ -155,0 +160,0 @@ ## Usage example

2

src/components/CloseIcon.js

@@ -1,3 +0,1 @@

'use strict';
import React from 'react';

@@ -4,0 +2,0 @@ import classNames from 'classnames';

2

src/components/CustomDraggable.js

@@ -1,3 +0,1 @@

'use strict';
import Draggable from 'react-draggable';

@@ -4,0 +2,0 @@

2

src/components/Tab.js

@@ -1,3 +0,1 @@

'use strict';
import React from 'react';

@@ -4,0 +2,0 @@

2

src/components/TabContainer.js

@@ -1,3 +0,1 @@

'use strict';
import React from 'react';

@@ -4,0 +2,0 @@ import StyleOverride from '../helpers/styleOverride';

129

src/components/Tabs.js

@@ -1,3 +0,1 @@

'use strict';
import _ from 'lodash';

@@ -199,5 +197,2 @@ import React from 'react';

handleMouseDown(key, e, ui) {
}
handleDragStart(key, e, ui) {

@@ -267,3 +262,3 @@ this.dragging = true;

handleMouseEnter(key, e){
handleMouseEnter(key, onMouseEnter, e){
if (!this.dragging){

@@ -273,3 +268,3 @@ this.setState({

}, () => {
this.props.onTabMouseEnter(e, key);
_.isFunction(onMouseEnter) ? onMouseEnter(e): null;
});

@@ -279,3 +274,3 @@ }

handleMouseLeave(key, e){
handleMouseLeave(key, onMouseLeave, e){
if (!this.dragging){

@@ -286,6 +281,6 @@ if (this.state.hoveredTab === key){

}, () => {
this.props.onTabMouseLeave(e, key);
_.isFunction(onMouseLeave) ? onMouseLeave(e): null;
});
} else {
this.props.onTabMouseLeave(e, key);
_.isFunction(onMouseLeave) ? onMouseLeave(e): null;
}

@@ -362,8 +357,2 @@ }

doubleClickHandlerWithKey(key){
return (e) => {
this.props.onTabDoubleClick(e, key);
};
}
render() {

@@ -394,13 +383,13 @@

// append tabs classNames
let tabClassNames = {
let _tabClassNames = {
};
tabClassNames.tabBar = classNames('rdTabBar', this.props.tabsClassNames.tabBar);
tabClassNames.tabBarAfter = classNames('rdTabBarAfter', this.props.tabsClassNames.tabBarAfter);
tabClassNames.tab = classNames('rdTab', this.props.tabsClassNames.tab);
tabClassNames.tabBefore = classNames('rdTabBefore', this.props.tabsClassNames.tabBefore);
tabClassNames.tabAfter = classNames('rdTabAfter', this.props.tabsClassNames.tabAfter);
tabClassNames.tabTitle = classNames('rdTabTitle', this.props.tabsClassNames.tabTitle);
tabClassNames.tabBeforeTitle = classNames('rdTabBeforeTitle', this.props.tabsClassNames.tabBeforeTitle);
tabClassNames.tabAfterTitle = classNames('rdTabAfterTitle', this.props.tabsClassNames.tabAfterTitle);
tabClassNames.tabCloseIcon = classNames('rdTabCloseIcon', this.props.tabsClassNames.tabCloseIcon);
_tabClassNames.tabBar = classNames('rdTabBar', this.props.tabsClassNames.tabBar);
_tabClassNames.tabBarAfter = classNames('rdTabBarAfter', this.props.tabsClassNames.tabBarAfter);
_tabClassNames.tab = classNames('rdTab', this.props.tabsClassNames.tab);
_tabClassNames.tabBefore = classNames('rdTabBefore', this.props.tabsClassNames.tabBefore);
_tabClassNames.tabAfter = classNames('rdTabAfter', this.props.tabsClassNames.tabAfter);
_tabClassNames.tabTitle = classNames('rdTabTitle', this.props.tabsClassNames.tabTitle);
_tabClassNames.tabBeforeTitle = classNames('rdTabBeforeTitle', this.props.tabsClassNames.tabBeforeTitle);
_tabClassNames.tabAfterTitle = classNames('rdTabAfterTitle', this.props.tabsClassNames.tabAfterTitle);
_tabClassNames.tabCloseIcon = classNames('rdTabCloseIcon', this.props.tabsClassNames.tabCloseIcon);

@@ -415,31 +404,45 @@

let {
beforeTitle,
title,
afterTitle,
disableClose,
tabClassNames,
tabStyles,
containerStyle,
onClick,
onMouseEnter,
onMouseLeave,
...others
} = tab.props;
// override inline each tab styles
let tabStyle = StyleOverride.merge(tabInlineStyles.tab, tab.props.tabStyles.tab);
let tabBeforeStyle = StyleOverride.merge(tabInlineStyles.tabBefore, tab.props.tabStyles.tabBefore);
let tabAfterStyle = StyleOverride.merge(tabInlineStyles.tabAfter, tab.props.tabStyles.tabAfter);
let tabTiteleStyle = StyleOverride.merge(tabInlineStyles.tabTitle, tab.props.tabStyles.tabTitle);
let tabCloseIconStyle = StyleOverride.merge(tabInlineStyles.tabCloseIcon, tab.props.tabStyles.tabCloseIcon);
let tabStyle = StyleOverride.merge(tabInlineStyles.tab, tabStyles.tab);
let tabBeforeStyle = StyleOverride.merge(tabInlineStyles.tabBefore, tabStyles.tabBefore);
let tabAfterStyle = StyleOverride.merge(tabInlineStyles.tabAfter, tabStyles.tabAfter);
let tabTiteleStyle = StyleOverride.merge(tabInlineStyles.tabTitle, tabStyles.tabTitle);
let tabCloseIconStyle = StyleOverride.merge(tabInlineStyles.tabCloseIcon, tabStyles.tabCloseIcon);
let tabClasses = classNames(tabClassNames.tab, tab.props.tabClassNames.tab);
let tabBeforeClasses = classNames(tabClassNames.tabBefore, tab.props.tabClassNames.tabBefore);
let tabAfterClasses = classNames(tabClassNames.tabAfter, tab.props.tabClassNames.tabAfter);
let tabTitleClasses = classNames(tabClassNames.tabTitle, tab.props.tabClassNames.tabTitle);
let tabBeforeTitleClasses = classNames(tabClassNames.tabBeforeTitle, tab.props.tabClassNames.tabBeforeTitle);
let tabAfterTitleClasses = classNames(tabClassNames.tabAfterTitle, tab.props.tabClassNames.tabAfterTitle);
let tabCloseIconClasses = classNames(tabClassNames.tabCloseIcon, tab.props.tabClassNames.tabCloseIcon);
let tabClasses = classNames(_tabClassNames.tab, tabClassNames.tab);
let tabBeforeClasses = classNames(_tabClassNames.tabBefore, tabClassNames.tabBefore);
let tabAfterClasses = classNames(_tabClassNames.tabAfter, tabClassNames.tabAfter);
let tabTitleClasses = classNames(_tabClassNames.tabTitle, tabClassNames.tabTitle);
let tabBeforeTitleClasses = classNames(_tabClassNames.tabBeforeTitle, tabClassNames.tabBeforeTitle);
let tabAfterTitleClasses = classNames(_tabClassNames.tabAfterTitle, tabClassNames.tabAfterTitle);
let tabCloseIconClasses = classNames(_tabClassNames.tabCloseIcon, tabClassNames.tabCloseIcon);
if (this.state.selectedTab === tab.key) {
tabStyle = StyleOverride.merge(StyleOverride.merge(tabInlineStyles.tab, tabInlineStyles.tabActive), tab.props.tabStyles.tabActive);
tabBeforeStyle = StyleOverride.merge(StyleOverride.merge(tabInlineStyles.tabBefore, tabInlineStyles.tabBeforeActive), tab.props.tabStyles.tabBeforeActive);
tabAfterStyle = StyleOverride.merge(StyleOverride.merge(tabInlineStyles.tabAfter, tabInlineStyles.tabAfterActive), tab.props.tabStyles.tabAfterActive);
tabTiteleStyle = StyleOverride.merge(StyleOverride.merge(tabInlineStyles.tabTitle, tabInlineStyles.tabTitleActive), tab.props.tabStyles.tabTitleActive);
tabClasses = classNames(tabClassNames.tab, 'rdTabActive', this.props.tabsClassNames.tabActive, tab.props.tabClassNames.tabActive);
tabStyle = StyleOverride.merge(StyleOverride.merge(tabInlineStyles.tab, tabInlineStyles.tabActive), tabStyles.tabActive);
tabBeforeStyle = StyleOverride.merge(StyleOverride.merge(tabInlineStyles.tabBefore, tabInlineStyles.tabBeforeActive), tabStyles.tabBeforeActive);
tabAfterStyle = StyleOverride.merge(StyleOverride.merge(tabInlineStyles.tabAfter, tabInlineStyles.tabAfterActive), tabStyles.tabAfterActive);
tabTiteleStyle = StyleOverride.merge(StyleOverride.merge(tabInlineStyles.tabTitle, tabInlineStyles.tabTitleActive), tabStyles.tabTitleActive);
tabClasses = classNames(tabClasses, 'rdTabActive', this.props.tabsClassNames.tabActive, tabClassNames.tabActive);
content.push(<TabContainer key={'tabContainer#' + tab.key} selected={true} style={tab.props.containerStyle}>{tab}</TabContainer>);
} else {
if (this.state.hoveredTab === tab.key) {
tabStyle = StyleOverride.merge(StyleOverride.merge(tabStyle, tabInlineStyles.tabOnHover), tab.props.tabStyles.tabOnHover);
tabBeforeStyle = StyleOverride.merge(StyleOverride.merge(tabBeforeStyle, tabInlineStyles.tabBeforeOnHover), tab.props.tabStyles.tabBeforeOnHover);
tabAfterStyle = StyleOverride.merge(StyleOverride.merge(tabAfterStyle, tabInlineStyles.tabAfterOnHover), tab.props.tabStyles.tabAfterOnHover);
tabTiteleStyle = StyleOverride.merge(StyleOverride.merge(tabTiteleStyle, tabInlineStyles.tabTitleOnHover), tab.props.tabStyles.tabTitleOnHover);
tabClasses = classNames(tabClasses, 'rdTabHover', this.props.tabsClassNames.tabHover, tab.props.tabClassNames.tabHover);
tabStyle = StyleOverride.merge(StyleOverride.merge(tabStyle, tabInlineStyles.tabOnHover), tabStyles.tabOnHover);
tabBeforeStyle = StyleOverride.merge(StyleOverride.merge(tabBeforeStyle, tabInlineStyles.tabBeforeOnHover), tabStyles.tabBeforeOnHover);
tabAfterStyle = StyleOverride.merge(StyleOverride.merge(tabAfterStyle, tabInlineStyles.tabAfterOnHover), tabStyles.tabAfterOnHover);
tabTiteleStyle = StyleOverride.merge(StyleOverride.merge(tabTiteleStyle, tabInlineStyles.tabTitleOnHover), tabStyles.tabTitleOnHover);
tabClasses = classNames(tabClasses, 'rdTabHover', this.props.tabsClassNames.tabHover, tabClassNames.tabHover);
}

@@ -456,6 +459,5 @@ content.push(<TabContainer key={'tabContainer#' + tab.key} selected={false} style={tab.props.containerStyle}>{tab}</TabContainer>);

// }
let tabTitle = tab.props.title;
let extraAttribute = {};
if (typeof tabTitle === 'string'){
extraAttribute.title = tab.props.title;
if (typeof title === 'string'){
extraAttribute.title = title;
}

@@ -478,14 +480,13 @@ let closeButton = this.getCloseButton(tab, tabCloseIconStyle, tabCloseIconClasses, tabInlineStyles.tabCloseIconOnHover);

onClick={this.handleTabClick.bind(this, tab.key)}
onMouseDown={this.handleMouseDown.bind(this, tab.key)}
onMouseEnter={this.handleMouseEnter.bind(this, tab.key)}
onMouseLeave={this.handleMouseLeave.bind(this, tab.key)}
ref={tab.key}>
<span style={TabStyles.beforeTitle} className={tabBeforeTitleClasses}>{tab.props.beforeTitle}</span>
onMouseEnter={this.handleMouseEnter.bind(this, tab.key, onMouseEnter)}
onMouseLeave={this.handleMouseLeave.bind(this, tab.key, onMouseLeave)}
ref={tab.key}
{...others}>
<span style={TabStyles.beforeTitle} className={tabBeforeTitleClasses}>{beforeTitle}</span>
<p style={tabTiteleStyle}
className={tabTitleClasses}
onDoubleClick={this.doubleClickHandlerWithKey(tab.key)}
{...extraAttribute} >
{tabTitle}
{title}
</p>
<span style={TabStyles.afterTitle} className={tabAfterTitleClasses}>{tab.props.afterTitle}</span>
<span style={TabStyles.afterTitle} className={tabAfterTitleClasses}>{afterTitle}</span>
{closeButton}

@@ -502,3 +503,3 @@ <span style={tabBeforeStyle} className={tabBeforeClasses}></span>

<div style={TabStyles.relative}>
<ul tabIndex='-1' style={tabInlineStyles.tabBar} className={tabClassNames.tabBar}>
<ul tabIndex='-1' style={tabInlineStyles.tabBar} className={_tabClassNames.tabBar}>
{tabs}

@@ -509,3 +510,3 @@ <li className='rdTabAddButton' style={TabStyles.tabAddButton} onClick={this.handleAddButtonClick.bind(this)}>

</ul>
<span style={tabInlineStyles.tabBarAfter} className={tabClassNames.tabBarAfter}></span>
<span style={tabInlineStyles.tabBarAfter} className={_tabClassNames.tabBarAfter}></span>
</div>

@@ -539,5 +540,2 @@ {content}

onTabPositionChange: () => {},
onTabDoubleClick: () => {},
onTabMouseEnter: () => {},
onTabMouseLeave: () => {},
keepSelectedTab: false

@@ -592,5 +590,2 @@ };

onTabPositionChange: React.PropTypes.func,
onTabDoubleClick: React.PropTypes.func,
onTabMouseEnter: React.PropTypes.func,
onTabMouseLeave: React.PropTypes.func,
keepSelectedTab: React.PropTypes.bool

@@ -597,0 +592,0 @@ };

2

src/components/TabStyles.js

@@ -5,4 +5,2 @@ /* Inspired from Atom

*/
'use strict';
const TabStyles = {

@@ -9,0 +7,0 @@

4

src/helpers/styleOverride.js

@@ -1,5 +0,3 @@

'use strict';
import Immutable from 'immutable';
import Immutable from "immutable";
let merge = (original, override) => {

@@ -6,0 +4,0 @@ return Immutable.Map(original).merge(override).toObject();

2

src/helpers/utils.js

@@ -1,3 +0,1 @@

'use strict';
let slideArray = (array, a, b) => {

@@ -4,0 +2,0 @@ let retArr;

116

test/components/Tabs_spec.js

@@ -1,2 +0,1 @@

'use strict';
import React from 'react';

@@ -46,5 +45,2 @@ import ReactDom from 'react-dom';

expect(typeof component.props.onTabPositionChange).to.be.equal('function');
expect(typeof component.props.onTabDoubleClick).to.be.equal('function');
expect(typeof component.props.onTabMouseEnter).to.be.equal('function');
expect(typeof component.props.onTabMouseLeave).to.be.equal('function');
});

@@ -616,3 +612,2 @@

describe('when Tab clicked', function () {

@@ -708,43 +703,2 @@ let called = false;

describe('when Tab double clicked', function () {
let called = false;
let key = '';
const tabs = [
(<Tab key={'tab1'} title={'tab1'} >
<div>
<h1 className='tab1click'>tab1Content</h1>
</div>
</Tab>),
(<Tab key={'tab2'} title={'tab2'} >
<div>
<h1 className='tab2click'>tab2Content</h1>
</div>
</Tab>),
(<Tab key={'tab3'} title={'tab3'} >
<div>
<h1 className='tab3click'>tab3Content</h1>
</div>
</Tab>)
];
before(() => {
component = ReactTestUtils.renderIntoDocument(
<Tabs
onTabDoubleClick={function(e, _key){called = true; key = _key; }}
selectedTab="tab1"
tabs={tabs} />);
let rdTabTitles = ReactTestUtils.scryRenderedDOMComponentsWithClass(component, 'rdTabTitle');
ReactTestUtils.Simulate.doubleClick(rdTabTitles[2]);
});
it('should call onTabDoubleClick prop', () => {
expect(called).to.be.equal(true);
});
it('should pass key', () => {
expect(key).to.be.eql('tab3');
});
});
describe('when unselected Tab closed', function () {

@@ -1374,15 +1328,2 @@ let called1 = false;

let called1 = false;
let enteredKey;
let called2 = false;
let leavedKey;
let onMouseEnter = (e, key) => {
called1 = true;
enteredKey = key;
}
let onMouseLeave = (e, key) => {
called2 = true;
leavedKey = key;
}
const tabs = [

@@ -1412,4 +1353,2 @@ (<Tab key={'tab1'} title={'tab1'} >

selectedTab="tab3"
onTabMouseEnter={onMouseEnter}
onTabMouseLeave={onMouseLeave}
tabs={tabs} />);

@@ -1435,8 +1374,2 @@ });

it('should trigger props.onTabMouseEnter', function () {
expect(called1).to.be.eql(true);
expect(enteredKey).to.be.eql('tab1');
expect(called2).to.be.eql(false);
});
it('should update style and className on mouseLeave', function () {

@@ -1459,7 +1392,2 @@ let rdTabs = ReactTestUtils.scryRenderedDOMComponentsWithClass(component, 'rdTab');

it('should trigger props.onTabMouseLeave', function () {
expect(called2).to.be.eql(true);
expect(leavedKey).to.be.eql('tab1');
});
it('should update style and className with tab customized value on mouseEnter', function () {

@@ -1499,6 +1427,50 @@ let rdTabs = ReactTestUtils.scryRenderedDOMComponentsWithClass(component, 'rdTab');

});
});
describe('Event listeners for each Tab', function () {
let called1 = false;
let called2 = false;
let called3 = false;
let called4 = false;
const tabs = [
(<Tab key={'tab1'} title={'tab1'} onDoubleClick={() => {called1 = true;}}>
<div>
<h1 className='tab1click'>tab1Content</h1>
</div>
</Tab>),
(<Tab key={'tab2'} title={'tab2'} onDoubleClick={() => {called2 = true;}} onContextMenu={() => {called3 = true;}}>
<div>
<h1 className='tab2click'>tab2Content</h1>
</div>
</Tab>),
(<Tab key={'tab3'} title={'tab3'} onContextMenu={() => {called4 = true;}}>
<div>
<h1 className='tab3click'>tab3Content</h1>
</div>
</Tab>)
];
let rdTabTitles;
before(() => {
component = ReactTestUtils.renderIntoDocument(
<Tabs
selectedTab="tab1"
tabs={tabs} />);
rdTabTitles = ReactTestUtils.scryRenderedDOMComponentsWithClass(component, 'rdTabTitle');
ReactTestUtils.Simulate.doubleClick(rdTabTitles[1]);
ReactTestUtils.Simulate.contextMenu(rdTabTitles[2]);
});
it('should call specified listener ', () => {
expect(called1).to.be.equal(false);
expect(called2).to.be.equal(true);
expect(called3).to.be.equal(false);
expect(called4).to.be.equal(true);
});
});
});
.babelrc

Sorry, the diff of this file is not supported yet

.travis.yml

Sorry, the diff of this file is not supported yet