@micromag/screen-keypad 0.3.357 → 0.3.359

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/es/index.js +38 -9
  2. package/lib/index.js +37 -8
  3. package/package.json +18 -18
package/es/index.js CHANGED
@@ -10,7 +10,7 @@ import React, { useMemo, useState, useCallback, useEffect } from 'react';
10
10
  import { PropTypes as PropTypes$1 } from '@micromag/core';
11
11
  import { PlaceholderImage, PlaceholderText, ScreenElement, PlaceholderButton } from '@micromag/core/components';
12
12
  import { usePlaybackContext, usePlaybackMediaRef, useScreenState, useScreenSize, useViewerContext, useViewerWebView, useScreenRenderContext } from '@micromag/core/contexts';
13
- import { useTrackScreenEvent, useDragProgress } from '@micromag/core/hooks';
13
+ import { useTrackScreenEvent, useDimensionObserver, useDragProgress } from '@micromag/core/hooks';
14
14
  import { isHeaderFilled, isFooterFilled, getFooterProps, isTextFilled, getStyleFromBox, getStyleFromText } from '@micromag/core/utils';
15
15
  import Background, { Background as Background$1 } from '@micromag/element-background';
16
16
  import Button from '@micromag/element-button';
@@ -180,6 +180,14 @@ var KeypadScreen = function KeypadScreen(_ref) {
180
180
  openWebView: openWebView,
181
181
  isPreview: isPreview
182
182
  });
183
+ var _useDimensionObserver = useDimensionObserver(),
184
+ headerRef = _useDimensionObserver.ref,
185
+ _useDimensionObserver2 = _useDimensionObserver.height,
186
+ headerHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
187
+ var _useDimensionObserver3 = useDimensionObserver(),
188
+ footerRef = _useDimensionObserver3.ref,
189
+ _useDimensionObserver4 = _useDimensionObserver3.height,
190
+ footerHeight = _useDimensionObserver4 === void 0 ? 0 : _useDimensionObserver4;
183
191
  var backgroundPlaying = current && (isView || isEdit);
184
192
  var mediaShouldLoad = !isPlaceholder && (current || active);
185
193
  var isInteractivePreview = isEdit && screenState === null;
@@ -450,13 +458,18 @@ var KeypadScreen = function KeypadScreen(_ref) {
450
458
  verticalAlign: layout,
451
459
  style: !isPlaceholder ? {
452
460
  padding: spacing,
453
- paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
454
- paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + spacing
461
+ paddingTop: (hasHeader ? headerHeight : spacing) + (current && !isPreview ? viewerTopHeight : 0),
462
+ paddingBottom: (hasFooter ? footerHeight : spacing) + (current && !isPreview ? viewerBottomHeight : 0)
455
463
  } : null
456
464
  }, !isPlaceholder && hasHeader ? /*#__PURE__*/React.createElement("div", {
457
- key: "header",
465
+ ref: headerRef,
466
+ className: styles.header,
458
467
  style: {
459
- paddingBottom: spacing
468
+ paddingTop: spacing,
469
+ paddingLeft: spacing,
470
+ paddingRight: spacing,
471
+ paddingBottom: spacing,
472
+ transform: !isPreview ? "translate(0, ".concat(viewerTopHeight, "px)") : null
460
473
  }
461
474
  }, /*#__PURE__*/React.createElement(Header, header)) : null, /*#__PURE__*/React.createElement(Keypad$1, {
462
475
  className: classNames([styles.grid, _defineProperty({}, styles.gridPlaceholder, isPlaceholder)]),
@@ -465,14 +478,14 @@ var KeypadScreen = function KeypadScreen(_ref) {
465
478
  spacing: isPlaceholder ? 2 : columnSpacing,
466
479
  items: gridItems
467
480
  }), !isPlaceholder && hasFooter ? /*#__PURE__*/React.createElement("div", {
468
- key: "footer",
481
+ ref: footerRef,
469
482
  className: styles.footer,
470
483
  style: {
471
484
  transform: current && !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null,
472
485
  paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
473
486
  paddingRight: Math.max(spacing / 2, viewerBottomSidesWidth),
474
487
  paddingBottom: spacing / 2,
475
- paddingTop: 0
488
+ paddingTop: spacing
476
489
  }
477
490
  }, /*#__PURE__*/React.createElement(Footer, footerProps)) : null), /*#__PURE__*/React.createElement(animated.div, {
478
491
  className: classNames([styles.popupBackdrop]),
@@ -859,7 +872,15 @@ var definition = [{
859
872
  "type": 0,
860
873
  "value": "Header"
861
874
  }]
862
- })
875
+ }),
876
+ theme: {
877
+ badge: {
878
+ label: {
879
+ textStyle: 'badge'
880
+ },
881
+ boxStyle: 'badge'
882
+ }
883
+ }
863
884
  }, {
864
885
  name: 'footer',
865
886
  type: 'footer',
@@ -869,7 +890,15 @@ var definition = [{
869
890
  "type": 0,
870
891
  "value": "Footer"
871
892
  }]
872
- })
893
+ }),
894
+ theme: {
895
+ callToAction: {
896
+ label: {
897
+ textStyle: 'cta'
898
+ },
899
+ boxStyle: 'cta'
900
+ }
901
+ }
873
902
  }]
874
903
  }];
875
904
 
package/lib/index.js CHANGED
@@ -206,6 +206,14 @@ var KeypadScreen = function KeypadScreen(_ref) {
206
206
  openWebView: openWebView,
207
207
  isPreview: isPreview
208
208
  });
209
+ var _useDimensionObserver = hooks.useDimensionObserver(),
210
+ headerRef = _useDimensionObserver.ref,
211
+ _useDimensionObserver2 = _useDimensionObserver.height,
212
+ headerHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
213
+ var _useDimensionObserver3 = hooks.useDimensionObserver(),
214
+ footerRef = _useDimensionObserver3.ref,
215
+ _useDimensionObserver4 = _useDimensionObserver3.height,
216
+ footerHeight = _useDimensionObserver4 === void 0 ? 0 : _useDimensionObserver4;
209
217
  var backgroundPlaying = current && (isView || isEdit);
210
218
  var mediaShouldLoad = !isPlaceholder && (current || active);
211
219
  var isInteractivePreview = isEdit && screenState === null;
@@ -476,13 +484,18 @@ var KeypadScreen = function KeypadScreen(_ref) {
476
484
  verticalAlign: layout,
477
485
  style: !isPlaceholder ? {
478
486
  padding: spacing,
479
- paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
480
- paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + spacing
487
+ paddingTop: (hasHeader ? headerHeight : spacing) + (current && !isPreview ? viewerTopHeight : 0),
488
+ paddingBottom: (hasFooter ? footerHeight : spacing) + (current && !isPreview ? viewerBottomHeight : 0)
481
489
  } : null
482
490
  }, !isPlaceholder && hasHeader ? /*#__PURE__*/React__default["default"].createElement("div", {
483
- key: "header",
491
+ ref: headerRef,
492
+ className: styles.header,
484
493
  style: {
485
- paddingBottom: spacing
494
+ paddingTop: spacing,
495
+ paddingLeft: spacing,
496
+ paddingRight: spacing,
497
+ paddingBottom: spacing,
498
+ transform: !isPreview ? "translate(0, ".concat(viewerTopHeight, "px)") : null
486
499
  }
487
500
  }, /*#__PURE__*/React__default["default"].createElement(Header__default["default"], header)) : null, /*#__PURE__*/React__default["default"].createElement(Keypad__default["default"], {
488
501
  className: classNames__default["default"]([styles.grid, _defineProperty__default["default"]({}, styles.gridPlaceholder, isPlaceholder)]),
@@ -491,14 +504,14 @@ var KeypadScreen = function KeypadScreen(_ref) {
491
504
  spacing: isPlaceholder ? 2 : columnSpacing,
492
505
  items: gridItems
493
506
  }), !isPlaceholder && hasFooter ? /*#__PURE__*/React__default["default"].createElement("div", {
494
- key: "footer",
507
+ ref: footerRef,
495
508
  className: styles.footer,
496
509
  style: {
497
510
  transform: current && !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null,
498
511
  paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
499
512
  paddingRight: Math.max(spacing / 2, viewerBottomSidesWidth),
500
513
  paddingBottom: spacing / 2,
501
- paddingTop: 0
514
+ paddingTop: spacing
502
515
  }
503
516
  }, /*#__PURE__*/React__default["default"].createElement(Footer__default["default"], footerProps)) : null), /*#__PURE__*/React__default["default"].createElement(web.animated.div, {
504
517
  className: classNames__default["default"]([styles.popupBackdrop]),
@@ -885,7 +898,15 @@ var definition = [{
885
898
  "type": 0,
886
899
  "value": "Header"
887
900
  }]
888
- })
901
+ }),
902
+ theme: {
903
+ badge: {
904
+ label: {
905
+ textStyle: 'badge'
906
+ },
907
+ boxStyle: 'badge'
908
+ }
909
+ }
889
910
  }, {
890
911
  name: 'footer',
891
912
  type: 'footer',
@@ -895,7 +916,15 @@ var definition = [{
895
916
  "type": 0,
896
917
  "value": "Footer"
897
918
  }]
898
- })
919
+ }),
920
+ theme: {
921
+ callToAction: {
922
+ label: {
923
+ textStyle: 'cta'
924
+ },
925
+ boxStyle: 'cta'
926
+ }
927
+ }
899
928
  }]
900
929
  }];
901
930
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-keypad",
3
- "version": "0.3.357",
3
+ "version": "0.3.359",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -54,22 +54,22 @@
54
54
  },
55
55
  "dependencies": {
56
56
  "@babel/runtime": "^7.13.10",
57
- "@micromag/core": "^0.3.354",
58
- "@micromag/element-background": "^0.3.354",
59
- "@micromag/element-button": "^0.3.354",
60
- "@micromag/element-call-to-action": "^0.3.354",
61
- "@micromag/element-container": "^0.3.354",
62
- "@micromag/element-footer": "^0.3.354",
63
- "@micromag/element-grid": "^0.3.354",
64
- "@micromag/element-header": "^0.3.357",
65
- "@micromag/element-heading": "^0.3.354",
66
- "@micromag/element-keypad": "^0.3.354",
67
- "@micromag/element-layout": "^0.3.354",
68
- "@micromag/element-scroll": "^0.3.354",
69
- "@micromag/element-text": "^0.3.354",
70
- "@micromag/element-urbania-author": "^0.3.354",
71
- "@micromag/element-visual": "^0.3.354",
72
- "@micromag/transforms": "^0.3.354",
57
+ "@micromag/core": "^0.3.359",
58
+ "@micromag/element-background": "^0.3.359",
59
+ "@micromag/element-button": "^0.3.359",
60
+ "@micromag/element-call-to-action": "^0.3.359",
61
+ "@micromag/element-container": "^0.3.359",
62
+ "@micromag/element-footer": "^0.3.359",
63
+ "@micromag/element-grid": "^0.3.359",
64
+ "@micromag/element-header": "^0.3.359",
65
+ "@micromag/element-heading": "^0.3.359",
66
+ "@micromag/element-keypad": "^0.3.359",
67
+ "@micromag/element-layout": "^0.3.359",
68
+ "@micromag/element-scroll": "^0.3.359",
69
+ "@micromag/element-text": "^0.3.359",
70
+ "@micromag/element-urbania-author": "^0.3.359",
71
+ "@micromag/element-visual": "^0.3.359",
72
+ "@micromag/transforms": "^0.3.359",
73
73
  "@react-spring/core": "^9.6.1",
74
74
  "@react-spring/web": "^9.6.1",
75
75
  "@use-gesture/react": "^10.2.4",
@@ -84,5 +84,5 @@
84
84
  "publishConfig": {
85
85
  "access": "public"
86
86
  },
87
- "gitHead": "60264402b3f34eaba79d9c2a266b440966a957d2"
87
+ "gitHead": "22eba0d01f18f8971e0405bbb41081b5e2ae80ee"
88
88
  }