@micromag/screen-image 0.4.49 → 0.4.51

package/es/index.js

@@ -1,8 +1,9 @@
 import { FormattedMessage, defineMessage } from 'react-intl';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import classNames from 'classnames';
-import React, { useState, useCallback, useMemo } from 'react';
+import { useState, useCallback, useMemo } from 'react';
 import { ScreenElement } from '@micromag/core/components';
 import { useScreenSize, useScreenRenderContext, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef } from '@micromag/core/contexts';
 import { useDimensionObserver } from '@micromag/core/hooks';
@@ -15,13 +16,12 @@ import Heading from '@micromag/element-heading';
 import Layout from '@micromag/element-layout';
 import Text from '@micromag/element-text';
 import Visual from '@micromag/element-visual';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
 import _extends from '@babel/runtime/helpers/extends';
 
 var styles = {"container":"micromag-screen-image-container","background":"micromag-screen-image-background","content":"micromag-screen-image-content","emptyImage":"micromag-screen-image-emptyImage","emptyTitle":"micromag-screen-image-emptyTitle","emptyText":"micromag-screen-image-emptyText","emptyLegend":"micromag-screen-image-emptyLegend","imageContainer":"micromag-screen-image-imageContainer","image":"micromag-screen-image-image","placeholderImage":"micromag-screen-image-placeholderImage","isPlaceholder":"micromag-screen-image-isPlaceholder","layout":"micromag-screen-image-layout","isCard":"micromag-screen-image-isCard","isCardReverse":"micromag-screen-image-isCardReverse","footer":"micromag-screen-image-footer","isFullscreen":"micromag-screen-image-isFullscreen","header":"micromag-screen-image-header"};
 
-// NOTE: should this be a scrolling element ?
-
 function ImageScreen(_ref) {
   var _ref$layout = _ref.layout,
     layout = _ref$layout === void 0 ? 'normal' : _ref$layout,
@@ -124,45 +124,45 @@ function ImageScreen(_ref) {
     marginTop: isCardReverse && !hasHeader ? finalSpacing : finalSpacing / 2,
     marginBottom: isCard && !hasHeader ? finalSpacing : finalSpacing / 2
   } : null;
-  var items = [/*#__PURE__*/React.createElement("div", {
-    key: "image",
+  var items = [/*#__PURE__*/jsx("div", {
     ref: imageCntRef,
     className: styles.imageContainer,
     style: !isPlaceholder ? {
       margin: imageMargin
-    } : null
-  }, /*#__PURE__*/React.createElement(ScreenElement, {
-    placeholder: "image",
-    placeholderProps: {
-      className: styles.placeholderImage,
-      height: '100%'
-    },
-    emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
-      id: "ebsPd4",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Image"
-      }]
-    }),
-    emptyClassName: styles.emptyImage,
-    isEmpty: !hasImage
-  }, hasImage ? /*#__PURE__*/React.createElement(Visual, {
-    className: styles.image,
-    media: image,
-    objectFit: finalImageFit,
-    width: imageWidth,
-    height: imageHeight,
-    resolution: resolution,
-    playing: backgroundPlaying,
-    muted: muted,
-    active: active,
-    shouldLoad: mediaShouldLoad,
-    withoutVideo: isPreview,
-    onLoaded: onImageLoaded
-  }) : null)), withTitle && /*#__PURE__*/React.createElement(ScreenElement, {
-    key: "title",
+    } : null,
+    children: /*#__PURE__*/jsx(ScreenElement, {
+      placeholder: "image",
+      placeholderProps: {
+        className: styles.placeholderImage,
+        height: '100%'
+      },
+      emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
+        id: "ebsPd4",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Image"
+        }]
+      }),
+      emptyClassName: styles.emptyImage,
+      isEmpty: !hasImage,
+      children: hasImage ? /*#__PURE__*/jsx(Visual, {
+        className: styles.image,
+        media: image,
+        objectFit: finalImageFit,
+        width: imageWidth,
+        height: imageHeight,
+        resolution: resolution,
+        playing: backgroundPlaying,
+        muted: muted,
+        active: active,
+        shouldLoad: mediaShouldLoad,
+        withoutVideo: isPreview,
+        onLoaded: onImageLoaded
+      }) : null
+    })
+  }, "image"), withTitle && /*#__PURE__*/jsx(ScreenElement, {
     placeholder: "title",
-    emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
+    emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
       id: "2ZOPe+",
       defaultMessage: [{
         "type": 0,
@@ -170,13 +170,14 @@ function ImageScreen(_ref) {
       }]
     }),
     emptyClassName: styles.emptyTitle,
-    isEmpty: !hasTitle
-  }, hasTitle ? /*#__PURE__*/React.createElement("div", {
-    style: itemMarginStyle
-  }, /*#__PURE__*/React.createElement(Heading, title)) : null), withText && /*#__PURE__*/React.createElement(ScreenElement, {
-    key: "text",
+    isEmpty: !hasTitle,
+    children: hasTitle ? /*#__PURE__*/jsx("div", {
+      style: itemMarginStyle,
+      children: /*#__PURE__*/jsx(Heading, _objectSpread({}, title))
+    }) : null
+  }, "title"), withText && /*#__PURE__*/jsx(ScreenElement, {
     placeholder: "text",
-    emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
+    emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
       id: "z4CiV1",
       defaultMessage: [{
         "type": 0,
@@ -184,13 +185,14 @@ function ImageScreen(_ref) {
       }]
     }),
     emptyClassName: styles.emptyText,
-    isEmpty: !hasText
-  }, hasText ? /*#__PURE__*/React.createElement("div", {
-    style: itemMarginStyle
-  }, /*#__PURE__*/React.createElement(Text, text)) : null), withLegend && /*#__PURE__*/React.createElement(ScreenElement, {
-    key: "legend",
+    isEmpty: !hasText,
+    children: hasText ? /*#__PURE__*/jsx("div", {
+      style: itemMarginStyle,
+      children: /*#__PURE__*/jsx(Text, _objectSpread({}, text))
+    }) : null
+  }, "text"), withLegend && /*#__PURE__*/jsx(ScreenElement, {
     placeholder: "shortText",
-    emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
+    emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
       id: "dqnkQk",
       defaultMessage: [{
         "type": 0,
@@ -198,10 +200,12 @@ function ImageScreen(_ref) {
       }]
     }),
     emptyClassName: styles.emptyLegend,
-    isEmpty: !hasLegend
-  }, hasLegend ? /*#__PURE__*/React.createElement("div", {
-    style: itemMarginStyle
-  }, /*#__PURE__*/React.createElement(Text, legend)) : null)];
+    isEmpty: !hasLegend,
+    children: hasLegend ? /*#__PURE__*/jsx("div", {
+      style: itemMarginStyle,
+      children: /*#__PURE__*/jsx(Text, _objectSpread({}, legend))
+    }) : null
+  }, "legend")];
   if (isReversed) {
     items.reverse();
   } else if (isTitleTop) {
@@ -219,87 +223,92 @@ function ImageScreen(_ref) {
     paddingTop = current && !isPreview ? viewerTopHeight : 0;
     paddingBottom = current && !isPreview ? viewerBottomHeight : 0;
   }
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/jsxs("div", {
     className: classNames([styles.container, className, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles.isReversed, isReversed), styles.isPlaceholder, isPlaceholder), styles.isCard, isCard), styles.isCardReverse, isCardReverse), styles.isFullscreen, isFullscreen)]),
-    "data-screen-ready": ready
-  }, /*#__PURE__*/React.createElement(Container, {
-    width: width,
-    height: height,
-    className: styles.content
-  }, /*#__PURE__*/React.createElement(Layout, {
-    className: styles.layout,
-    fullscreen: true,
-    style: !isPlaceholder ? {
-      padding: finalSpacing / 2,
-      paddingTop: paddingTop,
-      paddingBottom: paddingBottom
-    } : null
-  }, !isPlaceholder && hasHeader ? /*#__PURE__*/React.createElement("div", {
-    className: styles.header,
-    style: isFullscreen || isCardReverse ? {
-      paddingTop: hasHeader ? spacing / 2 : spacing,
-      paddingBottom: hasHeader ? spacing / 2 : spacing,
-      paddingLeft: isCardReverse ? spacing / 2 : spacing,
-      paddingRight: isCardReverse ? spacing / 2 : spacing,
-      transform: !isPreview ? "translate(0, ".concat(viewerTopHeight, "px)") : null
-    } : {
-      paddingTop: isCardLayout ? spacing / 2 : null,
-      paddingBottom: isCardLayout ? spacing : spacing / 2,
-      paddingLeft: spacing / 2,
-      paddingRight: spacing / 2
-    }
-  }, /*#__PURE__*/React.createElement(Header, header)) : null, items, !isPlaceholder && hasFooter ? /*#__PURE__*/React.createElement("div", {
-    className: styles.footer,
-    style: isFullscreen || isCardReverse ? {
-      paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
-      paddingRight: Math.max(spacing / 2, viewerBottomSidesWidth),
-      paddingTop: spacing / 2,
-      paddingBottom: spacing / 2,
-      transform: !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null
-    } : {
-      paddingLeft: Math.max(viewerBottomSidesWidth - spacing, 0),
-      paddingRight: Math.max(viewerBottomSidesWidth - spacing, 0),
-      paddingTop: isCardLayout ? spacing / 2 : null,
-      paddingBottom: isCardLayout ? spacing / 2 : null
-    }
-  }, /*#__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__*/jsxs(Layout, {
+        className: styles.layout,
+        fullscreen: true,
+        style: !isPlaceholder ? {
+          padding: finalSpacing / 2,
+          paddingTop: paddingTop,
+          paddingBottom: paddingBottom
+        } : null,
+        children: [!isPlaceholder && hasHeader ? /*#__PURE__*/jsx("div", {
+          className: styles.header,
+          style: isFullscreen || isCardReverse ? {
+            paddingTop: hasHeader ? spacing / 2 : spacing,
+            paddingBottom: hasHeader ? spacing / 2 : spacing,
+            paddingLeft: isCardReverse ? spacing / 2 : spacing,
+            paddingRight: isCardReverse ? spacing / 2 : spacing,
+            transform: !isPreview ? "translate(0, ".concat(viewerTopHeight, "px)") : null
+          } : {
+            paddingTop: isCardLayout ? spacing / 2 : null,
+            paddingBottom: isCardLayout ? spacing : spacing / 2,
+            paddingLeft: spacing / 2,
+            paddingRight: spacing / 2
+          },
+          children: /*#__PURE__*/jsx(Header, _objectSpread({}, header))
+        }) : null, items, !isPlaceholder && hasFooter ? /*#__PURE__*/jsx("div", {
+          className: styles.footer,
+          style: isFullscreen || isCardReverse ? {
+            paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
+            paddingRight: Math.max(spacing / 2, viewerBottomSidesWidth),
+            paddingTop: spacing / 2,
+            paddingBottom: spacing / 2,
+            transform: !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null
+          } : {
+            paddingLeft: Math.max(viewerBottomSidesWidth - spacing, 0),
+            paddingRight: Math.max(viewerBottomSidesWidth - spacing, 0),
+            paddingTop: isCardLayout ? spacing / 2 : null,
+            paddingBottom: isCardLayout ? spacing / 2 : null
+          },
+          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]
+  });
 }
 
 function ImageLegendScreen(_ref) {
   var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
-  return /*#__PURE__*/React.createElement(ImageScreen, Object.assign({}, props, {
+  return /*#__PURE__*/jsx(ImageScreen, _objectSpread(_objectSpread({}, props), {}, {
     withLegend: true
   }));
 }
 
 function ImageTextScreen(_ref) {
   var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
-  return /*#__PURE__*/React.createElement(ImageScreen, Object.assign({}, props, {
+  return /*#__PURE__*/jsx(ImageScreen, _objectSpread(_objectSpread({}, props), {}, {
     withText: true
   }));
 }
 
 function ImageTitleScreen(_ref) {
   var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
-  return /*#__PURE__*/React.createElement(ImageScreen, Object.assign({}, props, {
+  return /*#__PURE__*/jsx(ImageScreen, _objectSpread(_objectSpread({}, props), {}, {
     withTitle: true
   }));
 }
 
 function ImageTitleTextScreen(_ref) {
   var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
-  return /*#__PURE__*/React.createElement(ImageScreen, Object.assign({}, props, {
+  return /*#__PURE__*/jsx(ImageScreen, _objectSpread(_objectSpread({}, props), {}, {
     withTitle: true,
     withText: true
   }));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-image",
-    "version": "0.4.49",
+    "version": "0.4.51",
     "private": false,
     "description": "",
     "keywords": [
@@ -61,16 +61,16 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.28.6",
-        "@micromag/core": "^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-text": "^0.4.49",
-        "@micromag/element-visual": "^0.4.49",
-        "@micromag/transforms": "^0.4.49",
+        "@micromag/core": "^0.4.51",
+        "@micromag/element-background": "^0.4.51",
+        "@micromag/element-container": "^0.4.51",
+        "@micromag/element-footer": "^0.4.51",
+        "@micromag/element-header": "^0.4.51",
+        "@micromag/element-heading": "^0.4.51",
+        "@micromag/element-layout": "^0.4.51",
+        "@micromag/element-text": "^0.4.51",
+        "@micromag/element-visual": "^0.4.51",
+        "@micromag/transforms": "^0.4.51",
         "classnames": "^2.2.6",
         "lodash": "^4.17.23",
         "react-intl": "^8.1.3 || ^10.0.0",
@@ -80,6 +80,6 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "0a225ff29387217cccb0fcc5a731e23c74bd202e",
+    "gitHead": "985a2370829c9ac8901ea97bf20bfc98ab158439",
     "types": "es/index.d.ts"
 }