Integrated primary and secondary into MaterialComponent

Signed-off-by: Cromefire_ <cromefirehd@gmail.com>
prateekbh · Aug 1, 2018 · a5498b9 · a5498b9
1 parent 4a826f4
commit a5498b9
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 22 deletions.
diff --git a/ts/Base/MaterialComponent.ts b/ts/Base/MaterialComponent.ts
@@ -119,6 +119,12 @@ export abstract class MaterialComponent<
       }
     }
 
+    ['primary', 'secondary'].forEach(themeProp => {
+      if (themeProp in this.props && this.props[themeProp] !== false) {
+        classText += ` mdc-theme--${themeProp}-bg`;
+      }
+    });
+
     return classText;
   }
 

diff --git a/ts/Button/index.tsx b/ts/Button/index.tsx
@@ -2,7 +2,6 @@ import autobind from 'autobind-decorator';
 import {h} from 'preact';
 import MaterialComponent from '../Base/MaterialComponent';
 import Icon from '../Icon/index';
-import generateThemeClass from '../themeUtils/generateThemeClass';
 
 export class ButtonIcon extends Icon {
   protected componentName = 'button__icon';
@@ -38,20 +37,13 @@ export class Button<
 
   protected componentName = 'button';
   protected mdcProps = ['dense', 'raised', 'unelevated', 'outlined'];
-  protected themeProps = ['primary', 'secondary'];
 
   @autobind
   protected materialDom(props) {
     const ButtonElement = props.href ? 'a' : 'button';
-    let className = '';
-    this.themeProps.forEach(themeProp => {
-      if (themeProp in props && props[themeProp] !== false) {
-        className += generateThemeClass(themeProp) + ' ';
-      }
-    });
 
     return (
-      <ButtonElement ref={this.setControlRef} {...props} className={className}>
+      <ButtonElement ref={this.setControlRef} {...props}>
         {this.props.children}
       </ButtonElement>
     );

diff --git a/ts/Fab/index.tsx b/ts/Fab/index.tsx
@@ -2,7 +2,6 @@ import autobind from 'autobind-decorator';
 import {h} from 'preact';
 import MaterialComponent from '../Base/MaterialComponent';
 import Icon from '../Icon/index';
-import generateThemeClass from '../themeUtils/generateThemeClass';
 
 export class FabIcon extends Icon {
   protected componentName = 'fab__icon';
@@ -26,22 +25,14 @@ export class Fab extends MaterialComponent<IFabProps, IFabState> {
 
   protected componentName = 'fab';
   protected mdcProps = ['mini', 'exited'];
-  protected themeProps = ['primary', 'secondary'];
 
   @autobind
   protected materialDom(props) {
-    const classNames: string[] = [];
-    this.themeProps.forEach(themeProp => {
-      if (themeProp in props && props[themeProp] !== false) {
-        classNames.push(generateThemeClass(themeProp));
-      }
-    });
 
     return (
       <button
         ref={this.setControlRef}
-        {...props}
-        className={classNames.join(' ')}>
+        {...props}>
         {props.children}
       </button>
     );

diff --git a/ts/themeUtils/generateThemeClass.ts b/ts/themeUtils/generateThemeClass.ts