docs(Sidebar): merge changes, cleanups

docs/app/Components/ComponentDoc/ComponentDoc.js

@@ -1,57 +1,115 @@
+import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React from 'react'
+import React, { Component } from 'react'
 import DocumentTitle from 'react-document-title'
+import { withRouter } from 'react-router'
 import { Grid } from 'semantic-ui-react'
 
 import { withDocInfo } from 'docs/app/HOC'
+import { scrollToAnchor } from 'docs/app/utils'
 import ComponentDocHeader from './ComponentDocHeader'
 import ComponentDocLinks from './ComponentDocLinks'
 import ComponentDocSee from './ComponentDocSee'
 import ComponentExamples from './ComponentExamples'
 import ComponentProps from './ComponentProps'
 import ComponentSidebar from './ComponentSidebar'
 
-const ComponentDoc = ({ componentGroup, componentName, description, ghLink, path, seeItems, suiLink }) => (
-  <DocumentTitle title={`${componentName} | Semantic UI React`}>
-    <div>
-      <Grid padded columns='1'>
-        <Grid.Column>
-          <ComponentDocHeader componentName={componentName} description={description} />
-          <ComponentDocSee items={seeItems} />
-          <ComponentDocLinks
-            componentName={componentName}
-            ghLink={ghLink}
-            path={path}
-            suiLink={suiLink}
-          />
-          <ComponentProps componentGroup={componentGroup} componentName={componentName} />
-        </Grid.Column>
-      </Grid>
-
-      <ComponentExamples componentName={componentName} />
-    </div>
-  </DocumentTitle>
-)
-
-ComponentDoc.propTypes = {
-  componentGroup: PropTypes.arrayOf(
-    PropTypes.shape({
-      description: PropTypes.string,
-      props: PropTypes.object,
-    }),
-  ),
-  componentName: PropTypes.string.isRequired,
-  description: PropTypes.string,
-  ghLink: PropTypes.string.isRequired,
-  path: PropTypes.string.isRequired,
-  seeItems: PropTypes.arrayOf(
-    PropTypes.shape({
-      description: PropTypes.string,
-      name: PropTypes.string,
-      type: PropTypes.string,
-    }),
-  ).isRequired,
-  suiLink: PropTypes.string,
+const topRowStyle = { margin: '1em' }
+
+class ComponentDoc extends Component {
+  static childContextTypes = {
+    onPassed: PropTypes.func,
+  }
+
+  static propTypes = {
+    componentGroup: PropTypes.arrayOf(
+      PropTypes.shape({
+        description: PropTypes.string,
+        props: PropTypes.object,
+      }),
+    ),
+    componentName: PropTypes.string.isRequired,
+    description: PropTypes.string,
+    ghLink: PropTypes.string.isRequired,
+    history: PropTypes.object.isRequired,
+    path: PropTypes.string.isRequired,
+    seeItems: PropTypes.arrayOf(
+      PropTypes.shape({
+        description: PropTypes.string,
+        name: PropTypes.string,
+        type: PropTypes.string,
+      }),
+    ).isRequired,
+    suiLink: PropTypes.string,
+  }
+
+  state = {}
+
+  getChildContext() {
+    return {
+      onPassed: this.handleExamplePassed,
+    }
+  }
+
+  componentWillReceiveProps({ componentName: next }) {
+    const { componentName: current } = this.props
+
+    if (current !== next) this.setState({ activePath: undefined })
+  }
+
+  handleExamplePassed = (e, { examplePath }) => this.setState({ activePath: examplePath })
+
+  handleExamplesRef = examplesRef => this.setState({ examplesRef })
+
+  handleSidebarItemClick = (e, { path }) => {
+    const { history } = this.props
+    const aPath = _.kebabCase(_.last(path.split('/')))
+
+    history.replace(`${location.pathname}#${aPath}`)
+    scrollToAnchor()
+  }
+
+  render() {
+    const { componentGroup, componentName, description, ghLink, path, seeItems, suiLink } = this.props
+    const { activePath, examplesRef } = this.state
+
+    return (
+      <DocumentTitle title={`${componentName} | Semantic UI React`}>
+        <Grid>
+          <Grid.Row columns='equal' style={topRowStyle}>
+            <Grid.Column>
+              <ComponentDocHeader componentName={componentName} description={description} />
+              <ComponentDocSee items={seeItems} />
+              <ComponentDocLinks
+                componentName={componentName}
+                ghLink={ghLink}
+                path={path}
+                suiLink={suiLink}
+              />
+              <ComponentProps componentGroup={componentGroup} componentName={componentName} />
+            </Grid.Column>
+            <Grid.Column computer={5} largeScreen={4} widescreen={4} />
+          </Grid.Row>
+
+          <Grid.Row columns='equal'>
+            <Grid.Column>
+              <div ref={this.handleExamplesRef}>
+                <ComponentExamples componentName={componentName} />
+              </div>
+            </Grid.Column>
+            <Grid.Column computer={5} largeScreen={4} widescreen={4}>
+              <ComponentSidebar
+                activePath={activePath}
+                componentName={componentName}
+                examplesRef={examplesRef}
+                onItemClick={this.handleSidebarItemClick}
+              />
+            </Grid.Column>
+          </Grid.Row>
+        </Grid>
+      </DocumentTitle>
+    )
+  }
 }
 
-export default withDocInfo(ComponentDoc)
+export default withDocInfo(withRouter(ComponentDoc))

docs/app/Components/ComponentDoc/ComponentProps/ComponentProps.js

@@ -1,3 +1,4 @@
+import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 

docs/app/Components/ComponentDoc/ComponentSidebar/ComponentSidebar.js

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 import { Accordion, Menu, Sticky } from 'semantic-ui-react'
 
-import { pure } from 'docs/app/HOC'
 import menuInfo from 'docs/app/menuInfo.json'
 import ComponentSideBarSection from './ComponentSidebarSection'
 

docs/app/utils/index.js

@@ -4,7 +4,6 @@ import * as semanticUIReact from 'src'
 import { META } from 'src/lib'
 
 export * from './constants'
-export * from './docs'
 export getComponentGroup from './getComponentGroup'
 export getSeeItems from './getSeeItems'
 export scrollToAnchor from './scrollToAnchor'