fix(ComponentExample): show controls on mouse move

Semantic-Org · Oct 22, 2017 · eea1e98 · eea1e98
1 parent 3de7577
commit eea1e98
Showing 1 changed file with 7 additions and 2 deletions.
diff --git a/docs/app/Components/ComponentDoc/ComponentExample/ComponentExample.js b/docs/app/Components/ComponentDoc/ComponentExample/ComponentExample.js
@@ -103,7 +103,12 @@ class ComponentExample extends Component {
     copyToClipboard(location.href)
   }
 
-  handleMouseEnter = () => this.setState({ controlsVisible: true })
+  handleMouseMove = _.throttle(() => {
+    const { controlsVisible } = this.state
+    if (controlsVisible) return
+
+    this.setState({ controlsVisible: true })
+  }, 200)
 
   handleMouseLeave = () => this.setState({ controlsVisible: false })
 
@@ -414,7 +419,7 @@ class ComponentExample extends Component {
         <Grid
           className='docs-example'
           id={this.anchorName}
-          onMouseEnter={this.handleMouseEnter}
+          onMouseMove={this.handleMouseMove}
           onMouseLeave={this.handleMouseLeave}
           style={exampleStyle}
         >