react-draggable-tab - npm Package Compare versions

Comparing version 0.2.3 to 0.3.0

CHANGELOG.md

 ## Change Log
 
-### Ver 0.2.4(Next release, Not released)
+### Ver 0.3.1(Next release, Not released)
 
+### Ver 0.3.0
+
+  This release contains breaking change.
+
+  * #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)
+
 ### Ver 0.2.3
@@ -6,0 +13,0 @@

components/CloseIcon.js

@@ -6,2 +6,3 @@ 'use strict';
 import TabStyles from './TabStyles';
+import StyleOverride from '../helpers/styleOverride';
 
@@ -32,4 +33,9 @@ class CloseIcon extends React.Component {
     if (this.state.hover) {
-      iconStyle.push(TabStyles.tabCloseIconOnHover, this.props.hoverStyle);
+      iconStyle = StyleOverride.merge(this.props.style,
+                    StyleOverride.merge(TabStyles.tabCloseIconOnHover, this.props.hoverStyle)
+                  );
       className = classNames(this.props.className, 'hover');
+    } else {
+      iconStyle = this.props.style;
+      className = this.props.className;
     }
@@ -39,3 +45,3 @@
       <span
-        styles={[iconStyle]}
+        style={iconStyle}
         className={className}
@@ -42,0 +48,0 @@ onMouseOver={this.handleMouseOver.bind(this)}

components/Tabs.js

@@ -171,3 +171,3 @@ 'use strict';
       if(swapedTabs) {
-        this.props.onTabPositionChanged(e, key, this._getOpenTabs(nextTabs));
+        this.props.onTabPositionChange(e, key, this._getOpenTabs(nextTabs));
       }
@@ -184,3 +184,3 @@ });
       this.setState({selectedTab: key}, () => {
-        this.props.onTabSelected(e, key, this._getCurrentOpenTabs());
+        this.props.onTabSelect(e, key, this._getCurrentOpenTabs());
       });
@@ -210,5 +210,5 @@ }
       let currentOpenTabs = this._getCurrentOpenTabs();
-      this.props.onTabClosed(e, key, currentOpenTabs);
+      this.props.onTabClose(e, key, currentOpenTabs);
       if (shoudBeNotifyTabChange) {
-        this.props.onTabSelected(e, nextSelected, currentOpenTabs);
+        this.props.onTabSelect(e, nextSelected, currentOpenTabs);
       }
@@ -219,3 +219,3 @@ });
   handleAddButtonClick(e) {
-    this.props.onTabAddButtonClicked(e, this._getCurrentOpenTabs());
+    this.props.onTabAddButtonClick(e, this._getCurrentOpenTabs());
   }
@@ -238,3 +238,3 @@
     return (e) => {
-      this.props.onTabDoubleClicked(e, key);
+      this.props.onTabDoubleClick(e, key);
     };
@@ -378,7 +378,7 @@ }
   tabAddButton: (<span>{'+'}</span>),
-  onTabSelected: () => {},
-  onTabClosed: () => {},
-  onTabAddButtonClicked: () => {},
-  onTabPositionChanged: () => {},
-  onTabDoubleClicked: () => {}
+  onTabSelect: () => {},
+  onTabClose: () => {},
+  onTabAddButtonClick: () => {},
+  onTabPositionChange: () => {},
+  onTabDoubleClick: () => {}
 };
@@ -417,9 +417,9 @@
   tabAddButton: React.PropTypes.element,
-  onTabSelected: React.PropTypes.func,
-  onTabClosed: React.PropTypes.func,
-  onTabAddButtonClicked: React.PropTypes.func,
-  onTabPositionChanged: React.PropTypes.func,
-  onTabDoubleClicked: React.PropTypes.func
+  onTabSelect: React.PropTypes.func,
+  onTabClose: React.PropTypes.func,
+  onTabAddButtonClick: React.PropTypes.func,
+  onTabPositionChange: React.PropTypes.func,
+  onTabDoubleClick: React.PropTypes.func
 };
 
 export default Tabs;

components/TabTemplate.js

 'use strict';
 
 import React from 'react';
+import StyleOverride from '../helpers/styleOverride';
 
@@ -20,9 +21,10 @@ const styles = {
   render(){
-    let css = [styles.root];
+    let style;
     if (!this.props.selected) {
-      css.push(styles.unselected);
+      style = StyleOverride.merge(styles.root, styles.unselected);
+    } else {
+      style = styles.root;
     }
-
     return (
-      <div styles={css}>
+      <div style={style}>
         {this.props.children}
@@ -29,0 +31,0 @@ </div>

example/app.js

 'use strict';
 
-import _     from 'lodash';
+import _ from 'lodash';
 import React from 'react/addons';
@@ -10,7 +10,7 @@ import injectTapEventPlugin from 'react-tap-event-plugin';
 
-import Tabs  from '../components/Tabs';
-import Tab   from '../components/Tab';
+import Tabs from '../components/Tabs';
+import Tab from '../components/Tab';
 
-import DynamicTabContent from './DynamicTabContent'
-import DynamicTabBadge from './DynamicTabBadge'
+import DynamicTabContent from './DynamicTabContent';
+import DynamicTabBadge from './DynamicTabBadge';
 
@@ -28,3 +28,3 @@ //allow react dev tools work
   tabAfter: 'myTabAfter'
-}
+};
 
@@ -38,3 +38,3 @@ const tabsStyles = {
   tabAfter: {}
-}
+};
 
@@ -115,4 +115,4 @@ class App extends React.Component {
 
-    let tab = _.find(this.state.tabs, (tab) => {
-      return tab.key === key;
+    let tab = _.find(this.state.tabs, (t) => {
+      return t.key === key;
     });
@@ -166,8 +166,8 @@ this.setState({
           tabsStyles={tabsStyles}
-          selectedTab={this.state.selectedTab ? this.state.selectedTab : "tab2"}
-          onTabSelected={this.handleTabSelect.bind(this)}
-          onTabClosed={this.handleTabClose.bind(this)}
-          onTabAddButtonClicked={this.handleTabAddButtonClick.bind(this)}
-          onTabPositionChanged={this.handleTabPositionChange.bind(this)}
-          onTabDoubleClicked={this.handleTabDoubleClick.bind(this)}
+          selectedTab={this.state.selectedTab ? this.state.selectedTab : 'tab2'}
+          onTabSelect={this.handleTabSelect.bind(this)}
+          onTabClose={this.handleTabClose.bind(this)}
+          onTabAddButtonClick={this.handleTabAddButtonClick.bind(this)}
+          onTabPositionChange={this.handleTabPositionChange.bind(this)}
+          onTabDoubleClick={this.handleTabDoubleClick.bind(this)}
           tabs={this.state.tabs}
@@ -188,5 +188,5 @@ />
       </div>
-    )
+    );
   }
-};
+}
 
@@ -193,0 +193,0 @@ App.childContextTypes = {

package.json

 {
   "name": "react-draggable-tab",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "description": "Draggable chrome like tab react component ",
@@ -9,3 +9,3 @@ "main": "index.js",
     "watch:example": "watchify example/app.js -dv -o example/bundle.js",
-    "start:example": "npm run watch:example & npm run browser",
+    "start:example": "NODE_ENV=production npm run watch:example & npm run browser",
     "test:local": "karma start",
@@ -12,0 +12,0 @@ "test": "./node_modules/.bin/karma start --browsers Firefox --single-run"

README.md

@@ -114,12 +114,12 @@ # React-draggable-tab [![Build Status](https://travis-ci.org/georgeOsdDev/react-draggable-tab.svg?branch=develop)](https://travis-ci.org/georgeOsdDev/react-draggable-tab) [![npm version](https://badge.fury.io/js/react-draggable-tab.svg)](http://badge.fury.io/js/react-draggable-tab)
 
-  * `onTabSelected(e, key, currentTabs)`: Called when tab of key was selected.
+  * `onTabSelect(e, key, currentTabs)`: Called when tab of key was selected.
     `currentTabs` is array of tabs elements sorted with current order.
 
-  * `onTabClosed(e, key, currentTabs)`: Called when tab of key was closed.
+  * `onTabClose(e, key, currentTabs)`: Called when tab of key was closed.
     `currentTabs` is array of tabs elements sorted with current order.
 
-  * `onTabPositionChanged(e, key, currentTabs)`: Called when tab of key was moved.
+  * `onTabPositionChange(e, key, currentTabs)`: Called when tab of key was moved.
     `currentTabs` is array of tabs elements sorted with current order.
 
-  * `onTabAddButtonClicked(e, currentTabs)`: Called when `tab add button` was clicked.
+  * `onTabAddButtonClick(e, currentTabs)`: Called when `tab add button` was clicked.
     `currentTabs` is array of tabs elements sorted with current order.
@@ -132,3 +132,3 @@ Basically you will concat `currentTabs` with new empty tab.
 
-  * `onTabDoubleClicked(e, key)`: Called when `title` was double clicked.
+  * `onTabDoubleClick(e, key)`: Called when `title` was double clicked.
 
@@ -209,6 +209,6 @@ ## Usage example
         selectedTab={this.state.selectedTab ? this.state.selectedTab : "tab2"}
-        onTabSelected={this.handleTabSelect.bind(this)}
-        onTabClosed={this.handleTabClose.bind(this)}
-        onTabAddButtonClicked={this.handleTabAddButtonClick.bind(this)}
-        onTabPositionChanged={this.handleTabPositionChange.bind(this)}
+        onTabSelect={this.handleTabSelect.bind(this)}
+        onTabClose={this.handleTabClose.bind(this)}
+        onTabAddButtonClick={this.handleTabAddButtonClick.bind(this)}
+        onTabPositionChange={this.handleTabPositionChange.bind(this)}
         tabs={this.state.tabs}
@@ -215,0 +215,0 @@ />

test/components/Tabs_spec.js

@@ -37,6 +37,7 @@ 'use strict';
 
-    expect(typeof component.props.onTabSelected).to.be.equal('function');
-    expect(typeof component.props.onTabClosed).to.be.equal('function');
-    expect(typeof component.props.onTabAddButtonClicked).to.be.equal('function');
-    expect(typeof component.props.onTabPositionChanged).to.be.equal('function');
+    expect(typeof component.props.onTabSelect).to.be.equal('function');
+    expect(typeof component.props.onTabClose).to.be.equal('function');
+    expect(typeof component.props.onTabAddButtonClick).to.be.equal('function');
+    expect(typeof component.props.onTabPositionChange).to.be.equal('function');
+    expect(typeof component.props.onTabDoubleClick).to.be.equal('function');
 
@@ -101,6 +102,6 @@ });
 
-    const el1 =(<i className='icon icon1' />);
-    const el2 =(<i className='icon icon2' />);
-    const el3 =(<i className='icon icon3' />);
-    const el4 =(<i className='icon icon4' />);
+    const el1 = (<i className='icon icon1' />);
+    const el2 = (<i className='icon icon2' />);
+    const el3 = (<i className='icon icon3' />);
+    const el4 = (<i className='icon icon4' />);
 
@@ -132,3 +133,3 @@ const tabs = [
       expect(t1BeforeTitleIcon).to.be.length(1);
-      expect(React.findDOMNode(t1BeforeTitleIcon[0]).className.indexOf('icon1') > 0).to.be.equal(true)
+      expect(React.findDOMNode(t1BeforeTitleIcon[0]).className.indexOf('icon1') > 0).to.be.equal(true);
 
@@ -148,3 +149,3 @@ let t1AfterTitle = TestUtils.findRenderedDOMComponentWithClass(children[0], 'rdTabAfterTitle');
       expect(t2AfterTitleIcon).to.be.length(1);
-      expect(React.findDOMNode(t2AfterTitleIcon[0]).className.indexOf('icon2') > 0).to.be.equal(true)
+      expect(React.findDOMNode(t2AfterTitleIcon[0]).className.indexOf('icon2') > 0).to.be.equal(true);
     });
@@ -156,3 +157,3 @@
       expect(t3BeforeTitleIcon).to.be.length(1);
-      expect(React.findDOMNode(t3BeforeTitleIcon[0]).className.indexOf('icon3') > 0).to.be.equal(true)
+      expect(React.findDOMNode(t3BeforeTitleIcon[0]).className.indexOf('icon3') > 0).to.be.equal(true);
 
@@ -162,5 +163,5 @@ let t3AfterTitle = TestUtils.findRenderedDOMComponentWithClass(children[2], 'rdTabAfterTitle');
       expect(t3AfterTitleIcon).to.be.length(1);
-      expect(React.findDOMNode(t3AfterTitleIcon[0]).className.indexOf('icon4') > 0).to.be.equal(true)
+      expect(React.findDOMNode(t3AfterTitleIcon[0]).className.indexOf('icon4') > 0).to.be.equal(true);
     });
-  })
+  });
 
@@ -510,3 +511,3 @@ describe('add custom className to all tabs ', function(){
 
-  describe('when TabAddButtonClicked clicked', function () {
+  describe('when TabAddButton clicked', function () {
     let called = false;
@@ -531,3 +532,3 @@ let currentTabs = [];
         <Tabs
-          onTabAddButtonClicked={function(e, _currentTabs){called = true; currentTabs = _currentTabs;}}
+          onTabAddButtonClick={function(e, _currentTabs){called = true; currentTabs = _currentTabs; }}
           selectedTab="tab1"
@@ -540,6 +541,6 @@ tabs={tabs} />);
 
-    it('should call onTabAddButtonClicked prop', () => {
+    it('should call onTabAddButtonClick prop', () => {
       expect(called).to.be.equal(true);
     });
-    it('should pass currentTabs to onTabAddButtonClicked', () => {
+    it('should pass currentTabs to onTabAddButtonClick', () => {
       expect(currentTabs).to.be.length(2);
@@ -578,3 +579,3 @@ expect(currentTabs[0].key).to.be.equal('tab1');
         <Tabs
-          onTabSelected={function(e, _key, _currentTabs){called = true; key = _key; currentTabs = _currentTabs; }}
+          onTabSelect={function(e, _key, _currentTabs){called = true; key = _key; currentTabs = _currentTabs; }}
           selectedTab="tab1"
@@ -587,6 +588,6 @@ tabs={tabs} />);
 
-    it('should call onTabSelected prop', () => {
+    it('should call onTabSelect prop', () => {
       expect(called).to.be.equal(true);
     });
-    it('should pass key and currentTabs to onTabSelected', () => {
+    it('should pass key and currentTabs to onTabSelect', () => {
       expect(key).to.be.eql('tab3');
@@ -625,3 +626,3 @@
         <Tabs
-          onTabSelected={function(e, _key, _currentTabs){called = true; key = _key; currentTabs = _currentTabs; }}
+          onTabSelect={function(e, _key, _currentTabs){called = true; key = _key; currentTabs = _currentTabs; }}
           selectedTab="tab1"
@@ -634,6 +635,6 @@ tabs={tabs} />);
 
-    it('should call onTabSelected prop', () => {
+    it('should call onTabSelect prop', () => {
       expect(called).to.be.equal(true);
     });
-    it('should pass key and currentTabs to onTabSelected', () => {
+    it('should pass key and currentTabs to onTabSelect', () => {
       expect(key).to.be.eql('tab3');
@@ -671,3 +672,3 @@
         <Tabs
-          onTabDoubleClicked={function(e, _key){called = true; key = _key; }}
+          onTabDoubleClick={function(e, _key){called = true; key = _key; }}
           selectedTab="tab1"
@@ -680,3 +681,3 @@ tabs={tabs} />);
 
-    it('should call onTabDoubleClicked prop', () => {
+    it('should call onTabDoubleClick prop', () => {
       expect(called).to.be.equal(true);
@@ -719,4 +720,4 @@ });
           tabsClassNames={{tabCloseIcon: 'myCloseButton'}}
-          onTabClosed={function(e, _key, _currentTabs){called1 = true; key1 = _key; currentTabs1 = _currentTabs; }}
-          onTabSelected={function(e, _key, _currentTabs){called2 = true; key2 = _key; currentTabs2 = _currentTabs; }}
+          onTabClose={function(e, _key, _currentTabs){called1 = true; key1 = _key; currentTabs1 = _currentTabs; }}
+          onTabSelect={function(e, _key, _currentTabs){called2 = true; key2 = _key; currentTabs2 = _currentTabs; }}
           selectedTab="tab3"
@@ -730,6 +731,6 @@ tabs={tabs} />);
 
-    it('should call onTabClosed prop', () => {
+    it('should call onTabClose prop', () => {
       expect(called1).to.be.equal(true);
     });
-    it('should pass key and currentTabs to onTabClosed', () => {
+    it('should pass key and currentTabs to onTabClose', () => {
       expect(key1).to.be.eql('tab2');
@@ -778,4 +779,4 @@
           tabsClassNames={{tabCloseIcon: 'myCloseButton'}}
-          onTabClosed={function(e, _key, _currentTabs){called1 = true; key1 = _key; currentTabs1 = _currentTabs; }}
-          onTabSelected={function(e, _key, _currentTabs){called2 = true; key2 = _key; currentTabs2 = _currentTabs; }}
+          onTabClose={function(e, _key, _currentTabs){called1 = true; key1 = _key; currentTabs1 = _currentTabs; }}
+          onTabSelect={function(e, _key, _currentTabs){called2 = true; key2 = _key; currentTabs2 = _currentTabs; }}
           selectedTab="tab2"
@@ -789,6 +790,6 @@ tabs={tabs} />);
 
-    it('should call onTabClosed prop', () => {
+    it('should call onTabClose prop', () => {
       expect(called1).to.be.equal(true);
     });
-    it('should pass key and currentTabs to onTabClosed', () => {
+    it('should pass key and currentTabs to onTabClose', () => {
       expect(key1).to.be.eql('tab2');
@@ -838,4 +839,4 @@
           tabsClassNames={{tabCloseIcon: 'myCloseButton'}}
-          onTabClosed={function(e, _key, _currentTabs){called1 = true; key1 = _key; currentTabs1 = _currentTabs; }}
-          onTabSelected={function(e, _key, _currentTabs){called2 = true; key2 = _key; currentTabs2 = _currentTabs; }}
+          onTabClose={function(e, _key, _currentTabs){called1 = true; key1 = _key; currentTabs1 = _currentTabs; }}
+          onTabSelect={function(e, _key, _currentTabs){called2 = true; key2 = _key; currentTabs2 = _currentTabs; }}
           selectedTab="tab3"
@@ -849,6 +850,6 @@ tabs={tabs} />);
 
-    it('should call onTabClosed prop', () => {
+    it('should call onTabClose prop', () => {
       expect(called1).to.be.equal(true);
     });
-    it('should pass key and currentTabs to onTabClosed', () => {
+    it('should pass key and currentTabs to onTabClose', () => {
       expect(key1).to.be.eql('tab3');
@@ -904,3 +905,3 @@
           tabsClassNames={{tabCloseIcon: 'myCloseButton'}}
-          onTabPositionChanged={function(e, _key, _currentTabs){called = true; key = _key; currentTabs = _currentTabs; }}
+          onTabPositionChange={function(e, _key, _currentTabs){called = true; key = _key; currentTabs = _currentTabs; }}
           selectedTab="tab1"
@@ -907,0 +908,0 @@ tabs={tabs} />, document.body);

New alerts

License Policy Violation

License

This 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

License

This 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

105078

increased by0.62%

Lines of code

2275

increased by0.44%

No dependency changes