@micromag/element-share-options 0.3.150 → 0.3.152

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 +111 -6
  3. package/lib/index.js +112 -6
  4. package/package.json +3 -3
package/assets/css/styles.css CHANGED
@@ -1 +1 @@
1
- .micromag-element-share-options-container{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;overflow-x:auto;overflow-y:hidden}.micromag-element-share-options-item{max-width:64px;margin-right:.5rem;text-align:center}.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}
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}
package/es/index.js CHANGED
@@ -1,11 +1,49 @@
1
1
  import _defineProperty from '@babel/runtime/helpers/defineProperty';
2
- import React, { useCallback, useMemo } from 'react';
2
+ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
3
3
  import classNames from 'classnames';
4
4
  import PropTypes from 'prop-types';
5
+ import React, { useState, useCallback, useMemo } from 'react';
5
6
  import { FormattedMessage } from 'react-intl';
6
- import { EmailShareButton, EmailIcon, FacebookShareButton, FacebookIcon, TwitterShareButton, TwitterIcon, LinkedinShareButton, LinkedinIcon } from 'react-share';
7
+ import { EmailShareButton, EmailIcon, FacebookShareButton, FacebookIcon, TwitterShareButton, TwitterIcon, LinkedinShareButton, LinkedinIcon, WhatsappShareButton, WhatsappIcon, FacebookMessengerShareButton, FacebookMessengerIcon } from 'react-share';
8
+ import { Button } from '@micromag/core/components';
9
+ import { copyToClipboard } from '@micromag/core/utils';
7
10
 
8
- var styles = {"container":"micromag-element-share-options-container","item":"micromag-element-share-options-item","label":"micromag-element-share-options-label"};
11
+ var propTypes$1 = {
12
+ className: PropTypes.string
13
+ };
14
+ var defaultProps$1 = {
15
+ className: null
16
+ };
17
+
18
+ var ShareLinkIcon = function ShareLinkIcon(_ref) {
19
+ var className = _ref.className;
20
+ return /*#__PURE__*/React.createElement("svg", {
21
+ xmlns: "http://www.w3.org/2000/svg",
22
+ width: "32",
23
+ height: "32",
24
+ viewBox: "0 0 32 32",
25
+ className: classNames([_defineProperty({}, className, className !== null)])
26
+ }, /*#__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",
28
+ fill: "none",
29
+ stroke: "currentColor",
30
+ strokeLinecap: "round",
31
+ strokeLinejoin: "round",
32
+ strokeWidth: "3"
33
+ }), /*#__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",
35
+ fill: "none",
36
+ stroke: "currentColor",
37
+ strokeLinecap: "round",
38
+ strokeLinejoin: "round",
39
+ strokeWidth: "3"
40
+ }));
41
+ };
42
+
43
+ ShareLinkIcon.propTypes = propTypes$1;
44
+ ShareLinkIcon.defaultProps = defaultProps$1;
45
+
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"};
9
47
 
10
48
  var propTypes = {
11
49
  className: PropTypes.string,
@@ -40,6 +78,24 @@ var ShareOptions = function ShareOptions(_ref) {
40
78
  onShare = _ref.onShare,
41
79
  onClose = _ref.onClose,
42
80
  focusable = _ref.focusable;
81
+
82
+ var _useState = useState(false),
83
+ _useState2 = _slicedToArray(_useState, 2),
84
+ linkCopied = _useState2[0],
85
+ setLinkCopied = _useState2[1];
86
+
87
+ var onClickCopy = useCallback(function () {
88
+ copyToClipboard(url).then(function () {
89
+ setLinkCopied(true);
90
+ setTimeout(function () {
91
+ setLinkCopied(false);
92
+ }, 2000);
93
+ });
94
+ }, [setLinkCopied]);
95
+ var onClickLinkInput = useCallback(function (e) {
96
+ var target = e.target;
97
+ target.setSelectionRange(0, target.value.length);
98
+ }, []);
43
99
  var onShareButtonClick = useCallback(function (type) {
44
100
  if (onShare !== null) {
45
101
  onShare(type);
@@ -57,7 +113,7 @@ var ShareOptions = function ShareOptions(_ref) {
57
113
  }, [url, onClose]);
58
114
  var shareIconProps = useMemo(function () {
59
115
  return {
60
- size: 64,
116
+ size: 50,
61
117
  round: true
62
118
  };
63
119
  }, []);
@@ -106,17 +162,44 @@ var ShareOptions = function ShareOptions(_ref) {
106
162
  icon: /*#__PURE__*/React.createElement(LinkedinShareButton, Object.assign({}, shareButtonProps, {
107
163
  title: title,
108
164
  beforeOnClick: function beforeOnClick() {
109
- onShareButtonClick('LinkedIns');
165
+ onShareButtonClick('LinkedIn');
110
166
  return Promise.resolve();
111
167
  },
112
168
  tabIndex: focusable ? null : '-1'
113
169
  }), /*#__PURE__*/React.createElement(LinkedinIcon, shareIconProps))
170
+ }, {
171
+ id: 'whatsapp',
172
+ label: 'Whatsapp',
173
+ icon: /*#__PURE__*/React.createElement(WhatsappShareButton, Object.assign({}, shareButtonProps, {
174
+ title: title,
175
+ beforeOnClick: function beforeOnClick() {
176
+ onShareButtonClick('Whatsapp');
177
+ return Promise.resolve();
178
+ },
179
+ tabIndex: focusable ? null : '-1'
180
+ }), /*#__PURE__*/React.createElement(WhatsappIcon, shareIconProps))
181
+ }, {
182
+ id: 'facebookMessenger',
183
+ label: 'Facebook Messenger',
184
+ icon: /*#__PURE__*/React.createElement(FacebookMessengerShareButton, Object.assign({}, shareButtonProps, {
185
+ title: title,
186
+ appId: "741129940350872",
187
+ beforeOnClick: function beforeOnClick() {
188
+ onShareButtonClick('Whatsapp');
189
+ return Promise.resolve();
190
+ },
191
+ tabIndex: focusable ? null : '-1'
192
+ }), /*#__PURE__*/React.createElement(FacebookMessengerIcon, shareIconProps))
114
193
  }];
194
+ var hasShareLink = options !== null ? options.includes('copylink') : true; // default is true
195
+
115
196
  var selectedOptions = options !== null ? shareOptions.filter(function (opt) {
116
197
  return options.includes(opt.id);
117
198
  }) : shareOptions;
118
199
  return /*#__PURE__*/React.createElement("div", {
119
200
  className: classNames([styles.container, _defineProperty({}, className, className !== null)])
201
+ }, /*#__PURE__*/React.createElement("div", {
202
+ className: styles.options
120
203
  }, selectedOptions.map(function (_ref3) {
121
204
  var id = _ref3.id,
122
205
  label = _ref3.label,
@@ -127,7 +210,29 @@ var ShareOptions = function ShareOptions(_ref) {
127
210
  }, icon, /*#__PURE__*/React.createElement("div", {
128
211
  className: classNames([styles.label, _defineProperty({}, labelClassName, labelClassName !== null)])
129
212
  }, label));
130
- }));
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,
223
+ 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",
231
+ defaultMessage: [{
232
+ "type": 0,
233
+ "value": "Link copied to clipboard!"
234
+ }]
235
+ }))) : null);
131
236
  };
132
237
 
133
238
  ShareOptions.propTypes = propTypes;
package/lib/index.js CHANGED
@@ -1,20 +1,59 @@
1
1
  'use strict';
2
2
 
3
3
  var _defineProperty = require('@babel/runtime/helpers/defineProperty');
4
- var React = require('react');
4
+ var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
5
5
  var classNames = require('classnames');
6
6
  var PropTypes = require('prop-types');
7
+ var React = require('react');
7
8
  var reactIntl = require('react-intl');
8
9
  var reactShare = require('react-share');
10
+ var components = require('@micromag/core/components');
11
+ var utils = require('@micromag/core/utils');
9
12
 
10
13
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
11
14
 
12
15
  var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
13
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
16
+ var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
14
17
  var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
15
18
  var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
19
+ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
20
+
21
+ var propTypes$1 = {
22
+ className: PropTypes__default["default"].string
23
+ };
24
+ var defaultProps$1 = {
25
+ className: null
26
+ };
16
27
 
17
- var styles = {"container":"micromag-element-share-options-container","item":"micromag-element-share-options-item","label":"micromag-element-share-options-label"};
28
+ var ShareLinkIcon = function ShareLinkIcon(_ref) {
29
+ var className = _ref.className;
30
+ return /*#__PURE__*/React__default["default"].createElement("svg", {
31
+ xmlns: "http://www.w3.org/2000/svg",
32
+ width: "32",
33
+ height: "32",
34
+ viewBox: "0 0 32 32",
35
+ className: classNames__default["default"]([_defineProperty__default["default"]({}, className, className !== null)])
36
+ }, /*#__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",
38
+ fill: "none",
39
+ stroke: "currentColor",
40
+ strokeLinecap: "round",
41
+ strokeLinejoin: "round",
42
+ strokeWidth: "3"
43
+ }), /*#__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",
45
+ fill: "none",
46
+ stroke: "currentColor",
47
+ strokeLinecap: "round",
48
+ strokeLinejoin: "round",
49
+ strokeWidth: "3"
50
+ }));
51
+ };
52
+
53
+ ShareLinkIcon.propTypes = propTypes$1;
54
+ ShareLinkIcon.defaultProps = defaultProps$1;
55
+
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"};
18
57
 
19
58
  var propTypes = {
20
59
  className: PropTypes__default["default"].string,
@@ -49,6 +88,24 @@ var ShareOptions = function ShareOptions(_ref) {
49
88
  onShare = _ref.onShare,
50
89
  onClose = _ref.onClose,
51
90
  focusable = _ref.focusable;
91
+
92
+ var _useState = React.useState(false),
93
+ _useState2 = _slicedToArray__default["default"](_useState, 2),
94
+ linkCopied = _useState2[0],
95
+ setLinkCopied = _useState2[1];
96
+
97
+ var onClickCopy = React.useCallback(function () {
98
+ utils.copyToClipboard(url).then(function () {
99
+ setLinkCopied(true);
100
+ setTimeout(function () {
101
+ setLinkCopied(false);
102
+ }, 2000);
103
+ });
104
+ }, [setLinkCopied]);
105
+ var onClickLinkInput = React.useCallback(function (e) {
106
+ var target = e.target;
107
+ target.setSelectionRange(0, target.value.length);
108
+ }, []);
52
109
  var onShareButtonClick = React.useCallback(function (type) {
53
110
  if (onShare !== null) {
54
111
  onShare(type);
@@ -66,7 +123,7 @@ var ShareOptions = function ShareOptions(_ref) {
66
123
  }, [url, onClose]);
67
124
  var shareIconProps = React.useMemo(function () {
68
125
  return {
69
- size: 64,
126
+ size: 50,
70
127
  round: true
71
128
  };
72
129
  }, []);
@@ -115,17 +172,44 @@ var ShareOptions = function ShareOptions(_ref) {
115
172
  icon: /*#__PURE__*/React__default["default"].createElement(reactShare.LinkedinShareButton, Object.assign({}, shareButtonProps, {
116
173
  title: title,
117
174
  beforeOnClick: function beforeOnClick() {
118
- onShareButtonClick('LinkedIns');
175
+ onShareButtonClick('LinkedIn');
119
176
  return Promise.resolve();
120
177
  },
121
178
  tabIndex: focusable ? null : '-1'
122
179
  }), /*#__PURE__*/React__default["default"].createElement(reactShare.LinkedinIcon, shareIconProps))
180
+ }, {
181
+ id: 'whatsapp',
182
+ label: 'Whatsapp',
183
+ icon: /*#__PURE__*/React__default["default"].createElement(reactShare.WhatsappShareButton, Object.assign({}, shareButtonProps, {
184
+ title: title,
185
+ beforeOnClick: function beforeOnClick() {
186
+ onShareButtonClick('Whatsapp');
187
+ return Promise.resolve();
188
+ },
189
+ tabIndex: focusable ? null : '-1'
190
+ }), /*#__PURE__*/React__default["default"].createElement(reactShare.WhatsappIcon, shareIconProps))
191
+ }, {
192
+ id: 'facebookMessenger',
193
+ label: 'Facebook Messenger',
194
+ icon: /*#__PURE__*/React__default["default"].createElement(reactShare.FacebookMessengerShareButton, Object.assign({}, shareButtonProps, {
195
+ title: title,
196
+ appId: "741129940350872",
197
+ beforeOnClick: function beforeOnClick() {
198
+ onShareButtonClick('Whatsapp');
199
+ return Promise.resolve();
200
+ },
201
+ tabIndex: focusable ? null : '-1'
202
+ }), /*#__PURE__*/React__default["default"].createElement(reactShare.FacebookMessengerIcon, shareIconProps))
123
203
  }];
204
+ var hasShareLink = options !== null ? options.includes('copylink') : true; // default is true
205
+
124
206
  var selectedOptions = options !== null ? shareOptions.filter(function (opt) {
125
207
  return options.includes(opt.id);
126
208
  }) : shareOptions;
127
209
  return /*#__PURE__*/React__default["default"].createElement("div", {
128
210
  className: classNames__default["default"]([styles.container, _defineProperty__default["default"]({}, className, className !== null)])
211
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
212
+ className: styles.options
129
213
  }, selectedOptions.map(function (_ref3) {
130
214
  var id = _ref3.id,
131
215
  label = _ref3.label,
@@ -136,7 +220,29 @@ var ShareOptions = function ShareOptions(_ref) {
136
220
  }, icon, /*#__PURE__*/React__default["default"].createElement("div", {
137
221
  className: classNames__default["default"]([styles.label, _defineProperty__default["default"]({}, labelClassName, labelClassName !== null)])
138
222
  }, label));
139
- }));
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,
233
+ 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",
241
+ defaultMessage: [{
242
+ "type": 0,
243
+ "value": "Link copied to clipboard!"
244
+ }]
245
+ }))) : null);
140
246
  };
141
247
 
142
248
  ShareOptions.propTypes = propTypes;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/element-share-options",
3
- "version": "0.3.150",
3
+ "version": "0.3.152",
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.150",
56
+ "@micromag/core": "^0.3.152",
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": "c9441be7a115a52416883e404feeca422af4f2da"
66
+ "gitHead": "23db6c104c10cc70a73366c8b04576a312a36206"
67
67
  }