Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-draggable-tab
Advanced tools
react-draggable-tab - npm Package Compare versions
Comparing version 0.4.3 to 0.5.0
| ## 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
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.75%
185811
- Lines of code
- increased by0.39%
4126
- Number of lines in readme file
- increased by1.77%
287
Worsened metrics
- Dev dependency count
- increased by3.85%
27
Dependency changes
+ Addedlodash@4.17.21(transitive)
- Removedlodash@3.10.1(transitive)
Updatedclassnames@^2.2.3
Updatedimmutable@^3.7.6
Updatedinvariant@^2.2.1
Updatedlodash@^4.6.1
Updatedreact@^0.14.7
Updatedreact-dom@^0.14.7
Updatedreact-draggable@^1.3.4