[Switch] [TextField] Changes for Preact (#16)

* [Switch] [TextField] refactor for better Preact support

Author: petermikitsh

src/Switch/Switch.js

@@ -9,6 +9,8 @@ class Switch extends React.Component {
     this.onBlur = this.onBlur.bind(this);
     this.onMouseUp = this.onMouseUp.bind(this);
     this.onKeyUp = this.onKeyUp.bind(this);
+    this.getTrackColor = this.getTrackColor.bind(this);
+    this.getThumbColor = this.getThumbColor.bind(this);
     this.state = {
       keyboardFocused: false
     };
@@ -37,6 +39,28 @@ class Switch extends React.Component {
     this.input = c;
   }
 
+  getTrackColor = () => {
+    const {checked, disabled, primaryColor} = this.props;
+    if (disabled) {
+      return '#bdbdbd';
+    }
+    if (checked) {
+      return primaryColor || '#2196f3';
+    }
+    return '#000';
+  }
+
+  getThumbColor = () => {
+    const {checked, disabled, primaryColor} = this.props;
+    if (disabled && checked) {
+      return '#bdbdbd';
+    }
+    if (checked) {
+      return primaryColor || '#2196f3';
+    }
+    return '#FFF';
+  }
+
   render() {
     const {
       checked,
@@ -72,17 +96,13 @@ class Switch extends React.Component {
           />
           <div
             className={Styles.track}
-            style={{
-              backgroundColor: checked && !disabled && primaryColor
-            }}
+            style={{backgroundColor: this.getTrackColor()}}
           />
           <div
             className={makeClass(Styles.thumb, {
               [Styles.thumbKeyboardFocus]: keyboardFocused
             })}
-            style={{
-              backgroundColor: checked && !disabled && primaryColor
-            }}
+            style={{backgroundColor: this.getThumbColor()}}
           />
         </div>
         <label id={labelId} className={Styles.label}>{label}</label>

src/TextField/TextField.js

@@ -46,6 +46,7 @@ class TextField extends React.Component {
 
   componentWillUnmount() {
     window.removeEventListener('resize', this.fixHeight);
+    this.label.style.animationName = '';
   }
 
   onBlur() {
@@ -92,6 +93,19 @@ class TextField extends React.Component {
     this.label = c;
   }
 
+  getColor = () => {
+    const fallback = 'rgba(0,0,0,.54)';
+    const {errorColor, primaryColor} = this.props;
+    const {focused} = this.state;
+    if (errorColor) {
+      return errorColor;
+    }
+    if (focused) {
+      return primaryColor || fallback;
+    }
+    return fallback;
+  }
+
   render() {
     const {
       errorColor,
@@ -105,7 +119,6 @@ class TextField extends React.Component {
       width,
       ...other
     } = this.props;
-    const {focused} = this.state;
     const FormComponent = multiline ? 'textarea' : 'input';
     const notEmpty = value && value.length > 0;
     return (
@@ -139,17 +152,20 @@ class TextField extends React.Component {
           ref={this.registerLabel}
           className={Styles.label}
           id={labelId}
-          style={{
-            color: errorColor || (focused && primaryColor)
-          }}
+          style={{color: this.getColor()}}
         >
           {label}
         </label>
         <div
           className={Styles.inkbar}
-          style={{borderBottomColor: errorColor || (focused && primaryColor)}}
+          style={{borderBottomColor: this.getColor()}}
         />
-        <div className={Styles.helper} style={{color: errorColor}}>{helperText}</div>
+        <div
+          className={Styles.helper}
+          style={{color: errorColor || 'rgba(0,0,0,.54)'}}
+        >
+          {helperText}
+        </div>
       </div>
     );
   }