@micromag/element-share-options 0.3.175 → 0.3.180

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 +119 -83
  3. package/lib/index.js +118 -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-shareButton{display:inline-block;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-shareButton{width:100%;position:relative;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;text-align:left;font-weight:400;color:#fff;background-color:#1c1c1c;-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%}.micromag-element-share-options-shareButton:active{-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);-webkit-transform:scale(.95);-ms-transform:scale(.95);transform:scale(.95)}.micromag-element-share-options-icon{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0}.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;padding:.5rem .25rem}.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 { 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,18 @@ 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 = {"shareButton":"micromag-element-share-options-shareButton","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,
55
63
  onShare: PropTypes.func,
56
64
  onClose: PropTypes.func,
57
65
  focusable: PropTypes.bool
@@ -60,24 +68,41 @@ var defaultProps = {
60
68
  className: null,
61
69
  itemClassName: null,
62
70
  labelClassName: null,
71
+ buttonClassName: null,
63
72
  title: null,
64
73
  url: null,
65
74
  options: null,
75
+ buttonsStyle: null,
76
+ buttonsTextStyle: null,
66
77
  onShare: null,
67
78
  onClose: null,
68
79
  focusable: true
69
80
  };
70
81
 
71
82
  var ShareOptions = function ShareOptions(_ref) {
83
+ var _ref10;
84
+
72
85
  var className = _ref.className,
73
86
  itemClassName = _ref.itemClassName,
74
87
  labelClassName = _ref.labelClassName,
88
+ buttonClassName = _ref.buttonClassName,
75
89
  title = _ref.title,
76
90
  url = _ref.url,
77
91
  options = _ref.options,
92
+ buttonsStyle = _ref.buttonsStyle,
93
+ buttonsTextStyle = _ref.buttonsTextStyle,
78
94
  onShare = _ref.onShare,
79
95
  onClose = _ref.onClose,
80
96
  focusable = _ref.focusable;
97
+ var finalStyles = null;
98
+
99
+ if (buttonsTextStyle !== null) {
100
+ finalStyles = _objectSpread(_objectSpread({}, finalStyles), getStyleFromText(buttonsTextStyle));
101
+ }
102
+
103
+ if (buttonsStyle !== null) {
104
+ finalStyles = _objectSpread(_objectSpread({}, finalStyles), getStyleFromBox(buttonsStyle));
105
+ }
81
106
 
82
107
  var _useState = useState(false),
83
108
  _useState2 = _slicedToArray(_useState, 2),
@@ -91,11 +116,7 @@ var ShareOptions = function ShareOptions(_ref) {
91
116
  setLinkCopied(false);
92
117
  }, 2000);
93
118
  });
94
- }, [setLinkCopied]);
95
- var onClickLinkInput = useCallback(function (e) {
96
- var target = e.target;
97
- target.setSelectionRange(0, target.value.length);
98
- }, []);
119
+ }, [url, setLinkCopied]);
99
120
  var onShareButtonClick = useCallback(function (type) {
100
121
  if (onShare !== null) {
101
122
  onShare(type);
@@ -103,6 +124,7 @@ var ShareOptions = function ShareOptions(_ref) {
103
124
  }, [onShare]);
104
125
  var shareButtonProps = useMemo(function () {
105
126
  return {
127
+ className: classNames([styles.shareButton, _defineProperty({}, buttonClassName, buttonClassName !== null)]),
106
128
  url: url,
107
129
  onShareWindowClose: function onShareWindowClose() {
108
130
  if (onClose !== null) {
@@ -113,83 +135,99 @@ var ShareOptions = function ShareOptions(_ref) {
113
135
  }, [url, onClose]);
114
136
  var shareIconProps = useMemo(function () {
115
137
  return {
138
+ className: styles.icon,
116
139
  size: 50,
117
- round: true
140
+ bgStyle: {
141
+ fill: 'none'
142
+ },
143
+ iconFillColor: 'currentColor'
118
144
  };
119
145
  }, []);
120
146
  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
147
  id: 'facebook',
139
- label: 'Facebook',
140
- icon: /*#__PURE__*/React.createElement(FacebookShareButton, Object.assign({}, shareButtonProps, {
148
+ button: /*#__PURE__*/React.createElement(FacebookShareButton, Object.assign({}, shareButtonProps, {
141
149
  quote: title,
142
150
  beforeOnClick: function beforeOnClick() {
143
151
  onShareButtonClick('Facebook');
144
152
  return Promise.resolve();
145
153
  },
146
- tabIndex: focusable ? null : '-1'
147
- }), /*#__PURE__*/React.createElement(FacebookIcon, shareIconProps))
154
+ tabIndex: focusable ? null : '-1',
155
+ style: finalStyles
156
+ }), /*#__PURE__*/React.createElement(FacebookIcon, shareIconProps), /*#__PURE__*/React.createElement("div", {
157
+ className: classNames([styles.label, _defineProperty({}, labelClassName, labelClassName !== null)])
158
+ }, "Facebook"))
148
159
  }, {
149
160
  id: 'twitter',
150
- label: 'Twitter',
151
- icon: /*#__PURE__*/React.createElement(TwitterShareButton, Object.assign({}, shareButtonProps, {
161
+ button: /*#__PURE__*/React.createElement(TwitterShareButton, Object.assign({}, shareButtonProps, {
152
162
  title: title,
153
163
  beforeOnClick: function beforeOnClick() {
154
164
  onShareButtonClick('Twitter');
155
165
  return Promise.resolve();
156
166
  },
157
- tabIndex: focusable ? null : '-1'
158
- }), /*#__PURE__*/React.createElement(TwitterIcon, shareIconProps))
167
+ tabIndex: focusable ? null : '-1',
168
+ style: finalStyles
169
+ }), /*#__PURE__*/React.createElement(TwitterIcon, shareIconProps), /*#__PURE__*/React.createElement("div", {
170
+ className: classNames([styles.label, _defineProperty({}, labelClassName, labelClassName !== null)])
171
+ }, "Twitter"))
159
172
  }, {
160
173
  id: 'linkedin',
161
- label: 'LinkedIn',
162
- icon: /*#__PURE__*/React.createElement(LinkedinShareButton, Object.assign({}, shareButtonProps, {
174
+ button: /*#__PURE__*/React.createElement(LinkedinShareButton, Object.assign({}, shareButtonProps, {
163
175
  title: title,
164
176
  beforeOnClick: function beforeOnClick() {
165
177
  onShareButtonClick('LinkedIn');
166
178
  return Promise.resolve();
167
179
  },
168
- tabIndex: focusable ? null : '-1'
169
- }), /*#__PURE__*/React.createElement(LinkedinIcon, shareIconProps))
180
+ tabIndex: focusable ? null : '-1',
181
+ style: finalStyles
182
+ }), /*#__PURE__*/React.createElement(LinkedinIcon, shareIconProps), /*#__PURE__*/React.createElement("div", {
183
+ className: classNames([styles.label, _defineProperty({}, labelClassName, labelClassName !== null)])
184
+ }, "LinkedIn"))
170
185
  }, {
171
186
  id: 'whatsapp',
172
- label: 'Whatsapp',
173
- icon: /*#__PURE__*/React.createElement(WhatsappShareButton, Object.assign({}, shareButtonProps, {
187
+ button: /*#__PURE__*/React.createElement(WhatsappShareButton, Object.assign({}, shareButtonProps, {
174
188
  title: title,
175
189
  beforeOnClick: function beforeOnClick() {
176
190
  onShareButtonClick('Whatsapp');
177
191
  return Promise.resolve();
178
192
  },
179
- tabIndex: focusable ? null : '-1'
180
- }), /*#__PURE__*/React.createElement(WhatsappIcon, shareIconProps))
193
+ tabIndex: focusable ? null : '-1',
194
+ style: finalStyles
195
+ }), /*#__PURE__*/React.createElement(WhatsappIcon, shareIconProps), /*#__PURE__*/React.createElement("div", {
196
+ className: classNames([styles.label, _defineProperty({}, labelClassName, labelClassName !== null)])
197
+ }, "Whatsapp"))
181
198
  }, {
182
199
  id: 'facebookMessenger',
183
- label: 'Facebook Messenger',
184
- icon: /*#__PURE__*/React.createElement(FacebookMessengerShareButton, Object.assign({}, shareButtonProps, {
200
+ button: /*#__PURE__*/React.createElement(FacebookMessengerShareButton, Object.assign({}, shareButtonProps, {
185
201
  title: title,
186
202
  appId: "741129940350872",
187
203
  beforeOnClick: function beforeOnClick() {
188
204
  onShareButtonClick('Whatsapp');
189
205
  return Promise.resolve();
190
206
  },
191
- tabIndex: focusable ? null : '-1'
192
- }), /*#__PURE__*/React.createElement(FacebookMessengerIcon, shareIconProps))
207
+ tabIndex: focusable ? null : '-1',
208
+ style: finalStyles
209
+ }), /*#__PURE__*/React.createElement(FacebookMessengerIcon, shareIconProps), /*#__PURE__*/React.createElement("div", {
210
+ className: classNames([styles.label, _defineProperty({}, labelClassName, labelClassName !== null)])
211
+ }, "Facebook Messenger"))
212
+ }, {
213
+ id: 'email',
214
+ button: /*#__PURE__*/React.createElement(EmailShareButton, Object.assign({}, shareButtonProps, {
215
+ subject: title,
216
+ beforeOnClick: function beforeOnClick() {
217
+ onShareButtonClick('Email');
218
+ return Promise.resolve();
219
+ },
220
+ tabIndex: focusable ? null : '-1',
221
+ style: finalStyles
222
+ }), /*#__PURE__*/React.createElement(EmailIcon, shareIconProps), /*#__PURE__*/React.createElement("div", {
223
+ className: classNames([styles.label, _defineProperty({}, labelClassName, labelClassName !== null)])
224
+ }, /*#__PURE__*/React.createElement(FormattedMessage, {
225
+ id: "Lrwi2G",
226
+ defaultMessage: [{
227
+ "type": 0,
228
+ "value": "Email"
229
+ }]
230
+ })))
193
231
  }];
194
232
  var hasShareLink = options !== null ? options.includes('copylink') : true; // default is true
195
233
 
@@ -200,39 +238,37 @@ var ShareOptions = function ShareOptions(_ref) {
200
238
  className: classNames([styles.container, _defineProperty({}, className, className !== null)])
201
239
  }, /*#__PURE__*/React.createElement("div", {
202
240
  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,
241
+ }, hasShareLink ? /*#__PURE__*/React.createElement("div", {
242
+ className: classNames([styles.item, (_ref10 = {}, _defineProperty(_ref10, itemClassName, itemClassName !== null), _defineProperty(_ref10, styles.isLinkCopied, linkCopied), _ref10)])
243
+ }, /*#__PURE__*/React.createElement(Button, {
244
+ className: classNames([styles.shareButton, _defineProperty({}, buttonClassName, buttonClassName !== null)]),
223
245
  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",
246
+ focusable: focusable,
247
+ style: finalStyles
248
+ }, /*#__PURE__*/React.createElement(ShareLinkIcon, shareIconProps), /*#__PURE__*/React.createElement("div", {
249
+ className: classNames([styles.label, _defineProperty({}, labelClassName, labelClassName !== null)])
250
+ }, /*#__PURE__*/React.createElement("span", {
251
+ className: styles.labelText
252
+ }, !linkCopied ? /*#__PURE__*/React.createElement(FormattedMessage, {
253
+ id: "D21uVQ",
231
254
  defaultMessage: [{
232
255
  "type": 0,
233
- "value": "Link copied to clipboard!"
256
+ "value": "Copy link"
234
257
  }]
235
- }))) : null);
258
+ }) : null, linkCopied ? /*#__PURE__*/React.createElement(FormattedMessage, {
259
+ id: "xFlbR7",
260
+ defaultMessage: [{
261
+ "type": 0,
262
+ "value": "Link copied!"
263
+ }]
264
+ }) : null)))) : null, selectedOptions.map(function (_ref13) {
265
+ var id = _ref13.id,
266
+ button = _ref13.button;
267
+ return /*#__PURE__*/React.createElement("div", {
268
+ key: id,
269
+ className: classNames([styles.item, _defineProperty({}, itemClassName, itemClassName !== null)])
270
+ }, button);
271
+ })));
236
272
  };
237
273
 
238
274
  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,18 @@ 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 = {"shareButton":"micromag-element-share-options-shareButton","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,
65
74
  onShare: PropTypes__default["default"].func,
66
75
  onClose: PropTypes__default["default"].func,
67
76
  focusable: PropTypes__default["default"].bool
@@ -70,24 +79,41 @@ var defaultProps = {
70
79
  className: null,
71
80
  itemClassName: null,
72
81
  labelClassName: null,
82
+ buttonClassName: null,
73
83
  title: null,
74
84
  url: null,
75
85
  options: null,
86
+ buttonsStyle: null,
87
+ buttonsTextStyle: null,
76
88
  onShare: null,
77
89
  onClose: null,
78
90
  focusable: true
79
91
  };
80
92
 
81
93
  var ShareOptions = function ShareOptions(_ref) {
94
+ var _ref10;
95
+
82
96
  var className = _ref.className,
83
97
  itemClassName = _ref.itemClassName,
84
98
  labelClassName = _ref.labelClassName,
99
+ buttonClassName = _ref.buttonClassName,
85
100
  title = _ref.title,
86
101
  url = _ref.url,
87
102
  options = _ref.options,
103
+ buttonsStyle = _ref.buttonsStyle,
104
+ buttonsTextStyle = _ref.buttonsTextStyle,
88
105
  onShare = _ref.onShare,
89
106
  onClose = _ref.onClose,
90
107
  focusable = _ref.focusable;
108
+ var finalStyles = null;
109
+
110
+ if (buttonsTextStyle !== null) {
111
+ finalStyles = _objectSpread__default["default"](_objectSpread__default["default"]({}, finalStyles), utils.getStyleFromText(buttonsTextStyle));
112
+ }
113
+
114
+ if (buttonsStyle !== null) {
115
+ finalStyles = _objectSpread__default["default"](_objectSpread__default["default"]({}, finalStyles), utils.getStyleFromBox(buttonsStyle));
116
+ }
91
117
 
92
118
  var _useState = React.useState(false),
93
119
  _useState2 = _slicedToArray__default["default"](_useState, 2),
@@ -101,11 +127,7 @@ var ShareOptions = function ShareOptions(_ref) {
101
127
  setLinkCopied(false);
102
128
  }, 2000);
103
129
  });
104
- }, [setLinkCopied]);
105
- var onClickLinkInput = React.useCallback(function (e) {
106
- var target = e.target;
107
- target.setSelectionRange(0, target.value.length);
108
- }, []);
130
+ }, [url, setLinkCopied]);
109
131
  var onShareButtonClick = React.useCallback(function (type) {
110
132
  if (onShare !== null) {
111
133
  onShare(type);
@@ -113,6 +135,7 @@ var ShareOptions = function ShareOptions(_ref) {
113
135
  }, [onShare]);
114
136
  var shareButtonProps = React.useMemo(function () {
115
137
  return {
138
+ className: classNames__default["default"]([styles.shareButton, _defineProperty__default["default"]({}, buttonClassName, buttonClassName !== null)]),
116
139
  url: url,
117
140
  onShareWindowClose: function onShareWindowClose() {
118
141
  if (onClose !== null) {
@@ -123,83 +146,99 @@ var ShareOptions = function ShareOptions(_ref) {
123
146
  }, [url, onClose]);
124
147
  var shareIconProps = React.useMemo(function () {
125
148
  return {
149
+ className: styles.icon,
126
150
  size: 50,
127
- round: true
151
+ bgStyle: {
152
+ fill: 'none'
153
+ },
154
+ iconFillColor: 'currentColor'
128
155
  };
129
156
  }, []);
130
157
  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
158
  id: 'facebook',
149
- label: 'Facebook',
150
- icon: /*#__PURE__*/React__default["default"].createElement(reactShare.FacebookShareButton, Object.assign({}, shareButtonProps, {
159
+ button: /*#__PURE__*/React__default["default"].createElement(reactShare.FacebookShareButton, Object.assign({}, shareButtonProps, {
151
160
  quote: title,
152
161
  beforeOnClick: function beforeOnClick() {
153
162
  onShareButtonClick('Facebook');
154
163
  return Promise.resolve();
155
164
  },
156
- tabIndex: focusable ? null : '-1'
157
- }), /*#__PURE__*/React__default["default"].createElement(reactShare.FacebookIcon, shareIconProps))
165
+ tabIndex: focusable ? null : '-1',
166
+ style: finalStyles
167
+ }), /*#__PURE__*/React__default["default"].createElement(reactShare.FacebookIcon, shareIconProps), /*#__PURE__*/React__default["default"].createElement("div", {
168
+ className: classNames__default["default"]([styles.label, _defineProperty__default["default"]({}, labelClassName, labelClassName !== null)])
169
+ }, "Facebook"))
158
170
  }, {
159
171
  id: 'twitter',
160
- label: 'Twitter',
161
- icon: /*#__PURE__*/React__default["default"].createElement(reactShare.TwitterShareButton, Object.assign({}, shareButtonProps, {
172
+ button: /*#__PURE__*/React__default["default"].createElement(reactShare.TwitterShareButton, Object.assign({}, shareButtonProps, {
162
173
  title: title,
163
174
  beforeOnClick: function beforeOnClick() {
164
175
  onShareButtonClick('Twitter');
165
176
  return Promise.resolve();
166
177
  },
167
- tabIndex: focusable ? null : '-1'
168
- }), /*#__PURE__*/React__default["default"].createElement(reactShare.TwitterIcon, shareIconProps))
178
+ tabIndex: focusable ? null : '-1',
179
+ style: finalStyles
180
+ }), /*#__PURE__*/React__default["default"].createElement(reactShare.TwitterIcon, shareIconProps), /*#__PURE__*/React__default["default"].createElement("div", {
181
+ className: classNames__default["default"]([styles.label, _defineProperty__default["default"]({}, labelClassName, labelClassName !== null)])
182
+ }, "Twitter"))
169
183
  }, {
170
184
  id: 'linkedin',
171
- label: 'LinkedIn',
172
- icon: /*#__PURE__*/React__default["default"].createElement(reactShare.LinkedinShareButton, Object.assign({}, shareButtonProps, {
185
+ button: /*#__PURE__*/React__default["default"].createElement(reactShare.LinkedinShareButton, Object.assign({}, shareButtonProps, {
173
186
  title: title,
174
187
  beforeOnClick: function beforeOnClick() {
175
188
  onShareButtonClick('LinkedIn');
176
189
  return Promise.resolve();
177
190
  },
178
- tabIndex: focusable ? null : '-1'
179
- }), /*#__PURE__*/React__default["default"].createElement(reactShare.LinkedinIcon, shareIconProps))
191
+ tabIndex: focusable ? null : '-1',
192
+ style: finalStyles
193
+ }), /*#__PURE__*/React__default["default"].createElement(reactShare.LinkedinIcon, shareIconProps), /*#__PURE__*/React__default["default"].createElement("div", {
194
+ className: classNames__default["default"]([styles.label, _defineProperty__default["default"]({}, labelClassName, labelClassName !== null)])
195
+ }, "LinkedIn"))
180
196
  }, {
181
197
  id: 'whatsapp',
182
- label: 'Whatsapp',
183
- icon: /*#__PURE__*/React__default["default"].createElement(reactShare.WhatsappShareButton, Object.assign({}, shareButtonProps, {
198
+ button: /*#__PURE__*/React__default["default"].createElement(reactShare.WhatsappShareButton, Object.assign({}, shareButtonProps, {
184
199
  title: title,
185
200
  beforeOnClick: function beforeOnClick() {
186
201
  onShareButtonClick('Whatsapp');
187
202
  return Promise.resolve();
188
203
  },
189
- tabIndex: focusable ? null : '-1'
190
- }), /*#__PURE__*/React__default["default"].createElement(reactShare.WhatsappIcon, shareIconProps))
204
+ tabIndex: focusable ? null : '-1',
205
+ style: finalStyles
206
+ }), /*#__PURE__*/React__default["default"].createElement(reactShare.WhatsappIcon, shareIconProps), /*#__PURE__*/React__default["default"].createElement("div", {
207
+ className: classNames__default["default"]([styles.label, _defineProperty__default["default"]({}, labelClassName, labelClassName !== null)])
208
+ }, "Whatsapp"))
191
209
  }, {
192
210
  id: 'facebookMessenger',
193
- label: 'Facebook Messenger',
194
- icon: /*#__PURE__*/React__default["default"].createElement(reactShare.FacebookMessengerShareButton, Object.assign({}, shareButtonProps, {
211
+ button: /*#__PURE__*/React__default["default"].createElement(reactShare.FacebookMessengerShareButton, Object.assign({}, shareButtonProps, {
195
212
  title: title,
196
213
  appId: "741129940350872",
197
214
  beforeOnClick: function beforeOnClick() {
198
215
  onShareButtonClick('Whatsapp');
199
216
  return Promise.resolve();
200
217
  },
201
- tabIndex: focusable ? null : '-1'
202
- }), /*#__PURE__*/React__default["default"].createElement(reactShare.FacebookMessengerIcon, shareIconProps))
218
+ tabIndex: focusable ? null : '-1',
219
+ style: finalStyles
220
+ }), /*#__PURE__*/React__default["default"].createElement(reactShare.FacebookMessengerIcon, shareIconProps), /*#__PURE__*/React__default["default"].createElement("div", {
221
+ className: classNames__default["default"]([styles.label, _defineProperty__default["default"]({}, labelClassName, labelClassName !== null)])
222
+ }, "Facebook Messenger"))
223
+ }, {
224
+ id: 'email',
225
+ button: /*#__PURE__*/React__default["default"].createElement(reactShare.EmailShareButton, Object.assign({}, shareButtonProps, {
226
+ subject: title,
227
+ beforeOnClick: function beforeOnClick() {
228
+ onShareButtonClick('Email');
229
+ return Promise.resolve();
230
+ },
231
+ tabIndex: focusable ? null : '-1',
232
+ style: finalStyles
233
+ }), /*#__PURE__*/React__default["default"].createElement(reactShare.EmailIcon, shareIconProps), /*#__PURE__*/React__default["default"].createElement("div", {
234
+ className: classNames__default["default"]([styles.label, _defineProperty__default["default"]({}, labelClassName, labelClassName !== null)])
235
+ }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
236
+ id: "Lrwi2G",
237
+ defaultMessage: [{
238
+ "type": 0,
239
+ "value": "Email"
240
+ }]
241
+ })))
203
242
  }];
204
243
  var hasShareLink = options !== null ? options.includes('copylink') : true; // default is true
205
244
 
@@ -210,39 +249,37 @@ var ShareOptions = function ShareOptions(_ref) {
210
249
  className: classNames__default["default"]([styles.container, _defineProperty__default["default"]({}, className, className !== null)])
211
250
  }, /*#__PURE__*/React__default["default"].createElement("div", {
212
251
  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,
252
+ }, hasShareLink ? /*#__PURE__*/React__default["default"].createElement("div", {
253
+ className: classNames__default["default"]([styles.item, (_ref10 = {}, _defineProperty__default["default"](_ref10, itemClassName, itemClassName !== null), _defineProperty__default["default"](_ref10, styles.isLinkCopied, linkCopied), _ref10)])
254
+ }, /*#__PURE__*/React__default["default"].createElement(components.Button, {
255
+ className: classNames__default["default"]([styles.shareButton, _defineProperty__default["default"]({}, buttonClassName, buttonClassName !== null)]),
233
256
  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",
257
+ focusable: focusable,
258
+ style: finalStyles
259
+ }, /*#__PURE__*/React__default["default"].createElement(ShareLinkIcon, shareIconProps), /*#__PURE__*/React__default["default"].createElement("div", {
260
+ className: classNames__default["default"]([styles.label, _defineProperty__default["default"]({}, labelClassName, labelClassName !== null)])
261
+ }, /*#__PURE__*/React__default["default"].createElement("span", {
262
+ className: styles.labelText
263
+ }, !linkCopied ? /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
264
+ id: "D21uVQ",
241
265
  defaultMessage: [{
242
266
  "type": 0,
243
- "value": "Link copied to clipboard!"
267
+ "value": "Copy link"
244
268
  }]
245
- }))) : null);
269
+ }) : null, linkCopied ? /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
270
+ id: "xFlbR7",
271
+ defaultMessage: [{
272
+ "type": 0,
273
+ "value": "Link copied!"
274
+ }]
275
+ }) : null)))) : null, selectedOptions.map(function (_ref13) {
276
+ var id = _ref13.id,
277
+ button = _ref13.button;
278
+ return /*#__PURE__*/React__default["default"].createElement("div", {
279
+ key: id,
280
+ className: classNames__default["default"]([styles.item, _defineProperty__default["default"]({}, itemClassName, itemClassName !== null)])
281
+ }, button);
282
+ })));
246
283
  };
247
284
 
248
285
  ShareOptions.propTypes = propTypes;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/element-share-options",
3
- "version": "0.3.175",
3
+ "version": "0.3.180",
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.175",
56
+ "@micromag/core": "^0.3.180",
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": "ea7a5bc61e422ece8342951f519fffee76ba9c4d"
66
+ "gitHead": "5f49e01759f3350db673329db30ca542b9d2fa6e"
67
67
  }