@micromag/element-share-options 0.3.541 → 0.3.569

package/es/index.js

@@ -47,7 +47,6 @@ var EmailIcon = function EmailIcon(_ref) {
 };
 EmailIcon.propTypes = propTypes$3;
 EmailIcon.defaultProps = defaultProps$3;
-var EmailIcon$1 = EmailIcon;
 
 var propTypes$2 = {
   className: PropTypes.string,
@@ -84,7 +83,6 @@ var ShareLinkIcon = function ShareLinkIcon(_ref) {
 };
 ShareLinkIcon.propTypes = propTypes$2;
 ShareLinkIcon.defaultProps = defaultProps$2;
-var ShareLinkIcon$1 = ShareLinkIcon;
 
 var propTypes$1 = {
   className: PropTypes.string,
@@ -111,7 +109,6 @@ var SmsIcon = function SmsIcon(_ref) {
 };
 SmsIcon.propTypes = propTypes$1;
 SmsIcon.defaultProps = defaultProps$1;
-var SmsIcon$1 = SmsIcon;
 
 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","spacer":"micromag-element-share-options-spacer","labelText":"micromag-element-share-options-labelText"};
 
@@ -326,7 +323,7 @@ var ShareOptions = function ShareOptions(_ref) {
       },
       tabIndex: focusable ? null : '-1',
       style: finalStyles
-    }), /*#__PURE__*/React.createElement(EmailIcon$1, shareIconProps), /*#__PURE__*/React.createElement("div", {
+    }), /*#__PURE__*/React.createElement(EmailIcon, shareIconProps), /*#__PURE__*/React.createElement("div", {
       className: classNames([styles.label, _defineProperty({}, labelClassName, labelClassName !== null)])
     }, /*#__PURE__*/React.createElement(FormattedMessage, {
       id: "Lrwi2G",
@@ -349,7 +346,7 @@ var ShareOptions = function ShareOptions(_ref) {
       style: finalStyles,
       external: true,
       withoutBootstrapStyles: true
-    }, /*#__PURE__*/React.createElement(SmsIcon$1, shareIconProps), /*#__PURE__*/React.createElement("div", {
+    }, /*#__PURE__*/React.createElement(SmsIcon, shareIconProps), /*#__PURE__*/React.createElement("div", {
       className: classNames([styles.label, _defineProperty({}, labelClassName, labelClassName !== null)])
     }, /*#__PURE__*/React.createElement("span", {
       className: styles.labelText
@@ -382,7 +379,7 @@ var ShareOptions = function ShareOptions(_ref) {
     focusable: focusable,
     style: finalStyles,
     withoutBootstrapStyles: true
-  }, /*#__PURE__*/React.createElement(ShareLinkIcon$1, shareIconProps), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(ShareLinkIcon, shareIconProps), /*#__PURE__*/React.createElement("div", {
     className: classNames([styles.label, _defineProperty({}, labelClassName, labelClassName !== null)])
   }, /*#__PURE__*/React.createElement("span", {
     className: styles.labelText

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/element-share-options",
-    "version": "0.3.541",
+    "version": "0.3.569",
     "private": false,
     "description": "",
     "keywords": [
@@ -34,11 +34,10 @@
         }
     ],
     "license": "ISC",
-    "main": "lib/index.js",
+    "type": "module",
     "module": "es/index.js",
     "exports": {
         ".": {
-            "require": "./lib/index.js",
             "import": "./es/index.js"
         },
         "./assets/css/styles": "./assets/css/styles.css",
@@ -64,7 +63,7 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@micromag/core": "^0.3.541",
+        "@micromag/core": "^0.3.569",
         "classnames": "^2.2.6",
         "prop-types": "^15.7.2",
         "react-intl": "^6.6.4",
@@ -75,5 +74,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "6c04a7e327b5fbc096785c11320b3fbd3c5751c8"
+    "gitHead": "ceb71f23a32ab8df4a1563a1e5cd5598e539de4d"
 }

package/lib/index.js

@@ -1,421 +0,0 @@
-'use strict';
-
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
-var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
-var classNames = require('classnames');
-var PropTypes = require('prop-types');
-var React = require('react');
-var reactIntl = require('react-intl');
-var reactShare = require('react-share');
-var core = require('@micromag/core');
-var components = require('@micromag/core/components');
-var utils = require('@micromag/core/utils');
-
-var propTypes$3 = {
-  className: PropTypes.string,
-  size: PropTypes.number
-};
-var defaultProps$3 = {
-  className: null,
-  size: 45
-};
-var EmailIcon = function EmailIcon(_ref) {
-  var className = _ref.className,
-    size = _ref.size;
-  return /*#__PURE__*/React.createElement("svg", {
-    width: size,
-    height: size,
-    viewBox: "0 0 45 45",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    className: classNames([_defineProperty({}, className, className !== null)])
-  }, /*#__PURE__*/React.createElement("g", {
-    clipPath: "url(#clip0_837_18233)"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M32.8293 17.0498L27.3973 22.5436C27.3582 22.5825 27.3582 22.6453 27.3973 22.6842L31.1987 26.7044C31.4557 26.9576 31.4568 27.3694 31.2007 27.6247L31.1987 27.6267C30.9417 27.8809 30.526 27.8809 30.2699 27.6267L26.4836 23.6214C26.4435 23.5816 26.3782 23.5816 26.337 23.6214L25.4143 24.5557C24.6512 25.3304 23.607 25.7671 22.5156 25.7691C21.4011 25.7631 20.3367 25.3135 19.5606 24.5198L18.672 23.6224C18.6318 23.5826 18.5666 23.5826 18.5254 23.6224L14.7371 27.6286C14.48 27.8829 14.0644 27.8829 13.8083 27.6286C13.5513 27.3754 13.5503 26.9636 13.8063 26.7084L13.8083 26.7064L17.6097 22.6862C17.6448 22.6463 17.6448 22.5855 17.6097 22.5456L12.1717 17.0498C12.1335 17.0109 12.0703 17.0099 12.0301 17.0478C12.011 17.0667 12 17.0927 12 17.1196V28.1132C12.003 28.9976 12.7239 29.7145 13.6155 29.7175H31.3855C32.2761 29.7145 32.998 28.9986 33.001 28.1132V17.1196C33.001 17.0647 32.9568 17.0199 32.9016 17.0199C32.8745 17.0199 32.8484 17.0308 32.8293 17.0498Z",
-    fill: "currentColor"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M22.4995 24.459C23.2425 24.461 23.9544 24.1648 24.4735 23.6364L32.3946 15.631C32.1114 15.4036 31.759 15.28 31.3955 15.28H13.6105C13.246 15.279 12.8936 15.4026 12.6105 15.631L20.5305 23.6364C21.0476 24.1628 21.7585 24.46 22.4995 24.459Z",
-    fill: "currentColor"
-  })), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
-    id: "clip0_837_18233"
-  }, /*#__PURE__*/React.createElement("rect", {
-    width: "21",
-    height: "14.4375",
-    fill: "currentColor",
-    transform: "translate(12 15.28)"
-  }))));
-};
-EmailIcon.propTypes = propTypes$3;
-EmailIcon.defaultProps = defaultProps$3;
-var EmailIcon$1 = EmailIcon;
-
-var propTypes$2 = {
-  className: PropTypes.string,
-  size: PropTypes.number
-};
-var defaultProps$2 = {
-  className: null,
-  size: 45
-};
-var ShareLinkIcon = function ShareLinkIcon(_ref) {
-  var className = _ref.className,
-    size = _ref.size;
-  return /*#__PURE__*/React.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: size,
-    height: size,
-    viewBox: "0 0 64 64",
-    className: classNames([_defineProperty({}, className, className !== null)])
-  }, /*#__PURE__*/React.createElement("path", {
-    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",
-    fill: "none",
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: "3"
-  }), /*#__PURE__*/React.createElement("path", {
-    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",
-    fill: "none",
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: "3"
-  }));
-};
-ShareLinkIcon.propTypes = propTypes$2;
-ShareLinkIcon.defaultProps = defaultProps$2;
-var ShareLinkIcon$1 = ShareLinkIcon;
-
-var propTypes$1 = {
-  className: PropTypes.string,
-  size: PropTypes.number
-};
-var defaultProps$1 = {
-  className: null,
-  size: 45
-};
-var SmsIcon = function SmsIcon(_ref) {
-  var className = _ref.className,
-    size = _ref.size;
-  return /*#__PURE__*/React.createElement("svg", {
-    width: size,
-    height: size,
-    viewBox: "0 0 45 45",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    className: classNames([_defineProperty({}, className, className !== null)])
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M30.8988 12H14.1001C12.9444 12.0053 12.0106 12.9444 12.0106 14.1001L12 32.9989L16.2002 28.7987H30.8999C32.0578 28.7955 32.9968 27.8576 33 26.6986V14.1001C32.9968 12.9422 32.0588 12.0032 30.8999 12H30.8988ZM19.3498 20.3999C19.3498 20.9798 18.8797 21.4499 18.2998 21.4499V21.4499C17.7199 21.4499 17.2497 20.9798 17.2497 20.3999V20.3999C17.2497 19.82 17.7199 19.3498 18.2998 19.3498V19.3498C18.8797 19.3498 19.3498 19.82 19.3498 20.3999V20.3999ZM23.5501 20.3999C23.5501 20.9798 23.0799 21.4499 22.5 21.4499V21.4499C21.9201 21.4499 21.4499 20.9798 21.4499 20.3999V20.3999C21.4499 19.82 21.9201 19.3498 22.5 19.3498V19.3498C23.0799 19.3498 23.5501 19.82 23.5501 20.3999V20.3999ZM27.7503 20.3999C27.7503 20.9798 27.2801 21.4499 26.7002 21.4499V21.4499C26.1203 21.4499 25.6502 20.9798 25.6502 20.3999V20.3999C25.6502 19.82 26.1203 19.3498 26.7002 19.3498V19.3498C27.2801 19.3498 27.7503 19.82 27.7503 20.3999V20.3999Z",
-    fill: "currentColor"
-  }));
-};
-SmsIcon.propTypes = propTypes$1;
-SmsIcon.defaultProps = defaultProps$1;
-var SmsIcon$1 = SmsIcon;
-
-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","spacer":"micromag-element-share-options-spacer","labelText":"micromag-element-share-options-labelText"};
-
-var propTypes = {
-  className: PropTypes.string,
-  itemClassName: PropTypes.string,
-  labelClassName: PropTypes.string,
-  buttonClassName: PropTypes.string,
-  title: PropTypes.string,
-  url: PropTypes.string,
-  options: PropTypes.arrayOf(PropTypes.string),
-  buttonsStyle: core.PropTypes.boxStyle,
-  buttonsTextStyle: core.PropTypes.textStyle,
-  iconSize: PropTypes.number,
-  theme: core.PropTypes.viewerTheme,
-  onShare: PropTypes.func,
-  onClose: PropTypes.func,
-  focusable: PropTypes.bool
-};
-var defaultProps = {
-  className: null,
-  itemClassName: null,
-  labelClassName: null,
-  buttonClassName: null,
-  title: null,
-  url: null,
-  options: null,
-  buttonsStyle: null,
-  buttonsTextStyle: null,
-  iconSize: 45,
-  theme: null,
-  onShare: null,
-  onClose: null,
-  focusable: true
-};
-var ShareOptions = function ShareOptions(_ref) {
-  var className = _ref.className,
-    itemClassName = _ref.itemClassName,
-    labelClassName = _ref.labelClassName,
-    buttonClassName = _ref.buttonClassName,
-    title = _ref.title,
-    url = _ref.url,
-    options = _ref.options,
-    buttonsStyle = _ref.buttonsStyle,
-    buttonsTextStyle = _ref.buttonsTextStyle,
-    iconSize = _ref.iconSize,
-    theme = _ref.theme,
-    onShare = _ref.onShare,
-    onClose = _ref.onClose,
-    focusable = _ref.focusable;
-  var _ref2 = theme || {},
-    _ref2$menuTheme = _ref2.menuTheme,
-    menuTheme = _ref2$menuTheme === void 0 ? null : _ref2$menuTheme;
-  var _ref3 = menuTheme || {},
-    _ref3$colors = _ref3.colors,
-    colors = _ref3$colors === void 0 ? null : _ref3$colors;
-  var _ref4 = colors || {},
-    _ref4$primary = _ref4.primary,
-    brandPrimaryColor = _ref4$primary === void 0 ? null : _ref4$primary;
-  var colorStyles = utils.getStyleFromColor(brandPrimaryColor, 'color');
-  var finalStyles = colorStyles;
-  if (buttonsTextStyle !== null) {
-    finalStyles = _objectSpread(_objectSpread({}, finalStyles), utils.getStyleFromText(buttonsTextStyle));
-  }
-  if (buttonsStyle !== null) {
-    finalStyles = _objectSpread(_objectSpread({}, finalStyles), utils.getStyleFromBox(buttonsStyle));
-  }
-  var _useState = React.useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    linkCopied = _useState2[0],
-    setLinkCopied = _useState2[1];
-  var onClickCopy = React.useCallback(function () {
-    utils.copyToClipboard(url).then(function () {
-      setLinkCopied(true);
-      setTimeout(function () {
-        setLinkCopied(false);
-      }, 2000);
-    });
-  }, [url, setLinkCopied]);
-  var onShareButtonClick = React.useCallback(function (type) {
-    if (onShare !== null) {
-      onShare(type);
-    }
-  }, [onShare]);
-  var shareButtonProps = React.useMemo(function () {
-    return {
-      className: classNames([styles.button, _defineProperty({}, buttonClassName, buttonClassName !== null)]),
-      url: url,
-      onShareWindowClose: function onShareWindowClose() {
-        if (onClose !== null) {
-          onClose();
-        }
-      }
-    };
-  }, [url, onClose]);
-  var shareIconProps = React.useMemo(function () {
-    return {
-      className: styles.icon,
-      size: iconSize,
-      bgStyle: {
-        fill: 'none'
-      },
-      iconFillColor: 'currentColor'
-    };
-  }, [iconSize]);
-  var shareOptions = [{
-    id: 'facebook',
-    button: /*#__PURE__*/React.createElement(reactShare.FacebookShareButton, Object.assign({}, shareButtonProps, {
-      quote: title,
-      beforeOnClick: function beforeOnClick() {
-        onShareButtonClick('Facebook');
-        return Promise.resolve();
-      },
-      tabIndex: focusable ? null : '-1',
-      style: finalStyles
-    }), /*#__PURE__*/React.createElement(reactShare.FacebookIcon, shareIconProps), /*#__PURE__*/React.createElement("div", {
-      className: classNames([styles.label, _defineProperty({}, labelClassName, labelClassName !== null)])
-    }, "Facebook"), /*#__PURE__*/React.createElement("div", {
-      className: styles.spacer,
-      style: {
-        width: "".concat(iconSize, "px")
-      }
-    }))
-  }, {
-    id: 'twitter',
-    button: /*#__PURE__*/React.createElement(reactShare.TwitterShareButton, Object.assign({}, shareButtonProps, {
-      title: title,
-      beforeOnClick: function beforeOnClick() {
-        onShareButtonClick('Twitter');
-        return Promise.resolve();
-      },
-      tabIndex: focusable ? null : '-1',
-      style: finalStyles
-    }), /*#__PURE__*/React.createElement(reactShare.TwitterIcon, shareIconProps), /*#__PURE__*/React.createElement("div", {
-      className: classNames([styles.label, _defineProperty({}, labelClassName, labelClassName !== null)])
-    }, "Twitter"), /*#__PURE__*/React.createElement("div", {
-      className: styles.spacer,
-      style: {
-        width: "".concat(iconSize, "px")
-      }
-    }))
-  }, {
-    id: 'linkedin',
-    button: /*#__PURE__*/React.createElement(reactShare.LinkedinShareButton, Object.assign({}, shareButtonProps, {
-      title: title,
-      beforeOnClick: function beforeOnClick() {
-        onShareButtonClick('LinkedIn');
-        return Promise.resolve();
-      },
-      tabIndex: focusable ? null : '-1',
-      style: finalStyles
-    }), /*#__PURE__*/React.createElement(reactShare.LinkedinIcon, shareIconProps), /*#__PURE__*/React.createElement("div", {
-      className: classNames([styles.label, _defineProperty({}, labelClassName, labelClassName !== null)])
-    }, "LinkedIn"), /*#__PURE__*/React.createElement("div", {
-      className: styles.spacer,
-      style: {
-        width: "".concat(iconSize, "px")
-      }
-    }))
-  }, {
-    id: 'whatsapp',
-    button: /*#__PURE__*/React.createElement(reactShare.WhatsappShareButton, Object.assign({}, shareButtonProps, {
-      title: title,
-      beforeOnClick: function beforeOnClick() {
-        onShareButtonClick('Whatsapp');
-        return Promise.resolve();
-      },
-      tabIndex: focusable ? null : '-1',
-      style: finalStyles
-    }), /*#__PURE__*/React.createElement(reactShare.WhatsappIcon, shareIconProps), /*#__PURE__*/React.createElement("div", {
-      className: classNames([styles.label, _defineProperty({}, labelClassName, labelClassName !== null)])
-    }, "Whatsapp"), /*#__PURE__*/React.createElement("div", {
-      className: styles.spacer,
-      style: {
-        width: "".concat(iconSize, "px")
-      }
-    }))
-  },
-  // {
-  //     id: 'facebookMessenger',
-  //     button: (
-  //         <FacebookMessengerShareButton
-  //             {...shareButtonProps}
-  //             title={title}
-  //             appId="741129940350872"
-  //             beforeOnClick={() => {
-  //                 onShareButtonClick('Whatsapp');
-  //                 return Promise.resolve();
-  //             }}
-  //             tabIndex={focusable ? null : '-1'}
-  //             style={finalStyles}
-  //         >
-  //             <FacebookMessengerIcon {...shareIconProps} />
-  //             <div
-  //                 className={classNames([
-  //                     styles.label,
-  //                     { [labelClassName]: labelClassName !== null },
-  //                 ])}
-  //             >
-  //                 Facebook Messenger
-  //             </div>
-  //         </FacebookMessengerShareButton>
-  //     ),
-  // },
-  {
-    id: 'email',
-    button: /*#__PURE__*/React.createElement(reactShare.EmailShareButton, Object.assign({}, shareButtonProps, {
-      subject: title,
-      beforeOnClick: function beforeOnClick() {
-        onShareButtonClick('Email');
-        return Promise.resolve();
-      },
-      tabIndex: focusable ? null : '-1',
-      style: finalStyles
-    }), /*#__PURE__*/React.createElement(EmailIcon$1, shareIconProps), /*#__PURE__*/React.createElement("div", {
-      className: classNames([styles.label, _defineProperty({}, labelClassName, labelClassName !== null)])
-    }, /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-      id: "Lrwi2G",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Email"
-      }]
-    })), /*#__PURE__*/React.createElement("div", {
-      className: styles.spacer,
-      style: {
-        width: "".concat(iconSize, "px")
-      }
-    }))
-  }, {
-    id: 'sms',
-    button: /*#__PURE__*/React.createElement(components.Button, {
-      className: classNames([styles.button, _defineProperty({}, buttonClassName, buttonClassName !== null)]),
-      href: "sms:?&body=".concat(url),
-      focusable: focusable,
-      style: finalStyles,
-      external: true,
-      withoutBootstrapStyles: true
-    }, /*#__PURE__*/React.createElement(SmsIcon$1, shareIconProps), /*#__PURE__*/React.createElement("div", {
-      className: classNames([styles.label, _defineProperty({}, labelClassName, labelClassName !== null)])
-    }, /*#__PURE__*/React.createElement("span", {
-      className: styles.labelText
-    }, /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-      id: "dSfmnf",
-      defaultMessage: [{
-        "type": 0,
-        "value": "SMS"
-      }]
-    }))), /*#__PURE__*/React.createElement("div", {
-      className: styles.spacer,
-      style: {
-        width: "".concat(iconSize, "px")
-      }
-    }))
-  }];
-  var hasShareLink = options !== null ? options.includes('copylink') : true; // default is true
-  var selectedOptions = options !== null ? shareOptions.filter(function (opt) {
-    return options.includes(opt.id);
-  }) : shareOptions;
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.container, _defineProperty({}, className, className !== null)])
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.options
-  }, hasShareLink ? /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.item, _defineProperty(_defineProperty({}, itemClassName, itemClassName !== null), styles.isLinkCopied, linkCopied)])
-  }, /*#__PURE__*/React.createElement(components.Button, {
-    className: classNames([styles.button, _defineProperty({}, buttonClassName, buttonClassName !== null)]),
-    onClick: onClickCopy,
-    focusable: focusable,
-    style: finalStyles,
-    withoutBootstrapStyles: true
-  }, /*#__PURE__*/React.createElement(ShareLinkIcon$1, shareIconProps), /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.label, _defineProperty({}, labelClassName, labelClassName !== null)])
-  }, /*#__PURE__*/React.createElement("span", {
-    className: styles.labelText
-  }, !linkCopied ? /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-    id: "D21uVQ",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Copy link"
-    }]
-  }) : null, linkCopied ? /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-    id: "xFlbR7",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Link copied!"
-    }]
-  }) : null)), /*#__PURE__*/React.createElement("div", {
-    className: styles.spacer,
-    style: {
-      width: "".concat(iconSize, "px")
-    }
-  }))) : null, selectedOptions.map(function (_ref17) {
-    var id = _ref17.id,
-      button = _ref17.button;
-    return /*#__PURE__*/React.createElement("div", {
-      key: id,
-      className: classNames([styles.item, _defineProperty({}, itemClassName, itemClassName !== null)])
-    }, button);
-  })));
-};
-ShareOptions.propTypes = propTypes;
-ShareOptions.defaultProps = defaultProps;
-var ShareOptions$1 = ShareOptions;
-
-module.exports = ShareOptions$1;