@micromag/viewer 0.3.114 → 0.3.117

package/es/index.js

@@ -16,9 +16,9 @@ import classNames from 'classnames';
 import { Helmet } from 'react-helmet';
 import { useIntl, FormattedMessage } from 'react-intl';
 import EventEmitter from 'wolfy87-eventemitter';
-import { Button, ScreenPreview, Screen, Meta, FontFaces } from '@micromag/core/components';
+import { Button, Close, ScreenPreview, Screen, Meta, FontFaces } from '@micromag/core/components';
 import { useDocumentEvent, useResizeObserver, useTrackEvent, useParsedStory, useLoadedFonts, useTrackScreenView, useScreenSizeFromElement, useFullscreen } from '@micromag/core/hooks';
-import { getStyleFromColor, getStyleFromText, getDeviceScreens } from '@micromag/core/utils';
+import { copyToClipboard, getStyleFromColor, getStyleFromText, getDeviceScreens } from '@micromag/core/utils';
 import { useSpring, config } from '@react-spring/core';
 import { animated } from '@react-spring/web';
 import { useDrag } from '@use-gesture/react';
@@ -28,7 +28,7 @@ import { faCompress } from '@fortawesome/free-solid-svg-icons/faCompress';
 import { faExpand } from '@fortawesome/free-solid-svg-icons/faExpand';
 import { faShare } from '@fortawesome/free-solid-svg-icons/faShare';
 import Scroll from '@micromag/element-scroll';
-import { FacebookShareButton, FacebookIcon, TwitterShareButton, TwitterIcon, EmailShareButton, EmailIcon } from 'react-share';
+import { EmailShareButton, EmailIcon, FacebookShareButton, FacebookIcon, TwitterShareButton, TwitterIcon, LinkedinShareButton, LinkedinIcon } from 'react-share';
 
 var home = "/";
 var screen = "/:screen";
@@ -228,7 +228,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.bool,
   active: PropTypes.bool,
   colors: PropTypes.shape({
@@ -241,7 +241,7 @@ var propTypes$c = {
   onClick: PropTypes.func,
   className: PropTypes.string
 };
-var defaultProps$c = {
+var defaultProps$e = {
   current: false,
   active: false,
   colors: null,
@@ -330,18 +330,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.number,
   spacing: PropTypes.number,
   color: PropTypes.string,
   className: PropTypes.string
 };
-var defaultProps$b = {
+var defaultProps$d = {
   size: 100,
   spacing: 8,
   color: 'white',
@@ -373,10 +373,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.oneOf(['horizontal', 'vertical']),
   withShadow: PropTypes.bool,
   items: PropTypes$1.menuItems,
@@ -392,7 +392,7 @@ var propTypes$a = {
   onClose: PropTypes.func,
   className: PropTypes.string
 };
-var defaultProps$a = {
+var defaultProps$c = {
   direction: 'horizontal',
   withShadow: false,
   items: [],
@@ -533,12 +533,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.string
+};
+var defaultProps$b = {
+  className: null
+};
+
+var StackIcon = function StackIcon(_ref) {
+  var className = _ref.className;
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "32",
+    height: "32",
+    viewBox: "0 0 32 32",
+    className: classNames([_defineProperty({}, className, className !== null)])
+  }, /*#__PURE__*/React.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.string
+};
+var defaultProps$a = {
+  className: null
+};
+
+var LinkIcon = function LinkIcon(_ref) {
+  var className = _ref.className;
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "32",
+    height: "32",
+    viewBox: "0 0 32 32",
+    className: classNames([_defineProperty({}, className, className !== null)])
+  }, /*#__PURE__*/React.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.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.string,
@@ -558,7 +612,7 @@ var defaultProps$9 = {
 };
 
 var ShareModal = function ShareModal(_ref) {
-  var _ref2;
+  var _ref3;
 
   var url = _ref.url,
       title = _ref.title,
@@ -566,7 +620,13 @@ var ShareModal = function ShareModal(_ref) {
       className = _ref.className,
       onShare = _ref.onShare,
       onCancel = _ref.onCancel;
-  var containerRef = useRef(null);
+  var modalRef = useRef();
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      linkCopied = _useState2[0],
+      setLinkCopied = _useState2[1];
+
   var onShareButtonClick = useCallback(function (type) {
     if (onShare !== null) {
       onShare(type);
@@ -584,58 +644,152 @@ var ShareModal = function ShareModal(_ref) {
   }, [url, onCancel]);
   var shareIconProps = useMemo(function () {
     return {
-      size: 32,
+      size: 64,
       round: true
     };
   }, []);
+  var onClickCopy = useCallback(function () {
+    copyToClipboard(url).then(function () {
+      setLinkCopied(true);
+      setTimeout(function () {
+        setLinkCopied(false);
+      }, 2000);
+    });
+  }, [setLinkCopied]);
+  var onClickLinkInput = useCallback(function (e) {
+    var target = e.target;
+    target.setSelectionRange(0, target.value.length);
+  }, []);
   var onDocumentClick = 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]);
   useDocumentEvent('click', onDocumentClick, opened);
+  var shareOptions = [{
+    id: 'email',
+    label: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "Lrwi2G",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Email"
+      }]
+    }),
+    icon: /*#__PURE__*/React.createElement(EmailShareButton, Object.assign({}, shareButtonProps, {
+      subject: title,
+      beforeOnClick: function beforeOnClick() {
+        onShareButtonClick('Email');
+        return Promise.resolve();
+      },
+      tabIndex: opened ? null : '-1'
+    }), /*#__PURE__*/React.createElement(EmailIcon, shareIconProps))
+  }, {
+    id: 'facebook',
+    label: 'Facebook',
+    icon: /*#__PURE__*/React.createElement(FacebookShareButton, Object.assign({}, shareButtonProps, {
+      quote: title,
+      beforeOnClick: function beforeOnClick() {
+        onShareButtonClick('Facebook');
+        return Promise.resolve();
+      },
+      tabIndex: opened ? null : '-1'
+    }), /*#__PURE__*/React.createElement(FacebookIcon, shareIconProps))
+  }, {
+    id: 'twitter',
+    label: 'Twitter',
+    icon: /*#__PURE__*/React.createElement(TwitterShareButton, Object.assign({}, shareButtonProps, {
+      title: title,
+      beforeOnClick: function beforeOnClick() {
+        onShareButtonClick('Twitter');
+        return Promise.resolve();
+      },
+      tabIndex: opened ? null : '-1'
+    }), /*#__PURE__*/React.createElement(TwitterIcon, shareIconProps))
+  }, {
+    id: 'linkedin',
+    label: 'LinkedIn',
+    icon: /*#__PURE__*/React.createElement(LinkedinShareButton, Object.assign({}, shareButtonProps, {
+      title: title,
+      beforeOnClick: function beforeOnClick() {
+        onShareButtonClick('LinkedIns');
+        return Promise.resolve();
+      },
+      tabIndex: opened ? null : '-1'
+    }), /*#__PURE__*/React.createElement(LinkedinIcon, shareIconProps))
+  }];
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$3.container, (_ref2 = {}, _defineProperty(_ref2, className, className), _defineProperty(_ref2, styles$3.opened, opened), _ref2)]),
-    ref: containerRef,
+    className: classNames([styles$3.container, (_ref3 = {}, _defineProperty(_ref3, className, className), _defineProperty(_ref3, styles$3.opened, opened), _ref3)]),
     "aria-hidden": opened ? null : '-1'
   }, /*#__PURE__*/React.createElement("div", {
+    className: styles$3.modal,
+    ref: modalRef
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$3.header
+  }, /*#__PURE__*/React.createElement("h2", {
+    className: styles$3.heading
+  }, /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "oL4ueH",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Share"
+    }]
+  })), /*#__PURE__*/React.createElement(Button, {
+    className: styles$3.close,
+    onClick: onCancel,
+    focusable: opened
+  }, /*#__PURE__*/React.createElement(Close, {
+    className: styles$3.closeIcon,
+    border: false
+  }))), /*#__PURE__*/React.createElement("div", {
     className: styles$3.content
   }, /*#__PURE__*/React.createElement("div", {
     className: styles$3.buttons
-  }, /*#__PURE__*/React.createElement(FacebookShareButton, Object.assign({}, shareButtonProps, {
-    quote: title,
-    beforeOnClick: function beforeOnClick() {
-      onShareButtonClick('Facebook');
-      return Promise.resolve();
-    },
-    tabIndex: opened ? null : '-1'
-  }), /*#__PURE__*/React.createElement(FacebookIcon, shareIconProps)), /*#__PURE__*/React.createElement(TwitterShareButton, Object.assign({}, shareButtonProps, {
-    title: title,
-    beforeOnClick: function beforeOnClick() {
-      onShareButtonClick('Twitter');
-      return Promise.resolve();
-    },
-    tabIndex: opened ? null : '-1'
-  }), /*#__PURE__*/React.createElement(TwitterIcon, shareIconProps)), /*#__PURE__*/React.createElement(EmailShareButton, Object.assign({}, shareButtonProps, {
-    subject: title,
-    beforeOnClick: function beforeOnClick() {
-      onShareButtonClick('Email');
-      return Promise.resolve();
-    },
-    tabIndex: opened ? null : '-1'
-  }), /*#__PURE__*/React.createElement(EmailIcon, shareIconProps)))));
+  }, shareOptions.map(function (_ref4) {
+    var id = _ref4.id,
+        label = _ref4.label,
+        icon = _ref4.icon;
+    return /*#__PURE__*/React.createElement("div", {
+      key: id,
+      className: styles$3.shareOption
+    }, icon, /*#__PURE__*/React.createElement("div", {
+      className: styles$3.shareLabel
+    }, label));
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles$3.otherOptions
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$3.copyLink, _defineProperty({}, styles$3.isLinkCopied, linkCopied)])
+  }, /*#__PURE__*/React.createElement("input", {
+    className: styles$3.screenUrlInput,
+    type: "text",
+    value: url,
+    onClick: onClickLinkInput,
+    readOnly: true
+  }), /*#__PURE__*/React.createElement(Button, {
+    className: styles$3.copyUrlButton,
+    onClick: onClickCopy,
+    focusable: opened
+  }, /*#__PURE__*/React.createElement(LinkIcon, {
+    className: styles$3.linkIcon
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles$3.successfulCopyMessage
+  }, /*#__PURE__*/React.createElement(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.string,
@@ -954,8 +1108,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: [{
@@ -985,16 +1140,20 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
     }, /*#__PURE__*/React.createElement("div", {
       className: styles$4.screenContainer,
       ref: index === 0 ? firstScreenContainerRef : null
-    }, screenWidth > 0 && screenHeight > 0 ? /*#__PURE__*/React.createElement(ScreenPreview, {
+    }, count > 1 ? /*#__PURE__*/React.createElement("div", {
+      className: styles$4.subScreenBadge
+    }, /*#__PURE__*/React.createElement("span", {
+      className: styles$4.subScreenCount
+    }, count), /*#__PURE__*/React.createElement(StackIcon, {
+      className: styles$4.subScreenIcon
+    })) : null, screenWidth > 0 && screenHeight > 0 ? /*#__PURE__*/React.createElement(ScreenPreview, {
       screenWidth: screenWidth,
       screenHeight: screenHeight,
       width: thumbWidth,
       screen: screen,
       focusable: focusable,
       active: focusable,
-      withSize: true // withStack
-      // stackCount={count}
-
+      withSize: true
     }) : null, current ? /*#__PURE__*/React.createElement("div", {
       className: styles$4.activeScreenBorder,
       style: borderPrimaryColorStyle
@@ -1809,7 +1968,7 @@ var Viewer = function Viewer(_ref) {
   var _useMemo = 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