@micromag/element-share-options 0.3.178 → 0.3.182

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.
Files changed (4) hide show
  1. package/assets/css/styles.css +1 -1
  2. package/es/index.js +137 -83
  3. package/lib/index.js +136 -81
  4. package/package.json +3 -3
package/assets/css/styles.css CHANGED
@@ -1 +1 @@
1
- .micromag-element-share-options-copyUrlButton{display:inline-block;position:relative;color:inherit}.micromag-element-share-options-copyUrlButton,.micromag-element-share-options-screenUrlInput{padding:0;background:rgba(0,0,0,0);font-family:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.micromag-element-share-options-options{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}.micromag-element-share-options-item{max-width:64px;margin-right:.5rem;margin-bottom:.5rem;text-align:center;white-space:break-spaces}.micromag-element-share-options-item:last-child{margin-right:0}.micromag-element-share-options-label{margin-top:.5rem;color:#6c6c6c;font-size:.75rem;font-weight:400}.micromag-element-share-options-copyLink{display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;margin-top:.5rem;margin-bottom:1rem;border:1px solid;border-radius:.5rem;background-color:#fff;color:#1c1c1c}.micromag-element-share-options-screenUrlInput{-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;padding:.75rem;border:0;border-right:1px solid;border-radius:.5rem 0 0 .5rem;background-color:#fff;line-height:1}.micromag-element-share-options-copyUrlButton{padding:.5rem;border:0;border-radius:0 .5rem .5rem 0;color:#1c1c1c}.micromag-element-share-options-copyUrlButton:hover{color:#1c1c1c}.micromag-element-share-options-linkIcon{padding:.25rem}.micromag-element-share-options-successfulCopyMessage{position:absolute;bottom:0;left:50%;padding:.25rem .5rem;-webkit-transform:translate(-50%,100%);-ms-transform:translate(-50%,100%);transform:translate(-50%,100%);-webkit-transition:opacity .2s ease-out,-webkit-transform .2s ease-out;transition:opacity .2s ease-out,-webkit-transform .2s ease-out;-o-transition:opacity .2s ease-out,transform .2s ease-out;transition:opacity .2s ease-out,transform .2s ease-out;transition:opacity .2s ease-out,transform .2s ease-out,-webkit-transform .2s ease-out;border:1px solid;border-radius:.5rem;opacity:0;background-color:#fff;line-height:1;white-space:nowrap;pointer-events:none}.micromag-element-share-options-isLinkCopied .micromag-element-share-options-successfulCopyMessage{-webkit-transform:translate(-50%,75%);-ms-transform:translate(-50%,75%);transform:translate(-50%,75%);opacity:1}
1
+ .micromag-element-share-options-button{display:inline-block;position:relative;padding:0;border:0;background:rgba(0,0,0,0);color:inherit;font-family:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.micromag-element-share-options-item+.micromag-element-share-options-item{margin-top:.5rem}.micromag-element-share-options-button{display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;text-align:left;font-weight:400;color:#fff;background-color:rgba(0,0,0,0);-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);-webkit-transform-origin:0 50%;-ms-transform-origin:0 50%;transform-origin:0 50%}@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{position:relative;display:block;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0}.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{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;font-weight:700;padding:.5rem .25rem;margin-left:.5em;-webkit-transform-origin:0 50%;-ms-transform-origin:0 50%;transform-origin:0 50%}.micromag-element-share-options-labelText{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin-right:1rem}
package/es/index.js CHANGED
@@ -1,37 +1,42 @@
1
1
  import _defineProperty from '@babel/runtime/helpers/defineProperty';
2
2
  import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
3
+ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
3
4
  import classNames from 'classnames';
4
5
  import PropTypes from 'prop-types';
5
6
  import React, { useState, useCallback, useMemo } from 'react';
6
7
  import { FormattedMessage } from 'react-intl';
7
- import { EmailShareButton, EmailIcon, FacebookShareButton, FacebookIcon, TwitterShareButton, TwitterIcon, LinkedinShareButton, LinkedinIcon, WhatsappShareButton, WhatsappIcon, FacebookMessengerShareButton, FacebookMessengerIcon } from 'react-share';
8
+ import { FacebookShareButton, FacebookIcon, TwitterShareButton, TwitterIcon, LinkedinShareButton, LinkedinIcon, WhatsappShareButton, WhatsappIcon, FacebookMessengerShareButton, FacebookMessengerIcon, EmailShareButton, EmailIcon } from 'react-share';
9
+ import { PropTypes as PropTypes$1 } from '@micromag/core';
8
10
  import { Button } from '@micromag/core/components';
9
- import { copyToClipboard } from '@micromag/core/utils';
11
+ import { getStyleFromColor, getStyleFromText, getStyleFromBox, copyToClipboard } from '@micromag/core/utils';
10
12
 
11
13
  var propTypes$1 = {
12
- className: PropTypes.string
14
+ className: PropTypes.string,
15
+ size: PropTypes.number
13
16
  };
14
17
  var defaultProps$1 = {
15
- className: null
18
+ className: null,
19
+ size: 50
16
20
  };
17
21
 
18
22
  var ShareLinkIcon = function ShareLinkIcon(_ref) {
19
- var className = _ref.className;
23
+ var className = _ref.className,
24
+ size = _ref.size;
20
25
  return /*#__PURE__*/React.createElement("svg", {
21
26
  xmlns: "http://www.w3.org/2000/svg",
22
- width: "32",
23
- height: "32",
24
- viewBox: "0 0 32 32",
27
+ width: size,
28
+ height: size,
29
+ viewBox: "0 0 64 64",
25
30
  className: classNames([_defineProperty({}, className, className !== null)])
26
31
  }, /*#__PURE__*/React.createElement("path", {
27
- d: "M13.13,17.44a7.18,7.18,0,0,0,10,1.45,6.34,6.34,0,0,0,.78-.68l4.31-4.31A7.18,7.18,0,0,0,18.2,3.65l-.09.09L15.65,6.2",
32
+ d: "M29.1,33.4a7.19,7.19,0,0,0,10.1,1.4,5,5,0,0,0,.8-.7l4.3-4.3a7.24,7.24,0,0,0,.1-10.2,7.34,7.34,0,0,0-10.2.1l-.1.1-2.5,2.5",
28
33
  fill: "none",
29
34
  stroke: "currentColor",
30
35
  strokeLinecap: "round",
31
36
  strokeLinejoin: "round",
32
37
  strokeWidth: "3"
33
38
  }), /*#__PURE__*/React.createElement("path", {
34
- d: "M18.87,14.56a7.19,7.19,0,0,0-10-1.45,6.34,6.34,0,0,0-.78.68L3.73,18.1A7.18,7.18,0,1,0,13.8,28.35l.09-.09,2.45-2.46",
39
+ d: "M34.9,30.6a7.19,7.19,0,0,0-10.1-1.4,5,5,0,0,0-.8.7l-4.3,4.3a7.24,7.24,0,0,0-.1,10.2,7.15,7.15,0,0,0,10.2.1l.1-.1,2.5-2.5",
35
40
  fill: "none",
36
41
  stroke: "currentColor",
37
42
  strokeLinecap: "round",
@@ -43,15 +48,19 @@ var ShareLinkIcon = function ShareLinkIcon(_ref) {
43
48
  ShareLinkIcon.propTypes = propTypes$1;
44
49
  ShareLinkIcon.defaultProps = defaultProps$1;
45
50
 
46
- var styles = {"copyUrlButton":"micromag-element-share-options-copyUrlButton","screenUrlInput":"micromag-element-share-options-screenUrlInput","options":"micromag-element-share-options-options","item":"micromag-element-share-options-item","label":"micromag-element-share-options-label","copyLink":"micromag-element-share-options-copyLink","linkIcon":"micromag-element-share-options-linkIcon","successfulCopyMessage":"micromag-element-share-options-successfulCopyMessage","isLinkCopied":"micromag-element-share-options-isLinkCopied"};
51
+ var styles = {"button":"micromag-element-share-options-button","item":"micromag-element-share-options-item","icon":"micromag-element-share-options-icon","label":"micromag-element-share-options-label","labelText":"micromag-element-share-options-labelText"};
47
52
 
48
53
  var propTypes = {
49
54
  className: PropTypes.string,
50
55
  itemClassName: PropTypes.string,
51
56
  labelClassName: PropTypes.string,
57
+ buttonClassName: PropTypes.string,
52
58
  title: PropTypes.string,
53
59
  url: PropTypes.string,
54
60
  options: PropTypes.arrayOf(PropTypes.string),
61
+ buttonsStyle: PropTypes$1.boxStyle,
62
+ buttonsTextStyle: PropTypes$1.textStyle,
63
+ theme: PropTypes$1.viewerTheme,
55
64
  onShare: PropTypes.func,
56
65
  onClose: PropTypes.func,
57
66
  focusable: PropTypes.bool
@@ -60,25 +69,58 @@ var defaultProps = {
60
69
  className: null,
61
70
  itemClassName: null,
62
71
  labelClassName: null,
72
+ buttonClassName: null,
63
73
  title: null,
64
74
  url: null,
65
75
  options: null,
76
+ buttonsStyle: null,
77
+ buttonsTextStyle: null,
78
+ theme: null,
66
79
  onShare: null,
67
80
  onClose: null,
68
81
  focusable: true
69
82
  };
70
83
 
71
84
  var ShareOptions = function ShareOptions(_ref) {
85
+ var _ref13;
86
+
72
87
  var className = _ref.className,
73
88
  itemClassName = _ref.itemClassName,
74
89
  labelClassName = _ref.labelClassName,
90
+ buttonClassName = _ref.buttonClassName,
75
91
  title = _ref.title,
76
92
  url = _ref.url,
77
93
  options = _ref.options,
94
+ buttonsStyle = _ref.buttonsStyle,
95
+ buttonsTextStyle = _ref.buttonsTextStyle,
96
+ theme = _ref.theme,
78
97
  onShare = _ref.onShare,
79
98
  onClose = _ref.onClose,
80
99
  focusable = _ref.focusable;
81
100
 
101
+ var _ref2 = theme || {},
102
+ _ref2$menuTheme = _ref2.menuTheme,
103
+ menuTheme = _ref2$menuTheme === void 0 ? null : _ref2$menuTheme;
104
+
105
+ var _ref3 = menuTheme || {},
106
+ _ref3$colors = _ref3.colors,
107
+ colors = _ref3$colors === void 0 ? null : _ref3$colors;
108
+
109
+ var _ref4 = colors || {},
110
+ _ref4$primary = _ref4.primary,
111
+ brandPrimaryColor = _ref4$primary === void 0 ? null : _ref4$primary;
112
+
113
+ var colorStyles = getStyleFromColor(brandPrimaryColor, 'color');
114
+ var finalStyles = colorStyles;
115
+
116
+ if (buttonsTextStyle !== null) {
117
+ finalStyles = _objectSpread(_objectSpread({}, finalStyles), getStyleFromText(buttonsTextStyle));
118
+ }
119
+
120
+ if (buttonsStyle !== null) {
121
+ finalStyles = _objectSpread(_objectSpread({}, finalStyles), getStyleFromBox(buttonsStyle));
122
+ }
123
+
82
124
  var _useState = useState(false),
83
125
  _useState2 = _slicedToArray(_useState, 2),
84
126
  linkCopied = _useState2[0],
@@ -91,11 +133,7 @@ var ShareOptions = function ShareOptions(_ref) {
91
133
  setLinkCopied(false);
92
134
  }, 2000);
93
135
  });
94
- }, [setLinkCopied]);
95
- var onClickLinkInput = useCallback(function (e) {
96
- var target = e.target;
97
- target.setSelectionRange(0, target.value.length);
98
- }, []);
136
+ }, [url, setLinkCopied]);
99
137
  var onShareButtonClick = useCallback(function (type) {
100
138
  if (onShare !== null) {
101
139
  onShare(type);
@@ -103,6 +141,7 @@ var ShareOptions = function ShareOptions(_ref) {
103
141
  }, [onShare]);
104
142
  var shareButtonProps = useMemo(function () {
105
143
  return {
144
+ className: classNames([styles.button, _defineProperty({}, buttonClassName, buttonClassName !== null)]),
106
145
  url: url,
107
146
  onShareWindowClose: function onShareWindowClose() {
108
147
  if (onClose !== null) {
@@ -113,83 +152,99 @@ var ShareOptions = function ShareOptions(_ref) {
113
152
  }, [url, onClose]);
114
153
  var shareIconProps = useMemo(function () {
115
154
  return {
155
+ className: styles.icon,
116
156
  size: 50,
117
- round: true
157
+ bgStyle: {
158
+ fill: 'none'
159
+ },
160
+ iconFillColor: 'currentColor'
118
161
  };
119
162
  }, []);
120
163
  var shareOptions = [{
121
- id: 'email',
122
- label: /*#__PURE__*/React.createElement(FormattedMessage, {
123
- id: "Lrwi2G",
124
- defaultMessage: [{
125
- "type": 0,
126
- "value": "Email"
127
- }]
128
- }),
129
- icon: /*#__PURE__*/React.createElement(EmailShareButton, Object.assign({}, shareButtonProps, {
130
- subject: title,
131
- beforeOnClick: function beforeOnClick() {
132
- onShareButtonClick('Email');
133
- return Promise.resolve();
134
- },
135
- tabIndex: focusable ? null : '-1'
136
- }), /*#__PURE__*/React.createElement(EmailIcon, shareIconProps))
137
- }, {
138
164
  id: 'facebook',
139
- label: 'Facebook',
140
- icon: /*#__PURE__*/React.createElement(FacebookShareButton, Object.assign({}, shareButtonProps, {
165
+ button: /*#__PURE__*/React.createElement(FacebookShareButton, Object.assign({}, shareButtonProps, {
141
166
  quote: title,
142
167
  beforeOnClick: function beforeOnClick() {
143
168
  onShareButtonClick('Facebook');
144
169
  return Promise.resolve();
145
170
  },
146
- tabIndex: focusable ? null : '-1'
147
- }), /*#__PURE__*/React.createElement(FacebookIcon, shareIconProps))
171
+ tabIndex: focusable ? null : '-1',
172
+ style: finalStyles
173
+ }), /*#__PURE__*/React.createElement(FacebookIcon, shareIconProps), /*#__PURE__*/React.createElement("div", {
174
+ className: classNames([styles.label, _defineProperty({}, labelClassName, labelClassName !== null)])
175
+ }, "Facebook"))
148
176
  }, {
149
177
  id: 'twitter',
150
- label: 'Twitter',
151
- icon: /*#__PURE__*/React.createElement(TwitterShareButton, Object.assign({}, shareButtonProps, {
178
+ button: /*#__PURE__*/React.createElement(TwitterShareButton, Object.assign({}, shareButtonProps, {
152
179
  title: title,
153
180
  beforeOnClick: function beforeOnClick() {
154
181
  onShareButtonClick('Twitter');
155
182
  return Promise.resolve();
156
183
  },
157
- tabIndex: focusable ? null : '-1'
158
- }), /*#__PURE__*/React.createElement(TwitterIcon, shareIconProps))
184
+ tabIndex: focusable ? null : '-1',
185
+ style: finalStyles
186
+ }), /*#__PURE__*/React.createElement(TwitterIcon, shareIconProps), /*#__PURE__*/React.createElement("div", {
187
+ className: classNames([styles.label, _defineProperty({}, labelClassName, labelClassName !== null)])
188
+ }, "Twitter"))
159
189
  }, {
160
190
  id: 'linkedin',
161
- label: 'LinkedIn',
162
- icon: /*#__PURE__*/React.createElement(LinkedinShareButton, Object.assign({}, shareButtonProps, {
191
+ button: /*#__PURE__*/React.createElement(LinkedinShareButton, Object.assign({}, shareButtonProps, {
163
192
  title: title,
164
193
  beforeOnClick: function beforeOnClick() {
165
194
  onShareButtonClick('LinkedIn');
166
195
  return Promise.resolve();
167
196
  },
168
- tabIndex: focusable ? null : '-1'
169
- }), /*#__PURE__*/React.createElement(LinkedinIcon, shareIconProps))
197
+ tabIndex: focusable ? null : '-1',
198
+ style: finalStyles
199
+ }), /*#__PURE__*/React.createElement(LinkedinIcon, shareIconProps), /*#__PURE__*/React.createElement("div", {
200
+ className: classNames([styles.label, _defineProperty({}, labelClassName, labelClassName !== null)])
201
+ }, "LinkedIn"))
170
202
  }, {
171
203
  id: 'whatsapp',
172
- label: 'Whatsapp',
173
- icon: /*#__PURE__*/React.createElement(WhatsappShareButton, Object.assign({}, shareButtonProps, {
204
+ button: /*#__PURE__*/React.createElement(WhatsappShareButton, Object.assign({}, shareButtonProps, {
174
205
  title: title,
175
206
  beforeOnClick: function beforeOnClick() {
176
207
  onShareButtonClick('Whatsapp');
177
208
  return Promise.resolve();
178
209
  },
179
- tabIndex: focusable ? null : '-1'
180
- }), /*#__PURE__*/React.createElement(WhatsappIcon, shareIconProps))
210
+ tabIndex: focusable ? null : '-1',
211
+ style: finalStyles
212
+ }), /*#__PURE__*/React.createElement(WhatsappIcon, shareIconProps), /*#__PURE__*/React.createElement("div", {
213
+ className: classNames([styles.label, _defineProperty({}, labelClassName, labelClassName !== null)])
214
+ }, "Whatsapp"))
181
215
  }, {
182
216
  id: 'facebookMessenger',
183
- label: 'Facebook Messenger',
184
- icon: /*#__PURE__*/React.createElement(FacebookMessengerShareButton, Object.assign({}, shareButtonProps, {
217
+ button: /*#__PURE__*/React.createElement(FacebookMessengerShareButton, Object.assign({}, shareButtonProps, {
185
218
  title: title,
186
219
  appId: "741129940350872",
187
220
  beforeOnClick: function beforeOnClick() {
188
221
  onShareButtonClick('Whatsapp');
189
222
  return Promise.resolve();
190
223
  },
191
- tabIndex: focusable ? null : '-1'
192
- }), /*#__PURE__*/React.createElement(FacebookMessengerIcon, shareIconProps))
224
+ tabIndex: focusable ? null : '-1',
225
+ style: finalStyles
226
+ }), /*#__PURE__*/React.createElement(FacebookMessengerIcon, shareIconProps), /*#__PURE__*/React.createElement("div", {
227
+ className: classNames([styles.label, _defineProperty({}, labelClassName, labelClassName !== null)])
228
+ }, "Facebook Messenger"))
229
+ }, {
230
+ id: 'email',
231
+ button: /*#__PURE__*/React.createElement(EmailShareButton, Object.assign({}, shareButtonProps, {
232
+ subject: title,
233
+ beforeOnClick: function beforeOnClick() {
234
+ onShareButtonClick('Email');
235
+ return Promise.resolve();
236
+ },
237
+ tabIndex: focusable ? null : '-1',
238
+ style: finalStyles
239
+ }), /*#__PURE__*/React.createElement(EmailIcon, shareIconProps), /*#__PURE__*/React.createElement("div", {
240
+ className: classNames([styles.label, _defineProperty({}, labelClassName, labelClassName !== null)])
241
+ }, /*#__PURE__*/React.createElement(FormattedMessage, {
242
+ id: "Lrwi2G",
243
+ defaultMessage: [{
244
+ "type": 0,
245
+ "value": "Email"
246
+ }]
247
+ })))
193
248
  }];
194
249
  var hasShareLink = options !== null ? options.includes('copylink') : true; // default is true
195
250
 
@@ -200,39 +255,38 @@ var ShareOptions = function ShareOptions(_ref) {
200
255
  className: classNames([styles.container, _defineProperty({}, className, className !== null)])
201
256
  }, /*#__PURE__*/React.createElement("div", {
202
257
  className: styles.options
203
- }, selectedOptions.map(function (_ref3) {
204
- var id = _ref3.id,
205
- label = _ref3.label,
206
- icon = _ref3.icon;
207
- return /*#__PURE__*/React.createElement("div", {
208
- key: id,
209
- className: classNames([styles.item, _defineProperty({}, itemClassName, itemClassName !== null)])
210
- }, icon, /*#__PURE__*/React.createElement("div", {
211
- className: classNames([styles.label, _defineProperty({}, labelClassName, labelClassName !== null)])
212
- }, label));
213
- })), hasShareLink ? /*#__PURE__*/React.createElement("div", {
214
- className: classNames([styles.copyLink, _defineProperty({}, styles.isLinkCopied, linkCopied)])
215
- }, /*#__PURE__*/React.createElement("input", {
216
- className: styles.screenUrlInput,
217
- type: "text",
218
- value: url,
219
- onClick: onClickLinkInput,
220
- readOnly: true
221
- }), /*#__PURE__*/React.createElement(Button, {
222
- className: styles.copyUrlButton,
258
+ }, hasShareLink ? /*#__PURE__*/React.createElement("div", {
259
+ className: classNames([styles.item, (_ref13 = {}, _defineProperty(_ref13, itemClassName, itemClassName !== null), _defineProperty(_ref13, styles.isLinkCopied, linkCopied), _ref13)])
260
+ }, /*#__PURE__*/React.createElement(Button, {
261
+ className: classNames([styles.button, _defineProperty({}, buttonClassName, buttonClassName !== null)]),
223
262
  onClick: onClickCopy,
224
- focusable: focusable
225
- }, /*#__PURE__*/React.createElement(ShareLinkIcon, {
226
- className: styles.linkIcon
227
- })), /*#__PURE__*/React.createElement("div", {
228
- className: styles.successfulCopyMessage
229
- }, /*#__PURE__*/React.createElement(FormattedMessage, {
230
- id: "XRmkEh",
263
+ focusable: focusable,
264
+ style: finalStyles,
265
+ withoutBootstrapStyles: true
266
+ }, /*#__PURE__*/React.createElement(ShareLinkIcon, shareIconProps), /*#__PURE__*/React.createElement("div", {
267
+ className: classNames([styles.label, _defineProperty({}, labelClassName, labelClassName !== null)])
268
+ }, /*#__PURE__*/React.createElement("span", {
269
+ className: styles.labelText
270
+ }, !linkCopied ? /*#__PURE__*/React.createElement(FormattedMessage, {
271
+ id: "D21uVQ",
231
272
  defaultMessage: [{
232
273
  "type": 0,
233
- "value": "Link copied to clipboard!"
274
+ "value": "Copy link"
234
275
  }]
235
- }))) : null);
276
+ }) : null, linkCopied ? /*#__PURE__*/React.createElement(FormattedMessage, {
277
+ id: "xFlbR7",
278
+ defaultMessage: [{
279
+ "type": 0,
280
+ "value": "Link copied!"
281
+ }]
282
+ }) : null)))) : null, selectedOptions.map(function (_ref16) {
283
+ var id = _ref16.id,
284
+ button = _ref16.button;
285
+ return /*#__PURE__*/React.createElement("div", {
286
+ key: id,
287
+ className: classNames([styles.item, _defineProperty({}, itemClassName, itemClassName !== null)])
288
+ }, button);
289
+ })));
236
290
  };
237
291
 
238
292
  ShareOptions.propTypes = propTypes;
package/lib/index.js CHANGED
@@ -2,11 +2,13 @@
2
2
 
3
3
  var _defineProperty = require('@babel/runtime/helpers/defineProperty');
4
4
  var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
5
+ var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
5
6
  var classNames = require('classnames');
6
7
  var PropTypes = require('prop-types');
7
8
  var React = require('react');
8
9
  var reactIntl = require('react-intl');
9
10
  var reactShare = require('react-share');
11
+ var core = require('@micromag/core');
10
12
  var components = require('@micromag/core/components');
11
13
  var utils = require('@micromag/core/utils');
12
14
 
@@ -14,34 +16,38 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
14
16
 
15
17
  var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
16
18
  var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
19
+ var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
17
20
  var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
18
21
  var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
19
22
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
20
23
 
21
24
  var propTypes$1 = {
22
- className: PropTypes__default["default"].string
25
+ className: PropTypes__default["default"].string,
26
+ size: PropTypes__default["default"].number
23
27
  };
24
28
  var defaultProps$1 = {
25
- className: null
29
+ className: null,
30
+ size: 50
26
31
  };
27
32
 
28
33
  var ShareLinkIcon = function ShareLinkIcon(_ref) {
29
- var className = _ref.className;
34
+ var className = _ref.className,
35
+ size = _ref.size;
30
36
  return /*#__PURE__*/React__default["default"].createElement("svg", {
31
37
  xmlns: "http://www.w3.org/2000/svg",
32
- width: "32",
33
- height: "32",
34
- viewBox: "0 0 32 32",
38
+ width: size,
39
+ height: size,
40
+ viewBox: "0 0 64 64",
35
41
  className: classNames__default["default"]([_defineProperty__default["default"]({}, className, className !== null)])
36
42
  }, /*#__PURE__*/React__default["default"].createElement("path", {
37
- d: "M13.13,17.44a7.18,7.18,0,0,0,10,1.45,6.34,6.34,0,0,0,.78-.68l4.31-4.31A7.18,7.18,0,0,0,18.2,3.65l-.09.09L15.65,6.2",
43
+ d: "M29.1,33.4a7.19,7.19,0,0,0,10.1,1.4,5,5,0,0,0,.8-.7l4.3-4.3a7.24,7.24,0,0,0,.1-10.2,7.34,7.34,0,0,0-10.2.1l-.1.1-2.5,2.5",
38
44
  fill: "none",
39
45
  stroke: "currentColor",
40
46
  strokeLinecap: "round",
41
47
  strokeLinejoin: "round",
42
48
  strokeWidth: "3"
43
49
  }), /*#__PURE__*/React__default["default"].createElement("path", {
44
- d: "M18.87,14.56a7.19,7.19,0,0,0-10-1.45,6.34,6.34,0,0,0-.78.68L3.73,18.1A7.18,7.18,0,1,0,13.8,28.35l.09-.09,2.45-2.46",
50
+ d: "M34.9,30.6a7.19,7.19,0,0,0-10.1-1.4,5,5,0,0,0-.8.7l-4.3,4.3a7.24,7.24,0,0,0-.1,10.2,7.15,7.15,0,0,0,10.2.1l.1-.1,2.5-2.5",
45
51
  fill: "none",
46
52
  stroke: "currentColor",
47
53
  strokeLinecap: "round",
@@ -53,15 +59,19 @@ var ShareLinkIcon = function ShareLinkIcon(_ref) {
53
59
  ShareLinkIcon.propTypes = propTypes$1;
54
60
  ShareLinkIcon.defaultProps = defaultProps$1;
55
61
 
56
- var styles = {"copyUrlButton":"micromag-element-share-options-copyUrlButton","screenUrlInput":"micromag-element-share-options-screenUrlInput","options":"micromag-element-share-options-options","item":"micromag-element-share-options-item","label":"micromag-element-share-options-label","copyLink":"micromag-element-share-options-copyLink","linkIcon":"micromag-element-share-options-linkIcon","successfulCopyMessage":"micromag-element-share-options-successfulCopyMessage","isLinkCopied":"micromag-element-share-options-isLinkCopied"};
62
+ var styles = {"button":"micromag-element-share-options-button","item":"micromag-element-share-options-item","icon":"micromag-element-share-options-icon","label":"micromag-element-share-options-label","labelText":"micromag-element-share-options-labelText"};
57
63
 
58
64
  var propTypes = {
59
65
  className: PropTypes__default["default"].string,
60
66
  itemClassName: PropTypes__default["default"].string,
61
67
  labelClassName: PropTypes__default["default"].string,
68
+ buttonClassName: PropTypes__default["default"].string,
62
69
  title: PropTypes__default["default"].string,
63
70
  url: PropTypes__default["default"].string,
64
71
  options: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
72
+ buttonsStyle: core.PropTypes.boxStyle,
73
+ buttonsTextStyle: core.PropTypes.textStyle,
74
+ theme: core.PropTypes.viewerTheme,
65
75
  onShare: PropTypes__default["default"].func,
66
76
  onClose: PropTypes__default["default"].func,
67
77
  focusable: PropTypes__default["default"].bool
@@ -70,25 +80,58 @@ var defaultProps = {
70
80
  className: null,
71
81
  itemClassName: null,
72
82
  labelClassName: null,
83
+ buttonClassName: null,
73
84
  title: null,
74
85
  url: null,
75
86
  options: null,
87
+ buttonsStyle: null,
88
+ buttonsTextStyle: null,
89
+ theme: null,
76
90
  onShare: null,
77
91
  onClose: null,
78
92
  focusable: true
79
93
  };
80
94
 
81
95
  var ShareOptions = function ShareOptions(_ref) {
96
+ var _ref13;
97
+
82
98
  var className = _ref.className,
83
99
  itemClassName = _ref.itemClassName,
84
100
  labelClassName = _ref.labelClassName,
101
+ buttonClassName = _ref.buttonClassName,
85
102
  title = _ref.title,
86
103
  url = _ref.url,
87
104
  options = _ref.options,
105
+ buttonsStyle = _ref.buttonsStyle,
106
+ buttonsTextStyle = _ref.buttonsTextStyle,
107
+ theme = _ref.theme,
88
108
  onShare = _ref.onShare,
89
109
  onClose = _ref.onClose,
90
110
  focusable = _ref.focusable;
91
111
 
112
+ var _ref2 = theme || {},
113
+ _ref2$menuTheme = _ref2.menuTheme,
114
+ menuTheme = _ref2$menuTheme === void 0 ? null : _ref2$menuTheme;
115
+
116
+ var _ref3 = menuTheme || {},
117
+ _ref3$colors = _ref3.colors,
118
+ colors = _ref3$colors === void 0 ? null : _ref3$colors;
119
+
120
+ var _ref4 = colors || {},
121
+ _ref4$primary = _ref4.primary,
122
+ brandPrimaryColor = _ref4$primary === void 0 ? null : _ref4$primary;
123
+
124
+ var colorStyles = utils.getStyleFromColor(brandPrimaryColor, 'color');
125
+ var finalStyles = colorStyles;
126
+
127
+ if (buttonsTextStyle !== null) {
128
+ finalStyles = _objectSpread__default["default"](_objectSpread__default["default"]({}, finalStyles), utils.getStyleFromText(buttonsTextStyle));
129
+ }
130
+
131
+ if (buttonsStyle !== null) {
132
+ finalStyles = _objectSpread__default["default"](_objectSpread__default["default"]({}, finalStyles), utils.getStyleFromBox(buttonsStyle));
133
+ }
134
+
92
135
  var _useState = React.useState(false),
93
136
  _useState2 = _slicedToArray__default["default"](_useState, 2),
94
137
  linkCopied = _useState2[0],
@@ -101,11 +144,7 @@ var ShareOptions = function ShareOptions(_ref) {
101
144
  setLinkCopied(false);
102
145
  }, 2000);
103
146
  });
104
- }, [setLinkCopied]);
105
- var onClickLinkInput = React.useCallback(function (e) {
106
- var target = e.target;
107
- target.setSelectionRange(0, target.value.length);
108
- }, []);
147
+ }, [url, setLinkCopied]);
109
148
  var onShareButtonClick = React.useCallback(function (type) {
110
149
  if (onShare !== null) {
111
150
  onShare(type);
@@ -113,6 +152,7 @@ var ShareOptions = function ShareOptions(_ref) {
113
152
  }, [onShare]);
114
153
  var shareButtonProps = React.useMemo(function () {
115
154
  return {
155
+ className: classNames__default["default"]([styles.button, _defineProperty__default["default"]({}, buttonClassName, buttonClassName !== null)]),
116
156
  url: url,
117
157
  onShareWindowClose: function onShareWindowClose() {
118
158
  if (onClose !== null) {
@@ -123,83 +163,99 @@ var ShareOptions = function ShareOptions(_ref) {
123
163
  }, [url, onClose]);
124
164
  var shareIconProps = React.useMemo(function () {
125
165
  return {
166
+ className: styles.icon,
126
167
  size: 50,
127
- round: true
168
+ bgStyle: {
169
+ fill: 'none'
170
+ },
171
+ iconFillColor: 'currentColor'
128
172
  };
129
173
  }, []);
130
174
  var shareOptions = [{
131
- id: 'email',
132
- label: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
133
- id: "Lrwi2G",
134
- defaultMessage: [{
135
- "type": 0,
136
- "value": "Email"
137
- }]
138
- }),
139
- icon: /*#__PURE__*/React__default["default"].createElement(reactShare.EmailShareButton, Object.assign({}, shareButtonProps, {
140
- subject: title,
141
- beforeOnClick: function beforeOnClick() {
142
- onShareButtonClick('Email');
143
- return Promise.resolve();
144
- },
145
- tabIndex: focusable ? null : '-1'
146
- }), /*#__PURE__*/React__default["default"].createElement(reactShare.EmailIcon, shareIconProps))
147
- }, {
148
175
  id: 'facebook',
149
- label: 'Facebook',
150
- icon: /*#__PURE__*/React__default["default"].createElement(reactShare.FacebookShareButton, Object.assign({}, shareButtonProps, {
176
+ button: /*#__PURE__*/React__default["default"].createElement(reactShare.FacebookShareButton, Object.assign({}, shareButtonProps, {
151
177
  quote: title,
152
178
  beforeOnClick: function beforeOnClick() {
153
179
  onShareButtonClick('Facebook');
154
180
  return Promise.resolve();
155
181
  },
156
- tabIndex: focusable ? null : '-1'
157
- }), /*#__PURE__*/React__default["default"].createElement(reactShare.FacebookIcon, shareIconProps))
182
+ tabIndex: focusable ? null : '-1',
183
+ style: finalStyles
184
+ }), /*#__PURE__*/React__default["default"].createElement(reactShare.FacebookIcon, shareIconProps), /*#__PURE__*/React__default["default"].createElement("div", {
185
+ className: classNames__default["default"]([styles.label, _defineProperty__default["default"]({}, labelClassName, labelClassName !== null)])
186
+ }, "Facebook"))
158
187
  }, {
159
188
  id: 'twitter',
160
- label: 'Twitter',
161
- icon: /*#__PURE__*/React__default["default"].createElement(reactShare.TwitterShareButton, Object.assign({}, shareButtonProps, {
189
+ button: /*#__PURE__*/React__default["default"].createElement(reactShare.TwitterShareButton, Object.assign({}, shareButtonProps, {
162
190
  title: title,
163
191
  beforeOnClick: function beforeOnClick() {
164
192
  onShareButtonClick('Twitter');
165
193
  return Promise.resolve();
166
194
  },
167
- tabIndex: focusable ? null : '-1'
168
- }), /*#__PURE__*/React__default["default"].createElement(reactShare.TwitterIcon, shareIconProps))
195
+ tabIndex: focusable ? null : '-1',
196
+ style: finalStyles
197
+ }), /*#__PURE__*/React__default["default"].createElement(reactShare.TwitterIcon, shareIconProps), /*#__PURE__*/React__default["default"].createElement("div", {
198
+ className: classNames__default["default"]([styles.label, _defineProperty__default["default"]({}, labelClassName, labelClassName !== null)])
199
+ }, "Twitter"))
169
200
  }, {
170
201
  id: 'linkedin',
171
- label: 'LinkedIn',
172
- icon: /*#__PURE__*/React__default["default"].createElement(reactShare.LinkedinShareButton, Object.assign({}, shareButtonProps, {
202
+ button: /*#__PURE__*/React__default["default"].createElement(reactShare.LinkedinShareButton, Object.assign({}, shareButtonProps, {
173
203
  title: title,
174
204
  beforeOnClick: function beforeOnClick() {
175
205
  onShareButtonClick('LinkedIn');
176
206
  return Promise.resolve();
177
207
  },
178
- tabIndex: focusable ? null : '-1'
179
- }), /*#__PURE__*/React__default["default"].createElement(reactShare.LinkedinIcon, shareIconProps))
208
+ tabIndex: focusable ? null : '-1',
209
+ style: finalStyles
210
+ }), /*#__PURE__*/React__default["default"].createElement(reactShare.LinkedinIcon, shareIconProps), /*#__PURE__*/React__default["default"].createElement("div", {
211
+ className: classNames__default["default"]([styles.label, _defineProperty__default["default"]({}, labelClassName, labelClassName !== null)])
212
+ }, "LinkedIn"))
180
213
  }, {
181
214
  id: 'whatsapp',
182
- label: 'Whatsapp',
183
- icon: /*#__PURE__*/React__default["default"].createElement(reactShare.WhatsappShareButton, Object.assign({}, shareButtonProps, {
215
+ button: /*#__PURE__*/React__default["default"].createElement(reactShare.WhatsappShareButton, Object.assign({}, shareButtonProps, {
184
216
  title: title,
185
217
  beforeOnClick: function beforeOnClick() {
186
218
  onShareButtonClick('Whatsapp');
187
219
  return Promise.resolve();
188
220
  },
189
- tabIndex: focusable ? null : '-1'
190
- }), /*#__PURE__*/React__default["default"].createElement(reactShare.WhatsappIcon, shareIconProps))
221
+ tabIndex: focusable ? null : '-1',
222
+ style: finalStyles
223
+ }), /*#__PURE__*/React__default["default"].createElement(reactShare.WhatsappIcon, shareIconProps), /*#__PURE__*/React__default["default"].createElement("div", {
224
+ className: classNames__default["default"]([styles.label, _defineProperty__default["default"]({}, labelClassName, labelClassName !== null)])
225
+ }, "Whatsapp"))
191
226
  }, {
192
227
  id: 'facebookMessenger',
193
- label: 'Facebook Messenger',
194
- icon: /*#__PURE__*/React__default["default"].createElement(reactShare.FacebookMessengerShareButton, Object.assign({}, shareButtonProps, {
228
+ button: /*#__PURE__*/React__default["default"].createElement(reactShare.FacebookMessengerShareButton, Object.assign({}, shareButtonProps, {
195
229
  title: title,
196
230
  appId: "741129940350872",
197
231
  beforeOnClick: function beforeOnClick() {
198
232
  onShareButtonClick('Whatsapp');
199
233
  return Promise.resolve();
200
234
  },
201
- tabIndex: focusable ? null : '-1'
202
- }), /*#__PURE__*/React__default["default"].createElement(reactShare.FacebookMessengerIcon, shareIconProps))
235
+ tabIndex: focusable ? null : '-1',
236
+ style: finalStyles
237
+ }), /*#__PURE__*/React__default["default"].createElement(reactShare.FacebookMessengerIcon, shareIconProps), /*#__PURE__*/React__default["default"].createElement("div", {
238
+ className: classNames__default["default"]([styles.label, _defineProperty__default["default"]({}, labelClassName, labelClassName !== null)])
239
+ }, "Facebook Messenger"))
240
+ }, {
241
+ id: 'email',
242
+ button: /*#__PURE__*/React__default["default"].createElement(reactShare.EmailShareButton, Object.assign({}, shareButtonProps, {
243
+ subject: title,
244
+ beforeOnClick: function beforeOnClick() {
245
+ onShareButtonClick('Email');
246
+ return Promise.resolve();
247
+ },
248
+ tabIndex: focusable ? null : '-1',
249
+ style: finalStyles
250
+ }), /*#__PURE__*/React__default["default"].createElement(reactShare.EmailIcon, shareIconProps), /*#__PURE__*/React__default["default"].createElement("div", {
251
+ className: classNames__default["default"]([styles.label, _defineProperty__default["default"]({}, labelClassName, labelClassName !== null)])
252
+ }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
253
+ id: "Lrwi2G",
254
+ defaultMessage: [{
255
+ "type": 0,
256
+ "value": "Email"
257
+ }]
258
+ })))
203
259
  }];
204
260
  var hasShareLink = options !== null ? options.includes('copylink') : true; // default is true
205
261
 
@@ -210,39 +266,38 @@ var ShareOptions = function ShareOptions(_ref) {
210
266
  className: classNames__default["default"]([styles.container, _defineProperty__default["default"]({}, className, className !== null)])
211
267
  }, /*#__PURE__*/React__default["default"].createElement("div", {
212
268
  className: styles.options
213
- }, selectedOptions.map(function (_ref3) {
214
- var id = _ref3.id,
215
- label = _ref3.label,
216
- icon = _ref3.icon;
217
- return /*#__PURE__*/React__default["default"].createElement("div", {
218
- key: id,
219
- className: classNames__default["default"]([styles.item, _defineProperty__default["default"]({}, itemClassName, itemClassName !== null)])
220
- }, icon, /*#__PURE__*/React__default["default"].createElement("div", {
221
- className: classNames__default["default"]([styles.label, _defineProperty__default["default"]({}, labelClassName, labelClassName !== null)])
222
- }, label));
223
- })), hasShareLink ? /*#__PURE__*/React__default["default"].createElement("div", {
224
- className: classNames__default["default"]([styles.copyLink, _defineProperty__default["default"]({}, styles.isLinkCopied, linkCopied)])
225
- }, /*#__PURE__*/React__default["default"].createElement("input", {
226
- className: styles.screenUrlInput,
227
- type: "text",
228
- value: url,
229
- onClick: onClickLinkInput,
230
- readOnly: true
231
- }), /*#__PURE__*/React__default["default"].createElement(components.Button, {
232
- className: styles.copyUrlButton,
269
+ }, hasShareLink ? /*#__PURE__*/React__default["default"].createElement("div", {
270
+ className: classNames__default["default"]([styles.item, (_ref13 = {}, _defineProperty__default["default"](_ref13, itemClassName, itemClassName !== null), _defineProperty__default["default"](_ref13, styles.isLinkCopied, linkCopied), _ref13)])
271
+ }, /*#__PURE__*/React__default["default"].createElement(components.Button, {
272
+ className: classNames__default["default"]([styles.button, _defineProperty__default["default"]({}, buttonClassName, buttonClassName !== null)]),
233
273
  onClick: onClickCopy,
234
- focusable: focusable
235
- }, /*#__PURE__*/React__default["default"].createElement(ShareLinkIcon, {
236
- className: styles.linkIcon
237
- })), /*#__PURE__*/React__default["default"].createElement("div", {
238
- className: styles.successfulCopyMessage
239
- }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
240
- id: "XRmkEh",
274
+ focusable: focusable,
275
+ style: finalStyles,
276
+ withoutBootstrapStyles: true
277
+ }, /*#__PURE__*/React__default["default"].createElement(ShareLinkIcon, shareIconProps), /*#__PURE__*/React__default["default"].createElement("div", {
278
+ className: classNames__default["default"]([styles.label, _defineProperty__default["default"]({}, labelClassName, labelClassName !== null)])
279
+ }, /*#__PURE__*/React__default["default"].createElement("span", {
280
+ className: styles.labelText
281
+ }, !linkCopied ? /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
282
+ id: "D21uVQ",
241
283
  defaultMessage: [{
242
284
  "type": 0,
243
- "value": "Link copied to clipboard!"
285
+ "value": "Copy link"
244
286
  }]
245
- }))) : null);
287
+ }) : null, linkCopied ? /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
288
+ id: "xFlbR7",
289
+ defaultMessage: [{
290
+ "type": 0,
291
+ "value": "Link copied!"
292
+ }]
293
+ }) : null)))) : null, selectedOptions.map(function (_ref16) {
294
+ var id = _ref16.id,
295
+ button = _ref16.button;
296
+ return /*#__PURE__*/React__default["default"].createElement("div", {
297
+ key: id,
298
+ className: classNames__default["default"]([styles.item, _defineProperty__default["default"]({}, itemClassName, itemClassName !== null)])
299
+ }, button);
300
+ })));
246
301
  };
247
302
 
248
303
  ShareOptions.propTypes = propTypes;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/element-share-options",
3
- "version": "0.3.178",
3
+ "version": "0.3.182",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -53,7 +53,7 @@
53
53
  },
54
54
  "dependencies": {
55
55
  "@babel/runtime": "^7.13.10",
56
- "@micromag/core": "^0.3.178",
56
+ "@micromag/core": "^0.3.182",
57
57
  "classnames": "^2.2.6",
58
58
  "prop-types": "^15.7.2",
59
59
  "react-intl": "^5.12.1",
@@ -63,5 +63,5 @@
63
63
  "publishConfig": {
64
64
  "access": "public"
65
65
  },
66
- "gitHead": "135b87c1d061bd5f0ec90b71b80815d17113e21f"
66
+ "gitHead": "3fdd215df2c83f292063fba88077d88be5718955"
67
67
  }