Repository: codypearce/material-bread (js)

Issue:
Hoverable doesn't work on Mobile
Not sure if intended, cross-platform implies not, but I don't know for sure.

My assumption was that on mobile, if you (~~Mobile equivalent to onMouseover~~ onTouchEnter) it would have some form of animation?

https://codypearce.github.io/material-bread/?path=/story/utils-hoverable--animation

Tested in Chrome for Android and Firefox Nightly for Android 

Pull request:
185 hoverable on touch on mobile
Adds a `TouchableWithoutFeedback` around the hoverable component when width is less than `450` or it on a platform that's not the web.

closes #185

Patch:
diff --git a/src/Components/Typography/BaseText/BaseText.js b/src/Components/Typography/BaseText/BaseText.js
index e0ec211..db6b245 100644
--- a/src/Components/Typography/BaseText/BaseText.js
+++ b/src/Components/Typography/BaseText/BaseText.js
@@ -16,7 +16,6 @@ export default class BaseText extends Component {
     align: PropTypes.string,
     color: PropTypes.string,
     gutterBottom: PropTypes.bool,
-    theme: PropTypes.object,
   };
 
   render() {
@@ -27,14 +26,12 @@ export default class BaseText extends Component {
       color,
       gutterBottom,
       children,
-      theme,
     } = this.props;
 
     return (
       <Text
         style={[
           styles.default,
-          theme.text,
           typographyStyles,
           {
             textAlign: align ? align : 'left',
diff --git a/src/Components/Typography/BodyText/BodyText.js b/src/Components/Typography/BodyText/BodyText.js
index b879793..b6721d5 100644
--- a/src/Components/Typography/BodyText/BodyText.js
+++ b/src/Components/Typography/BodyText/BodyText.js
@@ -17,11 +17,7 @@ class BodyText extends Component {
 
     const textStyle = type == 2 ? theme.bodyTextTwo : theme.bodyText;
     return (
-      <BaseText
-        typographyStyles={textStyle}
-        style={style}
-        theme={theme}
-        {...this.props}>
+      <BaseText typographyStyles={textStyle} style={style} {...this.props}>
         {children ? children : text}
       </BaseText>
     );
diff --git a/src/Components/Typography/Caption/Caption.js b/src/Components/Typography/Caption/Caption.js
index c520373..41949cc 100644
--- a/src/Components/Typography/Caption/Caption.js
+++ b/src/Components/Typography/Caption/Caption.js
@@ -12,7 +12,7 @@ class Caption extends Component {
   render() {
     const { theme, children, text } = this.props;
     return (
-      <BaseText typographyStyles={theme.caption} theme={theme} {...this.props}>
+      <BaseText typographyStyles={theme.caption} {...this.props}>
         {children ? children : text}
       </BaseText>
     );
diff --git a/src/Components/Typography/Heading/Heading.js b/src/Components/Typography/Heading/Heading.js
index 647111e..7fe6931 100644
--- a/src/Components/Typography/Heading/Heading.js
+++ b/src/Components/Typography/Heading/Heading.js
@@ -34,7 +34,7 @@ class Heading extends Component {
     textStyle = this.numberToStyle(type);
 
     return (
-      <BaseText typographyStyles={textStyle} theme={theme} {...this.props}>
+      <BaseText typographyStyles={textStyle} {...this.props}>
         {children ? children : text}
       </BaseText>
     );
diff --git a/src/Components/Typography/Overline/Overline.js b/src/Components/Typography/Overline/Overline.js
index 2696623..4f7fbee 100644
--- a/src/Components/Typography/Overline/Overline.js
+++ b/src/Components/Typography/Overline/Overline.js
@@ -13,7 +13,7 @@ class Overline extends Component {
   render() {
     const { theme, children, text } = this.props;
     return (
-      <BaseText typographyStyles={theme.overline} theme={theme} {...this.props}>
+      <BaseText typographyStyles={theme.overline} {...this.props}>
         {children ? children : text}
       </BaseText>
     );
diff --git a/src/Components/Typography/Subtitle/Subtitle.js b/src/Components/Typography/Subtitle/Subtitle.js
index 2e245c0..4ef3484 100644
--- a/src/Components/Typography/Subtitle/Subtitle.js
+++ b/src/Components/Typography/Subtitle/Subtitle.js
@@ -26,7 +26,7 @@ class Subtitle extends Component {
     textStyle = this.numberToStyle(type);
 
     return (
-      <BaseText typographyStyles={textStyle} theme={theme} {...this.props}>
+      <BaseText typographyStyles={textStyle} {...this.props}>
         {children ? children : text}
       </BaseText>
     );
diff --git a/src/Theme/defaultTheme.js b/src/Theme/defaultTheme.js
index 221caa7..ceae02a 100644
--- a/src/Theme/defaultTheme.js
+++ b/src/Theme/defaultTheme.js
@@ -16,13 +16,12 @@ export default {
     light: '#e57373',
     dark: '#d32f2f',
   },
-  textColor: {
+  text: {
     primary: 'rgba(0, 0, 0, 0.87)',
     secondary: 'rgba(0, 0, 0, 0.54)',
     disabled: 'rgba(0, 0, 0, 0.38)',
     hint: 'rgba(0, 0, 0, 0.38)',
   },
-  text: {},
   background: {
     default: '#fafafa',
   },
diff --git a/src/Utils/Hoverable/Hoverable.js b/src/Utils/Hoverable/Hoverable.js
index b42b3b0..fcf5363 100644
--- a/src/Utils/Hoverable/Hoverable.js
+++ b/src/Utils/Hoverable/Hoverable.js
@@ -1,9 +1,12 @@
 import React, { Component } from 'react';
+import {
+  Platform,
+  Dimensions,
+  TouchableWithoutFeedback,
+  View,
+} from 'react-native';
 import PropTypes from 'prop-types';
 
-import createHoverMonitor from './HoverState';
-const hover = createHoverMonitor();
-
 class Hoverable extends Component {
   static displayName = 'Hoverable';
   constructor(props) {
@@ -16,10 +19,24 @@ class Hoverable extends Component {
     onHoverOut: PropTypes.func,
   };
 
-  state = { isHovered: false };
+  state = { isHovered: false, width: Dimensions.get('window').width };
+
+  componentDidMount() {
+    Dimensions.addEventListener('change', this.handleWindowWidth);
+    const width = Dimensions.get('window').width;
+    this.setState({ width });
+  }
+
+  componentWillUnmount() {
+    Dimensions.removeEventListener('change', this.handleWindowWidth);
+  }
+
+  handleWindowWidth = event => {
+    this.setState({ width: event.window.width });
+  };
 
   _handleMouseEnter = () => {
-    if (hover.isEnabled && !this.state.isHovered) {
+    if (!this.state.isHovered) {
       const { onHoverIn } = this.props;
       if (onHoverIn) {
         onHoverIn();
@@ -38,18 +55,40 @@ class Hoverable extends Component {
     }
   };
 
+  _toggle = () => {
+    if (this.state.isHovered) {
+      this._handleMouseLeave();
+    } else {
+      this._handleMouseEnter();
+    }
+  };
+
   render() {
     const { children } = this.props;
+    const { width } = this.state;
 
     const child =
       typeof children === 'function'
         ? children(this.state.isHovered)
         : children;
 
-    return React.cloneElement(React.Children.only(child), {
-      onMouseEnter: this._handleMouseEnter,
-      onMouseLeave: this._handleMouseLeave,
-    });
+    if (Platform.OS == 'web' && width > 450) {
+      return React.cloneElement(React.Children.only(child), {
+        onMouseEnter: this._handleMouseEnter,
+        onMouseLeave: this._handleMouseLeave,
+      });
+    } else {
+      return (
+        <TouchableWithoutFeedback onPress={this._toggle}>
+          <View>
+            {React.cloneElement(React.Children.only(child), {
+              onMouseEnter: this._handleMouseEnter,
+              onMouseLeave: this._handleMouseLeave,
+            })}
+          </View>
+        </TouchableWithoutFeedback>
+      );
+    }
   }
 }
 


Test patch:
diff --git a/src/Components/Menu/MenuItem/__snapshots__/MenuItem.test.js.snap b/src/Components/Menu/MenuItem/__snapshots__/MenuItem.test.js.snap
index c1c78f0..85efc7f 100644
--- a/src/Components/Menu/MenuItem/__snapshots__/MenuItem.test.js.snap
+++ b/src/Components/Menu/MenuItem/__snapshots__/MenuItem.test.js.snap
@@ -3,75 +3,85 @@
 exports[`MenuItem Renders 1`] = `
 <View
   accessible={true}
-  displayUntilPressOut={true}
-  onLayout={[Function]}
-  onMouseEnter={[Function]}
-  onMouseLeave={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
   onResponderRelease={[Function]}
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
-  onRippleAnimation={[Function]}
   onStartShouldSetResponder={[Function]}
-  pointerEvents="box-only"
-  rippleCentered={false}
-  rippleColor="rgba(0, 0, 0, .87)"
-  rippleDuration={400}
-  rippleFades={true}
-  rippleOpacity={0.3}
-  rippleSequential={false}
-  rippleSize={0}
-  style={
-    Object {
-      "alignItems": "center",
-      "backgroundColor": null,
-      "flex": 1,
-      "flexDirection": "row",
-      "height": 48,
-      "minHeight": 32,
-      "minWidth": 124,
-      "paddingHorizontal": 16,
-      "width": "100%",
-    }
-  }
 >
-  <Text
-    ellipsizeMode="clip"
-    numberOfLines={1}
-    style={
-      Array [
-        Object {
-          "color": "#6e6e6e",
-          "fontSize": 14,
-          "fontWeight": "400",
-        },
-        Object {
-          "color": "rgba(0,0,0,.87)",
-          "marginLeft": 0,
-        },
-        undefined,
-      ]
-    }
-  />
   <View
+    accessible={true}
+    displayUntilPressOut={true}
+    onLayout={[Function]}
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onRippleAnimation={[Function]}
+    onStartShouldSetResponder={[Function]}
+    pointerEvents="box-only"
+    rippleCentered={false}
+    rippleColor="rgba(0, 0, 0, .87)"
+    rippleDuration={400}
+    rippleFades={true}
+    rippleOpacity={0.3}
+    rippleSequential={false}
+    rippleSize={0}
     style={
-      Array [
-        Object {
-          "backgroundColor": "transparent",
-          "bottom": 0,
-          "left": 0,
-          "overflow": "hidden",
-          "position": "absolute",
-          "right": 0,
-          "top": 0,
-          "zIndex": 10,
-        },
-        Object {
-          "borderRadius": 0,
-        },
-      ]
+      Object {
+        "alignItems": "center",
+        "backgroundColor": null,
+        "flex": 1,
+        "flexDirection": "row",
+        "height": 48,
+        "minHeight": 32,
+        "minWidth": 124,
+        "paddingHorizontal": 16,
+        "width": "100%",
+      }
     }
-  />
+  >
+    <Text
+      ellipsizeMode="clip"
+      numberOfLines={1}
+      style={
+        Array [
+          Object {
+            "color": "#6e6e6e",
+            "fontSize": 14,
+            "fontWeight": "400",
+          },
+          Object {
+            "color": "rgba(0,0,0,.87)",
+            "marginLeft": 0,
+          },
+          undefined,
+        ]
+      }
+    />
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+            "bottom": 0,
+            "left": 0,
+            "overflow": "hidden",
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+            "zIndex": 10,
+          },
+          Object {
+            "borderRadius": 0,
+          },
+        ]
+      }
+    />
+  </View>
 </View>
 `;
diff --git a/src/Components/TextField/TextFieldFilled/__snapshots__/TextFieldFilled.test.js.snap b/src/Components/TextField/TextFieldFilled/__snapshots__/TextFieldFilled.test.js.snap
index a195b20..fd8ed61 100644
--- a/src/Components/TextField/TextFieldFilled/__snapshots__/TextFieldFilled.test.js.snap
+++ b/src/Components/TextField/TextFieldFilled/__snapshots__/TextFieldFilled.test.js.snap
@@ -182,8 +182,7 @@ exports[`TextFieldFilled Renders 1`] = `
           "letterSpacing": 0.1,
           "lineHeight": 14,
         },
-        "text": Object {},
-        "textColor": Object {
+        "text": Object {
           "disabled": "rgba(0, 0, 0, 0.38)",
           "hint": "rgba(0, 0, 0, 0.38)",
           "primary": "rgba(0, 0, 0, 0.87)",
diff --git a/src/Components/TextField/TextFieldFlat/__snapshots__/TextFieldFlat.test.js.snap b/src/Components/TextField/TextFieldFlat/__snapshots__/TextFieldFlat.test.js.snap
index bbb6b36..70e6809 100644
--- a/src/Components/TextField/TextFieldFlat/__snapshots__/TextFieldFlat.test.js.snap
+++ b/src/Components/TextField/TextFieldFlat/__snapshots__/TextFieldFlat.test.js.snap
@@ -179,8 +179,7 @@ exports[`TextFieldFlat Renders 1`] = `
           "letterSpacing": 0.1,
           "lineHeight": 14,
         },
-        "text": Object {},
-        "textColor": Object {
+        "text": Object {
           "disabled": "rgba(0, 0, 0, 0.38)",
           "hint": "rgba(0, 0, 0, 0.38)",
           "primary": "rgba(0, 0, 0, 0.87)",
diff --git a/src/Components/TextField/TextFieldOutline/__snapshots__/TextFieldOutline.test.js.snap b/src/Components/TextField/TextFieldOutline/__snapshots__/TextFieldOutline.test.js.snap
index f7779ba..af17b94 100644
--- a/src/Components/TextField/TextFieldOutline/__snapshots__/TextFieldOutline.test.js.snap
+++ b/src/Components/TextField/TextFieldOutline/__snapshots__/TextFieldOutline.test.js.snap
@@ -181,8 +181,7 @@ exports[`TextFieldOutline Renders 1`] = `
           "letterSpacing": 0.1,
           "lineHeight": 14,
         },
-        "text": Object {},
-        "textColor": Object {
+        "text": Object {
           "disabled": "rgba(0, 0, 0, 0.38)",
           "hint": "rgba(0, 0, 0, 0.38)",
           "primary": "rgba(0, 0, 0, 0.87)",
diff --git a/src/Components/Typography/BodyText/__snapshots__/BodyText.test.js.snap b/src/Components/Typography/BodyText/__snapshots__/BodyText.test.js.snap
index e2f1dc3..1cdf923 100644
--- a/src/Components/Typography/BodyText/__snapshots__/BodyText.test.js.snap
+++ b/src/Components/Typography/BodyText/__snapshots__/BodyText.test.js.snap
@@ -7,7 +7,6 @@ exports[`BodyText Renders 1`] = `
       Object {
         "color": "rgba(0, 0, 0, 0.87)",
       },
-      Object {},
       Object {
         "fontSize": 16,
         "letterSpacing": 0.5,
diff --git a/src/Components/Typography/Caption/__snapshots__/Caption.test.js.snap b/src/Components/Typography/Caption/__snapshots__/Caption.test.js.snap
index e54dd28..a1cffbf 100644
--- a/src/Components/Typography/Caption/__snapshots__/Caption.test.js.snap
+++ b/src/Components/Typography/Caption/__snapshots__/Caption.test.js.snap
@@ -7,7 +7,6 @@ exports[`Caption Renders 1`] = `
       Object {
         "color": "rgba(0, 0, 0, 0.87)",
       },
-      Object {},
       Object {
         "fontSize": 12,
         "letterSpacing": 0.4,
diff --git a/src/Components/Typography/Heading/__snapshots__/Heading.test.js.snap b/src/Components/Typography/Heading/__snapshots__/Heading.test.js.snap
index 92996f9..2a4e7db 100644
--- a/src/Components/Typography/Heading/__snapshots__/Heading.test.js.snap
+++ b/src/Components/Typography/Heading/__snapshots__/Heading.test.js.snap
@@ -7,7 +7,6 @@ exports[`Heading Renders 1`] = `
       Object {
         "color": "rgba(0, 0, 0, 0.87)",
       },
-      Object {},
       undefined,
       Object {
         "color": "rgba(0,0,0, 87)",
diff --git a/src/Components/Typography/Overline/__snapshots__/Overline.test.js.snap b/src/Components/Typography/Overline/__snapshots__/Overline.test.js.snap
index d43f15a..3819b2b 100644
--- a/src/Components/Typography/Overline/__snapshots__/Overline.test.js.snap
+++ b/src/Components/Typography/Overline/__snapshots__/Overline.test.js.snap
@@ -7,7 +7,6 @@ exports[`Overline Renders 1`] = `
       Object {
         "color": "rgba(0, 0, 0, 0.87)",
       },
-      Object {},
       Object {
         "fontSize": 10,
         "letterSpacing": 1.5,
diff --git a/src/Components/Typography/Subtitle/__snapshots__/Subtitle.test.js.snap b/src/Components/Typography/Subtitle/__snapshots__/Subtitle.test.js.snap
index 061ddd1..85db3bc 100644
--- a/src/Components/Typography/Subtitle/__snapshots__/Subtitle.test.js.snap
+++ b/src/Components/Typography/Subtitle/__snapshots__/Subtitle.test.js.snap
@@ -7,7 +7,6 @@ exports[`Subtitle Renders 1`] = `
       Object {
         "color": "rgba(0, 0, 0, 0.87)",
       },
-      Object {},
       undefined,
       Object {
         "color": "rgba(0,0,0, 87)",
diff --git a/src/Utils/Hoverable/__snapshots__/Hoverable.test.js.snap b/src/Utils/Hoverable/__snapshots__/Hoverable.test.js.snap
index 7ea7600..1494ac0 100644
--- a/src/Utils/Hoverable/__snapshots__/Hoverable.test.js.snap
+++ b/src/Utils/Hoverable/__snapshots__/Hoverable.test.js.snap
@@ -1,8 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Switch Renders 1`] = `
-<View
-  onMouseEnter={[Function]}
-  onMouseLeave={[Function]}
-/>
+<TouchableWithoutFeedback
+  onPress={[Function]}
+>
+  <View>
+    <View
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+    />
+  </View>
+</TouchableWithoutFeedback>
 `;