renderSemanticDocsLink = () => {
const { _meta } = this.props
if (META.isAddon(_meta)) return null
const name = META.isParent(_meta) ? _meta.name : _meta.parent
const url = `http://semantic-ui.com/${_meta.type}s/${name}.html`.toLowerCase()
return (
<List.Item icon='book'>
<a href={url} target='_blank'>
Semantic UI {name} Docs
</a>
</List.Item>
)
}
render() {
const { name } = this.props.params
const componentName = _.startCase(name).replace(/ /g, '')
const component = semanticUIReact[componentName]
if (!component || !component._meta || !META.isParent(component)) {
return <PageNotFound />
}
return (
<ComponentDoc _meta={component._meta} />
)
}
const DocsRoot = (props) => {
const { name } = props.match.params
const componentName = _.startCase(name).replace(/ /g, '')
const component = semanticUIReact[componentName]
if (!component || !component._meta || !META.isParent(component)) return null
return (
<ComponentDoc
name={component._meta.name}
parent={component._meta.parent}
type={component._meta.type}
/>
)
}
menuItemsByType = _.map((type) => {
const items = _.flow(
_.filter(META.isType(type)),
_.map(({ _meta }) => (
<Menu.Item
key={_meta.name}
name={_meta.name}
onClick={this.handleItemClick}
as={NavLink}
to={getRoute(_meta)}
activeClassName='active'
/>
)),
)(parentComponents)
return (
<Menu.Item key={type}>
<Menu.Header>{_.capitalize(type)}s</Menu.Header>
<Menu.Menu>{items}</Menu.Menu>
</Menu.Item>
)
}, typeOrder)