From c42c5897fee1841d2be0207faeda81bc42f250e2 Mon Sep 17 00:00:00 2001 From: Samy Pesse Date: Thu, 13 Oct 2016 13:23:19 +0200 Subject: [PATCH] Refactor code of plugin sharing --- packages/gitbook-plugin-sharing/package.json | 2 +- .../src/components/ShareButton.js | 44 ++++++ .../src/components/SharingButtons.js | 63 ++++++++ .../src/components/SiteButton.js | 29 ++++ packages/gitbook-plugin-sharing/src/index.js | 137 +----------------- .../src/shapes/options.js | 19 +++ .../gitbook-plugin-sharing/src/shapes/site.js | 13 ++ packages/gitbook/package.json | 2 +- 8 files changed, 172 insertions(+), 137 deletions(-) create mode 100644 packages/gitbook-plugin-sharing/src/components/ShareButton.js create mode 100644 packages/gitbook-plugin-sharing/src/components/SharingButtons.js create mode 100644 packages/gitbook-plugin-sharing/src/components/SiteButton.js create mode 100644 packages/gitbook-plugin-sharing/src/shapes/options.js create mode 100644 packages/gitbook-plugin-sharing/src/shapes/site.js diff --git a/packages/gitbook-plugin-sharing/package.json b/packages/gitbook-plugin-sharing/package.json index b0540e843..40d59231f 100644 --- a/packages/gitbook-plugin-sharing/package.json +++ b/packages/gitbook-plugin-sharing/package.json @@ -74,4 +74,4 @@ "url": "https://github.com/GitbookIO/gitbook/issues" }, "license": "Apache-2.0" -} +} \ No newline at end of file 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 000000000..5a6cd6ebd --- /dev/null +++ b/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) => ( + onShare(SITES[id])} key={id}> + {SITES[id].label} + + )); + + return ( + + + + + + + {items} + + + ); + } +}); + +module.exports = ShareButton; diff --git a/packages/gitbook-plugin-sharing/src/components/SharingButtons.js b/packages/gitbook-plugin-sharing/src/components/SharingButtons.js new file mode 100644 index 000000000..445458a94 --- /dev/null +++ b/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 => ); + + // Other sites + let shareButton = undefined; + if (options.all.length > 0) { + shareButton = ( + + ); + } + + return ( + + { mainButtons } + { shareButton } + + ); + } +}); + +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); diff --git a/packages/gitbook-plugin-sharing/src/components/SiteButton.js b/packages/gitbook-plugin-sharing/src/components/SiteButton.js new file mode 100644 index 000000000..e03720d69 --- /dev/null +++ b/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 ( + + + + ); + } +}); + +module.exports = SiteButton; diff --git a/packages/gitbook-plugin-sharing/src/index.js b/packages/gitbook-plugin-sharing/src/index.js index 357ccbba2..174adfc51 100644 --- a/packages/gitbook-plugin-sharing/src/index.js +++ b/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 => ); - - // Other sites - let shareButton = undefined; - if (options.all.length > 0) { - shareButton = ( - - ); - } - - return ( - - { mainButtons } - { shareButton } - - ); - } -}); - -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 ( - - - - ); - } -}); - -// 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) => ( - onShare(SITES[id])} key={id}> - {SITES[id].label} - - )); - - return ( - - - - - - - {items} - - - ); + dispatch(Components.registerComponent(SharingButtons, { role: 'toolbar:buttons:right' })); } }); diff --git a/packages/gitbook-plugin-sharing/src/shapes/options.js b/packages/gitbook-plugin-sharing/src/shapes/options.js new file mode 100644 index 000000000..885feb67f --- /dev/null +++ b/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; diff --git a/packages/gitbook-plugin-sharing/src/shapes/site.js b/packages/gitbook-plugin-sharing/src/shapes/site.js new file mode 100644 index 000000000..2227429e5 --- /dev/null +++ b/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; diff --git a/packages/gitbook/package.json b/packages/gitbook/package.json index 7d0a38261..d0bc07bdf 100644 --- a/packages/gitbook/package.json +++ b/packages/gitbook/package.json @@ -107,4 +107,4 @@ "babel-register": "^6.14.0", "mocha": "^3.0.2" } -} +} \ No newline at end of file