@micromag/element-share-options 0.3.351 → 0.3.353
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/css/styles.css +1 -1
- package/es/index.js +30 -9
- package/lib/index.js +30 -9
- package/package.json +2 -2
package/assets/css/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.micromag-element-share-options-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:inherit;cursor:pointer;display:inline-block;font-family:inherit;padding:0;position:relative}.micromag-element-share-options-item+.micromag-element-share-options-item{margin-top:.
|
|
1
|
+
.micromag-element-share-options-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:inherit;cursor:pointer;display:inline-block;font-family:inherit;padding:0;position:relative}.micromag-element-share-options-item+.micromag-element-share-options-item{margin-top:.5rem}.micromag-element-share-options-button{-ms-flex-align:center;-ms-flex-pack:center;align-items:center;background-color:transparent;color:#fff;display:-ms-inline-flexbox;display:inline-flex;font-size:1rem;font-weight:400;justify-content:center;-webkit-transform-origin:0 50%;-ms-transform-origin:0 50%;transform-origin:0 50%;-webkit-transition:-webkit-transform .3s cubic-bezier(0,.6,.5,1);transition:-webkit-transform .3s cubic-bezier(0,.6,.5,1);-o-transition:transform .3s cubic-bezier(0,.6,.5,1);transition:transform .3s cubic-bezier(0,.6,.5,1);transition:transform .3s cubic-bezier(0,.6,.5,1),-webkit-transform .3s cubic-bezier(0,.6,.5,1)}@media (hover:hover){.micromag-element-share-options-button:hover .micromag-element-share-options-icon,.micromag-element-share-options-button:hover .micromag-element-share-options-label{-webkit-transform:scale(1.05);-ms-transform:scale(1.05);transform:scale(1.05);-webkit-transition:-webkit-transform .3s cubic-bezier(.21,2.59,0,.9);transition:-webkit-transform .3s cubic-bezier(.21,2.59,0,.9);-o-transition:transform .3s cubic-bezier(.21,2.59,0,.9);transition:transform .3s cubic-bezier(.21,2.59,0,.9);transition:transform .3s cubic-bezier(.21,2.59,0,.9),-webkit-transform .3s cubic-bezier(.21,2.59,0,.9)}}.micromag-element-share-options-button:active .micromag-element-share-options-icon,.micromag-element-share-options-button:active .micromag-element-share-options-label{-webkit-transform:scale(1.05);-ms-transform:scale(1.05);transform:scale(1.05);-webkit-transition:-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);transition:-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);-o-transition:transform .3s cubic-bezier(.41,1.69,.04,.67);transition:transform .3s cubic-bezier(.41,1.69,.04,.67);transition:transform .3s cubic-bezier(.41,1.69,.04,.67),-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67)}.micromag-element-share-options-icon{-ms-flex-negative:0;display:block;flex-shrink:0;position:relative}.micromag-element-share-options-icon,.micromag-element-share-options-spacer{height:100%;width:45px}.micromag-element-share-options-icon,.micromag-element-share-options-label{-webkit-transition:-webkit-transform .3s cubic-bezier(0,.6,.5,1);transition:-webkit-transform .3s cubic-bezier(0,.6,.5,1);-o-transition:transform .3s cubic-bezier(0,.6,.5,1);transition:transform .3s cubic-bezier(0,.6,.5,1);transition:transform .3s cubic-bezier(0,.6,.5,1),-webkit-transform .3s cubic-bezier(0,.6,.5,1)}.micromag-element-share-options-label{-ms-flex-positive:1;-ms-flex-align:center;-ms-flex-pack:center;align-items:center;display:-ms-flexbox;display:flex;flex-grow:1;font-size:inherit;justify-content:center;line-height:1;margin-left:.25em;margin-right:.25em;padding:.25rem;-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center}.micromag-element-share-options-labelText{-ms-flex-negative:0;flex-shrink:0;margin-left:.25em;margin-right:.25em}
|
package/es/index.js
CHANGED
|
@@ -16,7 +16,7 @@ var propTypes$1 = {
|
|
|
16
16
|
};
|
|
17
17
|
var defaultProps$1 = {
|
|
18
18
|
className: null,
|
|
19
|
-
size:
|
|
19
|
+
size: 45
|
|
20
20
|
};
|
|
21
21
|
var ShareLinkIcon = function ShareLinkIcon(_ref) {
|
|
22
22
|
var className = _ref.className,
|
|
@@ -58,6 +58,7 @@ var propTypes = {
|
|
|
58
58
|
options: PropTypes.arrayOf(PropTypes.string),
|
|
59
59
|
buttonsStyle: PropTypes$1.boxStyle,
|
|
60
60
|
buttonsTextStyle: PropTypes$1.textStyle,
|
|
61
|
+
iconSize: PropTypes.number,
|
|
61
62
|
theme: PropTypes$1.viewerTheme,
|
|
62
63
|
onShare: PropTypes.func,
|
|
63
64
|
onClose: PropTypes.func,
|
|
@@ -73,6 +74,7 @@ var defaultProps = {
|
|
|
73
74
|
options: null,
|
|
74
75
|
buttonsStyle: null,
|
|
75
76
|
buttonsTextStyle: null,
|
|
77
|
+
iconSize: 45,
|
|
76
78
|
theme: null,
|
|
77
79
|
onShare: null,
|
|
78
80
|
onClose: null,
|
|
@@ -89,6 +91,7 @@ var ShareOptions = function ShareOptions(_ref) {
|
|
|
89
91
|
options = _ref.options,
|
|
90
92
|
buttonsStyle = _ref.buttonsStyle,
|
|
91
93
|
buttonsTextStyle = _ref.buttonsTextStyle,
|
|
94
|
+
iconSize = _ref.iconSize,
|
|
92
95
|
theme = _ref.theme,
|
|
93
96
|
onShare = _ref.onShare,
|
|
94
97
|
onClose = _ref.onClose,
|
|
@@ -141,13 +144,13 @@ var ShareOptions = function ShareOptions(_ref) {
|
|
|
141
144
|
var shareIconProps = useMemo(function () {
|
|
142
145
|
return {
|
|
143
146
|
className: styles.icon,
|
|
144
|
-
size:
|
|
147
|
+
size: iconSize,
|
|
145
148
|
bgStyle: {
|
|
146
149
|
fill: 'none'
|
|
147
150
|
},
|
|
148
151
|
iconFillColor: 'currentColor'
|
|
149
152
|
};
|
|
150
|
-
}, []);
|
|
153
|
+
}, [iconSize]);
|
|
151
154
|
var shareOptions = [{
|
|
152
155
|
id: 'facebook',
|
|
153
156
|
button: /*#__PURE__*/React.createElement(FacebookShareButton, Object.assign({}, shareButtonProps, {
|
|
@@ -161,7 +164,10 @@ var ShareOptions = function ShareOptions(_ref) {
|
|
|
161
164
|
}), /*#__PURE__*/React.createElement(FacebookIcon, shareIconProps), /*#__PURE__*/React.createElement("div", {
|
|
162
165
|
className: classNames([styles.label, _defineProperty({}, labelClassName, labelClassName !== null)])
|
|
163
166
|
}, "Facebook"), /*#__PURE__*/React.createElement("div", {
|
|
164
|
-
className: styles.spacer
|
|
167
|
+
className: styles.spacer,
|
|
168
|
+
style: {
|
|
169
|
+
width: "".concat(iconSize, "px")
|
|
170
|
+
}
|
|
165
171
|
}))
|
|
166
172
|
}, {
|
|
167
173
|
id: 'twitter',
|
|
@@ -176,7 +182,10 @@ var ShareOptions = function ShareOptions(_ref) {
|
|
|
176
182
|
}), /*#__PURE__*/React.createElement(TwitterIcon, shareIconProps), /*#__PURE__*/React.createElement("div", {
|
|
177
183
|
className: classNames([styles.label, _defineProperty({}, labelClassName, labelClassName !== null)])
|
|
178
184
|
}, "Twitter"), /*#__PURE__*/React.createElement("div", {
|
|
179
|
-
className: styles.spacer
|
|
185
|
+
className: styles.spacer,
|
|
186
|
+
style: {
|
|
187
|
+
width: "".concat(iconSize, "px")
|
|
188
|
+
}
|
|
180
189
|
}))
|
|
181
190
|
}, {
|
|
182
191
|
id: 'linkedin',
|
|
@@ -191,7 +200,10 @@ var ShareOptions = function ShareOptions(_ref) {
|
|
|
191
200
|
}), /*#__PURE__*/React.createElement(LinkedinIcon, shareIconProps), /*#__PURE__*/React.createElement("div", {
|
|
192
201
|
className: classNames([styles.label, _defineProperty({}, labelClassName, labelClassName !== null)])
|
|
193
202
|
}, "LinkedIn"), /*#__PURE__*/React.createElement("div", {
|
|
194
|
-
className: styles.spacer
|
|
203
|
+
className: styles.spacer,
|
|
204
|
+
style: {
|
|
205
|
+
width: "".concat(iconSize, "px")
|
|
206
|
+
}
|
|
195
207
|
}))
|
|
196
208
|
}, {
|
|
197
209
|
id: 'whatsapp',
|
|
@@ -206,7 +218,10 @@ var ShareOptions = function ShareOptions(_ref) {
|
|
|
206
218
|
}), /*#__PURE__*/React.createElement(WhatsappIcon, shareIconProps), /*#__PURE__*/React.createElement("div", {
|
|
207
219
|
className: classNames([styles.label, _defineProperty({}, labelClassName, labelClassName !== null)])
|
|
208
220
|
}, "Whatsapp"), /*#__PURE__*/React.createElement("div", {
|
|
209
|
-
className: styles.spacer
|
|
221
|
+
className: styles.spacer,
|
|
222
|
+
style: {
|
|
223
|
+
width: "".concat(iconSize, "px")
|
|
224
|
+
}
|
|
210
225
|
}))
|
|
211
226
|
},
|
|
212
227
|
// {
|
|
@@ -254,7 +269,10 @@ var ShareOptions = function ShareOptions(_ref) {
|
|
|
254
269
|
"value": "Email"
|
|
255
270
|
}]
|
|
256
271
|
})), /*#__PURE__*/React.createElement("div", {
|
|
257
|
-
className: styles.spacer
|
|
272
|
+
className: styles.spacer,
|
|
273
|
+
style: {
|
|
274
|
+
width: "".concat(iconSize, "px")
|
|
275
|
+
}
|
|
258
276
|
}))
|
|
259
277
|
}];
|
|
260
278
|
var hasShareLink = options !== null ? options.includes('copylink') : true; // default is true
|
|
@@ -290,7 +308,10 @@ var ShareOptions = function ShareOptions(_ref) {
|
|
|
290
308
|
"value": "Link copied!"
|
|
291
309
|
}]
|
|
292
310
|
}) : null)), /*#__PURE__*/React.createElement("div", {
|
|
293
|
-
className: styles.spacer
|
|
311
|
+
className: styles.spacer,
|
|
312
|
+
style: {
|
|
313
|
+
width: "".concat(iconSize, "px")
|
|
314
|
+
}
|
|
294
315
|
}))) : null, selectedOptions.map(function (_ref15) {
|
|
295
316
|
var id = _ref15.id,
|
|
296
317
|
button = _ref15.button;
|
package/lib/index.js
CHANGED
|
@@ -27,7 +27,7 @@ var propTypes$1 = {
|
|
|
27
27
|
};
|
|
28
28
|
var defaultProps$1 = {
|
|
29
29
|
className: null,
|
|
30
|
-
size:
|
|
30
|
+
size: 45
|
|
31
31
|
};
|
|
32
32
|
var ShareLinkIcon = function ShareLinkIcon(_ref) {
|
|
33
33
|
var className = _ref.className,
|
|
@@ -69,6 +69,7 @@ var propTypes = {
|
|
|
69
69
|
options: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
|
|
70
70
|
buttonsStyle: core.PropTypes.boxStyle,
|
|
71
71
|
buttonsTextStyle: core.PropTypes.textStyle,
|
|
72
|
+
iconSize: PropTypes__default["default"].number,
|
|
72
73
|
theme: core.PropTypes.viewerTheme,
|
|
73
74
|
onShare: PropTypes__default["default"].func,
|
|
74
75
|
onClose: PropTypes__default["default"].func,
|
|
@@ -84,6 +85,7 @@ var defaultProps = {
|
|
|
84
85
|
options: null,
|
|
85
86
|
buttonsStyle: null,
|
|
86
87
|
buttonsTextStyle: null,
|
|
88
|
+
iconSize: 45,
|
|
87
89
|
theme: null,
|
|
88
90
|
onShare: null,
|
|
89
91
|
onClose: null,
|
|
@@ -100,6 +102,7 @@ var ShareOptions = function ShareOptions(_ref) {
|
|
|
100
102
|
options = _ref.options,
|
|
101
103
|
buttonsStyle = _ref.buttonsStyle,
|
|
102
104
|
buttonsTextStyle = _ref.buttonsTextStyle,
|
|
105
|
+
iconSize = _ref.iconSize,
|
|
103
106
|
theme = _ref.theme,
|
|
104
107
|
onShare = _ref.onShare,
|
|
105
108
|
onClose = _ref.onClose,
|
|
@@ -152,13 +155,13 @@ var ShareOptions = function ShareOptions(_ref) {
|
|
|
152
155
|
var shareIconProps = React.useMemo(function () {
|
|
153
156
|
return {
|
|
154
157
|
className: styles.icon,
|
|
155
|
-
size:
|
|
158
|
+
size: iconSize,
|
|
156
159
|
bgStyle: {
|
|
157
160
|
fill: 'none'
|
|
158
161
|
},
|
|
159
162
|
iconFillColor: 'currentColor'
|
|
160
163
|
};
|
|
161
|
-
}, []);
|
|
164
|
+
}, [iconSize]);
|
|
162
165
|
var shareOptions = [{
|
|
163
166
|
id: 'facebook',
|
|
164
167
|
button: /*#__PURE__*/React__default["default"].createElement(reactShare.FacebookShareButton, Object.assign({}, shareButtonProps, {
|
|
@@ -172,7 +175,10 @@ var ShareOptions = function ShareOptions(_ref) {
|
|
|
172
175
|
}), /*#__PURE__*/React__default["default"].createElement(reactShare.FacebookIcon, shareIconProps), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
173
176
|
className: classNames__default["default"]([styles.label, _defineProperty__default["default"]({}, labelClassName, labelClassName !== null)])
|
|
174
177
|
}, "Facebook"), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
175
|
-
className: styles.spacer
|
|
178
|
+
className: styles.spacer,
|
|
179
|
+
style: {
|
|
180
|
+
width: "".concat(iconSize, "px")
|
|
181
|
+
}
|
|
176
182
|
}))
|
|
177
183
|
}, {
|
|
178
184
|
id: 'twitter',
|
|
@@ -187,7 +193,10 @@ var ShareOptions = function ShareOptions(_ref) {
|
|
|
187
193
|
}), /*#__PURE__*/React__default["default"].createElement(reactShare.TwitterIcon, shareIconProps), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
188
194
|
className: classNames__default["default"]([styles.label, _defineProperty__default["default"]({}, labelClassName, labelClassName !== null)])
|
|
189
195
|
}, "Twitter"), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
190
|
-
className: styles.spacer
|
|
196
|
+
className: styles.spacer,
|
|
197
|
+
style: {
|
|
198
|
+
width: "".concat(iconSize, "px")
|
|
199
|
+
}
|
|
191
200
|
}))
|
|
192
201
|
}, {
|
|
193
202
|
id: 'linkedin',
|
|
@@ -202,7 +211,10 @@ var ShareOptions = function ShareOptions(_ref) {
|
|
|
202
211
|
}), /*#__PURE__*/React__default["default"].createElement(reactShare.LinkedinIcon, shareIconProps), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
203
212
|
className: classNames__default["default"]([styles.label, _defineProperty__default["default"]({}, labelClassName, labelClassName !== null)])
|
|
204
213
|
}, "LinkedIn"), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
205
|
-
className: styles.spacer
|
|
214
|
+
className: styles.spacer,
|
|
215
|
+
style: {
|
|
216
|
+
width: "".concat(iconSize, "px")
|
|
217
|
+
}
|
|
206
218
|
}))
|
|
207
219
|
}, {
|
|
208
220
|
id: 'whatsapp',
|
|
@@ -217,7 +229,10 @@ var ShareOptions = function ShareOptions(_ref) {
|
|
|
217
229
|
}), /*#__PURE__*/React__default["default"].createElement(reactShare.WhatsappIcon, shareIconProps), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
218
230
|
className: classNames__default["default"]([styles.label, _defineProperty__default["default"]({}, labelClassName, labelClassName !== null)])
|
|
219
231
|
}, "Whatsapp"), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
220
|
-
className: styles.spacer
|
|
232
|
+
className: styles.spacer,
|
|
233
|
+
style: {
|
|
234
|
+
width: "".concat(iconSize, "px")
|
|
235
|
+
}
|
|
221
236
|
}))
|
|
222
237
|
},
|
|
223
238
|
// {
|
|
@@ -265,7 +280,10 @@ var ShareOptions = function ShareOptions(_ref) {
|
|
|
265
280
|
"value": "Email"
|
|
266
281
|
}]
|
|
267
282
|
})), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
268
|
-
className: styles.spacer
|
|
283
|
+
className: styles.spacer,
|
|
284
|
+
style: {
|
|
285
|
+
width: "".concat(iconSize, "px")
|
|
286
|
+
}
|
|
269
287
|
}))
|
|
270
288
|
}];
|
|
271
289
|
var hasShareLink = options !== null ? options.includes('copylink') : true; // default is true
|
|
@@ -301,7 +319,10 @@ var ShareOptions = function ShareOptions(_ref) {
|
|
|
301
319
|
"value": "Link copied!"
|
|
302
320
|
}]
|
|
303
321
|
}) : null)), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
304
|
-
className: styles.spacer
|
|
322
|
+
className: styles.spacer,
|
|
323
|
+
style: {
|
|
324
|
+
width: "".concat(iconSize, "px")
|
|
325
|
+
}
|
|
305
326
|
}))) : null, selectedOptions.map(function (_ref15) {
|
|
306
327
|
var id = _ref15.id,
|
|
307
328
|
button = _ref15.button;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@micromag/element-share-options",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.353",
|
|
4
4
|
"description": "",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"javascript"
|
|
@@ -63,5 +63,5 @@
|
|
|
63
63
|
"publishConfig": {
|
|
64
64
|
"access": "public"
|
|
65
65
|
},
|
|
66
|
-
"gitHead": "
|
|
66
|
+
"gitHead": "dd48df1c43175f674ab8c61cb7013900f8841683"
|
|
67
67
|
}
|