Skip to content

Commit

Permalink
docs(ComponentDoc): refactor, add sidebar navigation
Browse files Browse the repository at this point in the history
  • Loading branch information
Alexander Fedyashov committed Sep 25, 2017
1 parent b73631e commit dd1497b
Show file tree
Hide file tree
Showing 14 changed files with 113 additions and 95 deletions.
31 changes: 14 additions & 17 deletions docs/app/Components/ComponentDoc/ComponentDoc.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
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'
Expand All @@ -10,11 +10,11 @@ import ComponentDocLinks from './ComponentDocLinks'
import ComponentDocSee from './ComponentDocSee'
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 = {
Expand All @@ -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}>
Expand Down
107 changes: 58 additions & 49 deletions docs/app/Components/ComponentDoc/ComponentExample/ComponentExample.js
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -41,7 +42,7 @@ const errorStyle = {
*/
class ComponentExample extends Component {
static contextTypes = {
onTopPassed: PropTypes.func,
onPassed: PropTypes.func,
};

static propTypes = {
Expand Down Expand Up @@ -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}`)
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -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>
)
}
Expand Down
37 changes: 22 additions & 15 deletions docs/app/Components/ComponentDoc/ComponentSidebar.js
Original file line number Diff line number Diff line change
@@ -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, Menu, Sticky } from 'semantic-ui-react'
import { withRouter } from 'react-router'

import { scrollToAnchor } from 'docs/app/utils'
Expand All @@ -14,34 +15,40 @@ const sidebarStyle = {
}

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>
)
})}
{_.map(items, ({ name, examples }) => (
<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>
</Sticky>
)
}
}

export default withRouter(ComponentSidebar)
export default withRouter(ComponentSidebar)
Original file line number Diff line number Diff line change
Expand Up @@ -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: [
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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: [
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export default class VisibilityExampleOffset extends Component {
},
}

handleContextRef = contextRef => this.setState({ examplesRef: contextRef })
handleContextRef = contextRef => this.setState({ contextRef })

handleUpdate = (e, { calculations }) => this.setState({ calculations })

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export default class VisibilityExampleVisibility extends Component {
},
}

handleContextRef = contextRef => this.setState({ examplesRef: contextRef })
handleContextRef = contextRef => this.setState({ contextRef })

handleUpdate = (e, { calculations }) => this.setState({ calculations })

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ const Placeholder = () => <Image src='/assets/images/wireframe/paragraph.png' />
export default class StickyAdjacentContextExample extends Component {
state = {}

handleContextRef = contextRef => this.setState({ examplesRef: contextRef })
handleContextRef = contextRef => this.setState({ contextRef })

render() {
const { contextRef } = this.state
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ const Placeholder = () => <Image src='/assets/images/wireframe/paragraph.png' />
export default class StickyPushingExample extends Component {
state = {}

handleContextRef = contextRef => this.setState({ examplesRef: contextRef })
handleContextRef = contextRef => this.setState({ contextRef })

render() {
const { contextRef } = this.state
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ const Placeholder = () => <Image src='/assets/images/wireframe/paragraph.png' />
export default class StickyOffsetExample extends Component {
state = {}

handleContextRef = contextRef => this.setState({ examplesRef: contextRef })
handleContextRef = contextRef => this.setState({ contextRef })

render() {
const { contextRef } = this.state
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ const Placeholder = () => <Image src='/assets/images/wireframe/paragraph.png' />
export default class StickyOversizedExample extends Component {
state = {}

handleContextRef = contextRef => this.setState({ examplesRef: contextRef })
handleContextRef = contextRef => this.setState({ contextRef })

render() {
const { contextRef } = this.state
Expand Down
2 changes: 1 addition & 1 deletion docs/app/utils/docs.js
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export const getSemanticUIDocsUrl = (name, type) => `https://semantic-ui.com/${t
export const getSeeLinks = componentName => _.map(({ description }) => {
const seeMeta = _.get('_meta', semanticUIReact[description])

if (!seeMeta) return
if (!seeMeta) return null
const { type, name } = seeMeta

return { description, name, type }
Expand Down
10 changes: 7 additions & 3 deletions gulp/plugins/util/parseDocSection.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ export default (buffer) => {
const section = {
examples: [],
}
const position = 0

traverse(ast, {
JSXOpeningElement: (path) => {
Expand All @@ -25,16 +24,21 @@ export default (buffer) => {

if (name === 'ExampleSection') {
const title = _.find(attrs, { name: 'title' })

section.name = title.name
return
}

if (name === 'ComponentExample') {
const title = _.find(attrs, { name: 'title' })

if (title) {
const examplePath = _.find(attrs, { name: 'examplePath' }).value
const { value } = _.find(attrs, { name: 'examplePath' })

section.examples.push({ title: title.value, path: examplePath })
section.examples.push({
title: title.value,
path: value,
})
}
}
},
Expand Down
Loading

0 comments on commit dd1497b

Please sign in to comment.