@micromag/screen-article 0.4.49 → 0.4.50

package/es/index.js

@@ -1,9 +1,10 @@
 import { useIntl, FormattedMessage, defineMessage } from 'react-intl';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import classNames from 'classnames';
 import dayjs from 'dayjs';
-import React, { useMemo, useState, useCallback } from 'react';
+import { useMemo, useState, useCallback } from 'react';
 import { ScreenElement } from '@micromag/core/components';
 import { useScreenSize, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef, useScreenRenderContext } from '@micromag/core/contexts';
 import { useTrackScreenEvent, useDimensionObserver } from '@micromag/core/hooks';
@@ -18,6 +19,7 @@ import Layout from '@micromag/element-layout';
 import Scroll from '@micromag/element-scroll';
 import Text from '@micromag/element-text';
 import Visual from '@micromag/element-visual';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
 var styles = {"container":"micromag-screen-article-container","background":"micromag-screen-article-background","content":"micromag-screen-article-content","layout":"micromag-screen-article-layout","emptyTitle":"micromag-screen-article-emptyTitle","emptyAuthor":"micromag-screen-article-emptyAuthor","emptySubtitle":"micromag-screen-article-emptySubtitle","emptyText":"micromag-screen-article-emptyText","emptySurtitle":"micromag-screen-article-emptySurtitle","emptyDate":"micromag-screen-article-emptyDate","main":"micromag-screen-article-main","hasText":"micromag-screen-article-hasText","visualContainer":"micromag-screen-article-visualContainer","surtitle":"micromag-screen-article-surtitle","subtitle":"micromag-screen-article-subtitle","date":"micromag-screen-article-date","title":"micromag-screen-article-title","author":"micromag-screen-article-author","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"};
 
@@ -129,9 +131,9 @@ function ArticleScreen(_ref) {
       day: '2-digit'
     }), "</p>") : null;
   }, [partialDate]);
-  var imageElement = /*#__PURE__*/React.createElement(ScreenElement, {
+  var imageElement = /*#__PURE__*/jsx(ScreenElement, {
     placeholder: "image",
-    emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
+    emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
       id: "ebsPd4",
       defaultMessage: [{
         "type": 0,
@@ -139,24 +141,25 @@ function ArticleScreen(_ref) {
       }]
     }),
     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,
-    shouldLoad: mediaShouldLoad,
-    resolution: resolution,
-    className: styles.visual
-  }) : null));
-  var titleElement = /*#__PURE__*/React.createElement(ScreenElement, {
-    key: "title",
+    isEmpty: !hasImage,
+    children: /*#__PURE__*/jsx("div", {
+      ref: imageCntRef,
+      className: styles.visualContainer,
+      children: hasImage ? /*#__PURE__*/jsx(Visual, {
+        media: image
+        // width={width - spacing * 2} // in layout flow
+        ,
+        width: width,
+        height: mediaHeight,
+        shouldLoad: mediaShouldLoad,
+        resolution: resolution,
+        className: styles.visual
+      }) : null
+    })
+  });
+  var titleElement = /*#__PURE__*/jsx(ScreenElement, {
     placeholder: "title",
-    emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
+    emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
       id: "2ZOPe+",
       defaultMessage: [{
         "type": 0,
@@ -164,14 +167,14 @@ function ArticleScreen(_ref) {
       }]
     }),
     emptyClassName: styles.emptyTitle,
-    isEmpty: !hasTitle
-  }, hasTitle ? /*#__PURE__*/React.createElement(Heading, Object.assign({
-    className: styles.title
-  }, title)) : null);
-  var surtitleElement = /*#__PURE__*/React.createElement(ScreenElement, {
-    key: "surtitle",
+    isEmpty: !hasTitle,
+    children: hasTitle ? /*#__PURE__*/jsx(Heading, _objectSpread({
+      className: styles.title
+    }, title)) : null
+  }, "title");
+  var surtitleElement = /*#__PURE__*/jsx(ScreenElement, {
     placeholder: "line",
-    emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
+    emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
       id: "vdWMTA",
       defaultMessage: [{
         "type": 0,
@@ -179,14 +182,14 @@ function ArticleScreen(_ref) {
       }]
     }),
     emptyClassName: styles.emptySurtitle,
-    isEmpty: !hasSurtitle
-  }, hasSurtitle ? /*#__PURE__*/React.createElement(Text, Object.assign({
-    className: styles.surtitle
-  }, surtitle)) : null);
-  var subtitleElement = /*#__PURE__*/React.createElement(ScreenElement, {
-    key: "subtitle",
+    isEmpty: !hasSurtitle,
+    children: hasSurtitle ? /*#__PURE__*/jsx(Text, _objectSpread({
+      className: styles.surtitle
+    }, surtitle)) : null
+  }, "surtitle");
+  var subtitleElement = /*#__PURE__*/jsx(ScreenElement, {
     placeholder: "line",
-    emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
+    emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
       id: "d60tSn",
       defaultMessage: [{
         "type": 0,
@@ -194,14 +197,14 @@ function ArticleScreen(_ref) {
       }]
     }),
     emptyClassName: styles.emptySubtitle,
-    isEmpty: !hasSubtitle
-  }, hasSubtitle ? /*#__PURE__*/React.createElement(Text, Object.assign({
-    className: styles.subtitle
-  }, subtitle)) : null);
-  var dateElement = /*#__PURE__*/React.createElement(ScreenElement, {
-    key: "date",
+    isEmpty: !hasSubtitle,
+    children: hasSubtitle ? /*#__PURE__*/jsx(Text, _objectSpread({
+      className: styles.subtitle
+    }, subtitle)) : null
+  }, "subtitle");
+  var dateElement = /*#__PURE__*/jsx(ScreenElement, {
     placeholder: "line",
-    emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
+    emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
       id: "/MsgWe",
       defaultMessage: [{
         "type": 0,
@@ -209,16 +212,16 @@ function ArticleScreen(_ref) {
       }]
     }),
     emptyClassName: styles.emptyDate,
-    isEmpty: !hasDate
-  }, hasDate ? /*#__PURE__*/React.createElement(Text, Object.assign({
-    className: styles.date
-  }, date, {
-    body: finalDate
-  })) : null);
-  var authorElement = /*#__PURE__*/React.createElement(ScreenElement, {
-    key: "author",
+    isEmpty: !hasDate,
+    children: hasDate ? /*#__PURE__*/jsx(Text, _objectSpread(_objectSpread({
+      className: styles.date
+    }, date), {}, {
+      body: finalDate
+    })) : null
+  }, "date");
+  var authorElement = /*#__PURE__*/jsxs(ScreenElement, {
     placeholder: "line",
-    emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
+    emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
       id: "xYqGzM",
       defaultMessage: [{
         "type": 0,
@@ -226,15 +229,16 @@ function ArticleScreen(_ref) {
       }]
     }),
     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(ScreenElement, {
+    isEmpty: !hasAuthor && !hasSimpleAuthor,
+    children: [hasSimpleAuthor ? /*#__PURE__*/jsx(Text, _objectSpread({
+      className: styles.author
+    }, author)) : null, hasAuthor ? /*#__PURE__*/jsx(Author, {
+      author: author
+    }) : null]
+  }, "author");
+  var contentElement = /*#__PURE__*/jsx(ScreenElement, {
     placeholder: "text",
-    emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
+    emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
       id: "z4CiV1",
       defaultMessage: [{
         "type": 0,
@@ -242,10 +246,11 @@ function ArticleScreen(_ref) {
       }]
     }),
     emptyClassName: styles.emptyText,
-    isEmpty: !hasText
-  }, hasText ? /*#__PURE__*/React.createElement(Text, Object.assign({
-    className: styles.text
-  }, text)) : null);
+    isEmpty: !hasText,
+    children: hasText ? /*#__PURE__*/jsx(Text, _objectSpread({
+      className: styles.text
+    }, text)) : null
+  });
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     scrolledBottom = _useState2[0],
@@ -269,55 +274,62 @@ function ArticleScreen(_ref) {
   var onScrolledNotBottom = useCallback(function () {
     setScrolledBottom(false);
   }, [setScrolledBottom]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/jsxs("div", {
     className: classNames([styles.container, className, _defineProperty({}, styles.isPlaceholder, isPlaceholder)]),
-    "data-screen-ready": ready
-  }, /*#__PURE__*/React.createElement(Container, {
-    width: width,
-    height: height,
-    className: styles.content
-  }, /*#__PURE__*/React.createElement(Scroll, {
-    disabled: scrollingDisabled,
-    onScrolledTrigger: onScrolledTrigger,
-    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, subtitleElement), 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);
+    "data-screen-ready": ready,
+    children: [/*#__PURE__*/jsx(Container, {
+      width: width,
+      height: height,
+      className: styles.content,
+      children: /*#__PURE__*/jsx(Scroll, {
+        disabled: scrollingDisabled,
+        onScrolledTrigger: onScrolledTrigger,
+        onScrolledBottom: onScrolledBottom,
+        onScrolledNotBottom: onScrolledNotBottom,
+        withShadow: true,
+        children: /*#__PURE__*/jsxs(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,
+          children: [!isPlaceholder && hasHeader ? /*#__PURE__*/jsx("div", {
+            style: {
+              height: hasImage && imageHeight > 0 ? 0 : 'auto',
+              paddingBottom: imageHeight > 0 ? imageHeight - viewerTopHeight : spacing
+            },
+            children: /*#__PURE__*/jsx(Header, _objectSpread({}, header))
+          }, "header") : null, /*#__PURE__*/jsxs("div", {
+            className: classNames([styles.main, _defineProperty({}, styles.hasText, hasText && hasAuthor)]),
+            children: [imageElement, /*#__PURE__*/jsxs("div", {
+              className: styles.topContent,
+              children: [surtitleElement, dateElement]
+            }), titleElement, authorElement, subtitleElement]
+          }), contentElement, !isPlaceholder && hasFooter ? /*#__PURE__*/jsx("div", {
+            className: classNames([styles.footer, _defineProperty({}, styles.disabled, !scrolledBottom)]),
+            style: {
+              paddingLeft: Math.max(viewerBottomSidesWidth - spacing, 0),
+              paddingRight: Math.max(viewerBottomSidesWidth - spacing, 0),
+              paddingTop: spacing
+            },
+            children: /*#__PURE__*/jsx(Footer, _objectSpread({}, footerProps))
+          }) : null]
+        })
+      })
+    }), !isPlaceholder ? /*#__PURE__*/jsx(Background, {
+      background: background,
+      width: width,
+      height: height,
+      resolution: resolution,
+      playing: backgroundPlaying,
+      muted: muted,
+      shouldLoad: mediaShouldLoad,
+      mediaRef: mediaRef,
+      withoutVideo: isPreview,
+      className: styles.background
+    }) : null]
+  });
 }
 
 // import * as transforms from './transforms/index';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-article",
-    "version": "0.4.49",
+    "version": "0.4.50",
     "private": false,
     "description": "",
     "keywords": [
@@ -57,19 +57,19 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.28.6",
-        "@micromag/core": "^0.4.49",
-        "@micromag/element-author": "^0.4.49",
-        "@micromag/element-background": "^0.4.49",
-        "@micromag/element-container": "^0.4.49",
-        "@micromag/element-footer": "^0.4.49",
-        "@micromag/element-header": "^0.4.49",
-        "@micromag/element-heading": "^0.4.49",
-        "@micromag/element-layout": "^0.4.49",
-        "@micromag/element-scroll": "^0.4.49",
-        "@micromag/element-stack": "^0.4.49",
-        "@micromag/element-text": "^0.4.49",
-        "@micromag/element-visual": "^0.4.49",
-        "@micromag/transforms": "^0.4.49",
+        "@micromag/core": "^0.4.50",
+        "@micromag/element-author": "^0.4.50",
+        "@micromag/element-background": "^0.4.50",
+        "@micromag/element-container": "^0.4.50",
+        "@micromag/element-footer": "^0.4.50",
+        "@micromag/element-header": "^0.4.50",
+        "@micromag/element-heading": "^0.4.50",
+        "@micromag/element-layout": "^0.4.50",
+        "@micromag/element-scroll": "^0.4.50",
+        "@micromag/element-stack": "^0.4.50",
+        "@micromag/element-text": "^0.4.50",
+        "@micromag/element-visual": "^0.4.50",
+        "@micromag/transforms": "^0.4.50",
         "classnames": "^2.2.6",
         "dayjs": "^1.11.10",
         "lodash": "^4.17.23",
@@ -80,6 +80,6 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "0a225ff29387217cccb0fcc5a731e23c74bd202e",
+    "gitHead": "940d5ca98f8f448b79eaa3e2fa685c3ee95185b8",
     "types": "es/index.d.ts"
 }