@micromag/screen-image 0.3.430 → 0.3.432

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 +21 -41
  2. package/lib/index.js +20 -40
  3. package/package.json +12 -12
package/es/index.js CHANGED
@@ -5,7 +5,7 @@ import classNames from 'classnames';
5
5
  import PropTypes from 'prop-types';
6
6
  import React, { useState, useCallback, useMemo } from 'react';
7
7
  import { PropTypes as PropTypes$1 } from '@micromag/core';
8
- import { ScreenElement, Transitions } from '@micromag/core/components';
8
+ import { ScreenElement } 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
11
  import { isHeaderFilled, isFooterFilled, getFooterProps, isTextFilled } from '@micromag/core/utils';
@@ -83,9 +83,9 @@ var ImageScreen = function ImageScreen(_ref) {
83
83
  header = _ref.header,
84
84
  footer = _ref.footer,
85
85
  current = _ref.current,
86
- active = _ref.active,
87
- transitions = _ref.transitions,
88
- className = _ref.className;
86
+ active = _ref.active;
87
+ _ref.transitions;
88
+ var className = _ref.className;
89
89
  var _useScreenSize = useScreenSize(),
90
90
  width = _useScreenSize.width,
91
91
  height = _useScreenSize.height,
@@ -94,9 +94,9 @@ var ImageScreen = function ImageScreen(_ref) {
94
94
  isView = _useScreenRenderConte.isView,
95
95
  isPreview = _useScreenRenderConte.isPreview,
96
96
  isPlaceholder = _useScreenRenderConte.isPlaceholder,
97
- isEdit = _useScreenRenderConte.isEdit,
98
- isStatic = _useScreenRenderConte.isStatic,
99
- isCapture = _useScreenRenderConte.isCapture;
97
+ isEdit = _useScreenRenderConte.isEdit;
98
+ _useScreenRenderConte.isStatic;
99
+ _useScreenRenderConte.isCapture;
100
100
  var _useViewerContext = useViewerContext(),
101
101
  viewerTopHeight = _useViewerContext.topHeight,
102
102
  viewerBottomHeight = _useViewerContext.bottomHeight,
@@ -124,8 +124,6 @@ var ImageScreen = function ImageScreen(_ref) {
124
124
  setReady = _useState2[1];
125
125
  var backgroundPlaying = current && (isView || isEdit);
126
126
  var mediaShouldLoad = current || active;
127
- var transitionPlaying = current && ready;
128
- var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
129
127
  var onImageLoaded = useCallback(function () {
130
128
  setReady(true);
131
129
  }, [setReady]);
@@ -174,12 +172,7 @@ var ImageScreen = function ImageScreen(_ref) {
174
172
  }),
175
173
  emptyClassName: styles.emptyImage,
176
174
  isEmpty: !hasImage
177
- }, hasImage ? /*#__PURE__*/React.createElement(Transitions, {
178
- transitions: transitions,
179
- playing: transitionPlaying,
180
- disabled: transitionDisabled,
181
- fullscreen: true
182
- }, /*#__PURE__*/React.createElement(Visual, {
175
+ }, hasImage ? /*#__PURE__*/React.createElement(Visual, {
183
176
  className: styles.image,
184
177
  media: image,
185
178
  objectFit: finalImageFit,
@@ -192,7 +185,7 @@ var ImageScreen = function ImageScreen(_ref) {
192
185
  shouldLoad: mediaShouldLoad,
193
186
  withoutVideo: isPreview,
194
187
  onLoaded: onImageLoaded
195
- })) : null)), withTitle && /*#__PURE__*/React.createElement(ScreenElement, {
188
+ }) : null)), withTitle && /*#__PURE__*/React.createElement(ScreenElement, {
196
189
  key: "title",
197
190
  placeholder: "title",
198
191
  emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
@@ -204,13 +197,9 @@ var ImageScreen = function ImageScreen(_ref) {
204
197
  }),
205
198
  emptyClassName: styles.emptyTitle,
206
199
  isEmpty: !hasTitle
207
- }, hasTitle ? /*#__PURE__*/React.createElement(Transitions, {
208
- transitions: transitions,
209
- playing: transitionPlaying,
210
- disabled: transitionDisabled
211
- }, /*#__PURE__*/React.createElement("div", {
200
+ }, hasTitle ? /*#__PURE__*/React.createElement("div", {
212
201
  style: itemMarginStyle
213
- }, /*#__PURE__*/React.createElement(Heading, title))) : null), withText && /*#__PURE__*/React.createElement(ScreenElement, {
202
+ }, /*#__PURE__*/React.createElement(Heading, title)) : null), withText && /*#__PURE__*/React.createElement(ScreenElement, {
214
203
  key: "text",
215
204
  placeholder: "text",
216
205
  emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
@@ -222,13 +211,9 @@ var ImageScreen = function ImageScreen(_ref) {
222
211
  }),
223
212
  emptyClassName: styles.emptyText,
224
213
  isEmpty: !hasText
225
- }, hasText ? /*#__PURE__*/React.createElement(Transitions, {
226
- transitions: transitions,
227
- playing: transitionPlaying,
228
- disabled: transitionDisabled
229
- }, /*#__PURE__*/React.createElement("div", {
214
+ }, hasText ? /*#__PURE__*/React.createElement("div", {
230
215
  style: itemMarginStyle
231
- }, /*#__PURE__*/React.createElement(Text, text))) : null), withLegend && /*#__PURE__*/React.createElement(ScreenElement, {
216
+ }, /*#__PURE__*/React.createElement(Text, text)) : null), withLegend && /*#__PURE__*/React.createElement(ScreenElement, {
232
217
  key: "legend",
233
218
  placeholder: "shortText",
234
219
  emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
@@ -240,13 +225,9 @@ var ImageScreen = function ImageScreen(_ref) {
240
225
  }),
241
226
  emptyClassName: styles.emptyLegend,
242
227
  isEmpty: !hasLegend
243
- }, hasLegend ? /*#__PURE__*/React.createElement(Transitions, {
244
- transitions: transitions,
245
- playing: transitionPlaying,
246
- disabled: transitionDisabled
247
- }, /*#__PURE__*/React.createElement("div", {
228
+ }, hasLegend ? /*#__PURE__*/React.createElement("div", {
248
229
  style: itemMarginStyle
249
- }, /*#__PURE__*/React.createElement(Text, legend))) : null)];
230
+ }, /*#__PURE__*/React.createElement(Text, legend)) : null)];
250
231
  if (isReversed) {
251
232
  items.reverse();
252
233
  } else if (isTitleTop) {
@@ -322,32 +303,31 @@ var ImageScreen = function ImageScreen(_ref) {
322
303
  };
323
304
  ImageScreen.propTypes = propTypes;
324
305
  ImageScreen.defaultProps = defaultProps;
325
- var ImageScreen$1 = /*#__PURE__*/React.memo(ImageScreen);
326
306
 
327
307
  var ImageLegendScreen = function ImageLegendScreen(_ref) {
328
308
  var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
329
- return /*#__PURE__*/React.createElement(ImageScreen$1, Object.assign({}, props, {
309
+ return /*#__PURE__*/React.createElement(ImageScreen, Object.assign({}, props, {
330
310
  withLegend: true
331
311
  }));
332
312
  };
333
313
 
334
314
  var ImageTextScreen = function ImageTextScreen(_ref) {
335
315
  var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
336
- return /*#__PURE__*/React.createElement(ImageScreen$1, Object.assign({}, props, {
316
+ return /*#__PURE__*/React.createElement(ImageScreen, Object.assign({}, props, {
337
317
  withText: true
338
318
  }));
339
319
  };
340
320
 
341
321
  var ImageTitleScreen = function ImageTitleScreen(_ref) {
342
322
  var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
343
- return /*#__PURE__*/React.createElement(ImageScreen$1, Object.assign({}, props, {
323
+ return /*#__PURE__*/React.createElement(ImageScreen, Object.assign({}, props, {
344
324
  withTitle: true
345
325
  }));
346
326
  };
347
327
 
348
328
  var ImageTitleTextScreen = function ImageTitleTextScreen(_ref) {
349
329
  var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
350
- return /*#__PURE__*/React.createElement(ImageScreen$1, Object.assign({}, props, {
330
+ return /*#__PURE__*/React.createElement(ImageScreen, Object.assign({}, props, {
351
331
  withTitle: true,
352
332
  withText: true
353
333
  }));
@@ -414,7 +394,7 @@ var definition = [{
414
394
  "value": "Image"
415
395
  }]
416
396
  }),
417
- component: ImageScreen$1,
397
+ component: ImageScreen,
418
398
  layouts: ['normal', 'fullscreen'],
419
399
  transforms: transforms,
420
400
  fields: [{
@@ -979,4 +959,4 @@ var definition = [{
979
959
  }]
980
960
  }];
981
961
 
982
- export { ImageLegendScreen, ImageScreen$1 as ImageScreen, ImageTextScreen, ImageTitleScreen, ImageTitleTextScreen, definition as default };
962
+ export { ImageLegendScreen, ImageScreen, ImageTextScreen, ImageTitleScreen, ImageTitleTextScreen, definition as default };
package/lib/index.js CHANGED
@@ -87,9 +87,9 @@ var ImageScreen = function ImageScreen(_ref) {
87
87
  header = _ref.header,
88
88
  footer = _ref.footer,
89
89
  current = _ref.current,
90
- active = _ref.active,
91
- transitions = _ref.transitions,
92
- className = _ref.className;
90
+ active = _ref.active;
91
+ _ref.transitions;
92
+ var className = _ref.className;
93
93
  var _useScreenSize = contexts.useScreenSize(),
94
94
  width = _useScreenSize.width,
95
95
  height = _useScreenSize.height,
@@ -98,9 +98,9 @@ var ImageScreen = function ImageScreen(_ref) {
98
98
  isView = _useScreenRenderConte.isView,
99
99
  isPreview = _useScreenRenderConte.isPreview,
100
100
  isPlaceholder = _useScreenRenderConte.isPlaceholder,
101
- isEdit = _useScreenRenderConte.isEdit,
102
- isStatic = _useScreenRenderConte.isStatic,
103
- isCapture = _useScreenRenderConte.isCapture;
101
+ isEdit = _useScreenRenderConte.isEdit;
102
+ _useScreenRenderConte.isStatic;
103
+ _useScreenRenderConte.isCapture;
104
104
  var _useViewerContext = contexts.useViewerContext(),
105
105
  viewerTopHeight = _useViewerContext.topHeight,
106
106
  viewerBottomHeight = _useViewerContext.bottomHeight,
@@ -128,8 +128,6 @@ var ImageScreen = function ImageScreen(_ref) {
128
128
  setReady = _useState2[1];
129
129
  var backgroundPlaying = current && (isView || isEdit);
130
130
  var mediaShouldLoad = current || active;
131
- var transitionPlaying = current && ready;
132
- var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
133
131
  var onImageLoaded = React.useCallback(function () {
134
132
  setReady(true);
135
133
  }, [setReady]);
@@ -178,12 +176,7 @@ var ImageScreen = function ImageScreen(_ref) {
178
176
  }),
179
177
  emptyClassName: styles.emptyImage,
180
178
  isEmpty: !hasImage
181
- }, hasImage ? /*#__PURE__*/React.createElement(components.Transitions, {
182
- transitions: transitions,
183
- playing: transitionPlaying,
184
- disabled: transitionDisabled,
185
- fullscreen: true
186
- }, /*#__PURE__*/React.createElement(Visual, {
179
+ }, hasImage ? /*#__PURE__*/React.createElement(Visual, {
187
180
  className: styles.image,
188
181
  media: image,
189
182
  objectFit: finalImageFit,
@@ -196,7 +189,7 @@ var ImageScreen = function ImageScreen(_ref) {
196
189
  shouldLoad: mediaShouldLoad,
197
190
  withoutVideo: isPreview,
198
191
  onLoaded: onImageLoaded
199
- })) : null)), withTitle && /*#__PURE__*/React.createElement(components.ScreenElement, {
192
+ }) : null)), withTitle && /*#__PURE__*/React.createElement(components.ScreenElement, {
200
193
  key: "title",
201
194
  placeholder: "title",
202
195
  emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
@@ -208,13 +201,9 @@ var ImageScreen = function ImageScreen(_ref) {
208
201
  }),
209
202
  emptyClassName: styles.emptyTitle,
210
203
  isEmpty: !hasTitle
211
- }, hasTitle ? /*#__PURE__*/React.createElement(components.Transitions, {
212
- transitions: transitions,
213
- playing: transitionPlaying,
214
- disabled: transitionDisabled
215
- }, /*#__PURE__*/React.createElement("div", {
204
+ }, hasTitle ? /*#__PURE__*/React.createElement("div", {
216
205
  style: itemMarginStyle
217
- }, /*#__PURE__*/React.createElement(Heading, title))) : null), withText && /*#__PURE__*/React.createElement(components.ScreenElement, {
206
+ }, /*#__PURE__*/React.createElement(Heading, title)) : null), withText && /*#__PURE__*/React.createElement(components.ScreenElement, {
218
207
  key: "text",
219
208
  placeholder: "text",
220
209
  emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
@@ -226,13 +215,9 @@ var ImageScreen = function ImageScreen(_ref) {
226
215
  }),
227
216
  emptyClassName: styles.emptyText,
228
217
  isEmpty: !hasText
229
- }, hasText ? /*#__PURE__*/React.createElement(components.Transitions, {
230
- transitions: transitions,
231
- playing: transitionPlaying,
232
- disabled: transitionDisabled
233
- }, /*#__PURE__*/React.createElement("div", {
218
+ }, hasText ? /*#__PURE__*/React.createElement("div", {
234
219
  style: itemMarginStyle
235
- }, /*#__PURE__*/React.createElement(Text, text))) : null), withLegend && /*#__PURE__*/React.createElement(components.ScreenElement, {
220
+ }, /*#__PURE__*/React.createElement(Text, text)) : null), withLegend && /*#__PURE__*/React.createElement(components.ScreenElement, {
236
221
  key: "legend",
237
222
  placeholder: "shortText",
238
223
  emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
@@ -244,13 +229,9 @@ var ImageScreen = function ImageScreen(_ref) {
244
229
  }),
245
230
  emptyClassName: styles.emptyLegend,
246
231
  isEmpty: !hasLegend
247
- }, hasLegend ? /*#__PURE__*/React.createElement(components.Transitions, {
248
- transitions: transitions,
249
- playing: transitionPlaying,
250
- disabled: transitionDisabled
251
- }, /*#__PURE__*/React.createElement("div", {
232
+ }, hasLegend ? /*#__PURE__*/React.createElement("div", {
252
233
  style: itemMarginStyle
253
- }, /*#__PURE__*/React.createElement(Text, legend))) : null)];
234
+ }, /*#__PURE__*/React.createElement(Text, legend)) : null)];
254
235
  if (isReversed) {
255
236
  items.reverse();
256
237
  } else if (isTitleTop) {
@@ -326,32 +307,31 @@ var ImageScreen = function ImageScreen(_ref) {
326
307
  };
327
308
  ImageScreen.propTypes = propTypes;
328
309
  ImageScreen.defaultProps = defaultProps;
329
- var ImageScreen$1 = /*#__PURE__*/React.memo(ImageScreen);
330
310
 
331
311
  var ImageLegendScreen = function ImageLegendScreen(_ref) {
332
312
  var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
333
- return /*#__PURE__*/React.createElement(ImageScreen$1, Object.assign({}, props, {
313
+ return /*#__PURE__*/React.createElement(ImageScreen, Object.assign({}, props, {
334
314
  withLegend: true
335
315
  }));
336
316
  };
337
317
 
338
318
  var ImageTextScreen = function ImageTextScreen(_ref) {
339
319
  var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
340
- return /*#__PURE__*/React.createElement(ImageScreen$1, Object.assign({}, props, {
320
+ return /*#__PURE__*/React.createElement(ImageScreen, Object.assign({}, props, {
341
321
  withText: true
342
322
  }));
343
323
  };
344
324
 
345
325
  var ImageTitleScreen = function ImageTitleScreen(_ref) {
346
326
  var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
347
- return /*#__PURE__*/React.createElement(ImageScreen$1, Object.assign({}, props, {
327
+ return /*#__PURE__*/React.createElement(ImageScreen, Object.assign({}, props, {
348
328
  withTitle: true
349
329
  }));
350
330
  };
351
331
 
352
332
  var ImageTitleTextScreen = function ImageTitleTextScreen(_ref) {
353
333
  var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
354
- return /*#__PURE__*/React.createElement(ImageScreen$1, Object.assign({}, props, {
334
+ return /*#__PURE__*/React.createElement(ImageScreen, Object.assign({}, props, {
355
335
  withTitle: true,
356
336
  withText: true
357
337
  }));
@@ -418,7 +398,7 @@ var definition = [{
418
398
  "value": "Image"
419
399
  }]
420
400
  }),
421
- component: ImageScreen$1,
401
+ component: ImageScreen,
422
402
  layouts: ['normal', 'fullscreen'],
423
403
  transforms: transforms,
424
404
  fields: [{
@@ -984,7 +964,7 @@ var definition = [{
984
964
  }];
985
965
 
986
966
  exports.ImageLegendScreen = ImageLegendScreen;
987
- exports.ImageScreen = ImageScreen$1;
967
+ exports.ImageScreen = ImageScreen;
988
968
  exports.ImageTextScreen = ImageTextScreen;
989
969
  exports.ImageTitleScreen = ImageTitleScreen;
990
970
  exports.ImageTitleTextScreen = ImageTitleTextScreen;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-image",
3
- "version": "0.3.430",
3
+ "version": "0.3.432",
4
4
  "private": false,
5
5
  "description": "",
6
6
  "keywords": [
@@ -58,16 +58,16 @@
58
58
  },
59
59
  "dependencies": {
60
60
  "@babel/runtime": "^7.13.10",
61
- "@micromag/core": "^0.3.430",
62
- "@micromag/element-background": "^0.3.430",
63
- "@micromag/element-container": "^0.3.430",
64
- "@micromag/element-footer": "^0.3.430",
65
- "@micromag/element-header": "^0.3.430",
66
- "@micromag/element-heading": "^0.3.430",
67
- "@micromag/element-layout": "^0.3.430",
68
- "@micromag/element-text": "^0.3.430",
69
- "@micromag/element-visual": "^0.3.430",
70
- "@micromag/transforms": "^0.3.430",
61
+ "@micromag/core": "^0.3.432",
62
+ "@micromag/element-background": "^0.3.432",
63
+ "@micromag/element-container": "^0.3.432",
64
+ "@micromag/element-footer": "^0.3.432",
65
+ "@micromag/element-header": "^0.3.432",
66
+ "@micromag/element-heading": "^0.3.432",
67
+ "@micromag/element-layout": "^0.3.432",
68
+ "@micromag/element-text": "^0.3.432",
69
+ "@micromag/element-visual": "^0.3.432",
70
+ "@micromag/transforms": "^0.3.432",
71
71
  "classnames": "^2.2.6",
72
72
  "lodash": "^4.17.21",
73
73
  "prop-types": "^15.7.2",
@@ -78,5 +78,5 @@
78
78
  "access": "public",
79
79
  "registry": "https://registry.npmjs.org/"
80
80
  },
81
- "gitHead": "da790d76dba9d8e308d9f9c4e51d93a4a0e012a9"
81
+ "gitHead": "01df977a7eb5166425c0078c2369ea240549f386"
82
82
  }