From aa4c05733fa025f12ae90c6283c831acd4db7773 Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Fri, 2 Feb 2018 20:27:29 -0800
Subject: [PATCH] Generalize handling buttons that only get their background
 after being clicked

https://twitter.com/LuigiHann/status/959430718517637120
---
 js/components/ClickedDiv.js                   | 25 ++++++++++++++++
 js/components/MainWindow/Close.js             |  3 +-
 js/components/MainWindow/MainContextMenu.js   |  3 +-
 js/components/MainWindow/Minimize.js          | 24 ++-------------
 js/components/MainWindow/Shade.js             | 30 +++++--------------
 .../__snapshots__/index.test.js.snap          |  8 +++--
 js/skinSelectors.js                           |  4 +--
 7 files changed, 48 insertions(+), 49 deletions(-)
 create mode 100644 js/components/ClickedDiv.js

diff --git a/js/components/ClickedDiv.js b/js/components/ClickedDiv.js
new file mode 100644
index 00000000..81107c98
--- /dev/null
+++ b/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();
+          }
+        }}
+      />
+    );
+  }
+}
diff --git a/js/components/MainWindow/Close.js b/js/components/MainWindow/Close.js
index 52906887..3cd11084 100644
--- a/js/components/MainWindow/Close.js
+++ b/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);
diff --git a/js/components/MainWindow/MainContextMenu.js b/js/components/MainWindow/MainContextMenu.js
index a5454930..8d65eab2 100644
--- a/js/components/MainWindow/MainContextMenu.js
+++ b/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"
diff --git a/js/components/MainWindow/Minimize.js b/js/components/MainWindow/Minimize.js
index 4f9a4047..1bde798e 100644
--- a/js/components/MainWindow/Minimize.js
+++ b/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;
diff --git a/js/components/MainWindow/Shade.js b/js/components/MainWindow/Shade.js
index 4948bb58..60f52644 100644
--- a/js/components/MainWindow/Shade.js
+++ b/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
diff --git a/js/components/MainWindow/__snapshots__/index.test.js.snap b/js/components/MainWindow/__snapshots__/index.test.js.snap
index 67a799b1..1265eb64 100644
--- a/js/components/MainWindow/__snapshots__/index.test.js.snap
+++ b/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>
diff --git a/js/skinSelectors.js b/js/skinSelectors.js
index 222e5c52..80efeece 100644
--- a/js/skinSelectors.js
+++ b/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"],