react-responsive-tabs - npm Package Compare versions

Comparing version 0.4.1 to 0.4.2

example/containers/App.js

@@ -40,2 +40,4 @@ /* eslint max-len: 0 */
     content: president.biography,
+    tabClassName: 'aaaa',
+    panelClassName: 'bbbb',
   }));
@@ -42,0 +44,0 @@ }

lib/components/Tabs.js

@@ -50,3 +50,2 @@ 'use strict';
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } // TODO react router
-// TODO pass classNames or even styles
 
@@ -57,2 +56,4 @@
 
+(0, _jsStylesheet2.default)(_style2.default);
+
 var Tabs = function (_Component) {
@@ -93,3 +94,2 @@ _inherits(Tabs, _Component);
     value: function componentDidMount() {
-      (0, _jsStylesheet2.default)(_style2.default);
       setTimeout(this._setTabsWidth, 0);
@@ -167,7 +167,9 @@ }
         var disabled = item.disabled;
+        var tabClassName = item.tabClassName;
+        var panelClassName = item.panelClassName;
 
         var selected = !selectedTabKey && !tabIndex || selectedTabKey === key;
         var payload = { tabIndex: tabIndex, collapsed: collapsed, selected: selected, disabled: disabled, key: key };
-        var tabPayload = Object.assign({}, payload, { title: title });
-        var panelPayload = Object.assign({}, payload, { content: content });
+        var tabPayload = Object.assign({}, payload, { title: title, className: tabClassName });
+        var panelPayload = Object.assign({}, payload, { content: content, className: panelClassName });
         var tabWidth = tabsWidth[key] || 0;
@@ -210,2 +212,3 @@
       var disabled = _ref.disabled;
+      var className = _ref.className;
 
@@ -223,3 +226,9 @@ return {
         panelId: panelPrefix + key,
-        classNames: this._getClassNamesFor('tab', { selected: selected, collapsed: collapsed, tabIndex: tabIndex, disabled: disabled })
+        classNames: this._getClassNamesFor('tab', {
+          selected: selected,
+          collapsed: collapsed,
+          tabIndex: tabIndex,
+          disabled: disabled,
+          className: className
+        })
       };
@@ -234,2 +243,3 @@ }
       var collapsed = _ref2.collapsed;
+      var className = _ref2.className;
 
@@ -242,3 +252,3 @@ return {
         tabId: tabPrefix + key,
-        classNames: this._getClassNamesFor('panel', { selected: selected, collapsed: collapsed })
+        classNames: this._getClassNamesFor('panel', { selected: selected, collapsed: collapsed, className: className })
       };
@@ -253,6 +263,8 @@ }
       var disabled = _ref3.disabled;
+      var _ref3$className = _ref3.className;
+      var className = _ref3$className === undefined ? '' : _ref3$className;
 
       switch (type) {
         case 'tab':
-          return (0, _classnames2.default)('Tab', this.props.tabClass, {
+          return (0, _classnames2.default)('Tab', className, this.props.tabClass, {
             'Tab--first': !tabIndex,
@@ -264,3 +276,3 @@ 'Tab--selected': selected,
         case 'panel':
-          return (0, _classnames2.default)('Tab-panel', this.props.panelClass, {
+          return (0, _classnames2.default)('Tab-panel', className, this.props.panelClass, {
             'Tab-panel--selected': selected,
@@ -353,2 +365,4 @@ 'Tab-panel--collapsed': collapsed
     title: _react.PropTypes.string,
+    panelClassName: _react.PropTypes.string,
+    tabClassName: _react.PropTypes.string,
     content: _react.PropTypes.oneOfType([_react.PropTypes.array, _react.PropTypes.object, _react.PropTypes.string])
@@ -355,0 +369,0 @@ })),

package.json

 {
   "author": "Vitalii Maslianok <[e-mail]> (https://github.com/maslianok)",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "bugs": {
@@ -5,0 +5,0 @@ "url": "https://github.com/maslianok/react-responsive-tabs/issues"

README.md

@@ -55,2 +55,4 @@ #React responsive tabs
     key: index, // Optional. Equals to tab index if this property is omitted
+    tabClassName: 'tab', // Optional
+    panelClassName: 'panel', // Optional
     title: president.name,
@@ -57,0 +59,0 @@ content: president.biography,

No alert changes

Improved metrics

Total package byte prevSize

35924

increased by1.83%

Lines of code

743

increased by2.06%

Number of lines in readme file

98

increased by2.08%

No dependency changes