1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
|
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
});
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>
);
}
});
|
