@micromag/screen-slideshow 0.3.147 → 0.3.152

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 +22 -27
  2. package/lib/index.js +20 -25
  3. package/package.json +10 -10
package/es/index.js CHANGED
@@ -6,8 +6,8 @@ import PropTypes from 'prop-types';
6
6
  import React, { useState, useCallback, useRef } from 'react';
7
7
  import { PropTypes as PropTypes$1 } from '@micromag/core';
8
8
  import { Transitions, ScreenElement } from '@micromag/core/components';
9
- import { useScreenSize, useViewer, useScreenRenderContext } from '@micromag/core/contexts';
10
- import { useResizeObserver } from '@micromag/core/hooks';
9
+ import { useScreenSize, useViewerContext, useViewerInteraction, useScreenRenderContext } from '@micromag/core/contexts';
10
+ import { useDimensionObserver } from '@micromag/core/hooks';
11
11
  import { isTextFilled } from '@micromag/core/utils';
12
12
  import Background from '@micromag/element-background';
13
13
  import CallToAction from '@micromag/element-call-to-action';
@@ -29,8 +29,6 @@ var propTypes = {
29
29
  active: PropTypes.bool,
30
30
  transitions: PropTypes$1.transitions,
31
31
  // transitionStagger: PropTypes.number,
32
- enableInteraction: PropTypes.func,
33
- disableInteraction: PropTypes.func,
34
32
  className: PropTypes.string
35
33
  };
36
34
  var defaultProps = {
@@ -45,13 +43,11 @@ var defaultProps = {
45
43
  active: true,
46
44
  transitions: null,
47
45
  // transitionStagger: 50,
48
- enableInteraction: null,
49
- disableInteraction: null,
50
46
  className: null
51
47
  };
52
48
 
53
49
  var SlideshowScreen = function SlideshowScreen(_ref) {
54
- var _ref4;
50
+ var _ref3;
55
51
 
56
52
  var slides = _ref.slides,
57
53
  withCaptions = _ref.withCaptions,
@@ -62,18 +58,20 @@ var SlideshowScreen = function SlideshowScreen(_ref) {
62
58
  spacing = _ref.spacing,
63
59
  captionMaxLines = _ref.captionMaxLines,
64
60
  transitions = _ref.transitions,
65
- enableInteraction = _ref.enableInteraction,
66
- disableInteraction = _ref.disableInteraction,
67
61
  className = _ref.className;
68
62
 
69
63
  var _useScreenSize = useScreenSize(),
70
64
  width = _useScreenSize.width,
71
65
  height = _useScreenSize.height,
72
- menuOverScreen = _useScreenSize.menuOverScreen,
73
66
  resolution = _useScreenSize.resolution;
74
67
 
75
- var _useViewer = useViewer(),
76
- menuSize = _useViewer.menuSize;
68
+ var _useViewerContext = useViewerContext(),
69
+ viewerTopHeight = _useViewerContext.topHeight,
70
+ viewerBottomHeight = _useViewerContext.bottomHeight;
71
+
72
+ var _useViewerInteraction = useViewerInteraction(),
73
+ enableInteraction = _useViewerInteraction.enableInteraction,
74
+ disableInteraction = _useViewerInteraction.disableInteraction;
77
75
 
78
76
  var _useScreenRenderConte = useScreenRenderContext(),
79
77
  isView = _useScreenRenderConte.isView,
@@ -102,20 +100,17 @@ var SlideshowScreen = function SlideshowScreen(_ref) {
102
100
 
103
101
  var hasCallToAction = callToAction !== null && callToAction.active === true;
104
102
 
105
- var _useResizeObserver = useResizeObserver(),
106
- callToActionRef = _useResizeObserver.ref,
107
- callToActionRect = _useResizeObserver.entry.contentRect;
108
-
109
- var _ref2 = callToActionRect || {},
110
- _ref2$height = _ref2.height,
111
- callToActionHeight = _ref2$height === void 0 ? 0 : _ref2$height;
103
+ var _useDimensionObserver = useDimensionObserver(),
104
+ callToActionRef = _useDimensionObserver.ref,
105
+ _useDimensionObserver2 = _useDimensionObserver.height,
106
+ callToActionHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
112
107
 
113
108
  var items = (slides || []).map(function (item, itemI) {
114
- var _ref3 = item || {},
115
- _ref3$visual = _ref3.visual,
116
- visual = _ref3$visual === void 0 ? null : _ref3$visual,
117
- _ref3$caption = _ref3.caption,
118
- caption = _ref3$caption === void 0 ? null : _ref3$caption;
109
+ var _ref2 = item || {},
110
+ _ref2$visual = _ref2.visual,
111
+ visual = _ref2$visual === void 0 ? null : _ref2$visual,
112
+ _ref2$caption = _ref2.caption,
113
+ caption = _ref2$caption === void 0 ? null : _ref2$caption;
119
114
 
120
115
  var imageSize = {
121
116
  width: width / 2,
@@ -188,7 +183,7 @@ var SlideshowScreen = function SlideshowScreen(_ref) {
188
183
  }))))) : null);
189
184
  });
190
185
  return /*#__PURE__*/React.createElement("div", {
191
- className: classNames([styles.container, (_ref4 = {}, _defineProperty(_ref4, className, className !== null), _defineProperty(_ref4, styles.isPlaceholder, isPlaceholder), _ref4)]),
186
+ className: classNames([styles.container, (_ref3 = {}, _defineProperty(_ref3, className, className !== null), _defineProperty(_ref3, styles.isPlaceholder, isPlaceholder), _ref3)]),
192
187
  "data-screen-ready": ready
193
188
  }, !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
194
189
  background: background,
@@ -203,8 +198,8 @@ var SlideshowScreen = function SlideshowScreen(_ref) {
203
198
  }, /*#__PURE__*/React.createElement("div", {
204
199
  className: styles.content,
205
200
  style: {
206
- paddingTop: menuOverScreen && !isPreview ? menuSize : null,
207
- paddingBottom: hasCallToAction ? callToActionHeight - finalSpacing : 0
201
+ paddingTop: !isPreview ? viewerTopHeight : null,
202
+ paddingBottom: (hasCallToAction ? callToActionHeight - finalSpacing : 0) + (!isPreview ? viewerBottomHeight : 0)
208
203
  }
209
204
  }, items, !isPlaceholder && hasCallToAction ? /*#__PURE__*/React.createElement("div", {
210
205
  style: {
package/lib/index.js CHANGED
@@ -46,8 +46,6 @@ var propTypes = {
46
46
  active: PropTypes__default["default"].bool,
47
47
  transitions: core.PropTypes.transitions,
48
48
  // transitionStagger: PropTypes.number,
49
- enableInteraction: PropTypes__default["default"].func,
50
- disableInteraction: PropTypes__default["default"].func,
51
49
  className: PropTypes__default["default"].string
52
50
  };
53
51
  var defaultProps = {
@@ -62,13 +60,11 @@ var defaultProps = {
62
60
  active: true,
63
61
  transitions: null,
64
62
  // transitionStagger: 50,
65
- enableInteraction: null,
66
- disableInteraction: null,
67
63
  className: null
68
64
  };
69
65
 
70
66
  var SlideshowScreen = function SlideshowScreen(_ref) {
71
- var _ref4;
67
+ var _ref3;
72
68
 
73
69
  var slides = _ref.slides,
74
70
  withCaptions = _ref.withCaptions,
@@ -79,18 +75,20 @@ var SlideshowScreen = function SlideshowScreen(_ref) {
79
75
  spacing = _ref.spacing,
80
76
  captionMaxLines = _ref.captionMaxLines,
81
77
  transitions = _ref.transitions,
82
- enableInteraction = _ref.enableInteraction,
83
- disableInteraction = _ref.disableInteraction,
84
78
  className = _ref.className;
85
79
 
86
80
  var _useScreenSize = contexts.useScreenSize(),
87
81
  width = _useScreenSize.width,
88
82
  height = _useScreenSize.height,
89
- menuOverScreen = _useScreenSize.menuOverScreen,
90
83
  resolution = _useScreenSize.resolution;
91
84
 
92
- var _useViewer = contexts.useViewer(),
93
- menuSize = _useViewer.menuSize;
85
+ var _useViewerContext = contexts.useViewerContext(),
86
+ viewerTopHeight = _useViewerContext.topHeight,
87
+ viewerBottomHeight = _useViewerContext.bottomHeight;
88
+
89
+ var _useViewerInteraction = contexts.useViewerInteraction(),
90
+ enableInteraction = _useViewerInteraction.enableInteraction,
91
+ disableInteraction = _useViewerInteraction.disableInteraction;
94
92
 
95
93
  var _useScreenRenderConte = contexts.useScreenRenderContext(),
96
94
  isView = _useScreenRenderConte.isView,
@@ -119,20 +117,17 @@ var SlideshowScreen = function SlideshowScreen(_ref) {
119
117
 
120
118
  var hasCallToAction = callToAction !== null && callToAction.active === true;
121
119
 
122
- var _useResizeObserver = hooks.useResizeObserver(),
123
- callToActionRef = _useResizeObserver.ref,
124
- callToActionRect = _useResizeObserver.entry.contentRect;
125
-
126
- var _ref2 = callToActionRect || {},
127
- _ref2$height = _ref2.height,
128
- callToActionHeight = _ref2$height === void 0 ? 0 : _ref2$height;
120
+ var _useDimensionObserver = hooks.useDimensionObserver(),
121
+ callToActionRef = _useDimensionObserver.ref,
122
+ _useDimensionObserver2 = _useDimensionObserver.height,
123
+ callToActionHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
129
124
 
130
125
  var items = (slides || []).map(function (item, itemI) {
131
- var _ref3 = item || {},
132
- _ref3$visual = _ref3.visual,
133
- visual = _ref3$visual === void 0 ? null : _ref3$visual,
134
- _ref3$caption = _ref3.caption,
135
- caption = _ref3$caption === void 0 ? null : _ref3$caption;
126
+ var _ref2 = item || {},
127
+ _ref2$visual = _ref2.visual,
128
+ visual = _ref2$visual === void 0 ? null : _ref2$visual,
129
+ _ref2$caption = _ref2.caption,
130
+ caption = _ref2$caption === void 0 ? null : _ref2$caption;
136
131
 
137
132
  var imageSize = {
138
133
  width: width / 2,
@@ -205,7 +200,7 @@ var SlideshowScreen = function SlideshowScreen(_ref) {
205
200
  }))))) : null);
206
201
  });
207
202
  return /*#__PURE__*/React__default["default"].createElement("div", {
208
- className: classNames__default["default"]([styles.container, (_ref4 = {}, _defineProperty__default["default"](_ref4, className, className !== null), _defineProperty__default["default"](_ref4, styles.isPlaceholder, isPlaceholder), _ref4)]),
203
+ className: classNames__default["default"]([styles.container, (_ref3 = {}, _defineProperty__default["default"](_ref3, className, className !== null), _defineProperty__default["default"](_ref3, styles.isPlaceholder, isPlaceholder), _ref3)]),
209
204
  "data-screen-ready": ready
210
205
  }, !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
211
206
  background: background,
@@ -220,8 +215,8 @@ var SlideshowScreen = function SlideshowScreen(_ref) {
220
215
  }, /*#__PURE__*/React__default["default"].createElement("div", {
221
216
  className: styles.content,
222
217
  style: {
223
- paddingTop: menuOverScreen && !isPreview ? menuSize : null,
224
- paddingBottom: hasCallToAction ? callToActionHeight - finalSpacing : 0
218
+ paddingTop: !isPreview ? viewerTopHeight : null,
219
+ paddingBottom: (hasCallToAction ? callToActionHeight - finalSpacing : 0) + (!isPreview ? viewerBottomHeight : 0)
225
220
  }
226
221
  }, items, !isPlaceholder && hasCallToAction ? /*#__PURE__*/React__default["default"].createElement("div", {
227
222
  style: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-slideshow",
3
- "version": "0.3.147",
3
+ "version": "0.3.152",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -49,14 +49,14 @@
49
49
  },
50
50
  "dependencies": {
51
51
  "@babel/runtime": "^7.13.10",
52
- "@micromag/core": "^0.3.147",
53
- "@micromag/element-background": "^0.3.147",
54
- "@micromag/element-call-to-action": "^0.3.147",
55
- "@micromag/element-container": "^0.3.147",
56
- "@micromag/element-layout": "^0.3.147",
57
- "@micromag/element-text": "^0.3.147",
58
- "@micromag/element-visual": "^0.3.147",
59
- "@micromag/transforms": "^0.3.147",
52
+ "@micromag/core": "^0.3.152",
53
+ "@micromag/element-background": "^0.3.152",
54
+ "@micromag/element-call-to-action": "^0.3.152",
55
+ "@micromag/element-container": "^0.3.152",
56
+ "@micromag/element-layout": "^0.3.152",
57
+ "@micromag/element-text": "^0.3.152",
58
+ "@micromag/element-visual": "^0.3.152",
59
+ "@micromag/transforms": "^0.3.152",
60
60
  "classnames": "^2.2.6",
61
61
  "lodash": "^4.17.21",
62
62
  "prop-types": "^15.7.2",
@@ -66,5 +66,5 @@
66
66
  "publishConfig": {
67
67
  "access": "public"
68
68
  },
69
- "gitHead": "695a66acc54f4863dc44a98f0471e8233ca10aee"
69
+ "gitHead": "23db6c104c10cc70a73366c8b04576a312a36206"
70
70
  }