@micromag/editor 0.3.418 → 0.3.420

package/es/index.js

@@ -8,7 +8,7 @@ import { useIntl, FormattedMessage } from 'react-intl';
 import { PropTypes as PropTypes$1 } from '@micromag/core';
 import { Button, FieldForm, BackButton, Breadcrumb as Breadcrumb$1, Modal, ModalDialog, Label, Navbar, DropdownMenu, Empty, Tabs, ScreenPlaceholder, ScreenPreview, Modals } from '@micromag/core/components';
 import { useRoutes, useScreenDefinition, useFormsComponents, useScreensManager, useFieldsManager, useFieldsComponentsManager, useUrlGenerator, useRoutePush, ScreenProvider, useScreenSize, PlaybackProvider, ModalsProvider, PanelsProvider, ScreenSizeProvider, useFieldComponent, ComponentsProvider, FORMS_NAMESPACE, UppyProvider, StoryProvider, GoogleKeysProvider, GoogleMapsClientProvider, FontsProvider, EditorProvider, VisitorProvider, ComponentsContext, RoutesProvider } from '@micromag/core/contexts';
-import { useParsedStory, useDimensionObserver, useScreenSizeFromElement, useMediasParser } from '@micromag/core/hooks';
+import { useIsVisible, useParsedStory, useDimensionObserver, useScreenSizeFromElement, useMediasParser } from '@micromag/core/hooks';
 import { getScreenExtraField, isMessage, slug, getComponentFromName, getDeviceScreens } from '@micromag/core/utils';
 import { useRouteMatch, useHistory, Route, MemoryRouter } from 'react-router';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
@@ -1224,9 +1224,16 @@ var ScreenWithPreview = function ScreenWithPreview(_ref) {
     withPlaceholder = _ref.withPlaceholder,
     withIndexIndicator = _ref.withIndexIndicator;
   var intl = useIntl();
+  var _useIsVisible = useIsVisible({
+      threshold: 0.1
+    }),
+    ref = _useIsVisible.ref,
+    visible = _useIsVisible.visible;
   var ScreenComponent = withPlaceholder ? ScreenPlaceholder : ScreenPreview;
   var finalTitle = isMessage(title) ? intl.formatMessage(title) : title || null;
-  return /*#__PURE__*/React.createElement(ScreenButton$1, {
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref
+  }, /*#__PURE__*/React.createElement(ScreenButton$1, {
     href: href,
     active: active,
     className: classNames([styles$b.button, (_ref2 = {}, _defineProperty(_ref2, className, className !== null), _defineProperty(_ref2, styles$b.withIndex, withIndexIndicator || withName), _ref2)]),
@@ -1243,12 +1250,13 @@ var ScreenWithPreview = function ScreenWithPreview(_ref) {
     screen: screen,
     screenState: screenState,
     className: styles$b.screen,
+    hidden: !visible,
     withSize: true
   }), index !== null && withIndexIndicator ? /*#__PURE__*/React.createElement("div", {
     className: styles$b.index
   }, index + 1) : null, withName && !withIndexIndicator ? /*#__PURE__*/React.createElement("div", {
     className: styles$b.name
-  }, finalTitle || null) : null);
+  }, finalTitle || null) : null));
 };
 ScreenWithPreview.propTypes = propTypes$d;
 ScreenWithPreview.defaultProps = defaultProps$d;

package/lib/index.js

@@ -1244,9 +1244,16 @@ var ScreenWithPreview = function ScreenWithPreview(_ref) {
     withPlaceholder = _ref.withPlaceholder,
     withIndexIndicator = _ref.withIndexIndicator;
   var intl = reactIntl.useIntl();
+  var _useIsVisible = hooks.useIsVisible({
+      threshold: 0.1
+    }),
+    ref = _useIsVisible.ref,
+    visible = _useIsVisible.visible;
   var ScreenComponent = withPlaceholder ? components.ScreenPlaceholder : components.ScreenPreview;
   var finalTitle = utils.isMessage(title) ? intl.formatMessage(title) : title || null;
-  return /*#__PURE__*/React__default["default"].createElement(ScreenButton$1, {
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    ref: ref
+  }, /*#__PURE__*/React__default["default"].createElement(ScreenButton$1, {
     href: href,
     active: active,
     className: classNames__default["default"]([styles$b.button, (_ref2 = {}, _defineProperty__default["default"](_ref2, className, className !== null), _defineProperty__default["default"](_ref2, styles$b.withIndex, withIndexIndicator || withName), _ref2)]),
@@ -1263,12 +1270,13 @@ var ScreenWithPreview = function ScreenWithPreview(_ref) {
     screen: screen,
     screenState: screenState,
     className: styles$b.screen,
+    hidden: !visible,
     withSize: true
   }), index !== null && withIndexIndicator ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: styles$b.index
   }, index + 1) : null, withName && !withIndexIndicator ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: styles$b.name
-  }, finalTitle || null) : null);
+  }, finalTitle || null) : null));
 };
 ScreenWithPreview.propTypes = propTypes$d;
 ScreenWithPreview.defaultProps = defaultProps$d;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/editor",
-    "version": "0.3.418",
+    "version": "0.3.420",
     "private": false,
     "description": "",
     "keywords": [
@@ -64,11 +64,11 @@
         "@fortawesome/fontawesome-svg-core": "^1.2.32",
         "@fortawesome/free-solid-svg-icons": "^5.15.1",
         "@fortawesome/react-fontawesome": "^0.1.13",
-        "@micromag/core": "^0.3.418",
-        "@micromag/elements": "^0.3.418",
-        "@micromag/fields": "^0.3.418",
-        "@micromag/screens": "^0.3.418",
-        "@micromag/viewer": "^0.3.418",
+        "@micromag/core": "^0.3.420",
+        "@micromag/elements": "^0.3.420",
+        "@micromag/fields": "^0.3.420",
+        "@micromag/screens": "^0.3.420",
+        "@micromag/viewer": "^0.3.420",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
@@ -84,5 +84,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "b88d067aa5c016ffdbc031902e1c387160d51f9b"
+    "gitHead": "5b0f037a41c3bca07a5bce8f0dce205242f7ad17"
 }