@micromag/screen-gallery 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.
- package/es/index.js +7 -29
- package/lib/index.js +6 -28
- package/package.json +12 -12
package/es/index.js
CHANGED
|
@@ -7,7 +7,7 @@ import isPlainObject from 'lodash/isPlainObject';
|
|
|
7
7
|
import PropTypes from 'prop-types';
|
|
8
8
|
import React, { useState, useCallback, useRef, useEffect } from 'react';
|
|
9
9
|
import { PropTypes as PropTypes$1 } from '@micromag/core';
|
|
10
|
-
import {
|
|
10
|
+
import { ScreenElement } from '@micromag/core/components';
|
|
11
11
|
import { useScreenSize, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef, useScreenRenderContext } from '@micromag/core/contexts';
|
|
12
12
|
import { useDimensionObserver } from '@micromag/core/hooks';
|
|
13
13
|
import { isHeaderFilled, isFooterFilled, getFooterProps, isImageFilled, isTextFilled } from '@micromag/core/utils';
|
|
@@ -216,8 +216,6 @@ var propTypes = {
|
|
|
216
216
|
footer: PropTypes$1.footer,
|
|
217
217
|
current: PropTypes.bool,
|
|
218
218
|
active: PropTypes.bool,
|
|
219
|
-
transitions: PropTypes$1.transitions,
|
|
220
|
-
transitionStagger: PropTypes.number,
|
|
221
219
|
className: PropTypes.string
|
|
222
220
|
};
|
|
223
221
|
var defaultProps = {
|
|
@@ -231,8 +229,6 @@ var defaultProps = {
|
|
|
231
229
|
footer: null,
|
|
232
230
|
current: true,
|
|
233
231
|
active: true,
|
|
234
|
-
transitions: null,
|
|
235
|
-
transitionStagger: 50,
|
|
236
232
|
className: null
|
|
237
233
|
};
|
|
238
234
|
var GalleryScreen = function GalleryScreen(_ref) {
|
|
@@ -246,8 +242,6 @@ var GalleryScreen = function GalleryScreen(_ref) {
|
|
|
246
242
|
active = _ref.active,
|
|
247
243
|
spacing = _ref.spacing,
|
|
248
244
|
captionMaxLines = _ref.captionMaxLines,
|
|
249
|
-
transitions = _ref.transitions,
|
|
250
|
-
transitionStagger = _ref.transitionStagger,
|
|
251
245
|
className = _ref.className;
|
|
252
246
|
var _useScreenSize = useScreenSize(),
|
|
253
247
|
width = _useScreenSize.width,
|
|
@@ -266,9 +260,7 @@ var GalleryScreen = function GalleryScreen(_ref) {
|
|
|
266
260
|
isView = _useScreenRenderConte.isView,
|
|
267
261
|
isPreview = _useScreenRenderConte.isPreview,
|
|
268
262
|
isPlaceholder = _useScreenRenderConte.isPlaceholder,
|
|
269
|
-
isEdit = _useScreenRenderConte.isEdit
|
|
270
|
-
isStatic = _useScreenRenderConte.isStatic,
|
|
271
|
-
isCapture = _useScreenRenderConte.isCapture;
|
|
263
|
+
isEdit = _useScreenRenderConte.isEdit;
|
|
272
264
|
var backgroundPlaying = current && (isView || isEdit);
|
|
273
265
|
var mediaShouldLoad = current || active;
|
|
274
266
|
var finalSpacing = isPlaceholder ? 5 : spacing;
|
|
@@ -288,8 +280,6 @@ var GalleryScreen = function GalleryScreen(_ref) {
|
|
|
288
280
|
setImagesLoaded = _useState2[1];
|
|
289
281
|
var imagesCount = images !== null ? Math.min(gridSpaces, images.length) : 0;
|
|
290
282
|
var ready = imagesLoaded >= imagesCount;
|
|
291
|
-
var transitionPlaying = current && ready;
|
|
292
|
-
var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
|
|
293
283
|
var onImageLoaded = useCallback(function () {
|
|
294
284
|
setImagesLoaded(function (count) {
|
|
295
285
|
return count + 1;
|
|
@@ -355,12 +345,6 @@ var GalleryScreen = function GalleryScreen(_ref) {
|
|
|
355
345
|
ref: function ref(el) {
|
|
356
346
|
imagesEl.current[itemI] = el;
|
|
357
347
|
}
|
|
358
|
-
}, /*#__PURE__*/React.createElement(Transitions, {
|
|
359
|
-
transitions: transitions,
|
|
360
|
-
delay: itemI * transitionStagger,
|
|
361
|
-
playing: transitionPlaying,
|
|
362
|
-
disabled: transitionDisabled,
|
|
363
|
-
fullscreen: true
|
|
364
348
|
}, /*#__PURE__*/React.createElement(ScreenElement, {
|
|
365
349
|
placeholder: "image",
|
|
366
350
|
placeholderProps: {
|
|
@@ -388,12 +372,7 @@ var GalleryScreen = function GalleryScreen(_ref) {
|
|
|
388
372
|
shouldLoad: mediaShouldLoad,
|
|
389
373
|
withoutVideo: isPreview,
|
|
390
374
|
onLoaded: onImageLoaded
|
|
391
|
-
})) : null))
|
|
392
|
-
transitions: transitions,
|
|
393
|
-
delay: itemI * transitionStagger,
|
|
394
|
-
playing: transitionPlaying,
|
|
395
|
-
disabled: transitionDisabled
|
|
396
|
-
}, /*#__PURE__*/React.createElement(ScreenElement, {
|
|
375
|
+
})) : null)), withCaptions ? /*#__PURE__*/React.createElement(ScreenElement, {
|
|
397
376
|
placeholder: "line",
|
|
398
377
|
emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
|
|
399
378
|
id: "6tIigB",
|
|
@@ -409,7 +388,7 @@ var GalleryScreen = function GalleryScreen(_ref) {
|
|
|
409
388
|
}, /*#__PURE__*/React.createElement(Text, Object.assign({}, caption, {
|
|
410
389
|
className: styles.captionText,
|
|
411
390
|
lineClamp: captionMaxLines
|
|
412
|
-
}))))
|
|
391
|
+
})))) : null);
|
|
413
392
|
});
|
|
414
393
|
return /*#__PURE__*/React.createElement("div", {
|
|
415
394
|
className: classNames([styles.container, _defineProperty(_defineProperty({}, className, className !== null), styles.isPlaceholder, isPlaceholder)]),
|
|
@@ -463,11 +442,10 @@ var GalleryScreen = function GalleryScreen(_ref) {
|
|
|
463
442
|
};
|
|
464
443
|
GalleryScreen.propTypes = propTypes;
|
|
465
444
|
GalleryScreen.defaultProps = defaultProps;
|
|
466
|
-
var GalleryScreen$1 = /*#__PURE__*/React.memo(GalleryScreen);
|
|
467
445
|
|
|
468
446
|
function GalleryCaptionsScreen(_ref) {
|
|
469
447
|
var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
|
|
470
|
-
return /*#__PURE__*/React.createElement(GalleryScreen
|
|
448
|
+
return /*#__PURE__*/React.createElement(GalleryScreen, Object.assign({}, props, {
|
|
471
449
|
withCaptions: true
|
|
472
450
|
}));
|
|
473
451
|
}
|
|
@@ -514,7 +492,7 @@ var definition = [{
|
|
|
514
492
|
"value": "Gallery"
|
|
515
493
|
}]
|
|
516
494
|
}),
|
|
517
|
-
component: GalleryScreen
|
|
495
|
+
component: GalleryScreen,
|
|
518
496
|
layouts: [
|
|
519
497
|
// 2
|
|
520
498
|
'two-vertical-equal', 'two-vertical-top', 'two-vertical-bottom',
|
|
@@ -703,4 +681,4 @@ var definition = [{
|
|
|
703
681
|
}]
|
|
704
682
|
}];
|
|
705
683
|
|
|
706
|
-
export { GalleryCaptionsScreen, GalleryScreen
|
|
684
|
+
export { GalleryCaptionsScreen, GalleryScreen, definition as default };
|
package/lib/index.js
CHANGED
|
@@ -220,8 +220,6 @@ var propTypes = {
|
|
|
220
220
|
footer: core.PropTypes.footer,
|
|
221
221
|
current: PropTypes.bool,
|
|
222
222
|
active: PropTypes.bool,
|
|
223
|
-
transitions: core.PropTypes.transitions,
|
|
224
|
-
transitionStagger: PropTypes.number,
|
|
225
223
|
className: PropTypes.string
|
|
226
224
|
};
|
|
227
225
|
var defaultProps = {
|
|
@@ -235,8 +233,6 @@ var defaultProps = {
|
|
|
235
233
|
footer: null,
|
|
236
234
|
current: true,
|
|
237
235
|
active: true,
|
|
238
|
-
transitions: null,
|
|
239
|
-
transitionStagger: 50,
|
|
240
236
|
className: null
|
|
241
237
|
};
|
|
242
238
|
var GalleryScreen = function GalleryScreen(_ref) {
|
|
@@ -250,8 +246,6 @@ var GalleryScreen = function GalleryScreen(_ref) {
|
|
|
250
246
|
active = _ref.active,
|
|
251
247
|
spacing = _ref.spacing,
|
|
252
248
|
captionMaxLines = _ref.captionMaxLines,
|
|
253
|
-
transitions = _ref.transitions,
|
|
254
|
-
transitionStagger = _ref.transitionStagger,
|
|
255
249
|
className = _ref.className;
|
|
256
250
|
var _useScreenSize = contexts.useScreenSize(),
|
|
257
251
|
width = _useScreenSize.width,
|
|
@@ -270,9 +264,7 @@ var GalleryScreen = function GalleryScreen(_ref) {
|
|
|
270
264
|
isView = _useScreenRenderConte.isView,
|
|
271
265
|
isPreview = _useScreenRenderConte.isPreview,
|
|
272
266
|
isPlaceholder = _useScreenRenderConte.isPlaceholder,
|
|
273
|
-
isEdit = _useScreenRenderConte.isEdit
|
|
274
|
-
isStatic = _useScreenRenderConte.isStatic,
|
|
275
|
-
isCapture = _useScreenRenderConte.isCapture;
|
|
267
|
+
isEdit = _useScreenRenderConte.isEdit;
|
|
276
268
|
var backgroundPlaying = current && (isView || isEdit);
|
|
277
269
|
var mediaShouldLoad = current || active;
|
|
278
270
|
var finalSpacing = isPlaceholder ? 5 : spacing;
|
|
@@ -292,8 +284,6 @@ var GalleryScreen = function GalleryScreen(_ref) {
|
|
|
292
284
|
setImagesLoaded = _useState2[1];
|
|
293
285
|
var imagesCount = images !== null ? Math.min(gridSpaces, images.length) : 0;
|
|
294
286
|
var ready = imagesLoaded >= imagesCount;
|
|
295
|
-
var transitionPlaying = current && ready;
|
|
296
|
-
var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
|
|
297
287
|
var onImageLoaded = React.useCallback(function () {
|
|
298
288
|
setImagesLoaded(function (count) {
|
|
299
289
|
return count + 1;
|
|
@@ -359,12 +349,6 @@ var GalleryScreen = function GalleryScreen(_ref) {
|
|
|
359
349
|
ref: function ref(el) {
|
|
360
350
|
imagesEl.current[itemI] = el;
|
|
361
351
|
}
|
|
362
|
-
}, /*#__PURE__*/React.createElement(components.Transitions, {
|
|
363
|
-
transitions: transitions,
|
|
364
|
-
delay: itemI * transitionStagger,
|
|
365
|
-
playing: transitionPlaying,
|
|
366
|
-
disabled: transitionDisabled,
|
|
367
|
-
fullscreen: true
|
|
368
352
|
}, /*#__PURE__*/React.createElement(components.ScreenElement, {
|
|
369
353
|
placeholder: "image",
|
|
370
354
|
placeholderProps: {
|
|
@@ -392,12 +376,7 @@ var GalleryScreen = function GalleryScreen(_ref) {
|
|
|
392
376
|
shouldLoad: mediaShouldLoad,
|
|
393
377
|
withoutVideo: isPreview,
|
|
394
378
|
onLoaded: onImageLoaded
|
|
395
|
-
})) : null))
|
|
396
|
-
transitions: transitions,
|
|
397
|
-
delay: itemI * transitionStagger,
|
|
398
|
-
playing: transitionPlaying,
|
|
399
|
-
disabled: transitionDisabled
|
|
400
|
-
}, /*#__PURE__*/React.createElement(components.ScreenElement, {
|
|
379
|
+
})) : null)), withCaptions ? /*#__PURE__*/React.createElement(components.ScreenElement, {
|
|
401
380
|
placeholder: "line",
|
|
402
381
|
emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
|
|
403
382
|
id: "6tIigB",
|
|
@@ -413,7 +392,7 @@ var GalleryScreen = function GalleryScreen(_ref) {
|
|
|
413
392
|
}, /*#__PURE__*/React.createElement(Text, Object.assign({}, caption, {
|
|
414
393
|
className: styles.captionText,
|
|
415
394
|
lineClamp: captionMaxLines
|
|
416
|
-
}))))
|
|
395
|
+
})))) : null);
|
|
417
396
|
});
|
|
418
397
|
return /*#__PURE__*/React.createElement("div", {
|
|
419
398
|
className: classNames([styles.container, _defineProperty(_defineProperty({}, className, className !== null), styles.isPlaceholder, isPlaceholder)]),
|
|
@@ -467,11 +446,10 @@ var GalleryScreen = function GalleryScreen(_ref) {
|
|
|
467
446
|
};
|
|
468
447
|
GalleryScreen.propTypes = propTypes;
|
|
469
448
|
GalleryScreen.defaultProps = defaultProps;
|
|
470
|
-
var GalleryScreen$1 = /*#__PURE__*/React.memo(GalleryScreen);
|
|
471
449
|
|
|
472
450
|
function GalleryCaptionsScreen(_ref) {
|
|
473
451
|
var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
|
|
474
|
-
return /*#__PURE__*/React.createElement(GalleryScreen
|
|
452
|
+
return /*#__PURE__*/React.createElement(GalleryScreen, Object.assign({}, props, {
|
|
475
453
|
withCaptions: true
|
|
476
454
|
}));
|
|
477
455
|
}
|
|
@@ -518,7 +496,7 @@ var definition = [{
|
|
|
518
496
|
"value": "Gallery"
|
|
519
497
|
}]
|
|
520
498
|
}),
|
|
521
|
-
component: GalleryScreen
|
|
499
|
+
component: GalleryScreen,
|
|
522
500
|
layouts: [
|
|
523
501
|
// 2
|
|
524
502
|
'two-vertical-equal', 'two-vertical-top', 'two-vertical-bottom',
|
|
@@ -708,5 +686,5 @@ var definition = [{
|
|
|
708
686
|
}];
|
|
709
687
|
|
|
710
688
|
exports.GalleryCaptionsScreen = GalleryCaptionsScreen;
|
|
711
|
-
exports.GalleryScreen = GalleryScreen
|
|
689
|
+
exports.GalleryScreen = GalleryScreen;
|
|
712
690
|
exports.default = definition;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@micromag/screen-gallery",
|
|
3
|
-
"version": "0.3.
|
|
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.
|
|
62
|
-
"@micromag/element-background": "^0.3.
|
|
63
|
-
"@micromag/element-container": "^0.3.
|
|
64
|
-
"@micromag/element-footer": "^0.3.
|
|
65
|
-
"@micromag/element-grid": "^0.3.
|
|
66
|
-
"@micromag/element-header": "^0.3.
|
|
67
|
-
"@micromag/element-layout": "^0.3.
|
|
68
|
-
"@micromag/element-text": "^0.3.
|
|
69
|
-
"@micromag/element-visual": "^0.3.
|
|
70
|
-
"@micromag/transforms": "^0.3.
|
|
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-grid": "^0.3.433",
|
|
66
|
+
"@micromag/element-header": "^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": "
|
|
81
|
+
"gitHead": "4fe51ffae9ebd9844db8014a1912df2df5122f28"
|
|
82
82
|
}
|