fix(Tabs): Fix js error when clicking on a tab (#376)

Fixes #347
tleunen · Aug 20, 2016 · ca9309e · ca9309e
1 parent 9ab92f9
commit ca9309e
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 8 deletions.
diff --git a/extra/layout-patch.diff b/extra/layout-patch.diff
@@ -1,3 +1,14 @@
+From d80b2b024533a0807cc9e51a56dca54ebca25cef Mon Sep 17 00:00:00 2001
+From: Tommy Leunen <tommy.leunen+github@gmail.com>
+Date: Sat, 20 Aug 2016 12:35:46 -0400
+Subject: [PATCH] react mdl 1.2.0
+
+---
+ src/layout/_layout.scss    | 34 +++++++++++++++++-----------------
+ src/layout/layout.js       | 26 ++++++++++----------------
+ src/mdlComponentHandler.js |  3 ++-
+ 3 files changed, 29 insertions(+), 34 deletions(-)
+
 diff --git a/src/layout/_layout.scss b/src/layout/_layout.scss
 index 13a5156..d4e21b9 100644
 --- a/src/layout/_layout.scss
@@ -219,3 +230,30 @@ index e4e6523..5d3c1a8 100644
    } else {
      /**
       * Dummy function to avoid JS errors.
+2.9.3
+
+From d54f216cabacee65cdd687a78b5abbe0739f7253 Mon Sep 17 00:00:00 2001
+From: Tommy Leunen <tommy.leunen+github@gmail.com>
+Date: Sat, 20 Aug 2016 12:45:29 -0400
+Subject: [PATCH] Fix fake tab click
+
+---
+ src/layout/layout.js | 2 +-
+ 1 file changed, 1 insertion(+), 1 deletion(-)
+
+diff --git a/src/layout/layout.js b/src/layout/layout.js
+index c4574ef..369f585 100644
+--- a/src/layout/layout.js
++++ b/src/layout/layout.js
+@@ -525,7 +525,7 @@
+      */
+     function selectTab() {
+       var href = tab.href.split('#')[1];
+-      var panel = layout.content_.querySelector('#' + href);
++      var panel = layout.header_.querySelector('#' + href);
+       layout.resetTabState_(tabs);
+       layout.resetPanelState_(panels);
+       tab.classList.add(layout.CssClasses_.IS_ACTIVE);
+-- 
+2.9.3
+
diff --git a/extra/material.js b/extra/material.js
@@ -3557,7 +3557,7 @@ function MaterialLayoutTab(tab, tabs, panels, layout) {
      */
     function selectTab() {
         var href = tab.href.split('#')[1];
-        var panel = layout.content_.querySelector('#' + href);
+        var panel = layout.header_.querySelector('#' + href);
         layout.resetTabState_(tabs);
         layout.resetPanelState_(panels);
         tab.classList.add(layout.CssClasses_.IS_ACTIVE);

diff --git a/extra/material.min.js b/extra/material.min.js
diff --git a/extra/material.min.js.map b/extra/material.min.js.map
diff --git a/src/Tabs/TabBar.js b/src/Tabs/TabBar.js
@@ -40,10 +40,11 @@ class TabBar extends React.Component {
                         cssPrefix,
                         tabId,
                         active: tabId === activeTab,
-                        onTabClick: this.handleClickTab
+                        onTabClick: this.handleClickTab,
+                        href: '#react-mdl-tabs-hack',
                     })
                 )}
-
+                <span id="react-mdl-tabs-hack" />
             </div>
         );
     }

diff --git a/src/Tabs/Tabs.js b/src/Tabs/Tabs.js
@@ -2,6 +2,7 @@ import React, { PropTypes } from 'react';
 import classNames from 'classnames';
 import Tab from './Tab';
 import TabBar from './TabBar';
+import mdlUpgrade from '../utils/mdlUpgrade';
 
 const TabPropType = (props, propName, componentName) => {
     const prop = props[propName];
@@ -17,13 +18,16 @@ const propTypes = {
     className: PropTypes.string,
     onChange: PropTypes.func,
     tabBarProps: PropTypes.object,
+    ripple: PropTypes.bool,
 };
 
 const Tabs = props => {
     const { activeTab, className, onChange,
-        children, tabBarProps, ...otherProps } = props;
+        children, tabBarProps, ripple, ...otherProps } = props;
 
-    const classes = classNames('mdl-tabs is-upgraded', className);
+    const classes = classNames('mdl-tabs mdl-js-tabs is-upgraded', {
+        'mdl-js-ripple-effect': ripple
+    }, className);
 
     return (
         <div className={classes} {...otherProps}>
@@ -36,4 +40,4 @@ const Tabs = props => {
 
 Tabs.propTypes = propTypes;
 
-export default Tabs;
+export default mdlUpgrade(Tabs);