@micromag/screen-slideshow 0.3.362 → 0.3.369

package/assets/css/styles.css

@@ -1 +1 @@
-.micromag-screen-slideshow-container .micromag-screen-slideshow-background,.micromag-screen-slideshow-container .micromag-screen-slideshow-inner{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-slideshow-container{height:100%;overflow:hidden;position:relative;width:100%}.micromag-screen-slideshow-disabled.micromag-screen-slideshow-container{overflow:hidden;pointer-events:none}.micromag-screen-slideshow-hidden.micromag-screen-slideshow-container{display:none;visibility:hidden}.micromag-screen-slideshow-placeholder.micromag-screen-slideshow-container .micromag-screen-slideshow-content{padding:6px;position:relative}.micromag-screen-slideshow-container .micromag-screen-slideshow-background{z-index:0}.micromag-screen-slideshow-container .micromag-screen-slideshow-content{z-index:1}.micromag-screen-slideshow-container .micromag-screen-slideshow-header{left:0;position:absolute;top:0;width:100%;z-index:2}.micromag-screen-slideshow-container .micromag-screen-slideshow-footer{bottom:0;left:0;position:absolute;width:100%}
+.micromag-screen-slideshow-container .micromag-screen-slideshow-background,.micromag-screen-slideshow-container .micromag-screen-slideshow-inner,.micromag-screen-slideshow-container .micromag-screen-slideshow-placeholder{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-slideshow-container{height:100%;overflow:hidden;position:relative;width:100%}.micromag-screen-slideshow-disabled.micromag-screen-slideshow-container{overflow:hidden;pointer-events:none}.micromag-screen-slideshow-hidden.micromag-screen-slideshow-container{display:none;visibility:hidden}.micromag-screen-slideshow-placeholder.micromag-screen-slideshow-container .micromag-screen-slideshow-content{padding:6px;position:relative}.micromag-screen-slideshow-container .micromag-screen-slideshow-background{z-index:0}.micromag-screen-slideshow-container .micromag-screen-slideshow-content{z-index:1}.micromag-screen-slideshow-container .micromag-screen-slideshow-caption{left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.micromag-screen-slideshow-container .micromag-screen-slideshow-header{left:0;position:absolute;top:0;width:100%;z-index:2}.micromag-screen-slideshow-container .micromag-screen-slideshow-footer{bottom:0;left:0;position:absolute;width:100%}

package/es/index.js

@@ -16,16 +16,14 @@ import Header from '@micromag/element-header';
 import Text from '@micromag/element-text';
 import Visual from '@micromag/element-visual';
 
-var styles = {"container":"micromag-screen-slideshow-container","inner":"micromag-screen-slideshow-inner","background":"micromag-screen-slideshow-background","disabled":"micromag-screen-slideshow-disabled","hidden":"micromag-screen-slideshow-hidden","placeholder":"micromag-screen-slideshow-placeholder","content":"micromag-screen-slideshow-content","header":"micromag-screen-slideshow-header","footer":"micromag-screen-slideshow-footer"};
-
-// TODO: make this happen
+var styles = {"container":"micromag-screen-slideshow-container","placeholder":"micromag-screen-slideshow-placeholder","inner":"micromag-screen-slideshow-inner","background":"micromag-screen-slideshow-background","disabled":"micromag-screen-slideshow-disabled","hidden":"micromag-screen-slideshow-hidden","content":"micromag-screen-slideshow-content","caption":"micromag-screen-slideshow-caption","header":"micromag-screen-slideshow-header","footer":"micromag-screen-slideshow-footer"};
 
 var propTypes = {
-  // layout: PropTypes.oneOf(['top', 'middle', 'bottom']),
   slides: PropTypes.oneOfType([PropTypes$1.imageMedias, PropTypes$1.imageElements]),
   withCaptions: PropTypes.bool,
   spacing: PropTypes.number,
   captionMaxLines: PropTypes.number,
+  transitionDelay: PropTypes.number,
   background: PropTypes$1.backgroundElement,
   header: PropTypes$1.header,
   footer: PropTypes$1.footer,
@@ -35,11 +33,12 @@ var propTypes = {
   className: PropTypes.string
 };
 var defaultProps = {
-  // layout: 'middle',
   withCaptions: false,
   slides: [],
   spacing: 20,
   captionMaxLines: 2,
+  transitionDelay: 1,
+  // in seconds
   background: null,
   header: null,
   footer: null,
@@ -58,6 +57,7 @@ var SlideshowScreen = function SlideshowScreen(_ref) {
     current = _ref.current,
     active = _ref.active,
     spacing = _ref.spacing,
+    transitionDelay = _ref.transitionDelay,
     captionMaxLines = _ref.captionMaxLines,
     transitions = _ref.transitions,
     className = _ref.className;
@@ -120,11 +120,9 @@ var SlideshowScreen = function SlideshowScreen(_ref) {
       width: width,
       height: height
     };
-    // console.log(imageSize);
-    // const { caption = null } = finalImage || {};
-
     var hasImage = media !== null;
     var hasCaption = isTextFilled(caption);
+    var finalTransitionDelay = itemI > 0 ? itemI * (transitionDelay * 1000) : 0;
     return /*#__PURE__*/React.createElement("div", {
       key: "item-".concat(itemI),
       className: styles.gridItem
@@ -135,7 +133,7 @@ var SlideshowScreen = function SlideshowScreen(_ref) {
       }
     }, /*#__PURE__*/React.createElement(Transitions, {
       transitions: transitions,
-      delay: 1,
+      delay: finalTransitionDelay,
       playing: transitionPlaying,
       disabled: transitionDisabled,
       fullscreen: true
@@ -168,7 +166,7 @@ var SlideshowScreen = function SlideshowScreen(_ref) {
       onLoaded: onImageLoaded
     })) : null))), withCaptions ? /*#__PURE__*/React.createElement(Transitions, {
       transitions: transitions,
-      delay: 1,
+      delay: finalTransitionDelay,
       playing: transitionPlaying,
       disabled: transitionDisabled
     }, /*#__PURE__*/React.createElement(ScreenElement, {
@@ -182,12 +180,12 @@ var SlideshowScreen = function SlideshowScreen(_ref) {
       }),
       emptyClassName: styles.emptyCaption,
       isEmpty: !hasCaption
-    }, /*#__PURE__*/React.createElement("div", {
+    }, hasCaption ? /*#__PURE__*/React.createElement("div", {
       className: styles.caption
     }, /*#__PURE__*/React.createElement(Text, Object.assign({}, caption, {
       className: styles.captionText,
       lineClamp: captionMaxLines
-    }))))) : null);
+    }))) : null)) : null);
   });
   return /*#__PURE__*/React.createElement("div", {
     className: classNames([styles.container, (_ref3 = {}, _defineProperty(_ref3, className, className !== null), _defineProperty(_ref3, styles.isPlaceholder, isPlaceholder), _ref3)]),
@@ -202,7 +200,20 @@ var SlideshowScreen = function SlideshowScreen(_ref) {
       paddingTop: !isPreview ? viewerTopHeight : null,
       paddingBottom: (hasFooter ? footerHeight - finalSpacing : 0) + (current && !isPreview ? viewerBottomHeight : 0)
     }
-  }, !isPlaceholder && hasHeader ? /*#__PURE__*/React.createElement("div", {
+  }, isPlaceholder ? /*#__PURE__*/React.createElement(ScreenElement, {
+    placeholder: "image",
+    placeholderProps: {
+      className: styles.placeholder,
+      height: '100%'
+    },
+    emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "ebsPd4",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Image"
+      }]
+    })
+  }) : null, !isPlaceholder && hasHeader ? /*#__PURE__*/React.createElement("div", {
     className: styles.header,
     ref: headerRef,
     style: {
@@ -253,27 +264,26 @@ var definition = [{
     }]
   }),
   component: SlideshowScreen$1,
-  layouts: ['top', 'middle', 'bottom'],
-  // transforms,
   fields: [{
-    name: 'layout',
-    type: 'screen-layout',
-    defaultValue: 'two-vertical-equal',
+    name: 'slides',
+    type: 'visuals-with-caption',
     label: defineMessage({
-      id: "4iBXj2",
+      id: "muYwrB",
       defaultMessage: [{
         "type": 0,
-        "value": "Layout"
+        "value": "Images"
       }]
     })
   }, {
-    name: 'slides',
-    type: 'visuals-with-caption',
+    name: 'transitionDelay',
+    type: 'number',
+    min: 0,
+    "float": true,
     label: defineMessage({
-      id: "muYwrB",
+      id: "/6zaOP",
       defaultMessage: [{
         "type": 0,
-        "value": "Images"
+        "value": "Transition Delay (in seconds)"
       }]
     })
   }, {

package/lib/index.js

@@ -34,16 +34,14 @@ var Header__default = /*#__PURE__*/_interopDefaultLegacy(Header);
 var Text__default = /*#__PURE__*/_interopDefaultLegacy(Text);
 var Visual__default = /*#__PURE__*/_interopDefaultLegacy(Visual);
 
-var styles = {"container":"micromag-screen-slideshow-container","inner":"micromag-screen-slideshow-inner","background":"micromag-screen-slideshow-background","disabled":"micromag-screen-slideshow-disabled","hidden":"micromag-screen-slideshow-hidden","placeholder":"micromag-screen-slideshow-placeholder","content":"micromag-screen-slideshow-content","header":"micromag-screen-slideshow-header","footer":"micromag-screen-slideshow-footer"};
-
-// TODO: make this happen
+var styles = {"container":"micromag-screen-slideshow-container","placeholder":"micromag-screen-slideshow-placeholder","inner":"micromag-screen-slideshow-inner","background":"micromag-screen-slideshow-background","disabled":"micromag-screen-slideshow-disabled","hidden":"micromag-screen-slideshow-hidden","content":"micromag-screen-slideshow-content","caption":"micromag-screen-slideshow-caption","header":"micromag-screen-slideshow-header","footer":"micromag-screen-slideshow-footer"};
 
 var propTypes = {
-  // layout: PropTypes.oneOf(['top', 'middle', 'bottom']),
   slides: PropTypes__default["default"].oneOfType([core.PropTypes.imageMedias, core.PropTypes.imageElements]),
   withCaptions: PropTypes__default["default"].bool,
   spacing: PropTypes__default["default"].number,
   captionMaxLines: PropTypes__default["default"].number,
+  transitionDelay: PropTypes__default["default"].number,
   background: core.PropTypes.backgroundElement,
   header: core.PropTypes.header,
   footer: core.PropTypes.footer,
@@ -53,11 +51,12 @@ var propTypes = {
   className: PropTypes__default["default"].string
 };
 var defaultProps = {
-  // layout: 'middle',
   withCaptions: false,
   slides: [],
   spacing: 20,
   captionMaxLines: 2,
+  transitionDelay: 1,
+  // in seconds
   background: null,
   header: null,
   footer: null,
@@ -76,6 +75,7 @@ var SlideshowScreen = function SlideshowScreen(_ref) {
     current = _ref.current,
     active = _ref.active,
     spacing = _ref.spacing,
+    transitionDelay = _ref.transitionDelay,
     captionMaxLines = _ref.captionMaxLines,
     transitions = _ref.transitions,
     className = _ref.className;
@@ -138,11 +138,9 @@ var SlideshowScreen = function SlideshowScreen(_ref) {
       width: width,
       height: height
     };
-    // console.log(imageSize);
-    // const { caption = null } = finalImage || {};
-
     var hasImage = media !== null;
     var hasCaption = utils.isTextFilled(caption);
+    var finalTransitionDelay = itemI > 0 ? itemI * (transitionDelay * 1000) : 0;
     return /*#__PURE__*/React__default["default"].createElement("div", {
       key: "item-".concat(itemI),
       className: styles.gridItem
@@ -153,7 +151,7 @@ var SlideshowScreen = function SlideshowScreen(_ref) {
       }
     }, /*#__PURE__*/React__default["default"].createElement(components.Transitions, {
       transitions: transitions,
-      delay: 1,
+      delay: finalTransitionDelay,
       playing: transitionPlaying,
       disabled: transitionDisabled,
       fullscreen: true
@@ -186,7 +184,7 @@ var SlideshowScreen = function SlideshowScreen(_ref) {
       onLoaded: onImageLoaded
     })) : null))), withCaptions ? /*#__PURE__*/React__default["default"].createElement(components.Transitions, {
       transitions: transitions,
-      delay: 1,
+      delay: finalTransitionDelay,
       playing: transitionPlaying,
       disabled: transitionDisabled
     }, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
@@ -200,12 +198,12 @@ var SlideshowScreen = function SlideshowScreen(_ref) {
       }),
       emptyClassName: styles.emptyCaption,
       isEmpty: !hasCaption
-    }, /*#__PURE__*/React__default["default"].createElement("div", {
+    }, hasCaption ? /*#__PURE__*/React__default["default"].createElement("div", {
       className: styles.caption
     }, /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({}, caption, {
       className: styles.captionText,
       lineClamp: captionMaxLines
-    }))))) : null);
+    }))) : null)) : null);
   });
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames__default["default"]([styles.container, (_ref3 = {}, _defineProperty__default["default"](_ref3, className, className !== null), _defineProperty__default["default"](_ref3, styles.isPlaceholder, isPlaceholder), _ref3)]),
@@ -220,7 +218,20 @@ var SlideshowScreen = function SlideshowScreen(_ref) {
       paddingTop: !isPreview ? viewerTopHeight : null,
       paddingBottom: (hasFooter ? footerHeight - finalSpacing : 0) + (current && !isPreview ? viewerBottomHeight : 0)
     }
-  }, !isPlaceholder && hasHeader ? /*#__PURE__*/React__default["default"].createElement("div", {
+  }, isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
+    placeholder: "image",
+    placeholderProps: {
+      className: styles.placeholder,
+      height: '100%'
+    },
+    emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
+      id: "ebsPd4",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Image"
+      }]
+    })
+  }) : null, !isPlaceholder && hasHeader ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: styles.header,
     ref: headerRef,
     style: {
@@ -271,27 +282,26 @@ var definition = [{
     }]
   }),
   component: SlideshowScreen$1,
-  layouts: ['top', 'middle', 'bottom'],
-  // transforms,
   fields: [{
-    name: 'layout',
-    type: 'screen-layout',
-    defaultValue: 'two-vertical-equal',
+    name: 'slides',
+    type: 'visuals-with-caption',
     label: reactIntl.defineMessage({
-      id: "4iBXj2",
+      id: "muYwrB",
       defaultMessage: [{
         "type": 0,
-        "value": "Layout"
+        "value": "Images"
       }]
     })
   }, {
-    name: 'slides',
-    type: 'visuals-with-caption',
+    name: 'transitionDelay',
+    type: 'number',
+    min: 0,
+    "float": true,
     label: reactIntl.defineMessage({
-      id: "muYwrB",
+      id: "/6zaOP",
       defaultMessage: [{
         "type": 0,
-        "value": "Images"
+        "value": "Transition Delay (in seconds)"
       }]
     })
   }, {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-slideshow",
-    "version": "0.3.362",
+    "version": "0.3.369",
     "description": "",
     "keywords": [
         "javascript"
@@ -49,15 +49,15 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@micromag/core": "^0.3.362",
-        "@micromag/element-background": "^0.3.362",
-        "@micromag/element-container": "^0.3.362",
-        "@micromag/element-footer": "^0.3.362",
-        "@micromag/element-header": "^0.3.362",
-        "@micromag/element-layout": "^0.3.362",
-        "@micromag/element-text": "^0.3.362",
-        "@micromag/element-visual": "^0.3.362",
-        "@micromag/transforms": "^0.3.362",
+        "@micromag/core": "^0.3.369",
+        "@micromag/element-background": "^0.3.369",
+        "@micromag/element-container": "^0.3.369",
+        "@micromag/element-footer": "^0.3.369",
+        "@micromag/element-header": "^0.3.369",
+        "@micromag/element-layout": "^0.3.369",
+        "@micromag/element-text": "^0.3.369",
+        "@micromag/element-visual": "^0.3.369",
+        "@micromag/transforms": "^0.3.369",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
@@ -67,5 +67,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "21619f51536d95517afabfdf316ef8fc345f6562"
+    "gitHead": "55706624c2879ead4acff84015ad51df2b7d293b"
 }