@micromag/screen-timeline 0.3.828 → 0.3.832

package/es/index.js

@@ -5,7 +5,7 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useMemo, useState, useEffect, useCallback, useRef } from 'react';
+import React, { useMemo, useState, useEffect, useCallback } from 'react';
 import { PropTypes as PropTypes$1 } from '@micromag/core';
 import { ScreenElement } from '@micromag/core/components';
 import { useScreenSize, useViewerContext, useViewerWebView, useScreenRenderContext, usePlaybackContext, usePlaybackMediaRef, useViewerContainer } from '@micromag/core/contexts';
@@ -292,22 +292,48 @@ var Timeline = function Timeline(_ref) {
       return count + 1;
     });
   }, [setImagesLoaded]);
-  var firstLineRef = useRef(null);
-  var firstContentRef = useRef(null);
-  var _useState1 = useState(0),
-    _useState10 = _slicedToArray(_useState1, 2),
-    imageWidth = _useState10[0],
-    setImageWidth = _useState10[1];
-  useEffect(function () {
-    if (firstContentRef.current === null) {
-      return;
-    }
-    if (firstLineRef.current !== null) {
-      setImageWidth(firstContentRef.current.offsetWidth - firstLineRef.current.offsetWidth);
-    } else {
-      setImageWidth(firstContentRef.current.offsetWidth);
-    }
-  }, [width, height, finalItems]);
+
+  // const {
+  //     ref: firstLineRef,
+  //     entry: { contentRect: firstLineContentRect = null },
+  // } = useResizeObserver();
+  // const {
+  //     ref: firstContentRef,
+  //     entry: { contentRect: firstContentRect = null },
+  // } = useResizeObserver();
+  // const { width: firstLineWidth = null } = firstLineContentRect || {};
+  // const { width: firstContentWidth = null } = firstContentRect || {};
+
+  var _useDimensionObserver = useDimensionObserver(),
+    firstLineRef = _useDimensionObserver.ref,
+    _useDimensionObserver2 = _useDimensionObserver.width,
+    firstLineWidth = _useDimensionObserver2 === void 0 ? null : _useDimensionObserver2;
+  var _useDimensionObserver3 = useDimensionObserver(),
+    firstContentRef = _useDimensionObserver3.ref,
+    _useDimensionObserver4 = _useDimensionObserver3.width,
+    firstContentWidth = _useDimensionObserver4 === void 0 ? null : _useDimensionObserver4;
+  var imageWidth = (firstContentWidth !== null && firstContentWidth !== void 0 ? firstContentWidth : 0) - (firstLineWidth !== null && firstLineWidth !== void 0 ? firstLineWidth : 0);
+
+  // const firstLineRef = useRef(null);
+  // const firstContentRef = useRef(null);
+  // const [legacyImageWidth, setImageWidth] = useState(0);
+
+  // useEffect(() => {
+  //     if (firstContentRef.current === null) {
+  //         return;
+  //     }
+  //     if (firstLineRef.current !== null) {
+  //         setImageWidth(firstContentRef.current.offsetWidth - firstLineRef.current.offsetWidth);
+  //     } else {
+  //         setImageWidth(firstContentRef.current.offsetWidth);
+  //     }
+  // }, [width, height, finalItems]);
+
+  // console.log('firstLineWidth', firstLineWidth);
+  // console.log('firstContentWidth', firstContentWidth);
+  // console.log('legacyImageWidth', legacyImageWidth);
+  // console.log('imageWidth', imageWidth);
+
   var timelineElements = (finalItems || []).map(function (item, itemI) {
     var _ref8 = item || {},
       _ref8$title = _ref8.title,
@@ -447,14 +473,14 @@ var Timeline = function Timeline(_ref) {
     openWebView: openWebView,
     isPreview: isPreview
   });
-  var _useState11 = useState(false),
-    _useState12 = _slicedToArray(_useState11, 2),
-    scrolledBottom = _useState12[0],
-    setScrolledBottom = _useState12[1];
-  var _useDimensionObserver = useDimensionObserver(),
-    footerRef = _useDimensionObserver.ref,
-    _useDimensionObserver2 = _useDimensionObserver.height,
-    footerHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
+  var _useState1 = useState(false),
+    _useState10 = _slicedToArray(_useState1, 2),
+    scrolledBottom = _useState10[0],
+    setScrolledBottom = _useState10[1];
+  var _useDimensionObserver5 = useDimensionObserver(),
+    footerRef = _useDimensionObserver5.ref,
+    _useDimensionObserver6 = _useDimensionObserver5.height,
+    footerHeight = _useDimensionObserver6 === void 0 ? 0 : _useDimensionObserver6;
   var onScrolledBottom = useCallback(function (_ref12) {
     var initial = _ref12.initial;
     if (initial) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-timeline",
-    "version": "0.3.828",
+    "version": "0.3.832",
     "private": false,
     "description": "",
     "keywords": [
@@ -60,17 +60,17 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@micromag/core": "^0.3.824",
-        "@micromag/element-background": "^0.3.824",
-        "@micromag/element-container": "^0.3.824",
-        "@micromag/element-footer": "^0.3.828",
-        "@micromag/element-header": "^0.3.824",
-        "@micromag/element-heading": "^0.3.824",
-        "@micromag/element-layout": "^0.3.824",
-        "@micromag/element-scroll": "^0.3.824",
-        "@micromag/element-text": "^0.3.824",
-        "@micromag/element-visual": "^0.3.824",
-        "@micromag/transforms": "^0.3.824",
+        "@micromag/core": "^0.3.832",
+        "@micromag/element-background": "^0.3.832",
+        "@micromag/element-container": "^0.3.832",
+        "@micromag/element-footer": "^0.3.832",
+        "@micromag/element-header": "^0.3.832",
+        "@micromag/element-heading": "^0.3.832",
+        "@micromag/element-layout": "^0.3.832",
+        "@micromag/element-scroll": "^0.3.832",
+        "@micromag/element-text": "^0.3.832",
+        "@micromag/element-visual": "^0.3.832",
+        "@micromag/transforms": "^0.3.832",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
@@ -81,5 +81,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "3e773f89434e8af4baa8b0044edb070a16c67870"
+    "gitHead": "4969d64e304334cfd47321e624e5914e0694c55f"
 }