diff options
author | Christopher Speller <crspeller@gmail.com> | 2016-03-30 10:05:26 -0400 |
---|---|---|
committer | Christopher Speller <crspeller@gmail.com> | 2016-03-30 10:05:26 -0400 |
commit | 2ab4581d5e658b22c4a957ec57bb3530f92ad66b (patch) | |
tree | 4202ebdcbc92905873a15d90a6fb68464bb1629f /webapp/components/backstage/backstage_section.jsx | |
parent | fcc80818a8afb6f1e2f9974916f02d5fdeb72ec8 (diff) | |
parent | 6a101292c74d33e542e47f8e54fff5a5389bf2ef (diff) | |
download | chat-2ab4581d5e658b22c4a957ec57bb3530f92ad66b.tar.gz chat-2ab4581d5e658b22c4a957ec57bb3530f92ad66b.tar.bz2 chat-2ab4581d5e658b22c4a957ec57bb3530f92ad66b.zip |
Merge pull request #2561 from hmhealey/plt1736
PLT-1736 Initial Backstage Work
Diffstat (limited to 'webapp/components/backstage/backstage_section.jsx')
-rw-r--r-- | webapp/components/backstage/backstage_section.jsx | 80 |
1 files changed, 80 insertions, 0 deletions
diff --git a/webapp/components/backstage/backstage_section.jsx b/webapp/components/backstage/backstage_section.jsx new file mode 100644 index 000000000..d6ce2b258 --- /dev/null +++ b/webapp/components/backstage/backstage_section.jsx @@ -0,0 +1,80 @@ +// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import React from 'react'; + +import {Link} from 'react-router'; + +export default class BackstageSection extends React.Component { + static get propTypes() { + return { + name: React.PropTypes.string.isRequired, + title: React.PropTypes.node.isRequired, + parentLink: React.PropTypes.string, + subsection: React.PropTypes.bool, + children: React.PropTypes.arrayOf(React.PropTypes.element) + }; + } + + static get defaultProps() { + return { + parentLink: '', + subsection: false, + children: [] + }; + } + + static get contextTypes() { + return { + router: React.PropTypes.object.isRequired + }; + } + + getLink() { + return this.props.parentLink + '/' + this.props.name; + } + + render() { + const {title, subsection, children} = this.props; + + const link = this.getLink(); + + let clonedChildren = null; + if (children.length > 0) { + clonedChildren = ( + <ul className='subsections'> + { + React.Children.map(children, (child) => { + return React.cloneElement(child, { + parentLink: link, + subsection: true + }); + }) + } + </ul> + ); + } + + let className = 'section'; + if (subsection) { + className = 'subsection'; + } + + return ( + <li className={className}> + <Link + className={`${className}-title`} + activeClassName={`${className}-title--active`} + onlyActiveOnIndex={true} + onClick={this.handleClick} + to={link} + > + <span className={`${className}-title__text`}> + {title} + </span> + </Link> + {clonedChildren} + </li> + ); + } +} |