@micromag/screen-timeline 0.3.123 → 0.3.124

package/es/index.js

@@ -5,7 +5,7 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useState, useCallback, useRef, useEffect } from 'react';
+import React, { useMemo, useState, useCallback, useRef, useEffect } from 'react';
 import { PropTypes as PropTypes$1 } from '@micromag/core';
 import { Transitions, ScreenElement } from '@micromag/core/components';
 import { useScreenSize, useViewer, useScreenRenderContext } from '@micromag/core/contexts';
@@ -66,7 +66,7 @@ var defaultProps = {
 };
 
 var Timeline = function Timeline(_ref) {
-  var _ref9;
+  var _ref10;
 
   var layout = _ref.layout,
       items = _ref.items,
@@ -105,9 +105,11 @@ var Timeline = function Timeline(_ref) {
       isStatic = _useScreenRenderConte.isStatic,
       isCapture = _useScreenRenderConte.isCapture;
 
-  var finalItems = isPlaceholder ? _toConsumableArray(new Array(5)).map(function () {
-    return {};
-  }) : items || [null];
+  var finalItems = useMemo(function () {
+    return isPlaceholder ? _toConsumableArray(new Array(5)).map(function () {
+      return {};
+    }) : items || [null];
+  }, [isPlaceholder, items]);
   var itemsCount = finalItems !== null ? finalItems.length : 0;
   var hasItems = finalItems !== null && itemsCount;
   var imagesCount = hasItems ? finalItems.reduce(function (acc, curr) {
@@ -130,8 +132,10 @@ var Timeline = function Timeline(_ref) {
   var backgroundPlaying = current && (isView || isEdit);
   var mediaShouldLoad = current || active;
   var onImageLoaded = useCallback(function () {
-    setImagesLoaded(imagesLoaded + 1);
-  }, [imagesLoaded, setImagesLoaded]);
+    setImagesLoaded(function (count) {
+      return count + 1;
+    });
+  }, [setImagesLoaded]);
   var firstLineRef = useRef(null);
   var firstContentRef = useRef(null);
 
@@ -164,6 +168,10 @@ var Timeline = function Timeline(_ref) {
     }
 
     var typesCount = elementsTypes.length;
+
+    var _ref4 = description || {},
+        descriptionTextStyle = _ref4.textStyle;
+
     return /*#__PURE__*/React.createElement("div", {
       className: styles.item,
       key: "item-".concat(itemI)
@@ -217,6 +225,7 @@ var Timeline = function Timeline(_ref) {
             width: imageWidth,
             resolution: resolution,
             playing: backgroundPlaying,
+            active: active,
             shouldLoad: mediaShouldLoad,
             onLoaded: onImageLoaded
           }) : null));
@@ -238,7 +247,9 @@ var Timeline = function Timeline(_ref) {
             }),
             emptyClassName: styles.empty,
             isEmpty: !hasDescription
-          }, hasElement ? /*#__PURE__*/React.createElement(Text, description) : null));
+          }, hasElement ? /*#__PURE__*/React.createElement(Text, Object.assign({}, description, {
+            textStyle: getStyleFromColor(descriptionTextStyle)
+          })) : null));
           break;
       }
 
@@ -280,12 +291,12 @@ var Timeline = function Timeline(_ref) {
       callToActionRef = _useResizeObserver.ref,
       callToActionRect = _useResizeObserver.entry.contentRect;
 
-  var _ref7 = callToActionRect || {},
-      _ref7$height = _ref7.height,
-      callToActionHeight = _ref7$height === void 0 ? 0 : _ref7$height;
+  var _ref8 = callToActionRect || {},
+      _ref8$height = _ref8.height,
+      callToActionHeight = _ref8$height === void 0 ? 0 : _ref8$height;
 
-  var onScrolledBottom = useCallback(function (_ref8) {
-    var initial = _ref8.initial;
+  var onScrolledBottom = useCallback(function (_ref9) {
+    var initial = _ref9.initial;
 
     if (initial) {
       trackScreenEvent('scroll', 'Screen');
@@ -297,7 +308,7 @@ var Timeline = function Timeline(_ref) {
     setScrolledBottom(false);
   }, [setScrolledBottom]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.container, (_ref9 = {}, _defineProperty(_ref9, className, className !== null), _defineProperty(_ref9, styles.isPlaceholder, isPlaceholder), _defineProperty(_ref9, styles["".concat(bulletShape, "BulletShape")], bulletShape !== null), _defineProperty(_ref9, styles.withoutLines, itemsCount < 2), _ref9)]),
+    className: classNames([styles.container, (_ref10 = {}, _defineProperty(_ref10, className, className !== null), _defineProperty(_ref10, styles.isPlaceholder, isPlaceholder), _defineProperty(_ref10, styles["".concat(bulletShape, "BulletShape")], bulletShape !== null), _defineProperty(_ref10, styles.withoutLines, itemsCount < 2), _ref10)]),
     "data-screen-ready": ready
   }, !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
     background: background,

package/lib/index.js

@@ -89,7 +89,7 @@ var defaultProps = {
 };
 
 var Timeline = function Timeline(_ref) {
-  var _ref9;
+  var _ref10;
 
   var layout = _ref.layout,
       items = _ref.items,
@@ -128,9 +128,11 @@ var Timeline = function Timeline(_ref) {
       isStatic = _useScreenRenderConte.isStatic,
       isCapture = _useScreenRenderConte.isCapture;
 
-  var finalItems = isPlaceholder ? _toConsumableArray__default["default"](new Array(5)).map(function () {
-    return {};
-  }) : items || [null];
+  var finalItems = React.useMemo(function () {
+    return isPlaceholder ? _toConsumableArray__default["default"](new Array(5)).map(function () {
+      return {};
+    }) : items || [null];
+  }, [isPlaceholder, items]);
   var itemsCount = finalItems !== null ? finalItems.length : 0;
   var hasItems = finalItems !== null && itemsCount;
   var imagesCount = hasItems ? finalItems.reduce(function (acc, curr) {
@@ -153,8 +155,10 @@ var Timeline = function Timeline(_ref) {
   var backgroundPlaying = current && (isView || isEdit);
   var mediaShouldLoad = current || active;
   var onImageLoaded = React.useCallback(function () {
-    setImagesLoaded(imagesLoaded + 1);
-  }, [imagesLoaded, setImagesLoaded]);
+    setImagesLoaded(function (count) {
+      return count + 1;
+    });
+  }, [setImagesLoaded]);
   var firstLineRef = React.useRef(null);
   var firstContentRef = React.useRef(null);
 
@@ -187,6 +191,10 @@ var Timeline = function Timeline(_ref) {
     }
 
     var typesCount = elementsTypes.length;
+
+    var _ref4 = description || {},
+        descriptionTextStyle = _ref4.textStyle;
+
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: styles.item,
       key: "item-".concat(itemI)
@@ -240,6 +248,7 @@ var Timeline = function Timeline(_ref) {
             width: imageWidth,
             resolution: resolution,
             playing: backgroundPlaying,
+            active: active,
             shouldLoad: mediaShouldLoad,
             onLoaded: onImageLoaded
           }) : null));
@@ -261,7 +270,9 @@ var Timeline = function Timeline(_ref) {
             }),
             emptyClassName: styles.empty,
             isEmpty: !hasDescription
-          }, hasElement ? /*#__PURE__*/React__default["default"].createElement(Text__default["default"], description) : null));
+          }, hasElement ? /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({}, description, {
+            textStyle: utils.getStyleFromColor(descriptionTextStyle)
+          })) : null));
           break;
       }
 
@@ -303,12 +314,12 @@ var Timeline = function Timeline(_ref) {
       callToActionRef = _useResizeObserver.ref,
       callToActionRect = _useResizeObserver.entry.contentRect;
 
-  var _ref7 = callToActionRect || {},
-      _ref7$height = _ref7.height,
-      callToActionHeight = _ref7$height === void 0 ? 0 : _ref7$height;
+  var _ref8 = callToActionRect || {},
+      _ref8$height = _ref8.height,
+      callToActionHeight = _ref8$height === void 0 ? 0 : _ref8$height;
 
-  var onScrolledBottom = React.useCallback(function (_ref8) {
-    var initial = _ref8.initial;
+  var onScrolledBottom = React.useCallback(function (_ref9) {
+    var initial = _ref9.initial;
 
     if (initial) {
       trackScreenEvent('scroll', 'Screen');
@@ -320,7 +331,7 @@ var Timeline = function Timeline(_ref) {
     setScrolledBottom(false);
   }, [setScrolledBottom]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles.container, (_ref9 = {}, _defineProperty__default["default"](_ref9, className, className !== null), _defineProperty__default["default"](_ref9, styles.isPlaceholder, isPlaceholder), _defineProperty__default["default"](_ref9, styles["".concat(bulletShape, "BulletShape")], bulletShape !== null), _defineProperty__default["default"](_ref9, styles.withoutLines, itemsCount < 2), _ref9)]),
+    className: classNames__default["default"]([styles.container, (_ref10 = {}, _defineProperty__default["default"](_ref10, className, className !== null), _defineProperty__default["default"](_ref10, styles.isPlaceholder, isPlaceholder), _defineProperty__default["default"](_ref10, styles["".concat(bulletShape, "BulletShape")], bulletShape !== null), _defineProperty__default["default"](_ref10, styles.withoutLines, itemsCount < 2), _ref10)]),
     "data-screen-ready": ready
   }, !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
     background: background,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-timeline",
-    "version": "0.3.123",
+    "version": "0.3.124",
     "description": "",
     "keywords": [
         "javascript"
@@ -49,16 +49,16 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@micromag/core": "^0.3.122",
-        "@micromag/element-background": "^0.3.123",
-        "@micromag/element-call-to-action": "^0.3.122",
-        "@micromag/element-container": "^0.3.122",
-        "@micromag/element-heading": "^0.3.122",
-        "@micromag/element-layout": "^0.3.122",
-        "@micromag/element-scroll": "^0.3.122",
-        "@micromag/element-text": "^0.3.122",
-        "@micromag/element-visual": "^0.3.123",
-        "@micromag/transforms": "^0.3.122",
+        "@micromag/core": "^0.3.124",
+        "@micromag/element-background": "^0.3.124",
+        "@micromag/element-call-to-action": "^0.3.124",
+        "@micromag/element-container": "^0.3.124",
+        "@micromag/element-heading": "^0.3.124",
+        "@micromag/element-layout": "^0.3.124",
+        "@micromag/element-scroll": "^0.3.124",
+        "@micromag/element-text": "^0.3.124",
+        "@micromag/element-visual": "^0.3.124",
+        "@micromag/transforms": "^0.3.124",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
@@ -68,5 +68,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "1815cb0d51d34e283db3390bd56113dbac339098"
+    "gitHead": "9050944df1d66cae14e04a771f739e2743894fb8"
 }