docs(ComponentExample): replace deprecated lifecycle methods (#3533)

* docs(ComponentExample): replace deprecated lifecycle methods * updates * add `hashName`
Semantic-Org · Mar 26, 2019 · ffa41bf · ffa41bf
1 parent eb55ca5
commit ffa41bf
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 100 deletions.
diff --git a/docs/src/components/ComponentDoc/ComponentDoc.js b/docs/src/components/ComponentDoc/ComponentDoc.js
@@ -26,7 +26,6 @@ class ComponentDoc extends Component {
   static propTypes = {
     componentsInfo: PropTypes.objectOf(docTypes.componentInfoShape).isRequired,
     displayName: PropTypes.string.isRequired,
-    exampleKeys: PropTypes.arrayOf(PropTypes.string).isRequired,
     history: PropTypes.object.isRequired,
     seeTags: docTypes.seeTags.isRequired,
     sidebarSections: docTypes.sidebarSections.isRequired,

diff --git a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.js b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.js
@@ -6,7 +6,7 @@ import React, { PureComponent } from 'react'
 import { withRouteData, withRouter } from 'react-static'
 import { Grid, Visibility } from 'semantic-ui-react'
 
-import { examplePathToHash, getFormattedHash, repoURL, scrollToAnchor } from 'docs/src/utils'
+import { examplePathToHash, repoURL, scrollToAnchor } from 'docs/src/utils'
 import CarbonAdNative from 'docs/src/components/CarbonAd/CarbonAdNative'
 
 import ComponentControls from '../ComponentControls'
@@ -39,8 +39,6 @@ const componentControlsStyle = {
  * Allows toggling the the raw `code` code block.
  */
 class ComponentExample extends PureComponent {
-  state = {}
-
   static contextTypes = {
     onPassed: PropTypes.func,
   }
@@ -49,7 +47,6 @@ class ComponentExample extends PureComponent {
     children: PropTypes.node,
     description: PropTypes.node,
     displayName: PropTypes.string.isRequired,
-    exampleKeys: PropTypes.arrayOf(PropTypes.string).isRequired,
     exampleSources: PropTypes.objectOf(PropTypes.string).isRequired,
     examplePath: PropTypes.string.isRequired,
     history: PropTypes.object.isRequired,
@@ -64,36 +61,35 @@ class ComponentExample extends PureComponent {
     renderHtml: true,
   }
 
-  componentWillMount() {
-    const { examplePath } = this.props
-    this.anchorName = examplePathToHash(examplePath)
+  constructor(props) {
+    super(props)
 
-    this.setState({
-      showCode: this.isActiveHash(),
-      sourceCode: this.getOriginalSourceCode(),
-    })
+    const originalSourceCode = props.exampleSources[props.examplePath]
+    const anchorName = examplePathToHash(props.examplePath)
+    const hashName = `#${anchorName}`
+
+    this.state = {
+      anchorName,
+      hashName,
+      originalSourceCode,
+      showCode: hashName === props.location.hash,
+      sourceCode: originalSourceCode,
+    }
   }
 
-  componentWillReceiveProps(nextProps) {
-    const { examplePath, exampleSources, location } = nextProps
-    const nextSourceCode = exampleSources[examplePath]
+  static getDerivedStateFromProps(props, state) {
+    const willBeActiveHash = state.hashName === props.location.hash
+    const derivedState = {
+      isActiveHash: willBeActiveHash,
+    }
 
     // deactivate examples when switching from one to the next
-    if (this.isActiveHash() && this.isActiveState() && this.props.location.hash !== location.hash) {
-      this.clearActiveState()
+    if (state.isActiveHash && !willBeActiveHash) {
+      derivedState.showCode = false
+      derivedState.showHTML = false
     }
 
-    // for local environment
-    if (process.env.NODE_ENV !== 'production' && this.getOriginalSourceCode() !== nextSourceCode) {
-      this.setState({ sourceCode: nextSourceCode })
-    }
-  }
-
-  clearActiveState = () => {
-    this.setState({
-      showCode: false,
-      showHTML: false,
-    })
+    return derivedState
   }
 
   isActiveState = () => {
@@ -102,19 +98,15 @@ class ComponentExample extends PureComponent {
     return showCode || showHTML
   }
 
-  isActiveHash = () => {
-    const { exampleKeys, location } = this.props
-    return this.anchorName === getFormattedHash(exampleKeys, location.hash)
-  }
-
   updateHash = () => {
     if (this.isActiveState()) this.setHashAndScroll()
   }
 
   setHashAndScroll = () => {
     const { history, location } = this.props
+    const { anchorName } = this.state
 
-    history.replace(`${location.pathname}#${this.anchorName}`)
+    history.replace(`${location.pathname}#${anchorName}`)
     scrollToAnchor()
   }
 
@@ -167,16 +159,11 @@ class ComponentExample extends PureComponent {
     return this.kebabExamplePath
   }
 
-  getOriginalSourceCode = () => {
-    const { examplePath, exampleSources } = this.props
-    return exampleSources[examplePath]
-  }
-
   handleChangeCode = _.debounce((sourceCode) => {
     this.setState({ sourceCode })
   }, 30)
 
-  handleRenderError = error => this.setState({ error: error.toString() })
+  handleRenderError = (error) => this.setState({ error: error.toString() })
 
   handleRenderSuccess = (error, { markup }) => this.setState({ error, htmlMarkup: markup })
 
@@ -190,9 +177,19 @@ class ComponentExample extends PureComponent {
       suiVersion,
       title,
     } = this.props
-    const { error, htmlMarkup, showCode, showHTML, sourceCode } = this.state
 
-    const isActive = this.isActiveHash() || this.isActiveState()
+    const {
+      anchorName,
+      error,
+      htmlMarkup,
+      isActiveHash,
+      originalSourceCode,
+      showCode,
+      showHTML,
+      sourceCode,
+    } = this.state
+
+    const isActive = isActiveHash || this.isActiveState()
 
     return (
       <Visibility
@@ -202,7 +199,7 @@ class ComponentExample extends PureComponent {
         style={{ margin: '2rem 0' }}
       >
         {/* Ensure anchor links don't occlude card shadow effect */}
-        <div id={this.anchorName} style={{ paddingTop: '1rem' }}>
+        <div id={anchorName} style={{ paddingTop: '1rem' }}>
           <Grid className={cx('docs-example', { active: isActive })} padded='vertically'>
             <Grid.Row columns='equal'>
               <Grid.Column>
@@ -214,7 +211,7 @@ class ComponentExample extends PureComponent {
               </Grid.Column>
               <Grid.Column textAlign='right' style={componentControlsStyle}>
                 <ComponentControls
-                  anchorName={this.anchorName}
+                  anchorName={anchorName}
                   disableHtml={!renderHtml}
                   exampleCode={sourceCode}
                   examplePath={examplePath}
@@ -251,7 +248,7 @@ class ComponentExample extends PureComponent {
                 {showCode && (
                   <ComponentExampleRenderEditor
                     githubEditHref={this.getGithubEditHref()}
-                    originalValue={this.getOriginalSourceCode()}
+                    originalValue={originalSourceCode}
                     value={sourceCode}
                     error={error}
                     onChange={this.handleChangeCode}

diff --git a/docs/src/utils/getFormattedHash.js b/docs/src/utils/getFormattedHash.js
diff --git a/docs/src/utils/index.js b/docs/src/utils/index.js
@@ -4,6 +4,5 @@ export * from './constants'
 export componentInfoContext from './componentInfoContext'
 export examplePathToHash from './examplePathToHash'
 export getComponentPathname from './getComponentPathname'
-export getFormattedHash from './getFormattedHash'
 export parseExamplePath from './parseExamplePath'
 export scrollToAnchor from './scrollToAnchor'
diff --git a/static.routes.js b/static.routes.js
@@ -36,7 +36,7 @@ export default async () => {
     })),
 
     // Routes for components, i.e. /element/button
-    ..._.map(getComponentMenu(), baseInfo => ({
+    ..._.map(getComponentMenu(), (baseInfo) => ({
       path: getComponentPathname(baseInfo),
       component: 'docs/src/components/ComponentDoc',
       priority: 0.8,
@@ -49,7 +49,6 @@ export default async () => {
           exampleSources,
           sidebarSections,
           displayName: baseInfo.displayName,
-          exampleKeys: _.map(_.flatMap(sidebarSections, 'examples'), 'examplePath'),
           seeTags: getInfoForSeeTags(componentsInfo[baseInfo.displayName]),
         }
       },