@micromag/screen-keypad 0.3.357 → 0.3.358

package/es/index.js

@@ -10,7 +10,7 @@ import React, { useMemo, useState, useCallback, useEffect } from 'react';
 import { PropTypes as PropTypes$1 } from '@micromag/core';
 import { PlaceholderImage, PlaceholderText, ScreenElement, PlaceholderButton } from '@micromag/core/components';
 import { usePlaybackContext, usePlaybackMediaRef, useScreenState, useScreenSize, useViewerContext, useViewerWebView, useScreenRenderContext } from '@micromag/core/contexts';
-import { useTrackScreenEvent, useDragProgress } from '@micromag/core/hooks';
+import { useTrackScreenEvent, useDimensionObserver, useDragProgress } from '@micromag/core/hooks';
 import { isHeaderFilled, isFooterFilled, getFooterProps, isTextFilled, getStyleFromBox, getStyleFromText } from '@micromag/core/utils';
 import Background, { Background as Background$1 } from '@micromag/element-background';
 import Button from '@micromag/element-button';
@@ -180,6 +180,14 @@ var KeypadScreen = function KeypadScreen(_ref) {
     openWebView: openWebView,
     isPreview: isPreview
   });
+  var _useDimensionObserver = useDimensionObserver(),
+    headerRef = _useDimensionObserver.ref,
+    _useDimensionObserver2 = _useDimensionObserver.height,
+    headerHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
+  var _useDimensionObserver3 = useDimensionObserver(),
+    footerRef = _useDimensionObserver3.ref,
+    _useDimensionObserver4 = _useDimensionObserver3.height,
+    footerHeight = _useDimensionObserver4 === void 0 ? 0 : _useDimensionObserver4;
   var backgroundPlaying = current && (isView || isEdit);
   var mediaShouldLoad = !isPlaceholder && (current || active);
   var isInteractivePreview = isEdit && screenState === null;
@@ -450,13 +458,18 @@ var KeypadScreen = function KeypadScreen(_ref) {
     verticalAlign: layout,
     style: !isPlaceholder ? {
       padding: spacing,
-      paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
-      paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + spacing
+      paddingTop: (hasHeader ? headerHeight : spacing) + (current && !isPreview ? viewerTopHeight : 0),
+      paddingBottom: (hasFooter ? footerHeight : spacing) + (current && !isPreview ? viewerBottomHeight : 0)
     } : null
   }, !isPlaceholder && hasHeader ? /*#__PURE__*/React.createElement("div", {
-    key: "header",
+    ref: headerRef,
+    className: styles.header,
     style: {
-      paddingBottom: spacing
+      paddingTop: spacing,
+      paddingLeft: spacing,
+      paddingRight: spacing,
+      paddingBottom: spacing,
+      transform: !isPreview ? "translate(0, ".concat(viewerTopHeight, "px)") : null
     }
   }, /*#__PURE__*/React.createElement(Header, header)) : null, /*#__PURE__*/React.createElement(Keypad$1, {
     className: classNames([styles.grid, _defineProperty({}, styles.gridPlaceholder, isPlaceholder)]),
@@ -465,14 +478,14 @@ var KeypadScreen = function KeypadScreen(_ref) {
     spacing: isPlaceholder ? 2 : columnSpacing,
     items: gridItems
   }), !isPlaceholder && hasFooter ? /*#__PURE__*/React.createElement("div", {
-    key: "footer",
+    ref: footerRef,
     className: styles.footer,
     style: {
       transform: current && !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null,
       paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
       paddingRight: Math.max(spacing / 2, viewerBottomSidesWidth),
       paddingBottom: spacing / 2,
-      paddingTop: 0
+      paddingTop: spacing
     }
   }, /*#__PURE__*/React.createElement(Footer, footerProps)) : null), /*#__PURE__*/React.createElement(animated.div, {
     className: classNames([styles.popupBackdrop]),

package/lib/index.js

@@ -206,6 +206,14 @@ var KeypadScreen = function KeypadScreen(_ref) {
     openWebView: openWebView,
     isPreview: isPreview
   });
+  var _useDimensionObserver = hooks.useDimensionObserver(),
+    headerRef = _useDimensionObserver.ref,
+    _useDimensionObserver2 = _useDimensionObserver.height,
+    headerHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
+  var _useDimensionObserver3 = hooks.useDimensionObserver(),
+    footerRef = _useDimensionObserver3.ref,
+    _useDimensionObserver4 = _useDimensionObserver3.height,
+    footerHeight = _useDimensionObserver4 === void 0 ? 0 : _useDimensionObserver4;
   var backgroundPlaying = current && (isView || isEdit);
   var mediaShouldLoad = !isPlaceholder && (current || active);
   var isInteractivePreview = isEdit && screenState === null;
@@ -476,13 +484,18 @@ var KeypadScreen = function KeypadScreen(_ref) {
     verticalAlign: layout,
     style: !isPlaceholder ? {
       padding: spacing,
-      paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
-      paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + spacing
+      paddingTop: (hasHeader ? headerHeight : spacing) + (current && !isPreview ? viewerTopHeight : 0),
+      paddingBottom: (hasFooter ? footerHeight : spacing) + (current && !isPreview ? viewerBottomHeight : 0)
     } : null
   }, !isPlaceholder && hasHeader ? /*#__PURE__*/React__default["default"].createElement("div", {
-    key: "header",
+    ref: headerRef,
+    className: styles.header,
     style: {
-      paddingBottom: spacing
+      paddingTop: spacing,
+      paddingLeft: spacing,
+      paddingRight: spacing,
+      paddingBottom: spacing,
+      transform: !isPreview ? "translate(0, ".concat(viewerTopHeight, "px)") : null
     }
   }, /*#__PURE__*/React__default["default"].createElement(Header__default["default"], header)) : null, /*#__PURE__*/React__default["default"].createElement(Keypad__default["default"], {
     className: classNames__default["default"]([styles.grid, _defineProperty__default["default"]({}, styles.gridPlaceholder, isPlaceholder)]),
@@ -491,14 +504,14 @@ var KeypadScreen = function KeypadScreen(_ref) {
     spacing: isPlaceholder ? 2 : columnSpacing,
     items: gridItems
   }), !isPlaceholder && hasFooter ? /*#__PURE__*/React__default["default"].createElement("div", {
-    key: "footer",
+    ref: footerRef,
     className: styles.footer,
     style: {
       transform: current && !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null,
       paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
       paddingRight: Math.max(spacing / 2, viewerBottomSidesWidth),
       paddingBottom: spacing / 2,
-      paddingTop: 0
+      paddingTop: spacing
     }
   }, /*#__PURE__*/React__default["default"].createElement(Footer__default["default"], footerProps)) : null), /*#__PURE__*/React__default["default"].createElement(web.animated.div, {
     className: classNames__default["default"]([styles.popupBackdrop]),

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-keypad",
-    "version": "0.3.357",
+    "version": "0.3.358",
     "description": "",
     "keywords": [
         "javascript"
@@ -84,5 +84,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "60264402b3f34eaba79d9c2a266b440966a957d2"
+    "gitHead": "9f2e1febad95f6aac5f4b150884a43c97f93663c"
 }