From dd1497b9973ee89ede53f945f777e06a2198a5aa Mon Sep 17 00:00:00 2001 From: Alexander Fedyashov Date: Mon, 25 Sep 2017 15:26:19 +0300 Subject: [PATCH] docs(ComponentDoc): refactor, add sidebar navigation --- .../Components/ComponentDoc/ComponentDoc.js | 31 +++-- .../ComponentExample/ComponentExample.js | 107 ++++++++++-------- .../ComponentDoc/ComponentSidebar.js | 37 +++--- .../VisibilityExampleCallbackFrequency.js | 2 +- .../VisibilityExampleGroupedCallbacks.js | 2 +- .../Settings/VisibilityExampleOffset.js | 2 +- .../Types/VisibilityExampleVisibility.js | 2 +- .../Types/StickyAdjacentContextExample.js | 2 +- .../Sticky/Types/StickyPushingExample.js | 2 +- .../Sticky/Usage/StickyOffsetExample.js | 2 +- .../Variations/StickyOversizedExample.js | 2 +- docs/app/utils/docs.js | 2 +- gulp/plugins/util/parseDocSection.js | 10 +- gulp/tasks/docs.js | 5 +- 14 files changed, 113 insertions(+), 95 deletions(-) diff --git a/docs/app/Components/ComponentDoc/ComponentDoc.js b/docs/app/Components/ComponentDoc/ComponentDoc.js index 3e32b26267..60183b8481 100644 --- a/docs/app/Components/ComponentDoc/ComponentDoc.js +++ b/docs/app/Components/ComponentDoc/ComponentDoc.js @@ -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' @@ -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 = { @@ -25,19 +25,16 @@ 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 ( @@ -45,18 +42,18 @@ export default class ComponentDoc extends Component { - - - - + + + + - +
- +
diff --git a/docs/app/Components/ComponentDoc/ComponentExample/ComponentExample.js b/docs/app/Components/ComponentDoc/ComponentExample/ComponentExample.js index 154d10423f..39261b8deb 100644 --- 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,7 +42,7 @@ const errorStyle = { */ class ComponentExample extends Component { static contextTypes = { - onTopPassed: PropTypes.func, + onPassed: PropTypes.func, }; static propTypes = { @@ -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 ( - - - - - - - - - - - - {children && ( - - {children} + + + + + + + + + + + + {children && ( + + {children} + + )} + + + + + {exampleElement} + + + {this.renderJSX()} + {this.renderHTML()} - )} - - - - - {exampleElement} - - - {this.renderJSX()} - {this.renderHTML()} - - - + + ) } diff --git a/docs/app/Components/ComponentDoc/ComponentSidebar.js b/docs/app/Components/ComponentDoc/ComponentSidebar.js index 2a587c0a2d..d340259032 100644 --- 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, Menu, Sticky } from 'semantic-ui-react' import { withRouter } from 'react-router' import { scrollToAnchor } from 'docs/app/utils' @@ -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 ( - {_.map(items, ({name, examples}) => { - return ( - - {name} - - {_.map(examples, ({title, path}) => )} - - - ) - })} + {_.map(items, ({ name, examples }) => ( + + {name} + + {_.map(examples, ({ title, path }) => )} + + + ))} ) } } -export default withRouter(ComponentSidebar) \ No newline at end of file +export default withRouter(ComponentSidebar) diff --git a/docs/app/Examples/behaviors/Visibility/Settings/VisibilityExampleCallbackFrequency.js b/docs/app/Examples/behaviors/Visibility/Settings/VisibilityExampleCallbackFrequency.js index 3c314f36ad..f2aaa0e5b3 100644 --- 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 index 6220d4f6c8..9652bfb6a6 100644 --- 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: [ diff --git a/docs/app/Examples/behaviors/Visibility/Settings/VisibilityExampleOffset.js b/docs/app/Examples/behaviors/Visibility/Settings/VisibilityExampleOffset.js index 4b0bed04d7..6b7a9c823e 100644 --- a/docs/app/Examples/behaviors/Visibility/Settings/VisibilityExampleOffset.js +++ b/docs/app/Examples/behaviors/Visibility/Settings/VisibilityExampleOffset.js @@ -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 }) diff --git a/docs/app/Examples/behaviors/Visibility/Types/VisibilityExampleVisibility.js b/docs/app/Examples/behaviors/Visibility/Types/VisibilityExampleVisibility.js index 53f94b24ca..879799652d 100644 --- a/docs/app/Examples/behaviors/Visibility/Types/VisibilityExampleVisibility.js +++ b/docs/app/Examples/behaviors/Visibility/Types/VisibilityExampleVisibility.js @@ -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 }) diff --git a/docs/app/Examples/modules/Sticky/Types/StickyAdjacentContextExample.js b/docs/app/Examples/modules/Sticky/Types/StickyAdjacentContextExample.js index 053b4a12f9..adc443cc94 100644 --- a/docs/app/Examples/modules/Sticky/Types/StickyAdjacentContextExample.js +++ b/docs/app/Examples/modules/Sticky/Types/StickyAdjacentContextExample.js @@ -7,7 +7,7 @@ const Placeholder = () => export default class StickyAdjacentContextExample extends Component { state = {} - handleContextRef = contextRef => this.setState({ examplesRef: contextRef }) + handleContextRef = contextRef => this.setState({ contextRef }) render() { const { contextRef } = this.state diff --git a/docs/app/Examples/modules/Sticky/Types/StickyPushingExample.js b/docs/app/Examples/modules/Sticky/Types/StickyPushingExample.js index 00d2de29ba..3ca1848d07 100644 --- a/docs/app/Examples/modules/Sticky/Types/StickyPushingExample.js +++ b/docs/app/Examples/modules/Sticky/Types/StickyPushingExample.js @@ -7,7 +7,7 @@ const Placeholder = () => export default class StickyPushingExample extends Component { state = {} - handleContextRef = contextRef => this.setState({ examplesRef: contextRef }) + handleContextRef = contextRef => this.setState({ contextRef }) render() { const { contextRef } = this.state diff --git a/docs/app/Examples/modules/Sticky/Usage/StickyOffsetExample.js b/docs/app/Examples/modules/Sticky/Usage/StickyOffsetExample.js index 08b7d0e70a..9714e97fd9 100644 --- a/docs/app/Examples/modules/Sticky/Usage/StickyOffsetExample.js +++ b/docs/app/Examples/modules/Sticky/Usage/StickyOffsetExample.js @@ -7,7 +7,7 @@ const Placeholder = () => export default class StickyOffsetExample extends Component { state = {} - handleContextRef = contextRef => this.setState({ examplesRef: contextRef }) + handleContextRef = contextRef => this.setState({ contextRef }) render() { const { contextRef } = this.state diff --git a/docs/app/Examples/modules/Sticky/Variations/StickyOversizedExample.js b/docs/app/Examples/modules/Sticky/Variations/StickyOversizedExample.js index b0856d1297..89fb491cb7 100644 --- a/docs/app/Examples/modules/Sticky/Variations/StickyOversizedExample.js +++ b/docs/app/Examples/modules/Sticky/Variations/StickyOversizedExample.js @@ -7,7 +7,7 @@ const Placeholder = () => export default class StickyOversizedExample extends Component { state = {} - handleContextRef = contextRef => this.setState({ examplesRef: contextRef }) + handleContextRef = contextRef => this.setState({ contextRef }) render() { const { contextRef } = this.state diff --git a/docs/app/utils/docs.js b/docs/app/utils/docs.js index 03565eaf99..9955df1107 100644 --- a/docs/app/utils/docs.js +++ b/docs/app/utils/docs.js @@ -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 } diff --git a/gulp/plugins/util/parseDocSection.js b/gulp/plugins/util/parseDocSection.js index 29fe4dc51d..a032ab7a6f 100644 --- a/gulp/plugins/util/parseDocSection.js +++ b/gulp/plugins/util/parseDocSection.js @@ -13,7 +13,6 @@ export default (buffer) => { const section = { examples: [], } - const position = 0 traverse(ast, { JSXOpeningElement: (path) => { @@ -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, + }) } } }, diff --git a/gulp/tasks/docs.js b/gulp/tasks/docs.js index c7cd888dbe..f39d3883a2 100644 --- a/gulp/tasks/docs.js +++ b/gulp/tasks/docs.js @@ -47,8 +47,8 @@ task('build:docs:docgen', () => src([ .pipe(dest(config.paths.docsSrc()))) task('build:docs:menugen', () => src(`${config.paths.docsSrc()}/Examples/**/index.js`) -// do not remove the function keyword -// we need 'this' scope here + // do not remove the function keyword + // we need 'this' scope here .pipe(g.plumber(function handleError(err) { log(err.toString()) this.emit('end') @@ -94,6 +94,7 @@ task('build:docs', series( 'clean:docs', parallel( 'build:docs:docgen', + 'build:docs:menugen', 'build:docs:html', 'build:docs:images', ),