@micromag/screen-gallery 0.2.401 → 0.2.406

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 +36 -32
  2. package/lib/index.js +42 -38
  3. package/package.json +11 -11
package/es/index.js CHANGED
@@ -2,21 +2,21 @@ import { FormattedMessage, defineMessage } from 'react-intl';
2
2
  import _defineProperty from '@babel/runtime/helpers/defineProperty';
3
3
  import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
4
4
  import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
5
- import React, { useState, useCallback, useRef, useEffect } from 'react';
6
- import PropTypes from 'prop-types';
7
- import classNames from 'classnames';
8
- import isPlainObject from 'lodash/isPlainObject';
9
5
  import { PropTypes as PropTypes$1 } from '@micromag/core';
10
- import { useScreenSize, useViewer, useScreenRenderContext } from '@micromag/core/contexts';
11
6
  import { Transitions, ScreenElement } from '@micromag/core/components';
12
- import { isImageFilled, isTextFilled } from '@micromag/core/utils';
7
+ import { useScreenSize, useViewer, useScreenRenderContext } from '@micromag/core/contexts';
13
8
  import { useResizeObserver } from '@micromag/core/hooks';
9
+ import { isImageFilled, isTextFilled } from '@micromag/core/utils';
14
10
  import Background from '@micromag/element-background';
11
+ import CallToAction from '@micromag/element-call-to-action';
15
12
  import Container from '@micromag/element-container';
16
13
  import Grid from '@micromag/element-grid';
17
- import Visual from '@micromag/element-visual';
18
14
  import Text from '@micromag/element-text';
19
- import CallToAction from '@micromag/element-call-to-action';
15
+ import Visual from '@micromag/element-visual';
16
+ import classNames from 'classnames';
17
+ import isPlainObject from 'lodash/isPlainObject';
18
+ import PropTypes from 'prop-types';
19
+ import React, { useState, useCallback, useRef, useEffect } from 'react';
20
20
  import _extends from '@babel/runtime/helpers/extends';
21
21
  import _objectSpread from '@babel/runtime/helpers/objectSpread2';
22
22
  import { Mosaic, Container as Container$1 } from '@micromag/transforms/apple-news';
@@ -109,7 +109,7 @@ var layoutProps = {
109
109
  rows: [1, 2]
110
110
  }]
111
111
  },
112
- // 5
112
+ // 5
113
113
  'two-one-two': {
114
114
  layout: [{
115
115
  rows: 2,
@@ -207,6 +207,7 @@ var propTypes = {
207
207
  background: PropTypes$1.backgroundElement,
208
208
  callToAction: PropTypes$1.callToAction,
209
209
  current: PropTypes.bool,
210
+ active: PropTypes.bool,
210
211
  transitions: PropTypes$1.transitions,
211
212
  transitionStagger: PropTypes.number,
212
213
  className: PropTypes.string
@@ -220,6 +221,7 @@ var defaultProps = {
220
221
  background: null,
221
222
  callToAction: null,
222
223
  current: true,
224
+ active: true,
223
225
  transitions: null,
224
226
  transitionStagger: 50,
225
227
  className: null
@@ -234,6 +236,7 @@ var GalleryScreen = function GalleryScreen(_ref) {
234
236
  background = _ref.background,
235
237
  callToAction = _ref.callToAction,
236
238
  current = _ref.current,
239
+ active = _ref.active,
237
240
  spacing = _ref.spacing,
238
241
  captionMaxLines = _ref.captionMaxLines,
239
242
  transitions = _ref.transitions,
@@ -400,7 +403,8 @@ var GalleryScreen = function GalleryScreen(_ref) {
400
403
  background: background,
401
404
  width: width,
402
405
  height: height,
403
- playing: backgroundPlaying
406
+ playing: backgroundPlaying,
407
+ shouldLoad: current || active
404
408
  }) : null, /*#__PURE__*/React.createElement(Container, {
405
409
  width: width,
406
410
  height: height
@@ -432,13 +436,13 @@ GalleryScreen.propTypes = propTypes;
432
436
  GalleryScreen.defaultProps = defaultProps;
433
437
  var GalleryScreen$1 = /*#__PURE__*/React.memo(GalleryScreen);
434
438
 
435
- var GalleryCaptionsScreen = function GalleryCaptionsScreen(_ref) {
439
+ function GalleryCaptionsScreen(_ref) {
436
440
  var props = _extends({}, _ref);
437
441
 
438
442
  return /*#__PURE__*/React.createElement(GalleryScreen$1, Object.assign({}, props, {
439
443
  withCaptions: true
440
444
  }));
441
- };
445
+ }
442
446
 
443
447
  var transform = function transform(newStory, _ref) {
444
448
  var images = _ref.images;
@@ -470,8 +474,8 @@ var definition = [{
470
474
  type: 'screen',
471
475
  group: {
472
476
  label: defineMessage({
473
- "id": "6mX2ya",
474
- "defaultMessage": [{
477
+ id: "6mX2ya",
478
+ defaultMessage: [{
475
479
  "type": 0,
476
480
  "value": "Images"
477
481
  }]
@@ -479,8 +483,8 @@ var definition = [{
479
483
  order: 4
480
484
  },
481
485
  title: defineMessage({
482
- "id": "jaFXki",
483
- "defaultMessage": [{
486
+ id: "jaFXki",
487
+ defaultMessage: [{
484
488
  "type": 0,
485
489
  "value": "Gallery"
486
490
  }]
@@ -498,8 +502,8 @@ var definition = [{
498
502
  type: 'screen-layout',
499
503
  defaultValue: 'two-vertical-equal',
500
504
  label: defineMessage({
501
- "id": "4iBXj2",
502
- "defaultMessage": [{
505
+ id: "4iBXj2",
506
+ defaultMessage: [{
503
507
  "type": 0,
504
508
  "value": "Layout"
505
509
  }]
@@ -508,8 +512,8 @@ var definition = [{
508
512
  name: 'images',
509
513
  type: 'visuals',
510
514
  label: defineMessage({
511
- "id": "muYwrB",
512
- "defaultMessage": [{
515
+ id: "muYwrB",
516
+ defaultMessage: [{
513
517
  "type": 0,
514
518
  "value": "Images"
515
519
  }]
@@ -518,8 +522,8 @@ var definition = [{
518
522
  name: 'background',
519
523
  type: 'background',
520
524
  label: defineMessage({
521
- "id": "+MPZRu",
522
- "defaultMessage": [{
525
+ id: "+MPZRu",
526
+ defaultMessage: [{
523
527
  "type": 0,
524
528
  "value": "Background"
525
529
  }]
@@ -538,8 +542,8 @@ var definition = [{
538
542
  type: 'screen',
539
543
  group: {
540
544
  label: defineMessage({
541
- "id": "6mX2ya",
542
- "defaultMessage": [{
545
+ id: "6mX2ya",
546
+ defaultMessage: [{
543
547
  "type": 0,
544
548
  "value": "Images"
545
549
  }]
@@ -547,8 +551,8 @@ var definition = [{
547
551
  order: 4
548
552
  },
549
553
  title: defineMessage({
550
- "id": "MmJQ7o",
551
- "defaultMessage": [{
554
+ id: "MmJQ7o",
555
+ defaultMessage: [{
552
556
  "type": 0,
553
557
  "value": "Gallery with captions"
554
558
  }]
@@ -566,8 +570,8 @@ var definition = [{
566
570
  type: 'screen-layout',
567
571
  defaultValue: 'two-vertical-equal',
568
572
  label: defineMessage({
569
- "id": "4iBXj2",
570
- "defaultMessage": [{
573
+ id: "4iBXj2",
574
+ defaultMessage: [{
571
575
  "type": 0,
572
576
  "value": "Layout"
573
577
  }]
@@ -581,8 +585,8 @@ var definition = [{
581
585
  }
582
586
  },
583
587
  label: defineMessage({
584
- "id": "59f2bg",
585
- "defaultMessage": [{
588
+ id: "59f2bg",
589
+ defaultMessage: [{
586
590
  "type": 0,
587
591
  "value": "Images"
588
592
  }]
@@ -591,8 +595,8 @@ var definition = [{
591
595
  name: 'background',
592
596
  type: 'background',
593
597
  label: defineMessage({
594
- "id": "+MPZRu",
595
- "defaultMessage": [{
598
+ id: "+MPZRu",
599
+ defaultMessage: [{
596
600
  "type": 0,
597
601
  "value": "Background"
598
602
  }]
package/lib/index.js CHANGED
@@ -6,21 +6,21 @@ var reactIntl = require('react-intl');
6
6
  var _defineProperty = require('@babel/runtime/helpers/defineProperty');
7
7
  var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
8
8
  var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
9
- var React = require('react');
10
- var PropTypes = require('prop-types');
11
- var classNames = require('classnames');
12
- var isPlainObject = require('lodash/isPlainObject');
13
9
  var core = require('@micromag/core');
14
- var contexts = require('@micromag/core/contexts');
15
10
  var components = require('@micromag/core/components');
16
- var utils = require('@micromag/core/utils');
11
+ var contexts = require('@micromag/core/contexts');
17
12
  var hooks = require('@micromag/core/hooks');
13
+ var utils = require('@micromag/core/utils');
18
14
  var Background = require('@micromag/element-background');
15
+ var CallToAction = require('@micromag/element-call-to-action');
19
16
  var Container = require('@micromag/element-container');
20
17
  var Grid = require('@micromag/element-grid');
21
- var Visual = require('@micromag/element-visual');
22
18
  var Text = require('@micromag/element-text');
23
- var CallToAction = require('@micromag/element-call-to-action');
19
+ var Visual = require('@micromag/element-visual');
20
+ var classNames = require('classnames');
21
+ var isPlainObject = require('lodash/isPlainObject');
22
+ var PropTypes = require('prop-types');
23
+ var React = require('react');
24
24
  var _extends = require('@babel/runtime/helpers/extends');
25
25
  var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
26
26
  var appleNews = require('@micromag/transforms/apple-news');
@@ -30,16 +30,16 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
30
30
  var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
31
31
  var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
32
32
  var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
33
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
34
- var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
35
- var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
36
- var isPlainObject__default = /*#__PURE__*/_interopDefaultLegacy(isPlainObject);
37
33
  var Background__default = /*#__PURE__*/_interopDefaultLegacy(Background);
34
+ var CallToAction__default = /*#__PURE__*/_interopDefaultLegacy(CallToAction);
38
35
  var Container__default = /*#__PURE__*/_interopDefaultLegacy(Container);
39
36
  var Grid__default = /*#__PURE__*/_interopDefaultLegacy(Grid);
40
- var Visual__default = /*#__PURE__*/_interopDefaultLegacy(Visual);
41
37
  var Text__default = /*#__PURE__*/_interopDefaultLegacy(Text);
42
- var CallToAction__default = /*#__PURE__*/_interopDefaultLegacy(CallToAction);
38
+ var Visual__default = /*#__PURE__*/_interopDefaultLegacy(Visual);
39
+ var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
40
+ var isPlainObject__default = /*#__PURE__*/_interopDefaultLegacy(isPlainObject);
41
+ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
42
+ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
43
43
  var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
44
44
  var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
45
45
 
@@ -131,7 +131,7 @@ var layoutProps = {
131
131
  rows: [1, 2]
132
132
  }]
133
133
  },
134
- // 5
134
+ // 5
135
135
  'two-one-two': {
136
136
  layout: [{
137
137
  rows: 2,
@@ -229,6 +229,7 @@ var propTypes = {
229
229
  background: core.PropTypes.backgroundElement,
230
230
  callToAction: core.PropTypes.callToAction,
231
231
  current: PropTypes__default["default"].bool,
232
+ active: PropTypes__default["default"].bool,
232
233
  transitions: core.PropTypes.transitions,
233
234
  transitionStagger: PropTypes__default["default"].number,
234
235
  className: PropTypes__default["default"].string
@@ -242,6 +243,7 @@ var defaultProps = {
242
243
  background: null,
243
244
  callToAction: null,
244
245
  current: true,
246
+ active: true,
245
247
  transitions: null,
246
248
  transitionStagger: 50,
247
249
  className: null
@@ -256,6 +258,7 @@ var GalleryScreen = function GalleryScreen(_ref) {
256
258
  background = _ref.background,
257
259
  callToAction = _ref.callToAction,
258
260
  current = _ref.current,
261
+ active = _ref.active,
259
262
  spacing = _ref.spacing,
260
263
  captionMaxLines = _ref.captionMaxLines,
261
264
  transitions = _ref.transitions,
@@ -422,7 +425,8 @@ var GalleryScreen = function GalleryScreen(_ref) {
422
425
  background: background,
423
426
  width: width,
424
427
  height: height,
425
- playing: backgroundPlaying
428
+ playing: backgroundPlaying,
429
+ shouldLoad: current || active
426
430
  }) : null, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
427
431
  width: width,
428
432
  height: height
@@ -454,13 +458,13 @@ GalleryScreen.propTypes = propTypes;
454
458
  GalleryScreen.defaultProps = defaultProps;
455
459
  var GalleryScreen$1 = /*#__PURE__*/React__default["default"].memo(GalleryScreen);
456
460
 
457
- var GalleryCaptionsScreen = function GalleryCaptionsScreen(_ref) {
461
+ function GalleryCaptionsScreen(_ref) {
458
462
  var props = _extends__default["default"]({}, _ref);
459
463
 
460
464
  return /*#__PURE__*/React__default["default"].createElement(GalleryScreen$1, Object.assign({}, props, {
461
465
  withCaptions: true
462
466
  }));
463
- };
467
+ }
464
468
 
465
469
  var transform = function transform(newStory, _ref) {
466
470
  var images = _ref.images;
@@ -492,8 +496,8 @@ var definition = [{
492
496
  type: 'screen',
493
497
  group: {
494
498
  label: reactIntl.defineMessage({
495
- "id": "6mX2ya",
496
- "defaultMessage": [{
499
+ id: "6mX2ya",
500
+ defaultMessage: [{
497
501
  "type": 0,
498
502
  "value": "Images"
499
503
  }]
@@ -501,8 +505,8 @@ var definition = [{
501
505
  order: 4
502
506
  },
503
507
  title: reactIntl.defineMessage({
504
- "id": "jaFXki",
505
- "defaultMessage": [{
508
+ id: "jaFXki",
509
+ defaultMessage: [{
506
510
  "type": 0,
507
511
  "value": "Gallery"
508
512
  }]
@@ -520,8 +524,8 @@ var definition = [{
520
524
  type: 'screen-layout',
521
525
  defaultValue: 'two-vertical-equal',
522
526
  label: reactIntl.defineMessage({
523
- "id": "4iBXj2",
524
- "defaultMessage": [{
527
+ id: "4iBXj2",
528
+ defaultMessage: [{
525
529
  "type": 0,
526
530
  "value": "Layout"
527
531
  }]
@@ -530,8 +534,8 @@ var definition = [{
530
534
  name: 'images',
531
535
  type: 'visuals',
532
536
  label: reactIntl.defineMessage({
533
- "id": "muYwrB",
534
- "defaultMessage": [{
537
+ id: "muYwrB",
538
+ defaultMessage: [{
535
539
  "type": 0,
536
540
  "value": "Images"
537
541
  }]
@@ -540,8 +544,8 @@ var definition = [{
540
544
  name: 'background',
541
545
  type: 'background',
542
546
  label: reactIntl.defineMessage({
543
- "id": "+MPZRu",
544
- "defaultMessage": [{
547
+ id: "+MPZRu",
548
+ defaultMessage: [{
545
549
  "type": 0,
546
550
  "value": "Background"
547
551
  }]
@@ -560,8 +564,8 @@ var definition = [{
560
564
  type: 'screen',
561
565
  group: {
562
566
  label: reactIntl.defineMessage({
563
- "id": "6mX2ya",
564
- "defaultMessage": [{
567
+ id: "6mX2ya",
568
+ defaultMessage: [{
565
569
  "type": 0,
566
570
  "value": "Images"
567
571
  }]
@@ -569,8 +573,8 @@ var definition = [{
569
573
  order: 4
570
574
  },
571
575
  title: reactIntl.defineMessage({
572
- "id": "MmJQ7o",
573
- "defaultMessage": [{
576
+ id: "MmJQ7o",
577
+ defaultMessage: [{
574
578
  "type": 0,
575
579
  "value": "Gallery with captions"
576
580
  }]
@@ -588,8 +592,8 @@ var definition = [{
588
592
  type: 'screen-layout',
589
593
  defaultValue: 'two-vertical-equal',
590
594
  label: reactIntl.defineMessage({
591
- "id": "4iBXj2",
592
- "defaultMessage": [{
595
+ id: "4iBXj2",
596
+ defaultMessage: [{
593
597
  "type": 0,
594
598
  "value": "Layout"
595
599
  }]
@@ -603,8 +607,8 @@ var definition = [{
603
607
  }
604
608
  },
605
609
  label: reactIntl.defineMessage({
606
- "id": "59f2bg",
607
- "defaultMessage": [{
610
+ id: "59f2bg",
611
+ defaultMessage: [{
608
612
  "type": 0,
609
613
  "value": "Images"
610
614
  }]
@@ -613,8 +617,8 @@ var definition = [{
613
617
  name: 'background',
614
618
  type: 'background',
615
619
  label: reactIntl.defineMessage({
616
- "id": "+MPZRu",
617
- "defaultMessage": [{
620
+ id: "+MPZRu",
621
+ defaultMessage: [{
618
622
  "type": 0,
619
623
  "value": "Background"
620
624
  }]
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-gallery",
3
- "version": "0.2.401",
3
+ "version": "0.2.406",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -49,15 +49,15 @@
49
49
  },
50
50
  "dependencies": {
51
51
  "@babel/runtime": "^7.13.10",
52
- "@micromag/core": "^0.2.401",
53
- "@micromag/element-background": "^0.2.401",
54
- "@micromag/element-call-to-action": "^0.2.401",
55
- "@micromag/element-container": "^0.2.401",
56
- "@micromag/element-grid": "^0.2.401",
57
- "@micromag/element-layout": "^0.2.401",
58
- "@micromag/element-text": "^0.2.401",
59
- "@micromag/element-visual": "^0.2.401",
60
- "@micromag/transforms": "^0.2.401",
52
+ "@micromag/core": "^0.2.405",
53
+ "@micromag/element-background": "^0.2.406",
54
+ "@micromag/element-call-to-action": "^0.2.405",
55
+ "@micromag/element-container": "^0.2.405",
56
+ "@micromag/element-grid": "^0.2.405",
57
+ "@micromag/element-layout": "^0.2.405",
58
+ "@micromag/element-text": "^0.2.405",
59
+ "@micromag/element-visual": "^0.2.406",
60
+ "@micromag/transforms": "^0.2.405",
61
61
  "classnames": "^2.2.6",
62
62
  "lodash": "^4.17.21",
63
63
  "prop-types": "^15.7.2",
@@ -67,5 +67,5 @@
67
67
  "publishConfig": {
68
68
  "access": "public"
69
69
  },
70
- "gitHead": "fd03ec6d9decc9e18d6088a36e47c7b1e0e72b4c"
70
+ "gitHead": "5e1a6de73674624b0cb3f9701140ea8850e6f35e"
71
71
  }