fix(ComponentExample): clipboard and active state

Semantic-Org · May 14, 2018 · 301734f · 301734f
1 parent 7feb85b
commit 301734f
Showing 1 changed file with 67 additions and 38 deletions.
diff --git a/docs/app/Components/ComponentDoc/ComponentExample/ComponentExample.js b/docs/app/Components/ComponentDoc/ComponentExample/ComponentExample.js
@@ -68,32 +68,39 @@ class ComponentExample extends Component {
   }
 
   componentWillMount() {
-    const { examplePath, location } = this.props
+    const { examplePath } = this.props
     const sourceCode = this.getOriginalSourceCode()
 
     this.anchorName = _.kebabCase(_.last(examplePath.split('/')))
 
-    // show code for direct links to examples
-    const showCode = this.anchorName === location.hash.replace('#', '')
     const exampleElement = this.renderOriginalExample()
     const markup = renderToStaticMarkup(exampleElement)
 
     this.setState({
       exampleElement,
-      showCode,
+      handleMouseLeave: this.handleMouseLeave,
+      handleMouseMove: this.handleMouseMove,
+      showCode: this.isActiveHash(),
       sourceCode,
       markup,
     })
   }
 
-  componentWillReceiveProps(nextProps) {
-    const isActive = nextProps.location.hash === `#${this.anchorName}`
+  isActiveState = () => {
+    const { showCode, showHTML } = this.state
 
-    this.setState(() => ({ isActive }))
+    return showCode || showHTML
   }
 
+  isActiveHash = () => this.anchorName === this.props.location.hash.replace('#', '')
+
   shouldComponentUpdate(nextProps, nextState) {
-    return !shallowEqual(this.state, nextState)
+    return !shallowEqual(this.state, nextState) || !shallowEqual(this.props, nextProps)
+  }
+
+  updateHash = () => {
+    if (this.isActiveState()) this.setHashAndScroll()
+    else if (this.isActiveHash()) this.removeHash()
   }
 
   setHashAndScroll = () => {
@@ -105,47 +112,50 @@ class ComponentExample extends Component {
 
   removeHash = () => {
     const { history, location } = this.props
+
     history.replace(location.pathname)
+
+    this.setState({
+      showCode: false,
+      showHTML: false,
+    })
   }
 
   handleDirectLinkClick = () => {
     this.setHashAndScroll()
     copyToClipboard(window.location.href)
   }
 
-  handleMouseMove = _.throttle(
-    () => {
-      const { controlsVisible } = this.state
-      if (controlsVisible) return
-
-      this.setState({ controlsVisible: true })
-    },
-    200,
-    { trailing: false },
-  )
+  handleMouseLeave = () => {
+    this.setState({
+      isHovering: false,
+      handleMouseLeave: null,
+      handleMouseMove: this.handleMouseMove,
+    })
+  }
 
-  handleMouseLeave = () => this.setState({ controlsVisible: false })
+  handleMouseMove = () => {
+    this.setState({
+      isHovering: true,
+      handleMouseLeave: this.handleMouseLeave,
+      handleMouseMove: null,
+    })
+  }
 
   handleShowCodeClick = (e) => {
     e.preventDefault()
 
-    const { showCode, showHTML } = this.state
-
-    this.setState({ showCode: !showCode })
+    const { showCode } = this.state
 
-    if (!showCode) this.setHashAndScroll()
-    else if (!showHTML) this.removeHash()
+    this.setState({ showCode: !showCode }, this.updateHash)
   }
 
   handleShowHTMLClick = (e) => {
     e.preventDefault()
 
-    const { showCode, showHTML } = this.state
-
-    this.setState({ showHTML: !showHTML })
+    const { showHTML } = this.state
 
-    if (!showHTML) this.setHashAndScroll()
-    else if (!showCode) this.removeHash()
+    this.setState({ showHTML: !showHTML }, this.updateHash)
   }
 
   handlePass = () => {
@@ -163,8 +173,8 @@ class ComponentExample extends Component {
   resetJSX = () => {
     const { sourceCode } = this.state
     const original = this.getOriginalSourceCode()
+    // eslint-disable-next-line no-alert
     if (sourceCode !== original && confirm('Lose your changes?')) {
-      // eslint-disable-line no-alert
       this.setState({ sourceCode: original })
       this.renderSourceCode()
     }
@@ -289,8 +299,7 @@ class ComponentExample extends Component {
   }, 100)
 
   handleChangeCode = (sourceCode) => {
-    this.setState({ sourceCode })
-    this.renderSourceCode()
+    this.setState({ sourceCode }, this.renderSourceCode)
   }
 
   setGitHubHrefs = () => {
@@ -432,20 +441,40 @@ class ComponentExample extends Component {
 
   render() {
     const { children, description, suiVersion, title } = this.props
-    const { controlsVisible, exampleElement, isActive, showCode, showHTML } = this.state
+    const {
+      handleMouseLeave,
+      handleMouseMove,
+      exampleElement,
+      isHovering,
+      showCode,
+      showHTML,
+    } = this.state
+
+    const isActive = this.isActiveHash() || this.isActiveState()
 
     const exampleStyle = {
-      marginBottom: '1em',
-      boxShadow: isActive && '0 0 30px #ccc',
+      position: 'relative',
+      transition: 'box-shadow 200ms, background 200ms',
+      ...(isActive
+        ? {
+          background: '#fff',
+          boxShadow: '0 0 30px #ccc',
+        }
+        : isHovering && {
+          background: '#fff',
+          boxShadow: '0 0 10px #ccc',
+          zIndex: 1,
+        }),
     }
 
     return (
       <Visibility once={false} onTopPassed={this.handlePass} onTopPassedReverse={this.handlePass}>
         <Grid
           className='docs-example'
+          padded='vertically'
           id={this.anchorName}
-          onMouseMove={this.handleMouseMove}
-          onMouseLeave={this.handleMouseLeave}
+          onMouseLeave={handleMouseLeave}
+          onMouseMove={handleMouseMove}
           style={exampleStyle}
         >
           <Grid.Row>
@@ -464,7 +493,7 @@ class ComponentExample extends Component {
                 onShowHTML={this.handleShowHTMLClick}
                 showCode={showCode}
                 showHTML={showHTML}
-                visible={controlsVisible}
+                visible={isActive || isHovering}
               />
             </Grid.Column>
           </Grid.Row>