@micromag/element-share-options 0.3.311 → 0.3.318
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 +25 -38
- package/lib/index.js +25 -38
- package/package.json +4 -4
package/assets/css/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.micromag-element-share-options-button{
|
|
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;align-items:center;background-color:transparent;color:#fff;display:-ms-inline-flexbox;display:inline-flex;font-size:1rem;font-weight:400;text-align:left;-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.1);-ms-transform:scale(1.1);transform:scale(1.1);-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);-ms-transform:scale(1);transform:scale(1);-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-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;align-items:center;display:-ms-flexbox;display:flex;flex-grow:1;font-size:1rem;font-weight:700;margin-left:.5em;padding:.5rem .25rem;-webkit-transform-origin:0 50%;-ms-transform-origin:0 50%;transform-origin:0 50%}.micromag-element-share-options-labelText{-ms-flex-negative:0;flex-shrink:0;margin-right:1rem}
|
package/es/index.js
CHANGED
|
@@ -18,10 +18,9 @@ var defaultProps$1 = {
|
|
|
18
18
|
className: null,
|
|
19
19
|
size: 50
|
|
20
20
|
};
|
|
21
|
-
|
|
22
21
|
var ShareLinkIcon = function ShareLinkIcon(_ref) {
|
|
23
22
|
var className = _ref.className,
|
|
24
|
-
|
|
23
|
+
size = _ref.size;
|
|
25
24
|
return /*#__PURE__*/React.createElement("svg", {
|
|
26
25
|
xmlns: "http://www.w3.org/2000/svg",
|
|
27
26
|
width: size,
|
|
@@ -44,7 +43,6 @@ var ShareLinkIcon = function ShareLinkIcon(_ref) {
|
|
|
44
43
|
strokeWidth: "3"
|
|
45
44
|
}));
|
|
46
45
|
};
|
|
47
|
-
|
|
48
46
|
ShareLinkIcon.propTypes = propTypes$1;
|
|
49
47
|
ShareLinkIcon.defaultProps = defaultProps$1;
|
|
50
48
|
|
|
@@ -80,52 +78,42 @@ var defaultProps = {
|
|
|
80
78
|
onClose: null,
|
|
81
79
|
focusable: true
|
|
82
80
|
};
|
|
83
|
-
|
|
84
81
|
var ShareOptions = function ShareOptions(_ref) {
|
|
85
82
|
var _ref12;
|
|
86
|
-
|
|
87
83
|
var className = _ref.className,
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
84
|
+
itemClassName = _ref.itemClassName,
|
|
85
|
+
labelClassName = _ref.labelClassName,
|
|
86
|
+
buttonClassName = _ref.buttonClassName,
|
|
87
|
+
title = _ref.title,
|
|
88
|
+
url = _ref.url,
|
|
89
|
+
options = _ref.options,
|
|
90
|
+
buttonsStyle = _ref.buttonsStyle,
|
|
91
|
+
buttonsTextStyle = _ref.buttonsTextStyle,
|
|
92
|
+
theme = _ref.theme,
|
|
93
|
+
onShare = _ref.onShare,
|
|
94
|
+
onClose = _ref.onClose,
|
|
95
|
+
focusable = _ref.focusable;
|
|
101
96
|
var _ref2 = theme || {},
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
97
|
+
_ref2$menuTheme = _ref2.menuTheme,
|
|
98
|
+
menuTheme = _ref2$menuTheme === void 0 ? null : _ref2$menuTheme;
|
|
105
99
|
var _ref3 = menuTheme || {},
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
100
|
+
_ref3$colors = _ref3.colors,
|
|
101
|
+
colors = _ref3$colors === void 0 ? null : _ref3$colors;
|
|
109
102
|
var _ref4 = colors || {},
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
103
|
+
_ref4$primary = _ref4.primary,
|
|
104
|
+
brandPrimaryColor = _ref4$primary === void 0 ? null : _ref4$primary;
|
|
113
105
|
var colorStyles = getStyleFromColor(brandPrimaryColor, 'color');
|
|
114
106
|
var finalStyles = colorStyles;
|
|
115
|
-
|
|
116
107
|
if (buttonsTextStyle !== null) {
|
|
117
108
|
finalStyles = _objectSpread(_objectSpread({}, finalStyles), getStyleFromText(buttonsTextStyle));
|
|
118
109
|
}
|
|
119
|
-
|
|
120
110
|
if (buttonsStyle !== null) {
|
|
121
111
|
finalStyles = _objectSpread(_objectSpread({}, finalStyles), getStyleFromBox(buttonsStyle));
|
|
122
112
|
}
|
|
123
|
-
|
|
124
113
|
var _useState = useState(false),
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
114
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
115
|
+
linkCopied = _useState2[0],
|
|
116
|
+
setLinkCopied = _useState2[1];
|
|
129
117
|
var onClickCopy = useCallback(function () {
|
|
130
118
|
copyToClipboard(url).then(function () {
|
|
131
119
|
setLinkCopied(true);
|
|
@@ -212,7 +200,8 @@ var ShareOptions = function ShareOptions(_ref) {
|
|
|
212
200
|
}), /*#__PURE__*/React.createElement(WhatsappIcon, shareIconProps), /*#__PURE__*/React.createElement("div", {
|
|
213
201
|
className: classNames([styles.label, _defineProperty({}, labelClassName, labelClassName !== null)])
|
|
214
202
|
}, "Whatsapp"))
|
|
215
|
-
},
|
|
203
|
+
},
|
|
204
|
+
// {
|
|
216
205
|
// id: 'facebookMessenger',
|
|
217
206
|
// button: (
|
|
218
207
|
// <FacebookMessengerShareButton
|
|
@@ -259,7 +248,6 @@ var ShareOptions = function ShareOptions(_ref) {
|
|
|
259
248
|
})))
|
|
260
249
|
}];
|
|
261
250
|
var hasShareLink = options !== null ? options.includes('copylink') : true; // default is true
|
|
262
|
-
|
|
263
251
|
var selectedOptions = options !== null ? shareOptions.filter(function (opt) {
|
|
264
252
|
return options.includes(opt.id);
|
|
265
253
|
}) : shareOptions;
|
|
@@ -293,14 +281,13 @@ var ShareOptions = function ShareOptions(_ref) {
|
|
|
293
281
|
}]
|
|
294
282
|
}) : null)))) : null, selectedOptions.map(function (_ref15) {
|
|
295
283
|
var id = _ref15.id,
|
|
296
|
-
|
|
284
|
+
button = _ref15.button;
|
|
297
285
|
return /*#__PURE__*/React.createElement("div", {
|
|
298
286
|
key: id,
|
|
299
287
|
className: classNames([styles.item, _defineProperty({}, itemClassName, itemClassName !== null)])
|
|
300
288
|
}, button);
|
|
301
289
|
})));
|
|
302
290
|
};
|
|
303
|
-
|
|
304
291
|
ShareOptions.propTypes = propTypes;
|
|
305
292
|
ShareOptions.defaultProps = defaultProps;
|
|
306
293
|
|
package/lib/index.js
CHANGED
|
@@ -29,10 +29,9 @@ var defaultProps$1 = {
|
|
|
29
29
|
className: null,
|
|
30
30
|
size: 50
|
|
31
31
|
};
|
|
32
|
-
|
|
33
32
|
var ShareLinkIcon = function ShareLinkIcon(_ref) {
|
|
34
33
|
var className = _ref.className,
|
|
35
|
-
|
|
34
|
+
size = _ref.size;
|
|
36
35
|
return /*#__PURE__*/React__default["default"].createElement("svg", {
|
|
37
36
|
xmlns: "http://www.w3.org/2000/svg",
|
|
38
37
|
width: size,
|
|
@@ -55,7 +54,6 @@ var ShareLinkIcon = function ShareLinkIcon(_ref) {
|
|
|
55
54
|
strokeWidth: "3"
|
|
56
55
|
}));
|
|
57
56
|
};
|
|
58
|
-
|
|
59
57
|
ShareLinkIcon.propTypes = propTypes$1;
|
|
60
58
|
ShareLinkIcon.defaultProps = defaultProps$1;
|
|
61
59
|
|
|
@@ -91,52 +89,42 @@ var defaultProps = {
|
|
|
91
89
|
onClose: null,
|
|
92
90
|
focusable: true
|
|
93
91
|
};
|
|
94
|
-
|
|
95
92
|
var ShareOptions = function ShareOptions(_ref) {
|
|
96
93
|
var _ref12;
|
|
97
|
-
|
|
98
94
|
var className = _ref.className,
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
95
|
+
itemClassName = _ref.itemClassName,
|
|
96
|
+
labelClassName = _ref.labelClassName,
|
|
97
|
+
buttonClassName = _ref.buttonClassName,
|
|
98
|
+
title = _ref.title,
|
|
99
|
+
url = _ref.url,
|
|
100
|
+
options = _ref.options,
|
|
101
|
+
buttonsStyle = _ref.buttonsStyle,
|
|
102
|
+
buttonsTextStyle = _ref.buttonsTextStyle,
|
|
103
|
+
theme = _ref.theme,
|
|
104
|
+
onShare = _ref.onShare,
|
|
105
|
+
onClose = _ref.onClose,
|
|
106
|
+
focusable = _ref.focusable;
|
|
112
107
|
var _ref2 = theme || {},
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
108
|
+
_ref2$menuTheme = _ref2.menuTheme,
|
|
109
|
+
menuTheme = _ref2$menuTheme === void 0 ? null : _ref2$menuTheme;
|
|
116
110
|
var _ref3 = menuTheme || {},
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
111
|
+
_ref3$colors = _ref3.colors,
|
|
112
|
+
colors = _ref3$colors === void 0 ? null : _ref3$colors;
|
|
120
113
|
var _ref4 = colors || {},
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
114
|
+
_ref4$primary = _ref4.primary,
|
|
115
|
+
brandPrimaryColor = _ref4$primary === void 0 ? null : _ref4$primary;
|
|
124
116
|
var colorStyles = utils.getStyleFromColor(brandPrimaryColor, 'color');
|
|
125
117
|
var finalStyles = colorStyles;
|
|
126
|
-
|
|
127
118
|
if (buttonsTextStyle !== null) {
|
|
128
119
|
finalStyles = _objectSpread__default["default"](_objectSpread__default["default"]({}, finalStyles), utils.getStyleFromText(buttonsTextStyle));
|
|
129
120
|
}
|
|
130
|
-
|
|
131
121
|
if (buttonsStyle !== null) {
|
|
132
122
|
finalStyles = _objectSpread__default["default"](_objectSpread__default["default"]({}, finalStyles), utils.getStyleFromBox(buttonsStyle));
|
|
133
123
|
}
|
|
134
|
-
|
|
135
124
|
var _useState = React.useState(false),
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
125
|
+
_useState2 = _slicedToArray__default["default"](_useState, 2),
|
|
126
|
+
linkCopied = _useState2[0],
|
|
127
|
+
setLinkCopied = _useState2[1];
|
|
140
128
|
var onClickCopy = React.useCallback(function () {
|
|
141
129
|
utils.copyToClipboard(url).then(function () {
|
|
142
130
|
setLinkCopied(true);
|
|
@@ -223,7 +211,8 @@ var ShareOptions = function ShareOptions(_ref) {
|
|
|
223
211
|
}), /*#__PURE__*/React__default["default"].createElement(reactShare.WhatsappIcon, shareIconProps), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
224
212
|
className: classNames__default["default"]([styles.label, _defineProperty__default["default"]({}, labelClassName, labelClassName !== null)])
|
|
225
213
|
}, "Whatsapp"))
|
|
226
|
-
},
|
|
214
|
+
},
|
|
215
|
+
// {
|
|
227
216
|
// id: 'facebookMessenger',
|
|
228
217
|
// button: (
|
|
229
218
|
// <FacebookMessengerShareButton
|
|
@@ -270,7 +259,6 @@ var ShareOptions = function ShareOptions(_ref) {
|
|
|
270
259
|
})))
|
|
271
260
|
}];
|
|
272
261
|
var hasShareLink = options !== null ? options.includes('copylink') : true; // default is true
|
|
273
|
-
|
|
274
262
|
var selectedOptions = options !== null ? shareOptions.filter(function (opt) {
|
|
275
263
|
return options.includes(opt.id);
|
|
276
264
|
}) : shareOptions;
|
|
@@ -304,14 +292,13 @@ var ShareOptions = function ShareOptions(_ref) {
|
|
|
304
292
|
}]
|
|
305
293
|
}) : null)))) : null, selectedOptions.map(function (_ref15) {
|
|
306
294
|
var id = _ref15.id,
|
|
307
|
-
|
|
295
|
+
button = _ref15.button;
|
|
308
296
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
309
297
|
key: id,
|
|
310
298
|
className: classNames__default["default"]([styles.item, _defineProperty__default["default"]({}, itemClassName, itemClassName !== null)])
|
|
311
299
|
}, button);
|
|
312
300
|
})));
|
|
313
301
|
};
|
|
314
|
-
|
|
315
302
|
ShareOptions.propTypes = propTypes;
|
|
316
303
|
ShareOptions.defaultProps = defaultProps;
|
|
317
304
|
|
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.318",
|
|
4
4
|
"description": "",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"javascript"
|
|
@@ -53,15 +53,15 @@
|
|
|
53
53
|
},
|
|
54
54
|
"dependencies": {
|
|
55
55
|
"@babel/runtime": "^7.13.10",
|
|
56
|
-
"@micromag/core": "^0.3.
|
|
56
|
+
"@micromag/core": "^0.3.318",
|
|
57
57
|
"classnames": "^2.2.6",
|
|
58
58
|
"prop-types": "^15.7.2",
|
|
59
59
|
"react-intl": "^5.12.1",
|
|
60
60
|
"react-share": "^4.3.1",
|
|
61
|
-
"uuid": "^
|
|
61
|
+
"uuid": "^9.0.0"
|
|
62
62
|
},
|
|
63
63
|
"publishConfig": {
|
|
64
64
|
"access": "public"
|
|
65
65
|
},
|
|
66
|
-
"gitHead": "
|
|
66
|
+
"gitHead": "7d1a296e0c0d410e1225279e1f19e3a7715bfa96"
|
|
67
67
|
}
|