Refactor code of plugin sharing

packages/gitbook-plugin-sharing/package.json

@@ -74,4 +74,4 @@
     "url": "https://github.com/GitbookIO/gitbook/issues"
   },
   "license": "Apache-2.0"
-}
+}

packages/gitbook-plugin-sharing/src/components/ShareButton.js

@@ -0,0 +1,44 @@
+const GitBook = require('gitbook-core');
+const { React, Dropdown } = 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() {
+        this.setState({ open: !this.state.open });
+    },
+
+    render() {
+        const { siteIds, onShare } = this.props;
+
+        const items = siteIds.map((id) => (
+            <Dropdown.Item onClick={() => onShare(SITES[id])} key={id}>
+                {SITES[id].label}
+            </Dropdown.Item>
+        ));
+
+        return (
+            <Dropdown.Container>
+                <GitBook.Button onClick={this.onToggle}>
+                    <GitBook.Icon id="share-alt" />
+                </GitBook.Button>
+
+                <Dropdown.Menu open={this.state.open}>
+                    {items}
+                </Dropdown.Menu>
+            </Dropdown.Container>
+        );
+    }
+});
+
+module.exports = ShareButton;

packages/gitbook-plugin-sharing/src/components/SharingButtons.js

@@ -0,0 +1,63 @@
+const GitBook = require('gitbook-core');
+const { React } = GitBook;
+
+const SITES = require('../SITES');
+const optionsShape = require('../shapes/options');
+const SiteButton = require('./SiteButton');
+const ShareButton = require('./ShareButton');
+
+/**
+ * Displays the group of sharing buttons
+ */
+const SharingButtons = React.createClass({
+    propTypes: {
+        options: optionsShape.isRequired,
+        page: GitBook.Shapes.Page.isRequired
+    },
+
+    onShare(site) {
+        site.onShare(location.href, this.props.page.title);
+    },
+
+    render() {
+        const { options } = this.props;
+
+        // Highlighted sites
+        const mainButtons = SITES
+            .ALL
+            .filter(id => options[id])
+            .map(id => <SiteButton key={id} onShare={this.onShare} site={SITES[id]} />);
+
+        // Other sites
+        let shareButton = undefined;
+        if (options.all.length > 0) {
+            shareButton = (
+                <ShareButton siteIds={options.all}
+                             onShare={this.onShare} />
+            );
+        }
+
+        return (
+            <GitBook.ButtonGroup>
+                { mainButtons }
+                { shareButton }
+            </GitBook.ButtonGroup>
+        );
+    }
+});
+
+function mapStateToProps(state) {
+    let options = state.config.getIn(['pluginsConfig', 'sharing']);
+    if (options) {
+        options = options.toJS();
+    } else {
+        options = { all: [] };
+    }
+
+    return {
+        page: state.page,
+        options
+    };
+}
+
+module.exports = GitBook.connect(SharingButtons, mapStateToProps);

packages/gitbook-plugin-sharing/src/components/SiteButton.js

@@ -0,0 +1,29 @@
+const GitBook = require('gitbook-core');
+const { React } = GitBook;
+
+const siteShape = require('../shapes/site');
+
+// An individual site sharing button
+const SiteButton = React.createClass({
+    propTypes: {
+        site: siteShape.isRequired,
+        onShare: React.PropTypes.func.isRequired
+    },
+
+    onClick(e) {
+        e.preventDefault();
+        this.props.onShare(this.props.site);
+    },
+
+    render() {
+        const { site } = this.props;
+
+        return (
+            <GitBook.Button onClick={this.onClick}>
+                <GitBook.Icon id={site.icon}/>
+            </GitBook.Button>
+        );
+    }
+});
+
+module.exports = SiteButton;

packages/gitbook-plugin-sharing/src/index.js

@@ -1,142 +1,9 @@
 const GitBook = require('gitbook-core');
-const {
-    React,
-    Dropdown
-} = GitBook;
-const { string, arrayOf, shape, func } = React.PropTypes;
-
-const SITES = require('./SITES');
-const optionsShape = require('./optionsShape');
-const siteShape = shape({
-    label: string.isRequired,
-    icon: string.isRequired,
-    onShare: func.isRequired
-});
+const SharingButtons = require('./components/SharingButtons');
 
 module.exports = GitBook.createPlugin({
     activate: (dispatch, getState, { Components }) => {
         // Dispatch initialization actions
-        dispatch(Components.registerComponent(Sharing, { role: 'toolbar:buttons:right' }));
-    },
-    deactivate: (dispatch, getState) => {
-        // Dispatch cleanup actions
-    },
-    reduce: (state, action) => state
-});
-
-/**
- * Displays the group of sharing buttons
- */
-let Sharing = React.createClass({
-    propTypes: {
-        options: optionsShape.isRequired,
-        page: GitBook.Shapes.Page.isRequired
-    },
-
-    onShare(site) {
-        site.onShare(location.href, this.props.page.title);
-    },
-
-    render() {
-        const { options } = this.props;
-
-        // Highlighted sites
-        const mainButtons = SITES
-            .ALL
-            .filter(id => options[id])
-            .map(id => <SiteButton key={id} onShare={this.onShare} site={SITES[id]} />);
-
-        // Other sites
-        let shareButton = undefined;
-        if (options.all.length > 0) {
-            shareButton = (
-                <ShareButton siteIds={options.all}
-                             onShare={this.onShare} />
-            );
-        }
-
-        return (
-            <GitBook.ButtonGroup>
-                { mainButtons }
-                { shareButton }
-            </GitBook.ButtonGroup>
-        );
-    }
-});
-
-function mapStateToProps(state) {
-    let options = state.config.getIn(['pluginsConfig', 'sharing']);
-    if (options) {
-        options = options.toJS();
-    } else {
-        options = { all: [] };
-    }
-
-    return {
-        page: state.page,
-        options
-    };
-}
-
-Sharing = GitBook.connect(Sharing, mapStateToProps);
-
-// An individual site sharing button
-const SiteButton = React.createClass({
-    propTypes: {
-        site: siteShape.isRequired,
-        onShare: func.isRequired
-    },
-
-    onClick(e) {
-        e.preventDefault();
-        this.props.onShare(this.props.site);
-    },
-
-    render() {
-        const { site } = this.props;
-
-        return (
-            <GitBook.Button onClick={this.onClick}>
-                <GitBook.Icon id={site.icon}/>
-            </GitBook.Button>
-        );
-    }
-});
-
-// Share button with dropdown list of sites
-const ShareButton = React.createClass({
-    propTypes: {
-        siteIds: arrayOf(string).isRequired,
-        onShare: func.isRequired
-    },
-
-    getInitialState() {
-        return { open: false };
-    },
-
-    onToggle() {
-        this.setState({ open: !this.state.open });
-    },
-
-    render() {
-        const { siteIds, onShare } = this.props;
-
-        const items = siteIds.map((id) => (
-            <Dropdown.Item onClick={() => onShare(SITES[id])} key={id}>
-                {SITES[id].label}
-            </Dropdown.Item>
-        ));
-
-        return (
-            <Dropdown.Container>
-                <GitBook.Button onClick={this.onToggle}>
-                    <GitBook.Icon id="share-alt" />
-                </GitBook.Button>
-
-                <Dropdown.Menu open={this.state.open}>
-                    {items}
-                </Dropdown.Menu>
-            </Dropdown.Container>
-        );
+        dispatch(Components.registerComponent(SharingButtons, { role: 'toolbar:buttons:right' }));
     }
 });

packages/gitbook-plugin-sharing/src/shapes/options.js

@@ -0,0 +1,19 @@
+const {
+    bool,
+    arrayOf,
+    oneOf,
+    shape
+} = require('gitbook-core').React.PropTypes;
+const { ALL } = require('../SITES');
+
+const optionsShape = shape({
+    facebook: bool,
+    twitter: bool,
+    google: bool,
+    weibo: bool,
+    instapaper: bool,
+    vk: bool,
+    all: arrayOf(oneOf(ALL)).isRequired
+});
+
+module.exports = optionsShape;

packages/gitbook-plugin-sharing/src/shapes/site.js

@@ -0,0 +1,13 @@
+const {
+    string,
+    func,
+    shape
+} = require('gitbook-core').React.PropTypes;
+
+const siteShape = shape({
+    label: string.isRequired,
+    icon: string.isRequired,
+    onShare: func.isRequired
+});
+
+module.exports = siteShape;

packages/gitbook/package.json

@@ -107,4 +107,4 @@
     "babel-register": "^6.14.0",
     "mocha": "^3.0.2"
   }
-}
+}