@micromag/screen-image 0.3.430 → 0.3.433

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 +16 -41
  2. package/lib/index.js +15 -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';
@@ -44,7 +44,6 @@ var propTypes = {
44
44
  footer: PropTypes$1.footer,
45
45
  current: PropTypes.bool,
46
46
  active: PropTypes.bool,
47
- transitions: PropTypes$1.transitions,
48
47
  className: PropTypes.string
49
48
  };
50
49
  var defaultProps = {
@@ -64,7 +63,6 @@ var defaultProps = {
64
63
  footer: null,
65
64
  current: true,
66
65
  active: true,
67
- transitions: null,
68
66
  className: null
69
67
  };
70
68
  var ImageScreen = function ImageScreen(_ref) {
@@ -84,7 +82,6 @@ var ImageScreen = function ImageScreen(_ref) {
84
82
  footer = _ref.footer,
85
83
  current = _ref.current,
86
84
  active = _ref.active,
87
- transitions = _ref.transitions,
88
85
  className = _ref.className;
89
86
  var _useScreenSize = useScreenSize(),
90
87
  width = _useScreenSize.width,
@@ -94,9 +91,7 @@ var ImageScreen = function ImageScreen(_ref) {
94
91
  isView = _useScreenRenderConte.isView,
95
92
  isPreview = _useScreenRenderConte.isPreview,
96
93
  isPlaceholder = _useScreenRenderConte.isPlaceholder,
97
- isEdit = _useScreenRenderConte.isEdit,
98
- isStatic = _useScreenRenderConte.isStatic,
99
- isCapture = _useScreenRenderConte.isCapture;
94
+ isEdit = _useScreenRenderConte.isEdit;
100
95
  var _useViewerContext = useViewerContext(),
101
96
  viewerTopHeight = _useViewerContext.topHeight,
102
97
  viewerBottomHeight = _useViewerContext.bottomHeight,
@@ -124,8 +119,6 @@ var ImageScreen = function ImageScreen(_ref) {
124
119
  setReady = _useState2[1];
125
120
  var backgroundPlaying = current && (isView || isEdit);
126
121
  var mediaShouldLoad = current || active;
127
- var transitionPlaying = current && ready;
128
- var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
129
122
  var onImageLoaded = useCallback(function () {
130
123
  setReady(true);
131
124
  }, [setReady]);
@@ -174,12 +167,7 @@ var ImageScreen = function ImageScreen(_ref) {
174
167
  }),
175
168
  emptyClassName: styles.emptyImage,
176
169
  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, {
170
+ }, hasImage ? /*#__PURE__*/React.createElement(Visual, {
183
171
  className: styles.image,
184
172
  media: image,
185
173
  objectFit: finalImageFit,
@@ -192,7 +180,7 @@ var ImageScreen = function ImageScreen(_ref) {
192
180
  shouldLoad: mediaShouldLoad,
193
181
  withoutVideo: isPreview,
194
182
  onLoaded: onImageLoaded
195
- })) : null)), withTitle && /*#__PURE__*/React.createElement(ScreenElement, {
183
+ }) : null)), withTitle && /*#__PURE__*/React.createElement(ScreenElement, {
196
184
  key: "title",
197
185
  placeholder: "title",
198
186
  emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
@@ -204,13 +192,9 @@ var ImageScreen = function ImageScreen(_ref) {
204
192
  }),
205
193
  emptyClassName: styles.emptyTitle,
206
194
  isEmpty: !hasTitle
207
- }, hasTitle ? /*#__PURE__*/React.createElement(Transitions, {
208
- transitions: transitions,
209
- playing: transitionPlaying,
210
- disabled: transitionDisabled
211
- }, /*#__PURE__*/React.createElement("div", {
195
+ }, hasTitle ? /*#__PURE__*/React.createElement("div", {
212
196
  style: itemMarginStyle
213
- }, /*#__PURE__*/React.createElement(Heading, title))) : null), withText && /*#__PURE__*/React.createElement(ScreenElement, {
197
+ }, /*#__PURE__*/React.createElement(Heading, title)) : null), withText && /*#__PURE__*/React.createElement(ScreenElement, {
214
198
  key: "text",
215
199
  placeholder: "text",
216
200
  emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
@@ -222,13 +206,9 @@ var ImageScreen = function ImageScreen(_ref) {
222
206
  }),
223
207
  emptyClassName: styles.emptyText,
224
208
  isEmpty: !hasText
225
- }, hasText ? /*#__PURE__*/React.createElement(Transitions, {
226
- transitions: transitions,
227
- playing: transitionPlaying,
228
- disabled: transitionDisabled
229
- }, /*#__PURE__*/React.createElement("div", {
209
+ }, hasText ? /*#__PURE__*/React.createElement("div", {
230
210
  style: itemMarginStyle
231
- }, /*#__PURE__*/React.createElement(Text, text))) : null), withLegend && /*#__PURE__*/React.createElement(ScreenElement, {
211
+ }, /*#__PURE__*/React.createElement(Text, text)) : null), withLegend && /*#__PURE__*/React.createElement(ScreenElement, {
232
212
  key: "legend",
233
213
  placeholder: "shortText",
234
214
  emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
@@ -240,13 +220,9 @@ var ImageScreen = function ImageScreen(_ref) {
240
220
  }),
241
221
  emptyClassName: styles.emptyLegend,
242
222
  isEmpty: !hasLegend
243
- }, hasLegend ? /*#__PURE__*/React.createElement(Transitions, {
244
- transitions: transitions,
245
- playing: transitionPlaying,
246
- disabled: transitionDisabled
247
- }, /*#__PURE__*/React.createElement("div", {
223
+ }, hasLegend ? /*#__PURE__*/React.createElement("div", {
248
224
  style: itemMarginStyle
249
- }, /*#__PURE__*/React.createElement(Text, legend))) : null)];
225
+ }, /*#__PURE__*/React.createElement(Text, legend)) : null)];
250
226
  if (isReversed) {
251
227
  items.reverse();
252
228
  } else if (isTitleTop) {
@@ -322,32 +298,31 @@ var ImageScreen = function ImageScreen(_ref) {
322
298
  };
323
299
  ImageScreen.propTypes = propTypes;
324
300
  ImageScreen.defaultProps = defaultProps;
325
- var ImageScreen$1 = /*#__PURE__*/React.memo(ImageScreen);
326
301
 
327
302
  var ImageLegendScreen = function ImageLegendScreen(_ref) {
328
303
  var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
329
- return /*#__PURE__*/React.createElement(ImageScreen$1, Object.assign({}, props, {
304
+ return /*#__PURE__*/React.createElement(ImageScreen, Object.assign({}, props, {
330
305
  withLegend: true
331
306
  }));
332
307
  };
333
308
 
334
309
  var ImageTextScreen = function ImageTextScreen(_ref) {
335
310
  var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
336
- return /*#__PURE__*/React.createElement(ImageScreen$1, Object.assign({}, props, {
311
+ return /*#__PURE__*/React.createElement(ImageScreen, Object.assign({}, props, {
337
312
  withText: true
338
313
  }));
339
314
  };
340
315
 
341
316
  var ImageTitleScreen = function ImageTitleScreen(_ref) {
342
317
  var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
343
- return /*#__PURE__*/React.createElement(ImageScreen$1, Object.assign({}, props, {
318
+ return /*#__PURE__*/React.createElement(ImageScreen, Object.assign({}, props, {
344
319
  withTitle: true
345
320
  }));
346
321
  };
347
322
 
348
323
  var ImageTitleTextScreen = function ImageTitleTextScreen(_ref) {
349
324
  var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
350
- return /*#__PURE__*/React.createElement(ImageScreen$1, Object.assign({}, props, {
325
+ return /*#__PURE__*/React.createElement(ImageScreen, Object.assign({}, props, {
351
326
  withTitle: true,
352
327
  withText: true
353
328
  }));
@@ -414,7 +389,7 @@ var definition = [{
414
389
  "value": "Image"
415
390
  }]
416
391
  }),
417
- component: ImageScreen$1,
392
+ component: ImageScreen,
418
393
  layouts: ['normal', 'fullscreen'],
419
394
  transforms: transforms,
420
395
  fields: [{
@@ -979,4 +954,4 @@ var definition = [{
979
954
  }]
980
955
  }];
981
956
 
982
- export { ImageLegendScreen, ImageScreen$1 as ImageScreen, ImageTextScreen, ImageTitleScreen, ImageTitleTextScreen, definition as default };
957
+ export { ImageLegendScreen, ImageScreen, ImageTextScreen, ImageTitleScreen, ImageTitleTextScreen, definition as default };
package/lib/index.js CHANGED
@@ -48,7 +48,6 @@ var propTypes = {
48
48
  footer: core.PropTypes.footer,
49
49
  current: PropTypes.bool,
50
50
  active: PropTypes.bool,
51
- transitions: core.PropTypes.transitions,
52
51
  className: PropTypes.string
53
52
  };
54
53
  var defaultProps = {
@@ -68,7 +67,6 @@ var defaultProps = {
68
67
  footer: null,
69
68
  current: true,
70
69
  active: true,
71
- transitions: null,
72
70
  className: null
73
71
  };
74
72
  var ImageScreen = function ImageScreen(_ref) {
@@ -88,7 +86,6 @@ var ImageScreen = function ImageScreen(_ref) {
88
86
  footer = _ref.footer,
89
87
  current = _ref.current,
90
88
  active = _ref.active,
91
- transitions = _ref.transitions,
92
89
  className = _ref.className;
93
90
  var _useScreenSize = contexts.useScreenSize(),
94
91
  width = _useScreenSize.width,
@@ -98,9 +95,7 @@ var ImageScreen = function ImageScreen(_ref) {
98
95
  isView = _useScreenRenderConte.isView,
99
96
  isPreview = _useScreenRenderConte.isPreview,
100
97
  isPlaceholder = _useScreenRenderConte.isPlaceholder,
101
- isEdit = _useScreenRenderConte.isEdit,
102
- isStatic = _useScreenRenderConte.isStatic,
103
- isCapture = _useScreenRenderConte.isCapture;
98
+ isEdit = _useScreenRenderConte.isEdit;
104
99
  var _useViewerContext = contexts.useViewerContext(),
105
100
  viewerTopHeight = _useViewerContext.topHeight,
106
101
  viewerBottomHeight = _useViewerContext.bottomHeight,
@@ -128,8 +123,6 @@ var ImageScreen = function ImageScreen(_ref) {
128
123
  setReady = _useState2[1];
129
124
  var backgroundPlaying = current && (isView || isEdit);
130
125
  var mediaShouldLoad = current || active;
131
- var transitionPlaying = current && ready;
132
- var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
133
126
  var onImageLoaded = React.useCallback(function () {
134
127
  setReady(true);
135
128
  }, [setReady]);
@@ -178,12 +171,7 @@ var ImageScreen = function ImageScreen(_ref) {
178
171
  }),
179
172
  emptyClassName: styles.emptyImage,
180
173
  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, {
174
+ }, hasImage ? /*#__PURE__*/React.createElement(Visual, {
187
175
  className: styles.image,
188
176
  media: image,
189
177
  objectFit: finalImageFit,
@@ -196,7 +184,7 @@ var ImageScreen = function ImageScreen(_ref) {
196
184
  shouldLoad: mediaShouldLoad,
197
185
  withoutVideo: isPreview,
198
186
  onLoaded: onImageLoaded
199
- })) : null)), withTitle && /*#__PURE__*/React.createElement(components.ScreenElement, {
187
+ }) : null)), withTitle && /*#__PURE__*/React.createElement(components.ScreenElement, {
200
188
  key: "title",
201
189
  placeholder: "title",
202
190
  emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
@@ -208,13 +196,9 @@ var ImageScreen = function ImageScreen(_ref) {
208
196
  }),
209
197
  emptyClassName: styles.emptyTitle,
210
198
  isEmpty: !hasTitle
211
- }, hasTitle ? /*#__PURE__*/React.createElement(components.Transitions, {
212
- transitions: transitions,
213
- playing: transitionPlaying,
214
- disabled: transitionDisabled
215
- }, /*#__PURE__*/React.createElement("div", {
199
+ }, hasTitle ? /*#__PURE__*/React.createElement("div", {
216
200
  style: itemMarginStyle
217
- }, /*#__PURE__*/React.createElement(Heading, title))) : null), withText && /*#__PURE__*/React.createElement(components.ScreenElement, {
201
+ }, /*#__PURE__*/React.createElement(Heading, title)) : null), withText && /*#__PURE__*/React.createElement(components.ScreenElement, {
218
202
  key: "text",
219
203
  placeholder: "text",
220
204
  emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
@@ -226,13 +210,9 @@ var ImageScreen = function ImageScreen(_ref) {
226
210
  }),
227
211
  emptyClassName: styles.emptyText,
228
212
  isEmpty: !hasText
229
- }, hasText ? /*#__PURE__*/React.createElement(components.Transitions, {
230
- transitions: transitions,
231
- playing: transitionPlaying,
232
- disabled: transitionDisabled
233
- }, /*#__PURE__*/React.createElement("div", {
213
+ }, hasText ? /*#__PURE__*/React.createElement("div", {
234
214
  style: itemMarginStyle
235
- }, /*#__PURE__*/React.createElement(Text, text))) : null), withLegend && /*#__PURE__*/React.createElement(components.ScreenElement, {
215
+ }, /*#__PURE__*/React.createElement(Text, text)) : null), withLegend && /*#__PURE__*/React.createElement(components.ScreenElement, {
236
216
  key: "legend",
237
217
  placeholder: "shortText",
238
218
  emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
@@ -244,13 +224,9 @@ var ImageScreen = function ImageScreen(_ref) {
244
224
  }),
245
225
  emptyClassName: styles.emptyLegend,
246
226
  isEmpty: !hasLegend
247
- }, hasLegend ? /*#__PURE__*/React.createElement(components.Transitions, {
248
- transitions: transitions,
249
- playing: transitionPlaying,
250
- disabled: transitionDisabled
251
- }, /*#__PURE__*/React.createElement("div", {
227
+ }, hasLegend ? /*#__PURE__*/React.createElement("div", {
252
228
  style: itemMarginStyle
253
- }, /*#__PURE__*/React.createElement(Text, legend))) : null)];
229
+ }, /*#__PURE__*/React.createElement(Text, legend)) : null)];
254
230
  if (isReversed) {
255
231
  items.reverse();
256
232
  } else if (isTitleTop) {
@@ -326,32 +302,31 @@ var ImageScreen = function ImageScreen(_ref) {
326
302
  };
327
303
  ImageScreen.propTypes = propTypes;
328
304
  ImageScreen.defaultProps = defaultProps;
329
- var ImageScreen$1 = /*#__PURE__*/React.memo(ImageScreen);
330
305
 
331
306
  var ImageLegendScreen = function ImageLegendScreen(_ref) {
332
307
  var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
333
- return /*#__PURE__*/React.createElement(ImageScreen$1, Object.assign({}, props, {
308
+ return /*#__PURE__*/React.createElement(ImageScreen, Object.assign({}, props, {
334
309
  withLegend: true
335
310
  }));
336
311
  };
337
312
 
338
313
  var ImageTextScreen = function ImageTextScreen(_ref) {
339
314
  var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
340
- return /*#__PURE__*/React.createElement(ImageScreen$1, Object.assign({}, props, {
315
+ return /*#__PURE__*/React.createElement(ImageScreen, Object.assign({}, props, {
341
316
  withText: true
342
317
  }));
343
318
  };
344
319
 
345
320
  var ImageTitleScreen = function ImageTitleScreen(_ref) {
346
321
  var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
347
- return /*#__PURE__*/React.createElement(ImageScreen$1, Object.assign({}, props, {
322
+ return /*#__PURE__*/React.createElement(ImageScreen, Object.assign({}, props, {
348
323
  withTitle: true
349
324
  }));
350
325
  };
351
326
 
352
327
  var ImageTitleTextScreen = function ImageTitleTextScreen(_ref) {
353
328
  var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
354
- return /*#__PURE__*/React.createElement(ImageScreen$1, Object.assign({}, props, {
329
+ return /*#__PURE__*/React.createElement(ImageScreen, Object.assign({}, props, {
355
330
  withTitle: true,
356
331
  withText: true
357
332
  }));
@@ -418,7 +393,7 @@ var definition = [{
418
393
  "value": "Image"
419
394
  }]
420
395
  }),
421
- component: ImageScreen$1,
396
+ component: ImageScreen,
422
397
  layouts: ['normal', 'fullscreen'],
423
398
  transforms: transforms,
424
399
  fields: [{
@@ -984,7 +959,7 @@ var definition = [{
984
959
  }];
985
960
 
986
961
  exports.ImageLegendScreen = ImageLegendScreen;
987
- exports.ImageScreen = ImageScreen$1;
962
+ exports.ImageScreen = ImageScreen;
988
963
  exports.ImageTextScreen = ImageTextScreen;
989
964
  exports.ImageTitleScreen = ImageTitleScreen;
990
965
  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.433",
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.433",
62
+ "@micromag/element-background": "^0.3.433",
63
+ "@micromag/element-container": "^0.3.433",
64
+ "@micromag/element-footer": "^0.3.433",
65
+ "@micromag/element-header": "^0.3.433",
66
+ "@micromag/element-heading": "^0.3.433",
67
+ "@micromag/element-layout": "^0.3.433",
68
+ "@micromag/element-text": "^0.3.433",
69
+ "@micromag/element-visual": "^0.3.433",
70
+ "@micromag/transforms": "^0.3.433",
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": "4fe51ffae9ebd9844db8014a1912df2df5122f28"
82
82
  }