@micromag/screen-image 0.3.360 → 0.3.362

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 +28 -29
  2. package/lib/index.js +27 -28
  3. package/package.json +12 -12
package/es/index.js CHANGED
@@ -8,7 +8,7 @@ import { PropTypes as PropTypes$1 } from '@micromag/core';
8
8
  import { ScreenElement, Transitions } from '@micromag/core/components';
9
9
  import { useScreenSize, useScreenRenderContext, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef } from '@micromag/core/contexts';
10
10
  import { useDimensionObserver } from '@micromag/core/hooks';
11
- import { isTextFilled, isHeaderFilled, isFooterFilled, getFooterProps } from '@micromag/core/utils';
11
+ import { isHeaderFilled, isFooterFilled, getFooterProps, isTextFilled } from '@micromag/core/utils';
12
12
  import Background from '@micromag/element-background';
13
13
  import Container from '@micromag/element-container';
14
14
  import Footer from '@micromag/element-footer';
@@ -107,6 +107,14 @@ var ImageScreen = function ImageScreen(_ref) {
107
107
  var _usePlaybackContext = usePlaybackContext(),
108
108
  muted = _usePlaybackContext.muted;
109
109
  var mediaRef = usePlaybackMediaRef(current);
110
+ var hasHeader = isHeaderFilled(header);
111
+ var hasFooter = isFooterFilled(footer);
112
+ var footerProps = getFooterProps(footer, {
113
+ isView: isView,
114
+ current: current,
115
+ openWebView: openWebView,
116
+ isPreview: isPreview
117
+ });
110
118
  var hasImage = image !== null;
111
119
  var hasTitle = isTextFilled(title);
112
120
  var hasText = isTextFilled(text);
@@ -129,7 +137,8 @@ var ImageScreen = function ImageScreen(_ref) {
129
137
  }, [imageFit, defaultImageFit]);
130
138
  var isReversed = layout === 'reverse' || layout === 'card-reverse';
131
139
  var isTitleTop = layout === 'title-top';
132
- var isCard = layout === 'card' || layout === 'card-reverse';
140
+ var isCardLayout = layout === 'card' || layout === 'card-reverse';
141
+ var isCard = layout === 'card';
133
142
  var isCardReverse = layout === 'card-reverse';
134
143
  var isFullscreen = layout === 'fullscreen';
135
144
  var finalSpacing = !isFullscreen && !isPlaceholder ? spacing : 0;
@@ -138,7 +147,12 @@ var ImageScreen = function ImageScreen(_ref) {
138
147
  imageWidth = _useDimensionObserver.width,
139
148
  imageHeight = _useDimensionObserver.height;
140
149
  var cardImageMargin = isCardReverse ? "".concat(finalSpacing / 2, "px ").concat(-finalSpacing / 2, "px 0") : "0 ".concat(-finalSpacing / 2, "px ").concat(finalSpacing / 2, "px");
141
- var imageMargin = isCard || isCardReverse ? cardImageMargin : finalSpacing / 2;
150
+ var imageMargin = isCardLayout ? cardImageMargin : finalSpacing / 2;
151
+ var itemMarginStyle = !isPlaceholder ? {
152
+ margin: finalSpacing / 2,
153
+ marginTop: isCardReverse && !hasHeader ? finalSpacing : finalSpacing / 2,
154
+ marginBottom: isCard && !hasHeader ? finalSpacing : finalSpacing / 2
155
+ } : null;
142
156
  var items = [/*#__PURE__*/React.createElement("div", {
143
157
  key: "image",
144
158
  ref: imageCntRef,
@@ -196,9 +210,7 @@ var ImageScreen = function ImageScreen(_ref) {
196
210
  playing: transitionPlaying,
197
211
  disabled: transitionDisabled
198
212
  }, /*#__PURE__*/React.createElement("div", {
199
- style: !isPlaceholder ? {
200
- margin: finalSpacing / 2
201
- } : null
213
+ style: itemMarginStyle
202
214
  }, /*#__PURE__*/React.createElement(Heading, title))) : null), withText && /*#__PURE__*/React.createElement(ScreenElement, {
203
215
  key: "text",
204
216
  placeholder: "text",
@@ -216,9 +228,7 @@ var ImageScreen = function ImageScreen(_ref) {
216
228
  playing: transitionPlaying,
217
229
  disabled: transitionDisabled
218
230
  }, /*#__PURE__*/React.createElement("div", {
219
- style: !isPlaceholder ? {
220
- margin: finalSpacing / 2
221
- } : null
231
+ style: itemMarginStyle
222
232
  }, /*#__PURE__*/React.createElement(Text, text))) : null), withLegend && /*#__PURE__*/React.createElement(ScreenElement, {
223
233
  key: "legend",
224
234
  placeholder: "shortText",
@@ -236,9 +246,7 @@ var ImageScreen = function ImageScreen(_ref) {
236
246
  playing: transitionPlaying,
237
247
  disabled: transitionDisabled
238
248
  }, /*#__PURE__*/React.createElement("div", {
239
- style: !isPlaceholder ? {
240
- margin: finalSpacing / 2
241
- } : null
249
+ style: itemMarginStyle
242
250
  }, /*#__PURE__*/React.createElement(Text, legend))) : null)];
243
251
  if (isReversed) {
244
252
  items.reverse();
@@ -247,17 +255,9 @@ var ImageScreen = function ImageScreen(_ref) {
247
255
  items.splice(0, 0, items.splice(1, 1)[0]);
248
256
  }
249
257
  }
250
- var hasHeader = isHeaderFilled(header);
251
- var hasFooter = isFooterFilled(footer);
252
- var footerProps = getFooterProps(footer, {
253
- isView: isView,
254
- current: current,
255
- openWebView: openWebView,
256
- isPreview: isPreview
257
- });
258
258
  var paddingBottom = (current && !isPreview ? viewerBottomHeight : 0) + finalSpacing / 2;
259
259
  var paddingTop = (!isPreview ? viewerTopHeight : 0) + finalSpacing / 2;
260
- if (isCard || isFullscreen) {
260
+ if (isCardLayout || isFullscreen) {
261
261
  paddingTop = 0;
262
262
  paddingBottom = 0;
263
263
  }
@@ -283,14 +283,14 @@ var ImageScreen = function ImageScreen(_ref) {
283
283
  }, !isPlaceholder && hasHeader ? /*#__PURE__*/React.createElement("div", {
284
284
  className: styles.header,
285
285
  style: isFullscreen || isCardReverse ? {
286
- paddingTop: spacing,
287
- paddingBottom: spacing / 2,
286
+ paddingTop: hasHeader ? spacing / 2 : spacing,
287
+ paddingBottom: hasHeader ? spacing / 2 : spacing,
288
288
  paddingLeft: isCardReverse ? spacing / 2 : spacing,
289
289
  paddingRight: isCardReverse ? spacing / 2 : spacing,
290
290
  transform: !isPreview ? "translate(0, ".concat(viewerTopHeight, "px)") : null
291
291
  } : {
292
- paddingTop: isCard || isCardReverse ? spacing : spacing / 2,
293
- paddingBottom: isCard || isCardReverse ? spacing : spacing / 2,
292
+ paddingTop: isCardLayout ? spacing / 2 : null,
293
+ paddingBottom: isCardLayout ? spacing : spacing / 2,
294
294
  paddingLeft: spacing / 2,
295
295
  paddingRight: spacing / 2
296
296
  }
@@ -305,10 +305,9 @@ var ImageScreen = function ImageScreen(_ref) {
305
305
  } : {
306
306
  paddingLeft: Math.max(viewerBottomSidesWidth - spacing, 0),
307
307
  paddingRight: Math.max(viewerBottomSidesWidth - spacing, 0),
308
- paddingTop: isCard ? spacing / 2 : null,
309
- paddingBottom: isCard ? spacing / 2 : null
310
- },
311
- key: "call-to-action"
308
+ paddingTop: isCardLayout ? spacing / 2 : null,
309
+ paddingBottom: isCardLayout ? spacing / 2 : null
310
+ }
312
311
  }, /*#__PURE__*/React.createElement(Footer, footerProps)) : null)), !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
313
312
  background: background,
314
313
  width: width,
package/lib/index.js CHANGED
@@ -131,6 +131,14 @@ var ImageScreen = function ImageScreen(_ref) {
131
131
  var _usePlaybackContext = contexts.usePlaybackContext(),
132
132
  muted = _usePlaybackContext.muted;
133
133
  var mediaRef = contexts.usePlaybackMediaRef(current);
134
+ var hasHeader = utils.isHeaderFilled(header);
135
+ var hasFooter = utils.isFooterFilled(footer);
136
+ var footerProps = utils.getFooterProps(footer, {
137
+ isView: isView,
138
+ current: current,
139
+ openWebView: openWebView,
140
+ isPreview: isPreview
141
+ });
134
142
  var hasImage = image !== null;
135
143
  var hasTitle = utils.isTextFilled(title);
136
144
  var hasText = utils.isTextFilled(text);
@@ -153,7 +161,8 @@ var ImageScreen = function ImageScreen(_ref) {
153
161
  }, [imageFit, defaultImageFit]);
154
162
  var isReversed = layout === 'reverse' || layout === 'card-reverse';
155
163
  var isTitleTop = layout === 'title-top';
156
- var isCard = layout === 'card' || layout === 'card-reverse';
164
+ var isCardLayout = layout === 'card' || layout === 'card-reverse';
165
+ var isCard = layout === 'card';
157
166
  var isCardReverse = layout === 'card-reverse';
158
167
  var isFullscreen = layout === 'fullscreen';
159
168
  var finalSpacing = !isFullscreen && !isPlaceholder ? spacing : 0;
@@ -162,7 +171,12 @@ var ImageScreen = function ImageScreen(_ref) {
162
171
  imageWidth = _useDimensionObserver.width,
163
172
  imageHeight = _useDimensionObserver.height;
164
173
  var cardImageMargin = isCardReverse ? "".concat(finalSpacing / 2, "px ").concat(-finalSpacing / 2, "px 0") : "0 ".concat(-finalSpacing / 2, "px ").concat(finalSpacing / 2, "px");
165
- var imageMargin = isCard || isCardReverse ? cardImageMargin : finalSpacing / 2;
174
+ var imageMargin = isCardLayout ? cardImageMargin : finalSpacing / 2;
175
+ var itemMarginStyle = !isPlaceholder ? {
176
+ margin: finalSpacing / 2,
177
+ marginTop: isCardReverse && !hasHeader ? finalSpacing : finalSpacing / 2,
178
+ marginBottom: isCard && !hasHeader ? finalSpacing : finalSpacing / 2
179
+ } : null;
166
180
  var items = [/*#__PURE__*/React__default["default"].createElement("div", {
167
181
  key: "image",
168
182
  ref: imageCntRef,
@@ -220,9 +234,7 @@ var ImageScreen = function ImageScreen(_ref) {
220
234
  playing: transitionPlaying,
221
235
  disabled: transitionDisabled
222
236
  }, /*#__PURE__*/React__default["default"].createElement("div", {
223
- style: !isPlaceholder ? {
224
- margin: finalSpacing / 2
225
- } : null
237
+ style: itemMarginStyle
226
238
  }, /*#__PURE__*/React__default["default"].createElement(Heading__default["default"], title))) : null), withText && /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
227
239
  key: "text",
228
240
  placeholder: "text",
@@ -240,9 +252,7 @@ var ImageScreen = function ImageScreen(_ref) {
240
252
  playing: transitionPlaying,
241
253
  disabled: transitionDisabled
242
254
  }, /*#__PURE__*/React__default["default"].createElement("div", {
243
- style: !isPlaceholder ? {
244
- margin: finalSpacing / 2
245
- } : null
255
+ style: itemMarginStyle
246
256
  }, /*#__PURE__*/React__default["default"].createElement(Text__default["default"], text))) : null), withLegend && /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
247
257
  key: "legend",
248
258
  placeholder: "shortText",
@@ -260,9 +270,7 @@ var ImageScreen = function ImageScreen(_ref) {
260
270
  playing: transitionPlaying,
261
271
  disabled: transitionDisabled
262
272
  }, /*#__PURE__*/React__default["default"].createElement("div", {
263
- style: !isPlaceholder ? {
264
- margin: finalSpacing / 2
265
- } : null
273
+ style: itemMarginStyle
266
274
  }, /*#__PURE__*/React__default["default"].createElement(Text__default["default"], legend))) : null)];
267
275
  if (isReversed) {
268
276
  items.reverse();
@@ -271,17 +279,9 @@ var ImageScreen = function ImageScreen(_ref) {
271
279
  items.splice(0, 0, items.splice(1, 1)[0]);
272
280
  }
273
281
  }
274
- var hasHeader = utils.isHeaderFilled(header);
275
- var hasFooter = utils.isFooterFilled(footer);
276
- var footerProps = utils.getFooterProps(footer, {
277
- isView: isView,
278
- current: current,
279
- openWebView: openWebView,
280
- isPreview: isPreview
281
- });
282
282
  var paddingBottom = (current && !isPreview ? viewerBottomHeight : 0) + finalSpacing / 2;
283
283
  var paddingTop = (!isPreview ? viewerTopHeight : 0) + finalSpacing / 2;
284
- if (isCard || isFullscreen) {
284
+ if (isCardLayout || isFullscreen) {
285
285
  paddingTop = 0;
286
286
  paddingBottom = 0;
287
287
  }
@@ -307,14 +307,14 @@ var ImageScreen = function ImageScreen(_ref) {
307
307
  }, !isPlaceholder && hasHeader ? /*#__PURE__*/React__default["default"].createElement("div", {
308
308
  className: styles.header,
309
309
  style: isFullscreen || isCardReverse ? {
310
- paddingTop: spacing,
311
- paddingBottom: spacing / 2,
310
+ paddingTop: hasHeader ? spacing / 2 : spacing,
311
+ paddingBottom: hasHeader ? spacing / 2 : spacing,
312
312
  paddingLeft: isCardReverse ? spacing / 2 : spacing,
313
313
  paddingRight: isCardReverse ? spacing / 2 : spacing,
314
314
  transform: !isPreview ? "translate(0, ".concat(viewerTopHeight, "px)") : null
315
315
  } : {
316
- paddingTop: isCard || isCardReverse ? spacing : spacing / 2,
317
- paddingBottom: isCard || isCardReverse ? spacing : spacing / 2,
316
+ paddingTop: isCardLayout ? spacing / 2 : null,
317
+ paddingBottom: isCardLayout ? spacing : spacing / 2,
318
318
  paddingLeft: spacing / 2,
319
319
  paddingRight: spacing / 2
320
320
  }
@@ -329,10 +329,9 @@ var ImageScreen = function ImageScreen(_ref) {
329
329
  } : {
330
330
  paddingLeft: Math.max(viewerBottomSidesWidth - spacing, 0),
331
331
  paddingRight: Math.max(viewerBottomSidesWidth - spacing, 0),
332
- paddingTop: isCard ? spacing / 2 : null,
333
- paddingBottom: isCard ? spacing / 2 : null
334
- },
335
- key: "call-to-action"
332
+ paddingTop: isCardLayout ? spacing / 2 : null,
333
+ paddingBottom: isCardLayout ? spacing / 2 : null
334
+ }
336
335
  }, /*#__PURE__*/React__default["default"].createElement(Footer__default["default"], footerProps)) : null)), !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
337
336
  background: background,
338
337
  width: width,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-image",
3
- "version": "0.3.360",
3
+ "version": "0.3.362",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -49,16 +49,16 @@
49
49
  },
50
50
  "dependencies": {
51
51
  "@babel/runtime": "^7.13.10",
52
- "@micromag/core": "^0.3.360",
53
- "@micromag/element-background": "^0.3.360",
54
- "@micromag/element-container": "^0.3.360",
55
- "@micromag/element-footer": "^0.3.360",
56
- "@micromag/element-header": "^0.3.360",
57
- "@micromag/element-heading": "^0.3.360",
58
- "@micromag/element-layout": "^0.3.360",
59
- "@micromag/element-text": "^0.3.360",
60
- "@micromag/element-visual": "^0.3.360",
61
- "@micromag/transforms": "^0.3.360",
52
+ "@micromag/core": "^0.3.362",
53
+ "@micromag/element-background": "^0.3.362",
54
+ "@micromag/element-container": "^0.3.362",
55
+ "@micromag/element-footer": "^0.3.362",
56
+ "@micromag/element-header": "^0.3.362",
57
+ "@micromag/element-heading": "^0.3.362",
58
+ "@micromag/element-layout": "^0.3.362",
59
+ "@micromag/element-text": "^0.3.362",
60
+ "@micromag/element-visual": "^0.3.362",
61
+ "@micromag/transforms": "^0.3.362",
62
62
  "classnames": "^2.2.6",
63
63
  "lodash": "^4.17.21",
64
64
  "prop-types": "^15.7.2",
@@ -68,5 +68,5 @@
68
68
  "publishConfig": {
69
69
  "access": "public"
70
70
  },
71
- "gitHead": "5531b1c55e0dd7e7a9c6eeee217ca28d985c7921"
71
+ "gitHead": "21619f51536d95517afabfdf316ef8fc345f6562"
72
72
  }