@micromag/screen-article 0.3.541 → 0.3.569

package/es/index.js

@@ -312,7 +312,6 @@ var ArticleScreen = function ArticleScreen(_ref) {
 };
 ArticleScreen.propTypes = propTypes;
 ArticleScreen.defaultProps = defaultProps;
-var ArticleScreen$1 = ArticleScreen;
 
 // import * as transforms from './transforms/index';
 
@@ -336,7 +335,7 @@ var definition = [{
       "value": "Article"
     }]
   }),
-  component: ArticleScreen$1,
+  component: ArticleScreen,
   layouts: ['normal'],
   // transforms,
   fields: [{
@@ -462,4 +461,4 @@ var definition = [{
   }]
 }];
 
-export { ArticleScreen$1 as ArticleScreen, definition as default };
+export { ArticleScreen, definition as default };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-article",
-    "version": "0.3.541",
+    "version": "0.3.569",
     "private": false,
     "description": "",
     "keywords": [
@@ -26,12 +26,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",
@@ -57,19 +56,19 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@micromag/core": "^0.3.541",
-        "@micromag/element-author": "^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-scroll": "^0.3.541",
-        "@micromag/element-stack": "^0.3.541",
-        "@micromag/element-text": "^0.3.541",
-        "@micromag/element-visual": "^0.3.541",
-        "@micromag/transforms": "^0.3.541",
+        "@micromag/core": "^0.3.569",
+        "@micromag/element-author": "^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-scroll": "^0.3.569",
+        "@micromag/element-stack": "^0.3.569",
+        "@micromag/element-text": "^0.3.569",
+        "@micromag/element-visual": "^0.3.569",
+        "@micromag/transforms": "^0.3.569",
         "classnames": "^2.2.6",
         "dayjs": "^1.11.10",
         "lodash": "^4.17.21",
@@ -81,5 +80,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "6c04a7e327b5fbc096785c11320b3fbd3c5751c8"
+    "gitHead": "ceb71f23a32ab8df4a1563a1e5cd5598e539de4d"
 }

package/lib/index.js

@@ -1,470 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var reactIntl = require('react-intl');
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
-var classNames = require('classnames');
-var dayjs = require('dayjs');
-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 Author = require('@micromag/element-author');
-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 Scroll = require('@micromag/element-scroll');
-var Text = require('@micromag/element-text');
-var Visual = require('@micromag/element-visual');
-
-var styles = {"container":"micromag-screen-article-container","background":"micromag-screen-article-background","emptySurtitle":"micromag-screen-article-emptySurtitle","emptyDate":"micromag-screen-article-emptyDate","emptyTitle":"micromag-screen-article-emptyTitle","emptyAuthor":"micromag-screen-article-emptyAuthor","emptyText":"micromag-screen-article-emptyText","content":"micromag-screen-article-content","layout":"micromag-screen-article-layout","main":"micromag-screen-article-main","hasText":"micromag-screen-article-hasText","visualContainer":"micromag-screen-article-visualContainer","surtitle":"micromag-screen-article-surtitle","date":"micromag-screen-article-date","title":"micromag-screen-article-title","text":"micromag-screen-article-text","topContent":"micromag-screen-article-topContent","footer":"micromag-screen-article-footer","disabled":"micromag-screen-article-disabled","isPlaceholder":"micromag-screen-article-isPlaceholder"};
-
-var propTypes = {
-  layout: PropTypes.oneOf(['normal']),
-  image: core.PropTypes.imageMedia,
-  title: core.PropTypes.text,
-  surtitle: core.PropTypes.text,
-  date: PropTypes.string,
-  author: PropTypes.shape({}),
-  // author: MicromagPropTypes.text,
-  text: core.PropTypes.text,
-  spacing: PropTypes.number,
-  background: core.PropTypes.backgroundElement,
-  header: core.PropTypes.header,
-  footer: core.PropTypes.footer,
-  current: PropTypes.bool,
-  active: PropTypes.bool,
-  type: PropTypes.string,
-  className: PropTypes.string
-};
-var defaultProps = {
-  layout: 'normal',
-  image: null,
-  title: null,
-  surtitle: null,
-  date: null,
-  author: null,
-  text: null,
-  spacing: 20,
-  background: null,
-  header: null,
-  footer: null,
-  current: true,
-  active: true,
-  type: null,
-  className: null
-};
-var ArticleScreen = function ArticleScreen(_ref) {
-  var image = _ref.image,
-    title = _ref.title,
-    surtitle = _ref.surtitle,
-    date = _ref.date,
-    author = _ref.author,
-    text = _ref.text,
-    spacing = _ref.spacing,
-    background = _ref.background,
-    header = _ref.header,
-    footer = _ref.footer,
-    current = _ref.current,
-    active = _ref.active,
-    type = _ref.type,
-    className = _ref.className;
-  var intl = reactIntl.useIntl();
-  var trackScreenEvent = hooks.useTrackScreenEvent(type);
-  var _useScreenSize = contexts.useScreenSize(),
-    width = _useScreenSize.width,
-    height = _useScreenSize.height,
-    resolution = _useScreenSize.resolution;
-  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 _useDimensionObserver = hooks.useDimensionObserver(),
-    imageCntRef = _useDimensionObserver.ref,
-    imageHeight = _useDimensionObserver.height;
-  var _useScreenRenderConte = contexts.useScreenRenderContext(),
-    isView = _useScreenRenderConte.isView,
-    isPreview = _useScreenRenderConte.isPreview,
-    isPlaceholder = _useScreenRenderConte.isPlaceholder,
-    isEdit = _useScreenRenderConte.isEdit,
-    isStatic = _useScreenRenderConte.isStatic,
-    isCapture = _useScreenRenderConte.isCapture;
-  var backgroundPlaying = current && (isView || isEdit);
-  var mediaShouldLoad = current || active;
-  var ready = true;
-  var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
-  var scrollingDisabled = !isEdit && transitionDisabled || !current;
-  var _ref2 = author || {},
-    _ref2$name = _ref2.name,
-    authorName = _ref2$name === void 0 ? null : _ref2$name,
-    _ref2$image = _ref2.image,
-    authorImage = _ref2$image === void 0 ? null : _ref2$image,
-    authorCollabs = _ref2.collaborator;
-  var hasText = utils.isTextFilled(text);
-  var hasHeader = utils.isHeaderFilled(header);
-  var hasFooter = utils.isFooterFilled(footer);
-  var hasTitle = utils.isTextFilled(title);
-  var hasSurtitle = utils.isTextFilled(surtitle);
-  var hasSimpleAuthor = utils.isTextFilled(author); // legacy
-  var hasAuthor = utils.isTextFilled(authorName) || utils.isImageFilled(authorImage) || utils.isTextFilled(authorCollabs);
-  var hasImage = utils.isImageFilled(image);
-  var hasDate = utils.isTextFilled(date);
-  var footerProps = utils.getFooterProps(footer, {
-    isView: isView,
-    current: current,
-    openWebView: openWebView,
-    isPreview: isPreview
-  });
-  var mediaHeight = React.useMemo(function () {
-    if (!hasImage) {
-      return 0;
-    }
-    var _ref3 = image || {},
-      _ref3$metadata = _ref3.metadata,
-      metadata = _ref3$metadata === void 0 ? {} : _ref3$metadata;
-    var _ref4 = metadata || {},
-      _ref4$width = _ref4.width,
-      initialWidth = _ref4$width === void 0 ? 0 : _ref4$width,
-      _ref4$height = _ref4.height,
-      initialHeight = _ref4$height === void 0 ? 0 : _ref4$height;
-    return width * initialHeight / initialWidth;
-  }, [image]);
-  var partialDate = hasDate ? date.body || null : null;
-  var finalDate = React.useMemo(function () {
-    return partialDate !== null ? "<p>".concat(intl.formatDate(dayjs(partialDate).toDate(), {
-      year: 'numeric',
-      month: 'long',
-      day: '2-digit'
-    }), "</p>") : null;
-  }, [partialDate]);
-  var imageElement = /*#__PURE__*/React.createElement(components.ScreenElement, {
-    placeholder: "image",
-    emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-      id: "ebsPd4",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Image"
-      }]
-    }),
-    emptyClassName: styles.emptyText,
-    isEmpty: !hasImage
-  }, /*#__PURE__*/React.createElement("div", {
-    ref: imageCntRef,
-    className: styles.visualContainer
-  }, hasImage ? /*#__PURE__*/React.createElement(Visual, {
-    media: image
-    // width={width - spacing * 2} // in layout flow
-    ,
-    width: width,
-    height: mediaHeight,
-    resolution: resolution,
-    className: styles.visual
-  }) : null));
-  var titleElement = /*#__PURE__*/React.createElement(components.ScreenElement, {
-    key: "title",
-    placeholder: "title",
-    emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-      id: "2ZOPe+",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Title"
-      }]
-    }),
-    emptyClassName: styles.emptyTitle,
-    isEmpty: !hasTitle
-  }, hasTitle ? /*#__PURE__*/React.createElement(Heading, Object.assign({
-    className: styles.title
-  }, title)) : null);
-  var surtitleElement = /*#__PURE__*/React.createElement(components.ScreenElement, {
-    key: "surtitle",
-    placeholder: "line",
-    emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-      id: "vdWMTA",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Surtitle"
-      }]
-    }),
-    emptyClassName: styles.emptySurtitle,
-    isEmpty: !hasSurtitle
-  }, hasSurtitle ? /*#__PURE__*/React.createElement(Text, Object.assign({
-    className: styles.surtitle
-  }, surtitle)) : null);
-  var dateElement = /*#__PURE__*/React.createElement(components.ScreenElement, {
-    key: "date",
-    placeholder: "line",
-    emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-      id: "/MsgWe",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Date"
-      }]
-    }),
-    emptyClassName: styles.emptyDate,
-    isEmpty: !hasDate
-  }, hasDate ? /*#__PURE__*/React.createElement(Text, Object.assign({
-    className: styles.date
-  }, date, {
-    body: finalDate
-  })) : null);
-  var authorElement = /*#__PURE__*/React.createElement(components.ScreenElement, {
-    key: "author",
-    placeholder: "line",
-    emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-      id: "xYqGzM",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Author"
-      }]
-    }),
-    emptyClassName: styles.emptyAuthor,
-    isEmpty: !hasAuthor && !hasSimpleAuthor
-  }, hasSimpleAuthor ? /*#__PURE__*/React.createElement(Text, Object.assign({
-    className: styles.author
-  }, author)) : null, hasAuthor ? /*#__PURE__*/React.createElement(Author, {
-    author: author
-  }) : null);
-  var contentElement = /*#__PURE__*/React.createElement(components.ScreenElement, {
-    placeholder: "text",
-    emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-      id: "z4CiV1",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Text"
-      }]
-    }),
-    emptyClassName: styles.emptyText,
-    isEmpty: !hasText
-  }, hasText ? /*#__PURE__*/React.createElement(Text, Object.assign({
-    className: styles.text
-  }, text)) : null);
-  var _useState = React.useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    scrolledBottom = _useState2[0],
-    setScrolledBottom = _useState2[1];
-  var onScrolledBottom = React.useCallback(function (_ref5) {
-    var initial = _ref5.initial;
-    if (initial) {
-      trackScreenEvent('scroll', 'Screen');
-    }
-    setScrolledBottom(true);
-  }, [trackScreenEvent]);
-  var onScrolledNotBottom = React.useCallback(function () {
-    setScrolledBottom(false);
-  }, [setScrolledBottom]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.container, _defineProperty(_defineProperty({}, className, className !== null), styles.isPlaceholder, isPlaceholder)]),
-    "data-screen-ready": ready
-  }, /*#__PURE__*/React.createElement(Container, {
-    width: width,
-    height: height,
-    className: styles.content
-  }, /*#__PURE__*/React.createElement(Scroll, {
-    disabled: scrollingDisabled,
-    onScrolledBottom: onScrolledBottom,
-    onScrolledNotBottom: onScrolledNotBottom,
-    withShadow: true
-  }, /*#__PURE__*/React.createElement(Layout, {
-    className: styles.layout,
-    style: !isPlaceholder ? {
-      padding: spacing,
-      paddingTop: hasHeader ? spacing / 2 + (!isPreview ? viewerTopHeight : 0) : spacing / 2 + imageHeight,
-      paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + spacing / 2
-    } : null
-  }, !isPlaceholder && hasHeader ? /*#__PURE__*/React.createElement("div", {
-    key: "header",
-    style: {
-      height: hasImage && imageHeight > 0 ? 0 : 'auto',
-      paddingBottom: imageHeight > 0 ? imageHeight - viewerTopHeight : spacing
-    }
-  }, /*#__PURE__*/React.createElement(Header, header)) : null, /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.main, _defineProperty({}, styles.hasText, hasText && hasAuthor)])
-  }, imageElement, /*#__PURE__*/React.createElement("div", {
-    className: styles.topContent
-  }, surtitleElement, dateElement), titleElement, authorElement), contentElement, !isPlaceholder && hasFooter ? /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.footer, _defineProperty({}, styles.disabled, !scrolledBottom)]),
-    style: {
-      paddingLeft: Math.max(viewerBottomSidesWidth - spacing, 0),
-      paddingRight: Math.max(viewerBottomSidesWidth - spacing, 0),
-      paddingTop: spacing
-    }
-  }, /*#__PURE__*/React.createElement(Footer, footerProps)) : null))), !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
-    background: background,
-    width: width,
-    height: height,
-    resolution: resolution,
-    playing: backgroundPlaying,
-    muted: muted,
-    shouldLoad: mediaShouldLoad,
-    mediaRef: mediaRef,
-    withoutVideo: isPreview,
-    className: styles.background
-  }) : null);
-};
-ArticleScreen.propTypes = propTypes;
-ArticleScreen.defaultProps = defaultProps;
-var ArticleScreen$1 = ArticleScreen;
-
-// import * as transforms from './transforms/index';
-
-var definition = [{
-  id: 'article',
-  type: 'screen',
-  group: {
-    label: reactIntl.defineMessage({
-      id: "fIawTr",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Text"
-      }]
-    }),
-    order: 2
-  },
-  title: reactIntl.defineMessage({
-    id: "ouMwWq",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Article"
-    }]
-  }),
-  component: ArticleScreen$1,
-  layouts: ['normal'],
-  // transforms,
-  fields: [{
-    name: 'image',
-    type: 'visual',
-    label: reactIntl.defineMessage({
-      id: "xsipID",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Image"
-      }]
-    })
-  }, {
-    name: 'title',
-    type: 'heading-element',
-    inline: true,
-    theme: {
-      textStyle: 'header2'
-    },
-    label: reactIntl.defineMessage({
-      id: "N25iDO",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Title"
-      }]
-    })
-  }, {
-    name: 'surtitle',
-    type: 'text-element',
-    label: reactIntl.defineMessage({
-      id: "YD9M2p",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Overtitle"
-      }]
-    })
-  }, {
-    name: 'date',
-    type: 'date-element',
-    label: reactIntl.defineMessage({
-      id: "9AP246",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Date"
-      }]
-    })
-  }, {
-    name: 'author',
-    type: 'author-element',
-    label: reactIntl.defineMessage({
-      id: "73hxYw",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Author"
-      }]
-    })
-  },
-  // {
-  //     name: 'author',
-  //     type: 'text-element',
-  //     label: defineMessage({
-  //         defaultMessage: 'Author',
-  //         description: 'Author field label',
-  //     }),
-  // },
-
-  {
-    name: 'text',
-    type: 'text-modal',
-    label: reactIntl.defineMessage({
-      id: "4E2gbX",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Text"
-      }]
-    })
-  }, {
-    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.ArticleScreen = ArticleScreen$1;
-exports.default = definition;