react-draggable-tab - npm Package Compare versions

Comparing version 0.6.1 to 0.7.0

CHANGELOG.md

 ## Change Log
 
+### Ver 0.7.0
+
+  * #67 [Fix TypeError when using SVGs as title](https://github.com/georgeOsdDev/react-draggable-tab/issues/67)
+  Thanks @HaNdTriX
+  * #68 [Improve tab rendering perfomance](https://github.com/georgeOsdDev/react-draggable-tab/issues/68)
+
 ### Ver 0.6.1
@@ -4,0 +10,0 @@

example/app.js

@@ -72,3 +72,15 @@ 'use strict';
           </div>
-        </Tab>)
+        </Tab>),
+        (<Tab key={'tab5'} title={'Big content1 with left:-9999999px'} hiddenContainerStyle={{left: '-9999999px', top: '-9999999px'}} {...this.makeListeners('tab5')}>
+          <div>
+            <h1>Super big content</h1>
+              {Array(10000).fill().map(() => <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>)}
+          </div>
+        </Tab>),
+        (<Tab key={'tab6'} title={'after big content'} {...this.makeListeners('tab6')}>
+          <div>
+            <pre>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+            </pre>
+          </div>
+        </Tab>),
       ],
@@ -75,0 +87,0 @@ badgeCount: 0,

lib/components/Tab.js

@@ -95,5 +95,6 @@ 'use strict';
   }),
-  containerStyle: _react2.default.PropTypes.object
+  containerStyle: _react2.default.PropTypes.object,
+  hiddenContainerStyle: _react2.default.PropTypes.object
 };
 
 exports.default = Tab;

lib/components/TabContainer.js

@@ -30,6 +30,2 @@ 'use strict';
     textAlign: 'initial'
-  },
-  unselected: {
-    height: '0px',
-    overflow: 'hidden'
   }
@@ -52,3 +48,3 @@ };
       if (!this.props.selected) {
-        style = _styleOverride2.default.merge(style, styles.unselected);
+        style = _styleOverride2.default.merge(styles.root, this.props.hiddenStyle);
       }
@@ -68,3 +64,7 @@ return _react2.default.createElement(
   selected: false,
-  style: {}
+  style: {},
+  hiddenStyle: {
+    height: '0px',
+    overflow: 'hidden'
+  }
 };
@@ -74,5 +74,6 @@
   selected: _react2.default.PropTypes.bool.isRequired,
-  style: _react2.default.PropTypes.object
+  style: _react2.default.PropTypes.object,
+  hiddenStyle: _react2.default.PropTypes.object
 };
 
 exports.default = TabContainer;

lib/components/Tabs.js

@@ -39,6 +39,2 @@ 'use strict';
 
-var _Tab = require('./Tab');
-
-var _Tab2 = _interopRequireDefault(_Tab);
-
 var _TabStyles = require('./TabStyles');
@@ -355,3 +351,3 @@
 
-      var classes = e.target.className.split(' ');
+      var classes = (e.target.getAttribute('class') || '').split(' ');
       if (classes.indexOf('rdTabCloseIcon') > -1) {
@@ -531,2 +527,3 @@ this._cancelEventSafety(e);
         var containerStyle = _tab$props.containerStyle;
+        var hiddenContainerStyle = _tab$props.hiddenContainerStyle;
         var onClick = _tab$props.onClick;
@@ -536,3 +533,3 @@ var onMouseEnter = _tab$props.onMouseEnter;
 
-        var others = _objectWithoutProperties(_tab$props, ['beforeTitle', 'title', 'afterTitle', 'disableClose', 'tabClassNames', 'tabStyles', 'containerStyle', 'onClick', 'onMouseEnter', 'onMouseLeave']);
+        var others = _objectWithoutProperties(_tab$props, ['beforeTitle', 'title', 'afterTitle', 'disableClose', 'tabClassNames', 'tabStyles', 'containerStyle', 'hiddenContainerStyle', 'onClick', 'onMouseEnter', 'onMouseLeave']);
 
@@ -577,3 +574,3 @@ // override inline each tab styles
             _TabContainer2.default,
-            { key: 'tabContainer#' + tab.key, selected: false, style: containerStyle },
+            { key: 'tabContainer#' + tab.key, selected: false, style: containerStyle, hiddenStyle: hiddenContainerStyle },
             tab
@@ -580,0 +577,0 @@ ));

package.json

 {
   "name": "react-draggable-tab",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "description": "Draggable chrome like tab react component ",
@@ -32,29 +32,29 @@ "main": "./lib/index.js",
   "devDependencies": {
-    "babel-cli": "^6.7.5",
-    "babel-core": "^6.7.6",
-    "babel-eslint": "^6.0.2",
-    "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.12.3",
-    "browserify": "^13.0.0",
+    "babel-cli": "^6.10.1",
+    "babel-core": "^6.10.4",
+    "babel-eslint": "^6.1.2",
+    "babel-preset-es2015": "^6.9.0",
+    "babel-preset-react": "^6.11.1",
+    "babel-preset-stage-2": "^6.11.0",
+    "babelify": "^7.3.0",
+    "browser-sync": "^2.13.0",
+    "browserify": "^13.0.1",
     "chai": "^3.5.0",
-    "eslint": "^2.8.0",
-    "eslint-config-airbnb": "^7.0.0",
-    "eslint-plugin-import": "^1.5.0",
-    "eslint-plugin-jsx-a11y": "^0.6.2",
-    "eslint-plugin-react": "^5.0.1",
-    "karma": "^0.13.22",
-    "karma-browserify": "^5.0.3",
+    "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",
+    "karma-browserify": "^5.1.0",
     "karma-chai": "^0.1.0",
-    "karma-chrome-launcher": "^0.2.3",
-    "karma-cli": "0.1.2",
-    "karma-firefox-launcher": "^0.1.7",
-    "karma-mocha": "^0.2.2",
-    "karma-safari-launcher": "^0.1.1",
+    "karma-chrome-launcher": "^1.0.1",
+    "karma-cli": "1.0.1",
+    "karma-firefox-launcher": "^1.0.0",
+    "karma-mocha": "^1.1.1",
+    "karma-safari-launcher": "^1.0.0",
     "karma-spec-reporter": "0.0.26",
-    "material-ui": "^0.15.0-alpha.1",
-    "mocha": "^2.4.5",
-    "react-addons-test-utils": "^15.0.1",
+    "material-ui": "^0.15.2",
+    "mocha": "^2.5.3",
+    "react-addons-test-utils": "^15.2.1",
     "react-notification-badge": "^1.2.0",
@@ -65,14 +65,14 @@ "react-tap-event-plugin": "^1.0.0",
   "dependencies": {
-    "classnames": "^2.2.3",
-    "immutable": "^3.8.0",
+    "classnames": "^2.2.5",
+    "immutable": "^3.8.1",
     "invariant": "^2.2.1",
-    "lodash": "^4.11.1",
-    "mousetrap": "^1.5.3",
-    "react": "^15.0.1",
-    "react-dom": "^15.0.1",
-    "react-draggable": "^2.0.0-beta2"
+    "lodash": "^4.13.1",
+    "mousetrap": "^1.6.0",
+    "react": "^15.2.1",
+    "react-dom": "^15.2.1",
+    "react-draggable": "^2.1.2"
   },
   "peerDependencies": {
-    "react": "^15.0.1",
-    "react-dom": "^15.0.1"
+    "react": "^15.2.1",
+    "react-dom": "^15.2.1"
   },
@@ -79,0 +79,0 @@ "browserify": {

README.md

@@ -75,2 +75,5 @@ # 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)
 
+  * `hiddenContainerStyle`: style object which will be apply to container of hidden tab.
+
+
 ##### Events
@@ -77,0 +80,0 @@

src/components/Tab.js

@@ -71,4 +71,5 @@ import React from 'react';
   containerStyle: React.PropTypes.object,
+  hiddenContainerStyle: React.PropTypes.object,
 };
 
 export default Tab;

src/components/TabContainer.js

@@ -10,6 +10,2 @@ import React from 'react';
   },
-  unselected: {
-    height: '0px',
-    overflow: 'hidden',
-  },
 };
@@ -22,3 +18,3 @@
     if (!this.props.selected) {
-      style = StyleOverride.merge(style, styles.unselected);
+      style = StyleOverride.merge(styles.root, this.props.hiddenStyle);
     }
@@ -36,2 +32,6 @@ return (
   style: {},
+  hiddenStyle: {
+    height: '0px',
+    overflow: 'hidden',
+  },
 };
@@ -42,4 +42,5 @@
   style: React.PropTypes.object,
+  hiddenStyle: React.PropTypes.object,
 };
 
 export default TabContainer;

src/components/Tabs.js

@@ -9,3 +9,2 @@ import _ from 'lodash';
 import CustomDraggable from './CustomDraggable';
-import Tab from './Tab';
 import TabStyles from './TabStyles';
@@ -47,3 +46,3 @@ import TabContainer from './TabContainer';
   _tabStateFromProps(props) {
-    let tabs = [];
+    const tabs = [];
     let idx = 0;
@@ -129,3 +128,3 @@ React.Children.forEach(props.tabs, (tab) => {
   _cancelEventSafety(e) {
-    let ev = e;
+    const ev = e;
     if (typeof e.preventDefault !== 'function') {
@@ -155,3 +154,3 @@ ev.preventDefault = () => {};
   componentWillReceiveProps(nextProps) {
-    let newState = this._tabStateFromProps(nextProps);
+    const newState = this._tabStateFromProps(nextProps);
     if (nextProps.selectedTab !== 'undefined') {
@@ -266,3 +265,3 @@ newState.selectedTab = nextProps.selectedTab;
 
-    const classes = e.target.className.split(' ');
+    const classes = (e.target.getAttribute('class') || '').split(' ');
     if (classes.indexOf('rdTabCloseIcon') > -1) {
@@ -376,3 +375,3 @@ this._cancelEventSafety(e);
     // override inline tabs styles
-    let tabInlineStyles = {
+    const tabInlineStyles = {
     };
@@ -400,3 +399,3 @@ tabInlineStyles.tabWrapper = StyleOverride.merge(TabStyles.tabWrapper, this.props.tabsStyles.tabWrapper);
     // append tabs classNames
-    let _tabClassNames = {
+    const _tabClassNames = {
     };
@@ -428,2 +427,3 @@ _tabClassNames.tabWrapper = classNames('rdTabWrapper', this.props.tabsClassNames.tabWrapper);
         containerStyle,
+        hiddenContainerStyle,
         onClick,
@@ -465,3 +465,4 @@ onMouseEnter,
         }
-        content.push(<TabContainer key={`tabContainer#${tab.key}`} selected={false} style={containerStyle}>{tab}</TabContainer>);
+        content.push(
+          <TabContainer key={`tabContainer#${tab.key}`} selected={false} style={containerStyle} hiddenStyle={hiddenContainerStyle}>{tab}</TabContainer>);
       }
@@ -475,3 +476,3 @@
       //  }
-      let extraAttribute = {};
+      const extraAttribute = {};
       if (typeof title === 'string') {
@@ -478,0 +479,0 @@ extraAttribute.title = title;

test/components/TabContainer_spec.js

@@ -36,12 +36,11 @@ 'use strict';
     expect(ReactDom.findDOMNode(p).parentNode.style.height).to.be.equal('0px');
-    expect(ReactDom.findDOMNode(p).parentNode.style.color).to.be.equal('red');
+    expect(ReactDom.findDOMNode(p).parentNode.style.color).to.be.not.equal('red');
   });
 
-  it('It will have visible height with custom style when selected', () => {
-    component = ReactTestUtils.renderIntoDocument(<TabContainer selected={true} style={{color: 'red'}}><p>not test tab</p></TabContainer>);
+  it('It will have unvisible custom style when not selected', () => {
+    component = ReactTestUtils.renderIntoDocument(<TabContainer selected={false} hiddenStyle={{opacity: 0}}><p>not test tab</p></TabContainer>);
     const p = ReactTestUtils.findRenderedDOMComponentWithTag(component, 'p');
+    expect(ReactDom.findDOMNode(p).parentNode.style.opacity).to.be.equal('0');
     expect(ReactDom.findDOMNode(p).parentNode.style.height).to.be.not.equal('0px');
-    expect(ReactDom.findDOMNode(p).parentNode.style.color).to.be.equal('red');
   });
-
 });

No alert changes

Improved metrics

Total package byte prevSize

189764

increased by0.9%

Lines of code

4200

increased by0.41%

Number of lines in readme file

293

increased by1.03%

Dependency changes

• Updatedclassnames@^2.2.5

• Updatedimmutable@^3.8.1

• Updatedlodash@^4.13.1

• Updatedmousetrap@^1.6.0

• Updatedreact@^15.2.1

• Updatedreact-dom@^15.2.1

• Updatedreact-draggable@^2.1.2