@micromag/screen-share 0.3.541 → 0.3.569

package/es/index.js

@@ -236,7 +236,6 @@ var ShareScreen = function ShareScreen(_ref) {
 };
 ShareScreen.propTypes = propTypes;
 ShareScreen.defaultProps = defaultProps;
-var ShareScreen$1 = ShareScreen;
 
 // import * as transforms from './transforms/index';
 
@@ -260,7 +259,7 @@ var definition = {
       "value": "Share"
     }]
   }),
-  component: ShareScreen$1,
+  component: ShareScreen,
   layouts: ['top', 'middle', 'bottom'],
   // transforms,
   fields: [{
@@ -472,4 +471,4 @@ var definition = {
   }]
 };
 
-export { ShareScreen$1 as ShareScreen, definition as default };
+export { ShareScreen, definition as default };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-share",
-    "version": "0.3.541",
+    "version": "0.3.569",
     "private": false,
     "description": "",
     "keywords": [
@@ -34,12 +34,11 @@
         }
     ],
     "license": "ISC",
-    "main": "lib/index.js",
+    "type": "module",
     "module": "es/index.js",
     "style": "assets/css/styles.css",
     "exports": {
         ".": {
-            "require": "./lib/index.js",
             "import": "./es/index.js"
         },
         "./assets/css/styles": "./assets/css/styles.css",
@@ -65,16 +64,16 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@micromag/core": "^0.3.541",
-        "@micromag/element-background": "^0.3.541",
-        "@micromag/element-container": "^0.3.541",
-        "@micromag/element-footer": "^0.3.541",
-        "@micromag/element-header": "^0.3.541",
-        "@micromag/element-heading": "^0.3.541",
-        "@micromag/element-layout": "^0.3.541",
-        "@micromag/element-share-options": "^0.3.541",
-        "@micromag/element-text": "^0.3.541",
-        "@micromag/transforms": "^0.3.541",
+        "@micromag/core": "^0.3.569",
+        "@micromag/element-background": "^0.3.569",
+        "@micromag/element-container": "^0.3.569",
+        "@micromag/element-footer": "^0.3.569",
+        "@micromag/element-header": "^0.3.569",
+        "@micromag/element-heading": "^0.3.569",
+        "@micromag/element-layout": "^0.3.569",
+        "@micromag/element-share-options": "^0.3.569",
+        "@micromag/element-text": "^0.3.569",
+        "@micromag/transforms": "^0.3.569",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
@@ -85,5 +84,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "6c04a7e327b5fbc096785c11320b3fbd3c5751c8"
+    "gitHead": "ceb71f23a32ab8df4a1563a1e5cd5598e539de4d"
 }

package/lib/index.js

@@ -1,480 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var reactIntl = require('react-intl');
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
-var classNames = require('classnames');
-var PropTypes = require('prop-types');
-var React = require('react');
-var core = require('@micromag/core');
-var components = require('@micromag/core/components');
-var contexts = require('@micromag/core/contexts');
-var hooks = require('@micromag/core/hooks');
-var utils = require('@micromag/core/utils');
-var Background = require('@micromag/element-background');
-var Container = require('@micromag/element-container');
-var Footer = require('@micromag/element-footer');
-var Header = require('@micromag/element-header');
-var Heading = require('@micromag/element-heading');
-var Layout = require('@micromag/element-layout');
-var ShareOptions = require('@micromag/element-share-options');
-
-var styles = {"container":"micromag-screen-share-container","background":"micromag-screen-share-background","disabled":"micromag-screen-share-disabled","hidden":"micromag-screen-share-hidden","placeholder":"micromag-screen-share-placeholder","content":"micromag-screen-share-content","emptyHeading":"micromag-screen-share-emptyHeading","emptyOptions":"micromag-screen-share-emptyOptions","heading":"micromag-screen-share-heading","layout":"micromag-screen-share-layout","shareOptions":"micromag-screen-share-shareOptions","isCentered":"micromag-screen-share-isCentered","shareButton":"micromag-screen-share-shareButton","header":"micromag-screen-share-header","footer":"micromag-screen-share-footer"};
-
-var propTypes = {
-  layout: PropTypes.oneOf(['top', 'middle', 'bottom']),
-  heading: core.PropTypes.headingElement,
-  shareUrl: PropTypes.string,
-  options: PropTypes.objectOf(PropTypes.bool),
-  buttonsStyle: core.PropTypes.boxStyle,
-  buttonsTextStyle: core.PropTypes.textStyle,
-  centered: PropTypes.bool,
-  spacing: PropTypes.number,
-  background: core.PropTypes.backgroundElement,
-  header: core.PropTypes.header,
-  footer: core.PropTypes.footer,
-  id: PropTypes.string,
-  index: PropTypes.number,
-  current: PropTypes.bool,
-  active: PropTypes.bool,
-  className: PropTypes.string
-};
-var defaultProps = {
-  layout: 'top',
-  heading: null,
-  shareUrl: null,
-  options: null,
-  buttonsStyle: null,
-  buttonsTextStyle: null,
-  centered: false,
-  spacing: 20,
-  background: null,
-  header: null,
-  footer: null,
-  id: null,
-  index: null,
-  current: true,
-  active: true,
-  className: null
-};
-var ShareScreen = function ShareScreen(_ref) {
-  var layout = _ref.layout,
-    heading = _ref.heading,
-    shareUrl = _ref.shareUrl,
-    options = _ref.options,
-    buttonsStyle = _ref.buttonsStyle,
-    buttonsTextStyle = _ref.buttonsTextStyle,
-    centered = _ref.centered,
-    spacing = _ref.spacing,
-    background = _ref.background,
-    header = _ref.header,
-    footer = _ref.footer,
-    id = _ref.id,
-    index = _ref.index,
-    current = _ref.current,
-    active = _ref.active,
-    className = _ref.className;
-  var _useScreenSize = contexts.useScreenSize(),
-    width = _useScreenSize.width,
-    height = _useScreenSize.height,
-    resolution = _useScreenSize.resolution;
-  var _useScreenRenderConte = contexts.useScreenRenderContext(),
-    isView = _useScreenRenderConte.isView,
-    isPreview = _useScreenRenderConte.isPreview,
-    isPlaceholder = _useScreenRenderConte.isPlaceholder,
-    isEdit = _useScreenRenderConte.isEdit;
-  var _useViewerContext = contexts.useViewerContext(),
-    viewerTopHeight = _useViewerContext.topHeight,
-    viewerBottomHeight = _useViewerContext.bottomHeight,
-    viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
-  var _useViewerWebView = contexts.useViewerWebView(),
-    openWebView = _useViewerWebView.open;
-  var _usePlaybackContext = contexts.usePlaybackContext(),
-    muted = _usePlaybackContext.muted;
-  var mediaRef = contexts.usePlaybackMediaRef(current);
-  var backgroundPlaying = current && (isView || isEdit);
-  var backgroundShouldLoad = current || active;
-  var hasHeader = utils.isHeaderFilled(header);
-  var hasFooter = utils.isFooterFilled(footer);
-  var footerProps = utils.getFooterProps(footer, {
-    isView: isView,
-    current: current,
-    openWebView: openWebView,
-    isPreview: isPreview
-  });
-  var _useDimensionObserver = hooks.useDimensionObserver(),
-    headerRef = _useDimensionObserver.ref,
-    _useDimensionObserver2 = _useDimensionObserver.height,
-    headerHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
-  var _useDimensionObserver3 = hooks.useDimensionObserver(),
-    footerRef = _useDimensionObserver3.ref,
-    _useDimensionObserver4 = _useDimensionObserver3.height,
-    footerHeight = _useDimensionObserver4 === void 0 ? 0 : _useDimensionObserver4;
-  var currentUrl = React.useMemo(function () {
-    if (typeof window === 'undefined') return '';
-    var _ref2 = window.location || {},
-      _ref2$hostname = _ref2.hostname,
-      hostname = _ref2$hostname === void 0 ? null : _ref2$hostname,
-      _ref2$pathname = _ref2.pathname,
-      pathname = _ref2$pathname === void 0 ? null : _ref2$pathname;
-    var parts = pathname.split('/');
-    /**
-     * for the last portion of the path, if it's equal to the screen index,
-     * or the screen id, then don't include it in the share URL.
-     * This makes sure we're not doing a `.replace()` that might remove a part
-     * from the slug of the current Micromag.
-     * (e.g. if the url is `/10-reasons-to-lorem-ipsum` and the share screen
-     * is on screen 10, then a string replace would remove the `/10` from the
-     * URL)
-     */
-    return parts.reduce(function (acc, part, i) {
-      return (
-        // it's equal to the screen index, or equal to the screen ID, or it's empty
-        i === parts.length - 1 && parseInt(part, 10) === index || part === id || part === '' ? acc : "".concat(acc, "/").concat(part)
-      );
-    }, hostname);
-  }, [index, id]);
-
-  // if not share URl was specified, default to the currentURL (without the screen index/id part)
-  var finalShareURL = shareUrl || currentUrl;
-  var defaultOptions = options !== null ? ['email', 'facebook', 'twitter', 'linkedin', 'whatsapp'] : [];
-  var selectedOptions = options !== null ? Object.keys(options).reduce(function (acc, key) {
-    if (!options[key]) return acc;
-    return [].concat(_toConsumableArray(acc), [key]);
-  }, []) : defaultOptions;
-  var trackingEnabled = isView;
-  var trackEvent = hooks.useTrackScreenEvent('share');
-  var onClickShare = React.useCallback(function (type) {
-    if (trackingEnabled) {
-      trackEvent('click_share', type, {
-        shareUrl: finalShareURL
-      });
-    }
-  }, [trackEvent]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.container, _defineProperty(_defineProperty({}, className, className !== null), styles.isPlaceholder, isPlaceholder)]),
-    "data-screen-ready": true
-  }, /*#__PURE__*/React.createElement(Container, {
-    width: width,
-    height: height,
-    className: styles.content
-  }, /*#__PURE__*/React.createElement(Layout, {
-    className: styles.layout,
-    verticalAlign: layout,
-    fullscreen: true,
-    style: !isPlaceholder ? {
-      padding: spacing,
-      paddingTop: (!isPreview ? viewerTopHeight : 0) + (headerHeight || spacing),
-      paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (footerHeight || spacing)
-    } : null
-  }, !isPlaceholder && hasHeader ? /*#__PURE__*/React.createElement("div", {
-    className: styles.header,
-    ref: headerRef,
-    style: {
-      paddingTop: spacing / 2,
-      paddingBottom: spacing,
-      paddingLeft: spacing,
-      paddingRight: spacing,
-      transform: "translate(0px, ".concat(viewerTopHeight, "px)")
-    }
-  }, /*#__PURE__*/React.createElement(Header, header)) : null, /*#__PURE__*/React.createElement(components.ScreenElement, {
-    key: "title",
-    placeholder: "title",
-    emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-      id: "X7kRRa",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Heading"
-      }]
-    }),
-    emptyClassName: styles.emptyHeading,
-    isEmpty: !heading || (heading === null || heading === void 0 ? void 0 : heading.body) === ''
-  }, heading ? /*#__PURE__*/React.createElement(Heading, Object.assign({
-    className: classNames([styles.heading])
-  }, heading)) : null), /*#__PURE__*/React.createElement(Layout.Spacer, {
-    key: "spacer",
-    size: 5
-  }), /*#__PURE__*/React.createElement(components.ScreenElement, {
-    key: "share-options",
-    placeholder: "share-options",
-    emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-      id: "RucIeL",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Share options"
-      }]
-    }),
-    emptyClassName: styles.emptyOptions,
-    isEmpty: !options
-  }, /*#__PURE__*/React.createElement(ShareOptions, {
-    className: classNames([styles.shareOptions, _defineProperty({}, styles.isCentered, centered)]),
-    buttonClassName: styles.shareButton,
-    url: finalShareURL,
-    options: selectedOptions,
-    onShare: onClickShare,
-    buttonsStyle: buttonsStyle,
-    buttonsTextStyle: buttonsTextStyle
-  })), !isPlaceholder && hasFooter ? /*#__PURE__*/React.createElement("div", {
-    className: styles.footer,
-    ref: footerRef,
-    style: {
-      paddingTop: spacing,
-      paddingBottom: spacing / 2,
-      paddingLeft: Math.max(viewerBottomSidesWidth - spacing, 0),
-      paddingRight: Math.max(viewerBottomSidesWidth - spacing, 0)
-    }
-  }, /*#__PURE__*/React.createElement(Footer, footerProps)) : null)), !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
-    background: background,
-    width: width,
-    height: height,
-    resolution: resolution,
-    playing: backgroundPlaying,
-    muted: muted,
-    shouldLoad: backgroundShouldLoad,
-    mediaRef: mediaRef,
-    withoutVideo: isPreview,
-    className: styles.background
-  }) : null);
-};
-ShareScreen.propTypes = propTypes;
-ShareScreen.defaultProps = defaultProps;
-var ShareScreen$1 = ShareScreen;
-
-// import * as transforms from './transforms/index';
-
-var definition = {
-  id: 'share',
-  type: 'screen',
-  group: {
-    label: reactIntl.defineMessage({
-      id: "64JlRq",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Share"
-      }]
-    }),
-    order: 12
-  },
-  title: reactIntl.defineMessage({
-    id: "5mk1b+",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Share"
-    }]
-  }),
-  component: ShareScreen$1,
-  layouts: ['top', 'middle', 'bottom'],
-  // transforms,
-  fields: [{
-    name: 'layout',
-    type: 'screen-layout',
-    defaultValue: 'top',
-    label: reactIntl.defineMessage({
-      id: "4iBXj2",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Layout"
-      }]
-    })
-  }, {
-    name: 'shareUrl',
-    type: 'url',
-    label: reactIntl.defineMessage({
-      id: "0R+nB5",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Custom URL"
-      }]
-    }),
-    help: reactIntl.defineMessage({
-      id: "bQsPrs",
-      defaultMessage: [{
-        "type": 0,
-        "value": "If this field is left empty, this Micromag's URL will be shared."
-      }]
-    })
-  }, {
-    name: 'heading',
-    type: 'heading-element',
-    theme: {
-      textStyle: 'heading2'
-    },
-    label: reactIntl.defineMessage({
-      id: "wx5PI0",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Heading"
-      }]
-    })
-  }, {
-    name: 'options',
-    type: 'fields',
-    isList: true,
-    label: reactIntl.defineMessage({
-      id: "4js1kW",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Share Options"
-      }]
-    }),
-    fields: [{
-      name: 'copylink',
-      type: 'toggle',
-      defaultValue: true,
-      label: reactIntl.defineMessage({
-        id: "rKuiKj",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Copy link"
-        }]
-      })
-    }, {
-      name: 'facebook',
-      type: 'toggle',
-      defaultValue: true,
-      label: reactIntl.defineMessage({
-        id: "r+bcpa",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Facebook"
-        }]
-      })
-    }, {
-      name: 'twitter',
-      type: 'toggle',
-      defaultValue: true,
-      label: reactIntl.defineMessage({
-        id: "mlucL+",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Twitter"
-        }]
-      })
-    }, {
-      name: 'linkedin',
-      type: 'toggle',
-      defaultValue: true,
-      label: reactIntl.defineMessage({
-        id: "hvxkzE",
-        defaultMessage: [{
-          "type": 0,
-          "value": "LinkedIn"
-        }]
-      })
-    }, {
-      name: 'whatsapp',
-      type: 'toggle',
-      defaultValue: true,
-      label: reactIntl.defineMessage({
-        id: "3B9cb3",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Whatsapp"
-        }]
-      })
-    },
-    // {
-    //     name: 'facebookMessenger',
-    //     type: 'toggle',
-    //     defaultValue: true,
-    //     label: defineMessage({
-    //         defaultMessage: 'Facebook Messenger',
-    //         description: 'Field label',
-    //     }),
-    // },
-    {
-      name: 'email',
-      type: 'toggle',
-      defaultValue: true,
-      label: reactIntl.defineMessage({
-        id: "LI0Gz4",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Email"
-        }]
-      })
-    }, {
-      name: 'sms',
-      type: 'toggle',
-      defaultValue: true,
-      label: reactIntl.defineMessage({
-        id: "d3va12",
-        defaultMessage: [{
-          "type": 0,
-          "value": "SMS"
-        }]
-      })
-    }]
-  }, {
-    name: 'buttonsTextStyle',
-    type: 'text-style-form',
-    label: reactIntl.defineMessage({
-      id: "gwPu/I",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Buttons text"
-      }]
-    })
-  }, {
-    name: 'buttonsStyle',
-    type: 'box-style-form',
-    label: reactIntl.defineMessage({
-      id: "l5uLMd",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Buttons"
-      }]
-    })
-  }, {
-    name: 'background',
-    type: 'background',
-    label: reactIntl.defineMessage({
-      id: "+MPZRu",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Background"
-      }]
-    })
-  }, {
-    name: 'header',
-    type: 'header',
-    label: reactIntl.defineMessage({
-      id: "rhuDxI",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Header"
-      }]
-    }),
-    theme: {
-      badge: {
-        label: {
-          textStyle: 'badge'
-        },
-        boxStyle: 'badge'
-      }
-    }
-  }, {
-    name: 'footer',
-    type: 'footer',
-    label: reactIntl.defineMessage({
-      id: "g4nybp",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Footer"
-      }]
-    }),
-    theme: {
-      callToAction: {
-        label: {
-          textStyle: 'cta'
-        },
-        boxStyle: 'cta'
-      }
-    }
-  }]
-};
-
-exports.ShareScreen = ShareScreen$1;
-exports.default = definition;