@micromag/viewer 0.3.114 → 0.3.117

package/lib/index.js

@@ -246,7 +246,7 @@ var styles$7 = {"container":"micromag-viewer-menus-menu-dots-container","closeBu
 
 var styles$6 = {"container":"micromag-viewer-menus-menu-dot-container","button":"micromag-viewer-menus-menu-dot-button","dot":"micromag-viewer-menus-menu-dot-dot","subDot":"micromag-viewer-menus-menu-dot-subDot","dots":"micromag-viewer-menus-menu-dot-dots","vertical":"micromag-viewer-menus-menu-dot-vertical"};
 
-var propTypes$c = {
+var propTypes$e = {
   current: PropTypes__default["default"].bool,
   active: PropTypes__default["default"].bool,
   colors: PropTypes__default["default"].shape({
@@ -259,7 +259,7 @@ var propTypes$c = {
   onClick: PropTypes__default["default"].func,
   className: PropTypes__default["default"].string
 };
-var defaultProps$c = {
+var defaultProps$e = {
   current: false,
   active: false,
   colors: null,
@@ -348,18 +348,18 @@ var ViewerMenuDot = function ViewerMenuDot(_ref) {
   }, inner));
 };
 
-ViewerMenuDot.propTypes = propTypes$c;
-ViewerMenuDot.defaultProps = defaultProps$c;
+ViewerMenuDot.propTypes = propTypes$e;
+ViewerMenuDot.defaultProps = defaultProps$e;
 
 var styles$5 = {};
 
-var propTypes$b = {
+var propTypes$d = {
   size: PropTypes__default["default"].number,
   spacing: PropTypes__default["default"].number,
   color: PropTypes__default["default"].string,
   className: PropTypes__default["default"].string
 };
-var defaultProps$b = {
+var defaultProps$d = {
   size: 100,
   spacing: 8,
   color: 'white',
@@ -391,10 +391,10 @@ var MenuIcon = function MenuIcon(_ref) {
   }));
 };
 
-MenuIcon.propTypes = propTypes$b;
-MenuIcon.defaultProps = defaultProps$b;
+MenuIcon.propTypes = propTypes$d;
+MenuIcon.defaultProps = defaultProps$d;
 
-var propTypes$a = {
+var propTypes$c = {
   direction: PropTypes__default["default"].oneOf(['horizontal', 'vertical']),
   withShadow: PropTypes__default["default"].bool,
   items: core$1.PropTypes.menuItems,
@@ -410,7 +410,7 @@ var propTypes$a = {
   onClose: PropTypes__default["default"].func,
   className: PropTypes__default["default"].string
 };
-var defaultProps$a = {
+var defaultProps$c = {
   direction: 'horizontal',
   withShadow: false,
   items: [],
@@ -551,12 +551,66 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
   }))) : null));
 };
 
-ViewerMenuDots.propTypes = propTypes$a;
-ViewerMenuDots.defaultProps = defaultProps$a;
+ViewerMenuDots.propTypes = propTypes$c;
+ViewerMenuDots.defaultProps = defaultProps$c;
+
+var styles$4 = {"container":"micromag-viewer-menus-menu-preview-container","screenButton":"micromag-viewer-menus-menu-preview-screenButton","activeScreenBorder":"micromag-viewer-menus-menu-preview-activeScreenBorder","scroll":"micromag-viewer-menus-menu-preview-scroll","header":"micromag-viewer-menus-menu-preview-header","button":"micromag-viewer-menus-menu-preview-button","shareButton":"micromag-viewer-menus-menu-preview-shareButton","disabled":"micromag-viewer-menus-menu-preview-disabled","icon":"micromag-viewer-menus-menu-preview-icon","buttons":"micromag-viewer-menus-menu-preview-buttons","organisation":"micromag-viewer-menus-menu-preview-organisation","title":"micromag-viewer-menus-menu-preview-title","content":"micromag-viewer-menus-menu-preview-content","nav":"micromag-viewer-menus-menu-preview-nav","item":"micromag-viewer-menus-menu-preview-item","items":"micromag-viewer-menus-menu-preview-items","active":"micromag-viewer-menus-menu-preview-active","itemContent":"micromag-viewer-menus-menu-preview-itemContent","screenContainer":"micromag-viewer-menus-menu-preview-screenContainer","subScreenBadge":"micromag-viewer-menus-menu-preview-subScreenBadge","subScreenCount":"micromag-viewer-menus-menu-preview-subScreenCount","subScreenIcon":"micromag-viewer-menus-menu-preview-subScreenIcon","screenContent":"micromag-viewer-menus-menu-preview-screenContent"};
+
+var propTypes$b = {
+  className: PropTypes__default["default"].string
+};
+var defaultProps$b = {
+  className: null
+};
+
+var StackIcon = function StackIcon(_ref) {
+  var className = _ref.className;
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "32",
+    height: "32",
+    viewBox: "0 0 32 32",
+    className: classNames__default["default"]([_defineProperty__default["default"]({}, className, className !== null)])
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M22.33.15H5A2.9,2.9,0,0,0,2.12,3V23.25H5V3H22.33Zm4.33,5.78H10.78A2.9,2.9,0,0,0,7.89,8.81V29a2.9,2.9,0,0,0,2.89,2.89H26.66A2.89,2.89,0,0,0,29.55,29V8.81A2.88,2.88,0,0,0,26.66,5.93Zm0,23.09Z"
+  }));
+};
 
-var styles$4 = {"container":"micromag-viewer-menus-menu-preview-container","screenButton":"micromag-viewer-menus-menu-preview-screenButton","activeScreenBorder":"micromag-viewer-menus-menu-preview-activeScreenBorder","scroll":"micromag-viewer-menus-menu-preview-scroll","header":"micromag-viewer-menus-menu-preview-header","button":"micromag-viewer-menus-menu-preview-button","shareButton":"micromag-viewer-menus-menu-preview-shareButton","disabled":"micromag-viewer-menus-menu-preview-disabled","icon":"micromag-viewer-menus-menu-preview-icon","buttons":"micromag-viewer-menus-menu-preview-buttons","organisation":"micromag-viewer-menus-menu-preview-organisation","title":"micromag-viewer-menus-menu-preview-title","content":"micromag-viewer-menus-menu-preview-content","nav":"micromag-viewer-menus-menu-preview-nav","item":"micromag-viewer-menus-menu-preview-item","items":"micromag-viewer-menus-menu-preview-items","active":"micromag-viewer-menus-menu-preview-active","itemContent":"micromag-viewer-menus-menu-preview-itemContent","screenContainer":"micromag-viewer-menus-menu-preview-screenContainer","screenContent":"micromag-viewer-menus-menu-preview-screenContent"};
+StackIcon.propTypes = propTypes$b;
+StackIcon.defaultProps = defaultProps$b;
 
-var styles$3 = {"container":"micromag-viewer-partials-share-modal-container","content":"micromag-viewer-partials-share-modal-content","opened":"micromag-viewer-partials-share-modal-opened"};
+var propTypes$a = {
+  className: PropTypes__default["default"].string
+};
+var defaultProps$a = {
+  className: null
+};
+
+var LinkIcon = function LinkIcon(_ref) {
+  var className = _ref.className;
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "32",
+    height: "32",
+    viewBox: "0 0 32 32",
+    className: classNames__default["default"]([_defineProperty__default["default"]({}, className, className !== null)])
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M18.6,15.34a5.72,5.72,0,0,0-.59-.73L17.36,14a4.93,4.93,0,0,0-7,0L4.55,19.81a4.94,4.94,0,0,0,0,7l.65.64a4.91,4.91,0,0,0,7,0L16.61,23",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "3"
+  }), /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M13.4,16.66a5.72,5.72,0,0,0,.59.73l.65.64a4.93,4.93,0,0,0,7,0l5.85-5.84a4.94,4.94,0,0,0,0-7l-.65-.64a4.91,4.91,0,0,0-7,0L15.39,9",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "3"
+  }));
+};
+
+LinkIcon.propTypes = propTypes$a;
+LinkIcon.defaultProps = defaultProps$a;
+
+var styles$3 = {"close":"micromag-viewer-partials-share-modal-close","container":"micromag-viewer-partials-share-modal-container","opened":"micromag-viewer-partials-share-modal-opened","modal":"micromag-viewer-partials-share-modal-modal","header":"micromag-viewer-partials-share-modal-header","heading":"micromag-viewer-partials-share-modal-heading","closeIcon":"micromag-viewer-partials-share-modal-closeIcon","content":"micromag-viewer-partials-share-modal-content","buttons":"micromag-viewer-partials-share-modal-buttons","shareOption":"micromag-viewer-partials-share-modal-shareOption","shareLabel":"micromag-viewer-partials-share-modal-shareLabel","otherOptions":"micromag-viewer-partials-share-modal-otherOptions","copyLink":"micromag-viewer-partials-share-modal-copyLink","screenUrlInput":"micromag-viewer-partials-share-modal-screenUrlInput","copyUrlButton":"micromag-viewer-partials-share-modal-copyUrlButton","linkIcon":"micromag-viewer-partials-share-modal-linkIcon","successfulCopyMessage":"micromag-viewer-partials-share-modal-successfulCopyMessage","isLinkCopied":"micromag-viewer-partials-share-modal-isLinkCopied"};
 
 var propTypes$9 = {
   url: PropTypes__default["default"].string,
@@ -576,7 +630,7 @@ var defaultProps$9 = {
 };
 
 var ShareModal = function ShareModal(_ref) {
-  var _ref2;
+  var _ref3;
 
   var url = _ref.url,
       title = _ref.title,
@@ -584,7 +638,13 @@ var ShareModal = function ShareModal(_ref) {
       className = _ref.className,
       onShare = _ref.onShare,
       onCancel = _ref.onCancel;
-  var containerRef = React.useRef(null);
+  var modalRef = React.useRef();
+
+  var _useState = React.useState(false),
+      _useState2 = _slicedToArray__default["default"](_useState, 2),
+      linkCopied = _useState2[0],
+      setLinkCopied = _useState2[1];
+
   var onShareButtonClick = React.useCallback(function (type) {
     if (onShare !== null) {
       onShare(type);
@@ -602,58 +662,152 @@ var ShareModal = function ShareModal(_ref) {
   }, [url, onCancel]);
   var shareIconProps = React.useMemo(function () {
     return {
-      size: 32,
+      size: 64,
       round: true
     };
   }, []);
+  var onClickCopy = React.useCallback(function () {
+    utils.copyToClipboard(url).then(function () {
+      setLinkCopied(true);
+      setTimeout(function () {
+        setLinkCopied(false);
+      }, 2000);
+    });
+  }, [setLinkCopied]);
+  var onClickLinkInput = React.useCallback(function (e) {
+    var target = e.target;
+    target.setSelectionRange(0, target.value.length);
+  }, []);
   var onDocumentClick = React.useCallback(function (e) {
-    var target = e.currentTarget;
+    var _ref2 = e || {},
+        target = _ref2.target;
 
-    if (!containerRef.current || containerRef.current.contains(target)) {
+    if (!modalRef.current || modalRef.current.contains(target)) {
       return;
     }
 
-    if (onCancel !== null) {
-      onCancel();
-    }
+    onCancel();
   }, [opened, onCancel]);
   hooks.useDocumentEvent('click', onDocumentClick, opened);
+  var shareOptions = [{
+    id: 'email',
+    label: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
+      id: "Lrwi2G",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Email"
+      }]
+    }),
+    icon: /*#__PURE__*/React__default["default"].createElement(reactShare.EmailShareButton, Object.assign({}, shareButtonProps, {
+      subject: title,
+      beforeOnClick: function beforeOnClick() {
+        onShareButtonClick('Email');
+        return Promise.resolve();
+      },
+      tabIndex: opened ? null : '-1'
+    }), /*#__PURE__*/React__default["default"].createElement(reactShare.EmailIcon, shareIconProps))
+  }, {
+    id: 'facebook',
+    label: 'Facebook',
+    icon: /*#__PURE__*/React__default["default"].createElement(reactShare.FacebookShareButton, Object.assign({}, shareButtonProps, {
+      quote: title,
+      beforeOnClick: function beforeOnClick() {
+        onShareButtonClick('Facebook');
+        return Promise.resolve();
+      },
+      tabIndex: opened ? null : '-1'
+    }), /*#__PURE__*/React__default["default"].createElement(reactShare.FacebookIcon, shareIconProps))
+  }, {
+    id: 'twitter',
+    label: 'Twitter',
+    icon: /*#__PURE__*/React__default["default"].createElement(reactShare.TwitterShareButton, Object.assign({}, shareButtonProps, {
+      title: title,
+      beforeOnClick: function beforeOnClick() {
+        onShareButtonClick('Twitter');
+        return Promise.resolve();
+      },
+      tabIndex: opened ? null : '-1'
+    }), /*#__PURE__*/React__default["default"].createElement(reactShare.TwitterIcon, shareIconProps))
+  }, {
+    id: 'linkedin',
+    label: 'LinkedIn',
+    icon: /*#__PURE__*/React__default["default"].createElement(reactShare.LinkedinShareButton, Object.assign({}, shareButtonProps, {
+      title: title,
+      beforeOnClick: function beforeOnClick() {
+        onShareButtonClick('LinkedIns');
+        return Promise.resolve();
+      },
+      tabIndex: opened ? null : '-1'
+    }), /*#__PURE__*/React__default["default"].createElement(reactShare.LinkedinIcon, shareIconProps))
+  }];
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$3.container, (_ref2 = {}, _defineProperty__default["default"](_ref2, className, className), _defineProperty__default["default"](_ref2, styles$3.opened, opened), _ref2)]),
-    ref: containerRef,
+    className: classNames__default["default"]([styles$3.container, (_ref3 = {}, _defineProperty__default["default"](_ref3, className, className), _defineProperty__default["default"](_ref3, styles$3.opened, opened), _ref3)]),
     "aria-hidden": opened ? null : '-1'
   }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: styles$3.modal,
+    ref: modalRef
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: styles$3.header
+  }, /*#__PURE__*/React__default["default"].createElement("h2", {
+    className: styles$3.heading
+  }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
+    id: "oL4ueH",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Share"
+    }]
+  })), /*#__PURE__*/React__default["default"].createElement(components.Button, {
+    className: styles$3.close,
+    onClick: onCancel,
+    focusable: opened
+  }, /*#__PURE__*/React__default["default"].createElement(components.Close, {
+    className: styles$3.closeIcon,
+    border: false
+  }))), /*#__PURE__*/React__default["default"].createElement("div", {
     className: styles$3.content
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: styles$3.buttons
-  }, /*#__PURE__*/React__default["default"].createElement(reactShare.FacebookShareButton, Object.assign({}, shareButtonProps, {
-    quote: title,
-    beforeOnClick: function beforeOnClick() {
-      onShareButtonClick('Facebook');
-      return Promise.resolve();
-    },
-    tabIndex: opened ? null : '-1'
-  }), /*#__PURE__*/React__default["default"].createElement(reactShare.FacebookIcon, shareIconProps)), /*#__PURE__*/React__default["default"].createElement(reactShare.TwitterShareButton, Object.assign({}, shareButtonProps, {
-    title: title,
-    beforeOnClick: function beforeOnClick() {
-      onShareButtonClick('Twitter');
-      return Promise.resolve();
-    },
-    tabIndex: opened ? null : '-1'
-  }), /*#__PURE__*/React__default["default"].createElement(reactShare.TwitterIcon, shareIconProps)), /*#__PURE__*/React__default["default"].createElement(reactShare.EmailShareButton, Object.assign({}, shareButtonProps, {
-    subject: title,
-    beforeOnClick: function beforeOnClick() {
-      onShareButtonClick('Email');
-      return Promise.resolve();
-    },
-    tabIndex: opened ? null : '-1'
-  }), /*#__PURE__*/React__default["default"].createElement(reactShare.EmailIcon, shareIconProps)))));
+  }, shareOptions.map(function (_ref4) {
+    var id = _ref4.id,
+        label = _ref4.label,
+        icon = _ref4.icon;
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      key: id,
+      className: styles$3.shareOption
+    }, icon, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: styles$3.shareLabel
+    }, label));
+  })), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: styles$3.otherOptions
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classNames__default["default"]([styles$3.copyLink, _defineProperty__default["default"]({}, styles$3.isLinkCopied, linkCopied)])
+  }, /*#__PURE__*/React__default["default"].createElement("input", {
+    className: styles$3.screenUrlInput,
+    type: "text",
+    value: url,
+    onClick: onClickLinkInput,
+    readOnly: true
+  }), /*#__PURE__*/React__default["default"].createElement(components.Button, {
+    className: styles$3.copyUrlButton,
+    onClick: onClickCopy,
+    focusable: opened
+  }, /*#__PURE__*/React__default["default"].createElement(LinkIcon, {
+    className: styles$3.linkIcon
+  })), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: styles$3.successfulCopyMessage
+  }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
+    id: "XRmkEh",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Link copied to clipboard!"
+    }]
+  })))))));
 };
 
 ShareModal.propTypes = propTypes$9;
 ShareModal.defaultProps = defaultProps$9;
 
-var styles$2 = {"container":"micromag-viewer-partials-share-button-container","shareModal":"micromag-viewer-partials-share-button-shareModal"};
+var styles$2 = {"container":"micromag-viewer-partials-share-button-container"};
 
 var propTypes$8 = {
   title: PropTypes__default["default"].string,
@@ -972,8 +1126,9 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
     var screenId = item.screenId,
         _item$current = item.current,
         current = _item$current === void 0 ? false : _item$current,
-        screen = item.screen;
-        item.count;
+        screen = item.screen,
+        _item$count = item.count,
+        count = _item$count === void 0 ? 1 : _item$count;
     var screenAriaLabel = "".concat(intl.formatMessage({
       id: "LkVfwW",
       defaultMessage: [{
@@ -1003,16 +1158,20 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
     }, /*#__PURE__*/React__default["default"].createElement("div", {
       className: styles$4.screenContainer,
       ref: index === 0 ? firstScreenContainerRef : null
-    }, screenWidth > 0 && screenHeight > 0 ? /*#__PURE__*/React__default["default"].createElement(components.ScreenPreview, {
+    }, count > 1 ? /*#__PURE__*/React__default["default"].createElement("div", {
+      className: styles$4.subScreenBadge
+    }, /*#__PURE__*/React__default["default"].createElement("span", {
+      className: styles$4.subScreenCount
+    }, count), /*#__PURE__*/React__default["default"].createElement(StackIcon, {
+      className: styles$4.subScreenIcon
+    })) : null, screenWidth > 0 && screenHeight > 0 ? /*#__PURE__*/React__default["default"].createElement(components.ScreenPreview, {
       screenWidth: screenWidth,
       screenHeight: screenHeight,
       width: thumbWidth,
       screen: screen,
       focusable: focusable,
       active: focusable,
-      withSize: true // withStack
-      // stackCount={count}
-
+      withSize: true
     }) : null, current ? /*#__PURE__*/React__default["default"].createElement("div", {
       className: styles$4.activeScreenBorder,
       style: borderPrimaryColorStyle
@@ -1827,7 +1986,7 @@ var Viewer = function Viewer(_ref) {
   var _useMemo = React.useMemo(function () {
     return neighborScreensMounted !== null ? {
       startIndex: Math.max(screenIndex - (neighborScreensActive + neighborScreensMounted), 0),
-      endIndex: Math.min(screenIndex + (neighborScreensActive + neighborScreensMounted), screensCount - 1)
+      endIndex: Math.min(screenIndex + (neighborScreensActive + neighborScreensMounted), screensCount)
     } : {
       startIndex: 0,
       endIndex: screensCount - 1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/viewer",
-    "version": "0.3.114",
+    "version": "0.3.117",
     "description": "",
     "keywords": [
         "javascript"
@@ -59,12 +59,12 @@
         "@fortawesome/fontawesome-svg-core": "^1.2.32",
         "@fortawesome/free-solid-svg-icons": "^5.15.1",
         "@fortawesome/react-fontawesome": "^0.1.13",
-        "@micromag/core": "^0.3.112",
-        "@micromag/element-scroll": "^0.3.112",
-        "@micromag/elements": "^0.3.113",
-        "@micromag/fields": "^0.3.112",
-        "@micromag/intl": "^0.3.112",
-        "@micromag/screens": "^0.3.113",
+        "@micromag/core": "^0.3.117",
+        "@micromag/element-scroll": "^0.3.117",
+        "@micromag/elements": "^0.3.117",
+        "@micromag/fields": "^0.3.117",
+        "@micromag/intl": "^0.3.117",
+        "@micromag/screens": "^0.3.117",
         "@react-spring/core": "^9.1.1",
         "@react-spring/web": "^9.1.1",
         "@use-gesture/react": "^10.2.4",
@@ -81,5 +81,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "53869315306f72521b9e5c8e68570e4991564f61"
+    "gitHead": "eab1c9a0b8c19d747fee6472158779f33b1f18d3"
 }