15-with-hover

Author: tylermcginnis

app/components/Tooltip.jsx

@@ -1,38 +1,18 @@
 import * as React from "react";
 import PropTypes from "prop-types";
+import withHover from "./withHover";
 
 const container = {
   position: "relative",
   display: "flex",
 };
 
-export default class Tooltip extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      hovering: false,
-    };
-
-    this.mouseOver = this.mouseOver.bind(this);
-    this.mouseOut = this.mouseOut.bind(this);
-  }
-  mouseOver() {
-    this.setState({ hovering: true });
-  }
-  mouseOut() {
-    this.setState({ hovering: false });
-  }
+class Tooltip extends React.Component {
   render() {
-    const { hovering } = this.state;
-    const { children, element } = this.props;
+    const { children, element, hovering } = this.props;
 
     return (
-      <div
-        onMouseOver={this.mouseOver}
-        onMouseOut={this.mouseOut}
-        style={container}
-      >
+      <div style={container}>
         {hovering === true && element}
         {children}
       </div>
@@ -44,3 +24,5 @@ Tooltip.propTypes = {
   children: PropTypes.node.isRequired,
   element: PropTypes.node.isRequired,
 };
+
+export default withHover(Tooltip);

app/components/withHover.jsx

@@ -0,0 +1,34 @@
+import * as React from "react";
+
+export default function withHover(Component, propName = "hovering") {
+  return class WithHover extends React.Component {
+    constructor(props) {
+      super(props);
+
+      this.state = {
+        hovering: false,
+      };
+
+      this.mouseOver = this.mouseOver.bind(this);
+      this.mouseOut = this.mouseOut.bind(this);
+    }
+    mouseOver() {
+      this.setState({ hovering: true });
+    }
+    mouseOut() {
+      this.setState({ hovering: false });
+    }
+    render() {
+      const props = {
+        [propName]: this.state.hovering,
+        ...this.props,
+      };
+
+      return (
+        <div onMouseOver={this.mouseOver} onMouseOut={this.mouseOut}>
+          <Component {...props} />
+        </div>
+      );
+    }
+  };
+}