react-draggable-tab
Advanced tools
Comparing version
## 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 |
@@ -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 |
@@ -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 @@ ] |
'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 = { |
'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; |
'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 = { |
'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 = { |
'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 @@ }; |
@@ -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 @@ |
@@ -7,3 +7,3 @@ 'use strict'; | ||
var _immutable = require("immutable"); | ||
var _immutable = require('immutable'); | ||
@@ -10,0 +10,0 @@ var _immutable2 = _interopRequireDefault(_immutable); |
@@ -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 @@ |
{ | ||
"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 @@ ] |
@@ -75,2 +75,7 @@ # React-draggable-tab [](https://travis-ci.org/georgeOsdDev/react-draggable-tab) [](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 |
@@ -1,3 +0,1 @@ | ||
'use strict'; | ||
import React from 'react'; | ||
@@ -4,0 +2,0 @@ import classNames from 'classnames'; |
@@ -1,3 +0,1 @@ | ||
'use strict'; | ||
import Draggable from 'react-draggable'; | ||
@@ -4,0 +2,0 @@ |
@@ -1,3 +0,1 @@ | ||
'use strict'; | ||
import React from 'react'; | ||
@@ -4,0 +2,0 @@ |
@@ -1,3 +0,1 @@ | ||
'use strict'; | ||
import React from 'react'; | ||
@@ -4,0 +2,0 @@ import StyleOverride from '../helpers/styleOverride'; |
@@ -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 @@ }; |
@@ -5,4 +5,2 @@ /* Inspired from Atom | ||
*/ | ||
'use strict'; | ||
const TabStyles = { | ||
@@ -9,0 +7,0 @@ |
@@ -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(); |
@@ -1,3 +0,1 @@ | ||
'use strict'; | ||
let slideArray = (array, a, b) => { | ||
@@ -4,0 +2,0 @@ let retArr; |
@@ -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); | ||
}); | ||
}); | ||
}); |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
185811
0.75%4126
0.39%287
1.77%27
3.85%+ Added
- Removed
Updated
Updated
Updated
Updated
Updated
Updated
Updated