react-draggable-tab - npm Package Compare versions

Comparing version 0.7.0 to 0.8.0

CHANGELOG.md

 ## Change Log
 
+### Ver 0.8.0
+
+  * #77 [Add shouldTabClose](https://github.com/georgeOsdDev/react-draggable-tab/issues/77)
+
 ### Ver 0.7.0
@@ -4,0 +8,0 @@

example/app.js

@@ -224,2 +224,7 @@ 'use strict';
 
+  shouldTabClose(e, key){
+    console.log('should tab close', e, key);
+    return window.confirm('close?');
+  }
+
   render() {
@@ -259,2 +264,3 @@
           onTabPositionChange={this.handleTabPositionChange.bind(this)}
+          shouldTabClose={this.shouldTabClose.bind(this)}
           tabs={this.state.tabs}
@@ -261,0 +267,0 @@ shortCutKeys={

lib/components/Tabs.js

@@ -397,24 +397,29 @@ 'use strict';
       var ev = this._cancelEventSafety(e);
-      var nextSelected = void 0;
+      var doClose = function doClose() {
+        var nextSelected = void 0;
 
-      if (this.state.selectedTab === key) {
-        nextSelected = this._getNextTabKey(key);
-        if (!nextSelected) {
-          nextSelected = this._getPrevTabKey(key);
+        if (_this8.state.selectedTab === key) {
+          nextSelected = _this8._getNextTabKey(key);
+          if (!nextSelected) {
+            nextSelected = _this8._getPrevTabKey(key);
+          }
+        } else {
+          nextSelected = _this8.state.selectedTab;
         }
-      } else {
-        nextSelected = this.state.selectedTab;
+
+        var shoudBeNotifyTabChange = _this8.state.selectedTab !== nextSelected;
+        _this8.setState({
+          closedTabs: _this8.state.closedTabs.concat([key]),
+          selectedTab: nextSelected
+        }, function () {
+          var currentOpenTabs = _this8._getCurrentOpenTabs();
+          _this8.props.onTabClose(ev, key, currentOpenTabs);
+          if (shoudBeNotifyTabChange) {
+            _this8.props.onTabSelect(ev, nextSelected, currentOpenTabs);
+          }
+        });
+      };
+      if (this.props.shouldTabClose(ev, key)) {
+        doClose();
       }
-
-      var shoudBeNotifyTabChange = this.state.selectedTab !== nextSelected;
-      this.setState({
-        closedTabs: this.state.closedTabs.concat([key]),
-        selectedTab: nextSelected
-      }, function () {
-        var currentOpenTabs = _this8._getCurrentOpenTabs();
-        _this8.props.onTabClose(ev, key, currentOpenTabs);
-        if (shoudBeNotifyTabChange) {
-          _this8.props.onTabSelect(ev, nextSelected, currentOpenTabs);
-        }
-      });
     }
@@ -681,2 +686,5 @@ }, {
   onTabPositionChange: function onTabPositionChange() {},
+  shouldTabClose: function shouldTabClose() {
+    return true;
+  },
   keepSelectedTab: false
@@ -733,2 +741,3 @@ };
   onTabPositionChange: _react2.default.PropTypes.func,
+  shouldTabClose: _react2.default.PropTypes.func,
   keepSelectedTab: _react2.default.PropTypes.bool
@@ -735,0 +744,0 @@ };

package.json

 {
   "name": "react-draggable-tab",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Draggable chrome like tab react component ",
@@ -32,18 +32,18 @@ "main": "./lib/index.js",
   "devDependencies": {
-    "babel-cli": "^6.10.1",
-    "babel-core": "^6.10.4",
+    "babel-cli": "^6.11.4",
+    "babel-core": "^6.13.2",
     "babel-eslint": "^6.1.2",
-    "babel-preset-es2015": "^6.9.0",
+    "babel-preset-es2015": "^6.13.2",
     "babel-preset-react": "^6.11.1",
-    "babel-preset-stage-2": "^6.11.0",
+    "babel-preset-stage-2": "^6.13.0",
     "babelify": "^7.3.0",
-    "browser-sync": "^2.13.0",
-    "browserify": "^13.0.1",
+    "browser-sync": "^2.14.0",
+    "browserify": "^13.1.0",
     "chai": "^3.5.0",
-    "eslint": "^3.0.1",
-    "eslint-config-airbnb": "^9.0.1",
-    "eslint-plugin-import": "^1.10.2",
-    "eslint-plugin-jsx-a11y": "^2.0.1",
-    "eslint-plugin-react": "^5.2.2",
-    "karma": "^1.1.1",
+    "eslint": "^3.3.0",
+    "eslint-config-airbnb": "^10.0.1",
+    "eslint-plugin-import": "^1.13.0",
+    "eslint-plugin-jsx-a11y": "^2.1.0",
+    "eslint-plugin-react": "^6.1.0",
+    "karma": "^1.2.0",
     "karma-browserify": "^5.1.0",
@@ -57,5 +57,5 @@ "karma-chai": "^0.1.0",
     "karma-spec-reporter": "0.0.26",
-    "material-ui": "^0.15.2",
-    "mocha": "^2.5.3",
-    "react-addons-test-utils": "^15.2.1",
+    "material-ui": "^0.15.4",
+    "mocha": "^3.0.2",
+    "react-addons-test-utils": "^15.3.0",
     "react-notification-badge": "^1.2.0",
@@ -69,11 +69,11 @@ "react-tap-event-plugin": "^1.0.0",
     "invariant": "^2.2.1",
-    "lodash": "^4.13.1",
+    "lodash": "^4.15.0",
     "mousetrap": "^1.6.0",
-    "react": "^15.2.1",
-    "react-dom": "^15.2.1",
-    "react-draggable": "^2.1.2"
+    "react": "^15.3.0",
+    "react-dom": "^15.3.0",
+    "react-draggable": "^2.2.1"
   },
   "peerDependencies": {
-    "react": "^15.2.1",
-    "react-dom": "^15.2.1"
+    "react": "^15.3.0",
+    "react-dom": "^15.3.0"
   },
@@ -80,0 +80,0 @@ "browserify": {

README.md

@@ -101,2 +101,4 @@ # 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)
 
+  * `shouldTabClose(e, key)`: will be called before tab close event, return false if you want to stop tab close process, default `true`;
+
 ###### Shortcut key binding
@@ -103,0 +105,0 @@ * `shortCutKeys`: Short cut key bindings as [Mousetrap](https://craig.is/killing/mice) style.

src/components/Tabs.js

@@ -303,24 +303,29 @@ import _ from 'lodash';
     const ev = this._cancelEventSafety(e);
-    let nextSelected;
+    const doClose = () => {
+      let nextSelected;
 
-    if (this.state.selectedTab === key) {
-      nextSelected = this._getNextTabKey(key);
-      if (!nextSelected) {
-        nextSelected = this._getPrevTabKey(key);
+      if (this.state.selectedTab === key) {
+        nextSelected = this._getNextTabKey(key);
+        if (!nextSelected) {
+          nextSelected = this._getPrevTabKey(key);
+        }
+      } else {
+        nextSelected = this.state.selectedTab;
       }
-    } else {
-      nextSelected = this.state.selectedTab;
+
+      const shoudBeNotifyTabChange = this.state.selectedTab !== nextSelected;
+      this.setState({
+        closedTabs: this.state.closedTabs.concat([key]),
+        selectedTab: nextSelected,
+      }, () => {
+        const currentOpenTabs = this._getCurrentOpenTabs();
+        this.props.onTabClose(ev, key, currentOpenTabs);
+        if (shoudBeNotifyTabChange) {
+          this.props.onTabSelect(ev, nextSelected, currentOpenTabs);
+        }
+      });
+    };
+    if (this.props.shouldTabClose(ev, key)) {
+      doClose();
     }
-
-    const shoudBeNotifyTabChange = this.state.selectedTab !== nextSelected;
-    this.setState({
-      closedTabs: this.state.closedTabs.concat([key]),
-      selectedTab: nextSelected,
-    }, () => {
-      const currentOpenTabs = this._getCurrentOpenTabs();
-      this.props.onTabClose(ev, key, currentOpenTabs);
-      if (shoudBeNotifyTabChange) {
-        this.props.onTabSelect(ev, nextSelected, currentOpenTabs);
-      }
-    });
   }
@@ -544,2 +549,3 @@
   onTabPositionChange: () => {},
+  shouldTabClose: () => true,
   keepSelectedTab: false,
@@ -600,2 +606,3 @@ };
   onTabPositionChange: React.PropTypes.func,
+  shouldTabClose: React.PropTypes.func,
   keepSelectedTab: React.PropTypes.bool,
@@ -602,0 +609,0 @@ };

test/components/Tabs_spec.js

@@ -45,2 +45,3 @@ import React from 'react';
     expect(typeof component.props.onTabAddButtonClick).to.be.equal('function');
+    expect(typeof component.props.shouldTabClose).to.be.equal('function');
     expect(typeof component.props.onTabPositionChange).to.be.equal('function');
@@ -885,2 +886,59 @@ });
 
+  describe('when shouldTabClose return false', function () {
+    let called1 = false;
+    let called2 = false;
+    let called3 = false;
+    let key1 = '';
+    let key2 = '';
+    let key3 = '';
+    let currentTabs1 = [];
+    let currentTabs2 = [];
+
+    const tabs = [
+      (<Tab key={'tab1'} title={'tab1'} >
+        <div>
+          <h1>tab1Content</h1>
+        </div>
+      </Tab>),
+      (<Tab key={'tab2'} title={'tab2'} >
+        <div>
+          <h1>tab2Content</h1>
+        </div>
+      </Tab>),
+      (<Tab key={'tab3'} title={'tab3'} >
+        <div>
+          <h1>tab3Content</h1>
+        </div>
+      </Tab>)
+    ];
+
+    before(() => {
+      component = ReactTestUtils.renderIntoDocument(
+        <Tabs
+          tabsClassNames={{tabCloseIcon: 'myCloseButton'}}
+          onTabClose={function(e, _key, _currentTabs){called1 = true; key1 = _key; currentTabs1 = _currentTabs; }}
+          onTabSelect={function(e, _key, _currentTabs){called2 = true; key2 = _key; currentTabs2 = _currentTabs; }}
+          shouldTabClose={function(e, _key){called3 = true; key3 = _key; return false; }}
+          selectedTab="tab2"
+          tabs={tabs} />);
+
+        let rdTabs = ReactTestUtils.scryRenderedDOMComponentsWithClass(component, 'rdTab');
+        const tab2CloseButton = rdTabs[1].querySelector('.myCloseButton');
+        ReactTestUtils.Simulate.click(tab2CloseButton);
+    });
+
+    it('should not call onTabClose prop', () => {
+      expect(called1).to.be.equal(false);
+    });
+    it('should call shouldTabClose prop', () => {
+      expect(called3).to.be.equal(true);
+    });
+    it('should pass key to shouldTabClose', () => {
+      expect(key3).to.be.eql('tab2');
+    });
+    it('should tabs stay ', () => {
+      expect(called2).to.be.equal(false);
+    });
+  });
+
   describe('when dragged', function () {
@@ -887,0 +945,0 @@ let called = false;

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

192539

increased by1.46%

Lines of code

4274

increased by1.76%

Number of lines in readme file

295

increased by0.68%

Dependency changes

• Updatedlodash@^4.15.0

• Updatedreact@^15.3.0

• Updatedreact-dom@^15.3.0

• Updatedreact-draggable@^2.2.1