Merge pull request #1543 from GitbookIO/dream

React for rendering website with plugins

1 files changed, 47 insertions, 0 deletions

diff --git a/packages/gitbook-plugin-sharing/src/components/ShareButton.js b/packages/gitbook-plugin-sharing/src/components/ShareButton.js
new file mode 100644
index 0000000..8983423
--- /dev/null
+++ b/packages/gitbook-plugin-sharing/src/components/ShareButton.js
@@ -0,0 +1,47 @@
+const GitBook = require('gitbook-core');
+const { React, Dropdown, Backdrop } = GitBook;
+
+const SITES = require('../SITES');
+
+// Share button with dropdown list of sites
+const ShareButton = React.createClass({
+    propTypes: {
+        siteIds: React.PropTypes.arrayOf(React.PropTypes.string).isRequired,
+        onShare: React.PropTypes.func.isRequired
+    },
+
+    getInitialState() {
+        return { open: false };
+    },
+
+    onToggle() {
+        const { open } = this.state;
+        this.setState({ open: !open });
+    },
+
+    render() {
+        const { siteIds, onShare } = this.props;
+        const { open } = this.state;
+
+        return (
+            <Dropdown.Container>
+                {open ? <Backdrop onClose={this.onToggle} /> : null}
+
+                <GitBook.Button onClick={this.onToggle}>
+                    <GitBook.Icon id="share-alt" />
+                </GitBook.Button>
+
+                {open ? (
+                    <Dropdown.Menu>
+                        {siteIds.map((id) => (
+                            <Dropdown.ItemLink onClick={() => onShare(SITES[id])} key={id}>
+                                {SITES[id].label}
+                            </Dropdown.ItemLink>
+                        ))}
+                    </Dropdown.Menu>) : null}
+            </Dropdown.Container>
+        );
+    }
+});
+
+module.exports = ShareButton;