@micromag/screen-image 0.2.311 → 0.2.320

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 +74 -7
  2. package/lib/index.js +73 -6
  3. package/package.json +11 -11
package/es/index.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { FormattedMessage, defineMessage } from 'react-intl';
2
2
  import _defineProperty from '@babel/runtime/helpers/defineProperty';
3
3
  import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
4
- import React, { useState, useCallback } from 'react';
4
+ import React, { useMemo, useState, useCallback } from 'react';
5
5
  import PropTypes from 'prop-types';
6
6
  import classNames from 'classnames';
7
7
  import { PropTypes as PropTypes$1 } from '@micromag/core';
@@ -26,7 +26,8 @@ var styles = {"container":"micromag-screen-image-container","image":"micromag-sc
26
26
  var propTypes = {
27
27
  layout: PropTypes.oneOf(['normal', 'fullscreen', 'reverse', 'card', 'card-reverse', 'title-top']),
28
28
  image: PropTypes$1.imageMedia,
29
- imageFit: PropTypes$1.objectFit,
29
+ imageFit: PropTypes.oneOf(['contain', 'cover']),
30
+ defaultImageFit: PropTypes.string,
30
31
  title: PropTypes$1.headingElement,
31
32
  text: PropTypes$1.textElement,
32
33
  legend: PropTypes$1.textElement,
@@ -43,9 +44,8 @@ var propTypes = {
43
44
  var defaultProps = {
44
45
  layout: 'normal',
45
46
  image: null,
46
- imageFit: {
47
- fit: 'cover'
48
- },
47
+ imageFit: null,
48
+ defaultImageFit: 'cover',
49
49
  title: null,
50
50
  text: null,
51
51
  legend: null,
@@ -66,6 +66,7 @@ var ImageScreen = function ImageScreen(_ref) {
66
66
  var layout = _ref.layout,
67
67
  image = _ref.image,
68
68
  imageFit = _ref.imageFit,
69
+ defaultImageFit = _ref.defaultImageFit,
69
70
  title = _ref.title,
70
71
  text = _ref.text,
71
72
  legend = _ref.legend,
@@ -78,6 +79,11 @@ var ImageScreen = function ImageScreen(_ref) {
78
79
  current = _ref.current,
79
80
  transitions = _ref.transitions,
80
81
  className = _ref.className;
82
+ var finalImageFit = useMemo(function () {
83
+ return {
84
+ fit: imageFit || defaultImageFit
85
+ };
86
+ }, [imageFit, defaultImageFit]);
81
87
 
82
88
  var _useScreenSize = useScreenSize(),
83
89
  width = _useScreenSize.width,
@@ -158,7 +164,7 @@ var ImageScreen = function ImageScreen(_ref) {
158
164
  }, /*#__PURE__*/React.createElement(Visual, {
159
165
  className: styles.image,
160
166
  media: image,
161
- objectFit: imageFit,
167
+ objectFit: finalImageFit,
162
168
  width: imageWidth,
163
169
  height: imageHeight,
164
170
  videoAutoplay: backgroundPlaying,
@@ -245,7 +251,8 @@ var ImageScreen = function ImageScreen(_ref) {
245
251
  }, /*#__PURE__*/React.createElement(CallToAction, {
246
252
  className: styles.callToAction,
247
253
  callToAction: callToAction,
248
- animationDisabled: isPreview
254
+ animationDisabled: isPreview,
255
+ focusable: current && isView
249
256
  })));
250
257
  }
251
258
 
@@ -413,6 +420,18 @@ var definition = [{
413
420
  "value": "Image"
414
421
  }]
415
422
  })
423
+ }, {
424
+ name: 'imageFit',
425
+ type: 'fit',
426
+ defaultValue: 'cover',
427
+ values: ['cover', 'contain'],
428
+ label: defineMessage({
429
+ "id": "dkBBRa",
430
+ "defaultMessage": [{
431
+ "type": 0,
432
+ "value": "Image fit"
433
+ }]
434
+ })
416
435
  }, {
417
436
  name: 'background',
418
437
  type: 'background',
@@ -476,6 +495,18 @@ var definition = [{
476
495
  "value": "Image"
477
496
  }]
478
497
  })
498
+ }, {
499
+ name: 'imageFit',
500
+ type: 'fit',
501
+ defaultValue: 'cover',
502
+ values: ['cover', 'contain'],
503
+ label: defineMessage({
504
+ "id": "dkBBRa",
505
+ "defaultMessage": [{
506
+ "type": 0,
507
+ "value": "Image fit"
508
+ }]
509
+ })
479
510
  }, {
480
511
  name: 'title',
481
512
  type: 'heading-element',
@@ -553,6 +584,18 @@ var definition = [{
553
584
  "value": "Image"
554
585
  }]
555
586
  })
587
+ }, {
588
+ name: 'imageFit',
589
+ type: 'fit',
590
+ defaultValue: 'cover',
591
+ values: ['cover', 'contain'],
592
+ label: defineMessage({
593
+ "id": "dkBBRa",
594
+ "defaultMessage": [{
595
+ "type": 0,
596
+ "value": "Image fit"
597
+ }]
598
+ })
556
599
  }, {
557
600
  name: 'text',
558
601
  type: 'text-element',
@@ -630,6 +673,18 @@ var definition = [{
630
673
  "value": "Image"
631
674
  }]
632
675
  })
676
+ }, {
677
+ name: 'imageFit',
678
+ type: 'fit',
679
+ defaultValue: 'cover',
680
+ values: ['cover', 'contain'],
681
+ label: defineMessage({
682
+ "id": "dkBBRa",
683
+ "defaultMessage": [{
684
+ "type": 0,
685
+ "value": "Image fit"
686
+ }]
687
+ })
633
688
  }, {
634
689
  name: 'title',
635
690
  type: 'text-element',
@@ -720,6 +775,18 @@ var definition = [{
720
775
  "value": "Image"
721
776
  }]
722
777
  })
778
+ }, {
779
+ name: 'imageFit',
780
+ type: 'fit',
781
+ defaultValue: 'cover',
782
+ values: ['cover', 'contain'],
783
+ label: defineMessage({
784
+ "id": "dkBBRa",
785
+ "defaultMessage": [{
786
+ "type": 0,
787
+ "value": "Image fit"
788
+ }]
789
+ })
723
790
  }, {
724
791
  name: 'legend',
725
792
  type: 'text-element',
package/lib/index.js CHANGED
@@ -48,7 +48,8 @@ var styles = {"container":"micromag-screen-image-container","image":"micromag-sc
48
48
  var propTypes = {
49
49
  layout: PropTypes__default['default'].oneOf(['normal', 'fullscreen', 'reverse', 'card', 'card-reverse', 'title-top']),
50
50
  image: core.PropTypes.imageMedia,
51
- imageFit: core.PropTypes.objectFit,
51
+ imageFit: PropTypes__default['default'].oneOf(['contain', 'cover']),
52
+ defaultImageFit: PropTypes__default['default'].string,
52
53
  title: core.PropTypes.headingElement,
53
54
  text: core.PropTypes.textElement,
54
55
  legend: core.PropTypes.textElement,
@@ -65,9 +66,8 @@ var propTypes = {
65
66
  var defaultProps = {
66
67
  layout: 'normal',
67
68
  image: null,
68
- imageFit: {
69
- fit: 'cover'
70
- },
69
+ imageFit: null,
70
+ defaultImageFit: 'cover',
71
71
  title: null,
72
72
  text: null,
73
73
  legend: null,
@@ -88,6 +88,7 @@ var ImageScreen = function ImageScreen(_ref) {
88
88
  var layout = _ref.layout,
89
89
  image = _ref.image,
90
90
  imageFit = _ref.imageFit,
91
+ defaultImageFit = _ref.defaultImageFit,
91
92
  title = _ref.title,
92
93
  text = _ref.text,
93
94
  legend = _ref.legend,
@@ -100,6 +101,11 @@ var ImageScreen = function ImageScreen(_ref) {
100
101
  current = _ref.current,
101
102
  transitions = _ref.transitions,
102
103
  className = _ref.className;
104
+ var finalImageFit = React.useMemo(function () {
105
+ return {
106
+ fit: imageFit || defaultImageFit
107
+ };
108
+ }, [imageFit, defaultImageFit]);
103
109
 
104
110
  var _useScreenSize = contexts.useScreenSize(),
105
111
  width = _useScreenSize.width,
@@ -180,7 +186,7 @@ var ImageScreen = function ImageScreen(_ref) {
180
186
  }, /*#__PURE__*/React__default['default'].createElement(Visual__default['default'], {
181
187
  className: styles.image,
182
188
  media: image,
183
- objectFit: imageFit,
189
+ objectFit: finalImageFit,
184
190
  width: imageWidth,
185
191
  height: imageHeight,
186
192
  videoAutoplay: backgroundPlaying,
@@ -267,7 +273,8 @@ var ImageScreen = function ImageScreen(_ref) {
267
273
  }, /*#__PURE__*/React__default['default'].createElement(CallToAction__default['default'], {
268
274
  className: styles.callToAction,
269
275
  callToAction: callToAction,
270
- animationDisabled: isPreview
276
+ animationDisabled: isPreview,
277
+ focusable: current && isView
271
278
  })));
272
279
  }
273
280
 
@@ -435,6 +442,18 @@ var definition = [{
435
442
  "value": "Image"
436
443
  }]
437
444
  })
445
+ }, {
446
+ name: 'imageFit',
447
+ type: 'fit',
448
+ defaultValue: 'cover',
449
+ values: ['cover', 'contain'],
450
+ label: reactIntl.defineMessage({
451
+ "id": "dkBBRa",
452
+ "defaultMessage": [{
453
+ "type": 0,
454
+ "value": "Image fit"
455
+ }]
456
+ })
438
457
  }, {
439
458
  name: 'background',
440
459
  type: 'background',
@@ -498,6 +517,18 @@ var definition = [{
498
517
  "value": "Image"
499
518
  }]
500
519
  })
520
+ }, {
521
+ name: 'imageFit',
522
+ type: 'fit',
523
+ defaultValue: 'cover',
524
+ values: ['cover', 'contain'],
525
+ label: reactIntl.defineMessage({
526
+ "id": "dkBBRa",
527
+ "defaultMessage": [{
528
+ "type": 0,
529
+ "value": "Image fit"
530
+ }]
531
+ })
501
532
  }, {
502
533
  name: 'title',
503
534
  type: 'heading-element',
@@ -575,6 +606,18 @@ var definition = [{
575
606
  "value": "Image"
576
607
  }]
577
608
  })
609
+ }, {
610
+ name: 'imageFit',
611
+ type: 'fit',
612
+ defaultValue: 'cover',
613
+ values: ['cover', 'contain'],
614
+ label: reactIntl.defineMessage({
615
+ "id": "dkBBRa",
616
+ "defaultMessage": [{
617
+ "type": 0,
618
+ "value": "Image fit"
619
+ }]
620
+ })
578
621
  }, {
579
622
  name: 'text',
580
623
  type: 'text-element',
@@ -652,6 +695,18 @@ var definition = [{
652
695
  "value": "Image"
653
696
  }]
654
697
  })
698
+ }, {
699
+ name: 'imageFit',
700
+ type: 'fit',
701
+ defaultValue: 'cover',
702
+ values: ['cover', 'contain'],
703
+ label: reactIntl.defineMessage({
704
+ "id": "dkBBRa",
705
+ "defaultMessage": [{
706
+ "type": 0,
707
+ "value": "Image fit"
708
+ }]
709
+ })
655
710
  }, {
656
711
  name: 'title',
657
712
  type: 'text-element',
@@ -742,6 +797,18 @@ var definition = [{
742
797
  "value": "Image"
743
798
  }]
744
799
  })
800
+ }, {
801
+ name: 'imageFit',
802
+ type: 'fit',
803
+ defaultValue: 'cover',
804
+ values: ['cover', 'contain'],
805
+ label: reactIntl.defineMessage({
806
+ "id": "dkBBRa",
807
+ "defaultMessage": [{
808
+ "type": 0,
809
+ "value": "Image fit"
810
+ }]
811
+ })
745
812
  }, {
746
813
  name: 'legend',
747
814
  type: 'text-element',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-image",
3
- "version": "0.2.311",
3
+ "version": "0.2.320",
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.301",
53
- "@micromag/element-background": "^0.2.311",
54
- "@micromag/element-call-to-action": "^0.2.301",
55
- "@micromag/element-container": "^0.2.301",
56
- "@micromag/element-heading": "^0.2.301",
57
- "@micromag/element-layout": "^0.2.301",
58
- "@micromag/element-text": "^0.2.301",
59
- "@micromag/element-visual": "^0.2.309",
60
- "@micromag/transforms": "^0.2.301",
52
+ "@micromag/core": "^0.2.320",
53
+ "@micromag/element-background": "^0.2.320",
54
+ "@micromag/element-call-to-action": "^0.2.320",
55
+ "@micromag/element-container": "^0.2.320",
56
+ "@micromag/element-heading": "^0.2.320",
57
+ "@micromag/element-layout": "^0.2.320",
58
+ "@micromag/element-text": "^0.2.320",
59
+ "@micromag/element-visual": "^0.2.320",
60
+ "@micromag/transforms": "^0.2.320",
61
61
  "classnames": "^2.2.6",
62
62
  "lodash": "^4.17.20",
63
63
  "prop-types": "^15.7.2",
@@ -67,5 +67,5 @@
67
67
  "publishConfig": {
68
68
  "access": "public"
69
69
  },
70
- "gitHead": "ecf55bc30e34c61332265c3a1f6cbd978868786b"
70
+ "gitHead": "e710981101344c5b9dabf805fae6258743337e51"
71
71
  }