docs(ComponentDoc): refactor, add sidebar navigation

Semantic-Org · Sep 25, 2017 · 0dafcf9 · 0dafcf9
1 parent b73631e
commit 0dafcf9
Show file tree

Hide file tree

Showing 21 changed files with 162 additions and 117 deletions.
diff --git a/docs/app/Components/ComponentDoc/ComponentDoc.js b/docs/app/Components/ComponentDoc/ComponentDoc.js
@@ -1,20 +1,20 @@
 import PropTypes from 'prop-types'
-import React, {Component} from 'react'
+import React, { Component } from 'react'
 import DocumentTitle from 'react-document-title'
-import {Grid} from 'semantic-ui-react'
+import { Grid } from 'semantic-ui-react'
 
-import ComponentExamples from './ComponentExamples'
-import ComponentProps from './ComponentProps'
 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 topRowStyle = {margin: '1em'}
+const topRowStyle = { margin: '1em' }
 
 export default class ComponentDoc extends Component {
   static childContextTypes = {
-    onTopPassed: PropTypes.func
+    onPassed: PropTypes.func,
   }
 
   static propTypes = {
@@ -25,38 +25,35 @@ export default class ComponentDoc extends Component {
 
   getChildContext() {
     return {
-      onTopPassed: this.handleExampleTopPassed,
-    };
+      onPassed: this.handleExamplePassed,
+    }
   }
 
-  handleExampleTopPassed = (e, { examplePath, title }) => {
-    console.log(title)
-    this.setState({ activePath: examplePath })
-  }
+  handleExamplePassed = (e, { examplePath }) => this.setState({ activePath: examplePath })
 
   handleExamplesRef = examplesRef => this.setState({ examplesRef })
 
   render() {
-    const {_meta} = this.props
+    const { _meta } = this.props
     const { activePath, examplesRef } = this.state
 
     return (
       <DocumentTitle title={`${_meta.name} | Semantic UI React`}>
         <Grid>
           <Grid.Row columns='equal' style={topRowStyle}>
             <Grid.Column>
-              <ComponentDocHeader componentName={_meta.name}/>
-              <ComponentDocSee componentName={_meta.name}/>
-              <ComponentDocLinks componentName={_meta.parent || _meta.name} type={_meta.type}/>
-              <ComponentProps componentName={_meta.name}/>
+              <ComponentDocHeader componentName={_meta.name} />
+              <ComponentDocSee componentName={_meta.name} />
+              <ComponentDocLinks componentName={_meta.parent || _meta.name} type={_meta.type} />
+              <ComponentProps componentName={_meta.name} />
             </Grid.Column>
-            <Grid.Column computer={5} largeScreen={4} widescreen={4}/>
+            <Grid.Column computer={5} largeScreen={4} widescreen={4} />
           </Grid.Row>
 
           <Grid.Row columns='equal'>
             <Grid.Column>
               <div ref={this.handleExamplesRef}>
-                <ComponentExamples componentName={_meta.name}/>
+                <ComponentExamples componentName={_meta.name} />
               </div>
             </Grid.Column>
             <Grid.Column computer={5} largeScreen={4} widescreen={4}>

diff --git a/docs/app/Components/ComponentDoc/ComponentDocHeader.js b/docs/app/Components/ComponentDoc/ComponentDocHeader.js
@@ -8,10 +8,12 @@ import { getDocDescription } from 'docs/app/utils'
 const headerStyle = { marginBottom: '0.25em' }
 
 const ComponentDocHeader = ({ componentName }) => (
-  <Header as='h1' style={headerStyle}>
-    {componentName}
-    <Header.Subheader>{getDocDescription(componentName)}</Header.Subheader>
-  </Header>
+  <Header
+    as='h1'
+    content={componentName}
+    style={headerStyle}
+    subheader={getDocDescription(componentName)}
+  />
 )
 
 ComponentDocHeader.propTypes = {

diff --git a/docs/app/Components/ComponentDoc/ComponentDocSee.js b/docs/app/Components/ComponentDoc/ComponentDocSee.js
@@ -22,9 +22,12 @@ const ComponentDocSee = ({ componentName }) => {
         />
       </List.Item>
       {_.map(links, ({ description, name, type }) => (
-        <List.Item as={Link} key={description} to={`/${type}s/${_.kebabCase(name)}`}>
-          {description}
-        </List.Item>
+        <List.Item
+          as={Link}
+          content={description}
+          key={description}
+          to={`/${type}s/${_.kebabCase(name)}`}
+        />
       ))}
     </List>
   )

diff --git a/docs/app/Components/ComponentDoc/ComponentExample/ComponentExample.js b/docs/app/Components/ComponentDoc/ComponentExample/ComponentExample.js
@@ -9,6 +9,7 @@ import copyToClipboard from 'copy-to-clipboard'
 
 import { exampleContext, repoURL, scrollToAnchor } from 'docs/app/utils'
 import { Divider, Grid, Menu, Visibility } from 'src'
+import { shallowEqual } from 'src/lib'
 import Editor from 'docs/app/Components/Editor/Editor'
 import ComponentControls from '../ComponentControls'
 import ComponentExampleTitle from './ComponentExampleTitle'
@@ -41,8 +42,8 @@ const errorStyle = {
  */
 class ComponentExample extends Component {
   static contextTypes = {
-    onTopPassed: PropTypes.func,
-  };
+    onPassed: PropTypes.func,
+  }
 
   static propTypes = {
     children: PropTypes.node,
@@ -74,6 +75,10 @@ class ComponentExample extends Component {
     })
   }
 
+  shouldComponentUpdate(nextProps, nextState) {
+    return !shallowEqual(this.state, nextState)
+  }
+
   setHashAndScroll = () => {
     const { history } = this.props
     history.replace(`${location.pathname}#${this.anchorName}`)
@@ -114,7 +119,11 @@ class ComponentExample extends Component {
     else this.removeHash()
   }
 
-  handleTopPassed = () => _.invoke(this.context, 'onTopPassed', null, this.props)
+  handlePass = () => {
+    const { title } = this.props
+
+    if (title) _.invoke(this.context, 'onPassed', null, this.props)
+  }
 
   copyJSX = () => {
     copyToClipboard(this.state.sourceCode)
@@ -389,55 +398,55 @@ class ComponentExample extends Component {
     return (
       <Visibility
         once={false}
-        onTopPassedReverse={this.handleTopPassed}
-        onTopPassed={this.handleTopPassed}
+        onTopPassed={this.handlePass}
+        onTopPassedReverse={this.handlePass}
       >
-      <Grid
-        className='docs-example'
-        id={this.anchorName}
-        onMouseEnter={this.handleMouseEnter}
-        onMouseLeave={this.handleMouseLeave}
-        style={exampleStyle}
-      >
-        <Grid.Row>
-          <Grid.Column style={headerColumnStyle} width={12}>
-            <ComponentExampleTitle
-              description={description}
-              title={title}
-              suiVersion={suiVersion}
-            />
-          </Grid.Column>
-          <Grid.Column textAlign='right' width={4}>
-            <ComponentControls
-              anchorName={this.anchorName}
-              onCopyLink={this.handleDirectLinkClick}
-              onShowCode={this.handleShowCodeClick}
-              onShowHTML={this.handleShowHTMLClick}
-              showCode={showCode}
-              showHTML={showHTML}
-              visible={controlsVisible}
-            />
-          </Grid.Column>
-        </Grid.Row>
-
-        <Grid.Row columns={1}>
-          {children && (
-            <Grid.Column style={childrenStyle}>
-              {children}
+        <Grid
+          className='docs-example'
+          id={this.anchorName}
+          onMouseEnter={this.handleMouseEnter}
+          onMouseLeave={this.handleMouseLeave}
+          style={exampleStyle}
+        >
+          <Grid.Row>
+            <Grid.Column style={headerColumnStyle} width={12}>
+              <ComponentExampleTitle
+                description={description}
+                title={title}
+                suiVersion={suiVersion}
+              />
+            </Grid.Column>
+            <Grid.Column textAlign='right' width={4}>
+              <ComponentControls
+                anchorName={this.anchorName}
+                onCopyLink={this.handleDirectLinkClick}
+                onShowCode={this.handleShowCodeClick}
+                onShowHTML={this.handleShowHTMLClick}
+                showCode={showCode}
+                showHTML={showHTML}
+                visible={controlsVisible}
+              />
+            </Grid.Column>
+          </Grid.Row>
+
+          <Grid.Row columns={1}>
+            {children && (
+              <Grid.Column style={childrenStyle}>
+                {children}
+              </Grid.Column>
+            )}
+          </Grid.Row>
+
+          <Grid.Row columns={1}>
+            <Grid.Column className={`rendered-example ${this.getKebabExamplePath()}`}>
+              {exampleElement}
+            </Grid.Column>
+            <Grid.Column>
+              {this.renderJSX()}
+              {this.renderHTML()}
             </Grid.Column>
-          )}
-        </Grid.Row>
-
-        <Grid.Row columns={1}>
-          <Grid.Column className={`rendered-example ${this.getKebabExamplePath()}`}>
-            {exampleElement}
-          </Grid.Column>
-          <Grid.Column>
-            {this.renderJSX()}
-            {this.renderHTML()}
-          </Grid.Column>
-        </Grid.Row>
-      </Grid>
+          </Grid.Row>
+        </Grid>
       </Visibility>
     )
   }

diff --git a/docs/app/Components/ComponentDoc/ComponentProp/ComponentPropHeader.js b/docs/app/Components/ComponentDoc/ComponentProp/ComponentPropHeader.js
@@ -3,7 +3,7 @@ import { Table } from 'semantic-ui-react'
 
 import { neverUpdate } from 'docs/app/HOC'
 
-const ComponentPropTableHeader = () => (
+const ComponentPropHeader = () => (
   <Table.Header>
     <Table.Row>
       <Table.HeaderCell>Name</Table.HeaderCell>
@@ -14,4 +14,4 @@ const ComponentPropTableHeader = () => (
   </Table.Header>
 )
 
-export default neverUpdate(ComponentPropTableHeader)
+export default neverUpdate(ComponentPropHeader)
diff --git a/docs/app/Components/ComponentDoc/ComponentSidebar.js b/docs/app/Components/ComponentDoc/ComponentSidebar.js
@@ -1,6 +1,7 @@
 import _ from 'lodash'
-import React, {Component} from 'react'
-import {Accordion, Menu, Sticky} from 'semantic-ui-react'
+import PropTypes from 'prop-types'
+import React, { Component } from 'react'
+import { Accordion, Icon, Menu, Sticky } from 'semantic-ui-react'
 import { withRouter } from 'react-router'
 
 import { scrollToAnchor } from 'docs/app/utils'
@@ -10,38 +11,54 @@ const sidebarStyle = {
   background: '#fff',
   boxShadow: '0 2px 2px rgba(0, 0, 0, 0.1)',
   paddingLeft: '1em',
+  paddingBottom: '0.1em',
   paddingTop: '0.1em',
 }
 
 class ComponentSidebar extends Component {
-  setHashAndScroll = (e, {name}) => {
+  static propTypes = {
+    activePath: PropTypes.string,
+    componentName: PropTypes.string,
+    examplesRef: PropTypes.func,
+    history: PropTypes.object.isRequired,
+  }
+
+  setHashAndScroll = (e, { name }) => {
     const aName = _.kebabCase(_.last(name.split('/')))
     const { history } = this.props
+
     history.replace(`${location.pathname}#${aName}`)
     scrollToAnchor()
   }
 
   render() {
-    const {activePath, componentName, examplesRef} = this.props
+    const { activePath, componentName, examplesRef } = this.props
     const items = _.get(menuInfo, componentName)
 
     return (
       <Sticky context={examplesRef} offset={15}>
-        <Menu as={Accordion} fluid vertical text style={sidebarStyle}>
-          {_.map(items, ({name, examples}) => {
-            return (
-              <Menu.Item>
-                <Accordion.Title active><b>{name}</b></Accordion.Title>
-                <Accordion.Content as={Menu.Menu} active>
-                  {_.map(examples, ({title, path}) => <Menu.Item active={activePath === path} key={path} name={path} content={title} onClick={this.setHashAndScroll}/>)}
-                </Accordion.Content>
-              </Menu.Item>
-            )
-          })}
+        <Menu
+          as={Accordion}
+          fluid
+          style={sidebarStyle}
+          text
+          vertical
+        >
+          {_.map(items, ({ name, examples }) => (
+            <Menu.Item>
+              <Accordion.Title active={_.find(examples, { path: activePath })}>
+                <b>{name}</b>
+                <Icon name='dropdown' />
+              </Accordion.Title>
+              <Accordion.Content as={Menu.Menu} active={_.find(examples, { path: activePath })}>
+                {_.map(examples, ({ title, path }) => <Menu.Item active={activePath === path} key={path} name={path} content={title} onClick={this.setHashAndScroll} />)}
+              </Accordion.Content>
+            </Menu.Item>
+          ))}
         </Menu>
       </Sticky>
     )
   }
 }
 
-export default withRouter(ComponentSidebar)
+export default withRouter(ComponentSidebar)
diff --git a/docs/app/Components/DocsLayout.js b/docs/app/Components/DocsLayout.js
@@ -16,6 +16,11 @@ export default class DocsLayout extends Component {
   static propTypes = {
     component: PropTypes.func,
     render: PropTypes.func,
+    sidebar: PropTypes.bool,
+  }
+
+  static defaultProps = {
+    sidebar: true,
   }
 
   componentDidMount() {
@@ -47,13 +52,14 @@ export default class DocsLayout extends Component {
   }
 
   renderChildren = (props) => {
-    const { component: Children, render } = this.props
+    const { component: Children, render, sidebar } = this.props
+    const mainStyle = sidebar ? style.sidebarMain : style.main
 
     if (render) return render()
     return (
       <div style={style.container}>
         <Sidebar style={style.menu} />
-        <div style={style.main}>
+        <div style={mainStyle}>
           <Children {...props} />
         </div>
       </div>

diff --git a/docs/app/Examples/behaviors/Visibility/Settings/VisibilityExampleCallbackFrequency.js b/docs/app/Examples/behaviors/Visibility/Settings/VisibilityExampleCallbackFrequency.js
@@ -11,7 +11,7 @@ export default class VisibilityExampleCallbackFrequency extends Component {
     once: true,
   }
 
-  handleContextRef = contextRef => this.setState({ examplesRef: contextRef })
+  handleContextRef = contextRef => this.setState({ contextRef })
 
   updateLog = eventName => () => this.setState(({
     log: [

diff --git a/docs/app/Examples/behaviors/Visibility/Settings/VisibilityExampleGroupedCallbacks.js b/docs/app/Examples/behaviors/Visibility/Settings/VisibilityExampleGroupedCallbacks.js
@@ -11,7 +11,7 @@ export default class VisibilityExampleGroupedCallbacks extends Component {
     once: true,
   }
 
-  handleContextRef = contextRef => this.setState({ examplesRef: contextRef })
+  handleContextRef = contextRef => this.setState({ contextRef })
 
   updateLog = eventName => () => this.setState(({
     log: [