Generalize handling buttons that only get their background after being clicked

https://twitter.com/LuigiHann/status/959430718517637120

js/components/ClickedDiv.js

@@ -0,0 +1,25 @@
+import React from "react";
+import classnames from "classnames";
+
+export default class ClickedDiv extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { clicked: false };
+  }
+  render() {
+    return (
+      <div
+        {...this.props}
+        className={classnames(this.props.className, this.state)}
+        onMouseDown={() => {
+          if (!this.state.clicked) {
+            this.setState({ clicked: true });
+          }
+          if (this.props.onMouseDown) {
+            this.props.onMouseDown();
+          }
+        }}
+      />
+    );
+  }
+}

js/components/MainWindow/Close.js

@@ -1,10 +1,11 @@
 import React from "react";
 import { connect } from "react-redux";
+import ClickedDiv from "../ClickedDiv";
 
 import { close } from "../../actionCreators";
 
 const Close = ({ onClick }) => (
-  <div id="close" onClick={onClick} title="Close" />
+  <ClickedDiv id="close" onClick={onClick} title="Close" />
 );
 
 export default connect(null, { onClick: close })(Close);

js/components/MainWindow/MainContextMenu.js

@@ -1,5 +1,6 @@
 import React from "react";
 import { connect } from "react-redux";
+import ClickedDiv from "../ClickedDiv";
 import { close, setSkinFromUrl, openFileDialog } from "../../actionCreators";
 import { ContextMenu, Hr, Node, Parent, LinkNode } from "../ContextMenu";
 
@@ -7,7 +8,7 @@ const MainContextMenu = props => (
   <ContextMenu
     id="option-context"
     bottom
-    handle={<div id="option" title="Winamp Menu" />}
+    handle={<ClickedDiv id="option" title="Winamp Menu" />}
   >
     <LinkNode
       href="https://github.com/captbaritone/winamp2-js"

js/components/MainWindow/Minimize.js

@@ -1,23 +1,5 @@
 import React from "react";
-import classnames from "classnames";
+import ClickedDiv from "../ClickedDiv";
 
-export default class Minimize extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { clicked: false };
-  }
-  render() {
-    return (
-      <div
-        id="minimize"
-        className={classnames(this.state)}
-        onClick={() => {
-          if (!this.state.clicked) {
-            this.setState({ clicked: true });
-          }
-        }}
-        title="Minimize"
-      />
-    );
-  }
-}
+const Minimize = () => <ClickedDiv id="minimize" title="Minimize" />;
+export default Minimize;

js/components/MainWindow/Shade.js

@@ -1,30 +1,16 @@
 import React from "react";
-import classnames from "classnames";
 import { connect } from "react-redux";
+import ClickedDiv from "../ClickedDiv";
 
 import { toggleMainWindowShadeMode } from "../../actionCreators";
 
-class Shade extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { clicked: false };
-  }
-  render() {
-    return (
-      <div
-        id="shade"
-        className={classnames(this.state)}
-        onClick={() => {
-          if (!this.state.clicked) {
-            this.setState({ clicked: true });
-          }
-          this.props.handleClick();
-        }}
-        title="Toggle Windowshade Mode"
-      />
-    );
-  }
-}
+const Shade = props => (
+  <ClickedDiv
+    id="shade"
+    onMouseDown={props.handleClick}
+    title="Toggle Windowshade Mode"
+  />
+);
 
 const mapDispatchToProps = {
   handleClick: toggleMainWindowShadeMode

js/components/MainWindow/__snapshots__/index.test.js.snap

@@ -30,7 +30,9 @@ exports[`MainWindow renders to snapshot 1`] = `
         }
       >
         <div
+          className=""
           id="option"
+          onMouseDown={[Function]}
           title="Winamp Menu"
         />
       </div>
@@ -38,18 +40,20 @@ exports[`MainWindow renders to snapshot 1`] = `
     <div
       className=""
       id="minimize"
-      onClick={[Function]}
+      onMouseDown={[Function]}
       title="Minimize"
     />
     <div
       className=""
       id="shade"
-      onClick={[Function]}
+      onMouseDown={[Function]}
       title="Toggle Windowshade Mode"
     />
     <div
+      className=""
       id="close"
       onClick={[Function]}
+      onMouseDown={[Function]}
       title="Close"
     />
   </div>

js/skinSelectors.js

@@ -224,7 +224,7 @@ export const imageSelectors = {
   MAIN_TITLE_BAR_SELECTED: [".selected #title-bar"],
   MAIN_EASTER_EGG_TITLE_BAR: [".llama #title-bar"],
   MAIN_EASTER_EGG_TITLE_BAR_SELECTED: [".llama.selected #title-bar"],
-  MAIN_OPTIONS_BUTTON: ["#title-bar #option"],
+  MAIN_OPTIONS_BUTTON: ["#title-bar #option.clicked"],
   MAIN_OPTIONS_BUTTON_DEPRESSED: [
     "#title-bar #option:active",
     "#title-bar #option:selected"
@@ -233,7 +233,7 @@ export const imageSelectors = {
   MAIN_MINIMIZE_BUTTON_DEPRESSED: ["#title-bar #minimize:active"],
   MAIN_SHADE_BUTTON: [".selected #title-bar #shade.clicked"],
   MAIN_SHADE_BUTTON_DEPRESSED: ["#title-bar #shade:active"],
-  MAIN_CLOSE_BUTTON: [".selected #title-bar #close"],
+  MAIN_CLOSE_BUTTON: [".selected #title-bar #close.clicked"],
   MAIN_CLOSE_BUTTON_DEPRESSED: ["#title-bar #close:active"],
   MAIN_CLUTTER_BAR_BACKGROUND: ["#clutter-bar"],
   MAIN_CLUTTER_BAR_BACKGROUND_DISABLED: ["#clutter-bar.disabled"],