Merge pull request #1543 from GitbookIO/dream

React for rendering website with plugins

2 files changed, 153 insertions, 0 deletions

diff --git a/packages/gitbook-plugin-search/src/components/Input.js b/packages/gitbook-plugin-search/src/components/Input.js
new file mode 100644
index 0000000..216a5d2
--- /dev/null
+++ b/packages/gitbook-plugin-search/src/components/Input.js
@@ -0,0 +1,73 @@
+const GitBook = require('gitbook-core');
+const { React } = GitBook;
+
+const search = require('../actions/search');
+
+const ESCAPE = 27;
+
+const SearchInput = React.createClass({
+    propTypes: {
+        query:    React.PropTypes.string,
+        i18n:     GitBook.PropTypes.I18n,
+        dispatch: GitBook.PropTypes.dispatch
+    },
+
+    onChange(event) {
+        const { dispatch } = this.props;
+        const { value } = event.currentTarget;
+
+        dispatch(search.query(value));
+    },
+
+    /**
+     * On Escape key down, clear the search field
+     */
+    onKeyDown(e) {
+        const { query } = this.props;
+        if (e.keyCode == ESCAPE && query != '') {
+            e.preventDefault();
+            e.stopPropagation();
+            this.clearSearch();
+        }
+    },
+
+    clearSearch() {
+        this.props.dispatch(search.query(''));
+    },
+
+    render() {
+        const { i18n, query } = this.props;
+
+        let clear;
+        if (query != '') {
+            clear = (
+                <span className="Search-Clear"
+                      onClick={this.clearSearch}>
+                    ✕
+                </span>
+            );
+            // clear = <GitBook.Icon id="x" onClick={this.clearSearch}/>;
+        }
+
+        return (
+            <div className="Search-Input">
+                <input
+                    type="text"
+                    onKeyDown={this.onKeyDown}
+                    value={query}
+                    placeholder={i18n.t('SEARCH_PLACEHOLDER')}
+                    onChange={this.onChange}
+                />
+
+                { clear }
+            </div>
+        );
+    }
+});
+
+const mapStateToProps = state => {
+    const { query } = state.search;
+    return { query };
+};
+
+module.exports = GitBook.connect(SearchInput, mapStateToProps);
diff --git a/packages/gitbook-plugin-search/src/components/Results.js b/packages/gitbook-plugin-search/src/components/Results.js
new file mode 100644
index 0000000..16a8cbd
--- /dev/null
+++ b/packages/gitbook-plugin-search/src/components/Results.js
@@ -0,0 +1,80 @@
+const GitBook = require('gitbook-core');
+const { React } = GitBook;
+const Highlight = require('react-highlighter');
+
+const MAX_DESCRIPTION_SIZE = 500;
+
+const Result = React.createClass({
+    propTypes: {
+        result: React.PropTypes.object,
+        query:  React.PropTypes.string
+    },
+
+    render() {
+        const { result, query } = this.props;
+
+        let summary = result.body.trim();
+        if (summary.length > MAX_DESCRIPTION_SIZE) {
+            summary = summary.slice(0, MAX_DESCRIPTION_SIZE).trim() + '...';
+        }
+
+        return (
+            <div className="Search-ResultContainer">
+                <GitBook.InjectedComponent matching={{ role: 'search:result' }} props={{ result, query }}>
+                    <div className="Search-Result">
+                        <h3>
+                            <GitBook.Link to={result.url}>{result.title}</GitBook.Link>
+                        </h3>
+                        <p>
+                            <Highlight
+                            matchElement="span"
+                            matchClass="Search-MatchSpan"
+                            search={query}>
+                                {summary}
+                            </Highlight>
+                        </p>
+                    </div>
+                </GitBook.InjectedComponent>
+            </div>
+        );
+    }
+});
+
+const SearchResults = React.createClass({
+    propTypes: {
+        i18n:     GitBook.PropTypes.I18n,
+        results:  GitBook.PropTypes.list,
+        query:    React.PropTypes.string,
+        children: React.PropTypes.node
+    },
+
+    render() {
+        const { i18n, query, results, children } = this.props;
+
+        if (!query) {
+            return React.Children.only(children);
+        }
+
+        return (
+            <div className="Search-ResultsContainer">
+                <GitBook.InjectedComponent matching={{ role: 'search:results' }} props={{ results, query }}>
+                    <div className="Search-Results">
+                        <h1>{i18n.t('SEARCH_RESULTS_TITLE', { query, count: results.size })}</h1>
+                        <div className="Search-Results">
+                            {results.map((result, i) => {
+                                return <Result key={i} result={result} query={query} />;
+                            })}
+                        </div>
+                    </div>
+                </GitBook.InjectedComponent>
+            </div>
+        );
+    }
+});
+
+const mapStateToProps = (state) => {
+    const { results, query } = state.search;
+    return { results, query };
+};
+
+module.exports = GitBook.connect(SearchResults, mapStateToProps);