diff options
Diffstat (limited to 'packages/gitbook-plugin-theme-default/src/components')
5 files changed, 190 insertions, 0 deletions
diff --git a/packages/gitbook-plugin-theme-default/src/components/Body.js b/packages/gitbook-plugin-theme-default/src/components/Body.js new file mode 100644 index 0000000..de97b5c --- /dev/null +++ b/packages/gitbook-plugin-theme-default/src/components/Body.js @@ -0,0 +1,24 @@ +const React = require('react'); +const GitBook = require('gitbook-core'); + +const Page = require('./Page'); +const Toolbar = require('./Toolbar'); + +const Body = React.createClass({ + propTypes: { + page: GitBook.Shapes.Page + }, + + render() { + const { page } = this.props; + + return ( + <div className="Body page-wrapper"> + <Toolbar /> + <Page page={page} /> + </div> + ); + } +}); + +module.exports = Body; diff --git a/packages/gitbook-plugin-theme-default/src/components/Page.js b/packages/gitbook-plugin-theme-default/src/components/Page.js new file mode 100644 index 0000000..dda8eba --- /dev/null +++ b/packages/gitbook-plugin-theme-default/src/components/Page.js @@ -0,0 +1,20 @@ +const React = require('react'); +const GitBook = require('gitbook-core'); + +const Page = React.createClass({ + propTypes: { + page: GitBook.Shapes.Page + }, + + render() { + const { page } = this.props; + + return ( + <div className="Page page-wrapper"> + <GitBook.HTMLContent html={page.content} /> + </div> + ); + } +}); + +module.exports = Page; diff --git a/packages/gitbook-plugin-theme-default/src/components/Sidebar.js b/packages/gitbook-plugin-theme-default/src/components/Sidebar.js new file mode 100644 index 0000000..ff4fcbf --- /dev/null +++ b/packages/gitbook-plugin-theme-default/src/components/Sidebar.js @@ -0,0 +1,22 @@ +const React = require('react'); +const GitBook = require('gitbook-core'); + +const Summary = require('./Summary'); + +const Sidebar = React.createClass({ + propTypes: { + summary: GitBook.Shapes.Summary + }, + + render() { + const { summary } = this.props; + + return ( + <div className="Sidebar book-summary"> + <Summary summary={summary} /> + </div> + ); + } +}); + +module.exports = Sidebar; diff --git a/packages/gitbook-plugin-theme-default/src/components/Summary.js b/packages/gitbook-plugin-theme-default/src/components/Summary.js new file mode 100644 index 0000000..e95b4b4 --- /dev/null +++ b/packages/gitbook-plugin-theme-default/src/components/Summary.js @@ -0,0 +1,97 @@ +const React = require('react'); +const GitBook = require('gitbook-core'); + +const SummaryArticle = React.createClass({ + propTypes: { + article: GitBook.Shapes.SummaryArticle + }, + + render() { + const { article } = this.props; + + return ( + <GitBook.InjectedComponent matching={{ role: 'summary:article' }} props={this.props}> + <li className="SummaryArticle"> + <span>{article.title}</span> + </li> + </GitBook.InjectedComponent> + ); + } +}); + +const SummaryArticles = React.createClass({ + propTypes: { + articles: GitBook.Shapes.listOf(GitBook.Shapes.SummaryArticle) + }, + + render() { + const { articles } = this.props; + + return ( + <GitBook.InjectedComponent matching={{ role: 'summary:articles' }} props={this.props}> + <ul className="SummaryArticles"> + {articles.map(article => <SummaryArticle key={article.level} article={article} />)} + </ul> + </GitBook.InjectedComponent> + ); + } +}); + +const SummaryPart = React.createClass({ + propTypes: { + part: GitBook.Shapes.SummaryPart + }, + + render() { + const { part } = this.props; + const { title, articles } = part; + + return ( + <GitBook.InjectedComponent matching={{ role: 'summary:part' }} props={this.props}> + <div className="SummaryPart"> + {title} + <SummaryArticles articles={articles} /> + </div> + </GitBook.InjectedComponent> + ); + } +}); + +const SummaryParts = React.createClass({ + propTypes: { + parts: GitBook.Shapes.listOf(GitBook.Shapes.SummaryPart) + }, + + render() { + const { parts } = this.props; + + return ( + <GitBook.InjectedComponent matching={{ role: 'summary:parts' }} props={this.props}> + <div className="SummaryParts"> + {parts.map((part, i) => <SummaryPart key={i} part={part} />)} + </div> + </GitBook.InjectedComponent> + ); + } +}); + +const Summary = React.createClass({ + propTypes: { + summary: GitBook.Shapes.Summary + }, + + render() { + const { summary } = this.props; + const { parts } = summary; + + return ( + <GitBook.InjectedComponent matching={{ role: 'summary:container' }} props={this.props}> + <div className="Summary book-summary"> + <SummaryParts parts={parts} /> + </div> + </GitBook.InjectedComponent> + ); + } +}); + +module.exports = Summary; diff --git a/packages/gitbook-plugin-theme-default/src/components/Toolbar.js b/packages/gitbook-plugin-theme-default/src/components/Toolbar.js new file mode 100644 index 0000000..de89f97 --- /dev/null +++ b/packages/gitbook-plugin-theme-default/src/components/Toolbar.js @@ -0,0 +1,27 @@ +const React = require('react'); +const GitBook = require('gitbook-core'); + +const sidebar = require('../actions/sidebar'); + +const Toolbar = React.createClass({ + propTypes: { + dispatch: React.PropTypes.func + }, + + onToggle() { + const { dispatch } = this.props; + dispatch(sidebar.toggle()); + }, + + render() { + return ( + <div className="Toolbar book-toolbar"> + <button onClick={this.onToggle}>Toggle</button> + <GitBook.InjectedComponentSet matching={{ role: 'toolbar:buttons:left' }} /> + <GitBook.InjectedComponentSet matching={{ role: 'toolbar:buttons:right' }} /> + </div> + ); + } +}); + +module.exports = GitBook.connect(Toolbar); |