@micromag/screen-urbania-horoscope 0.3.103 → 0.3.106

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 +17 -11
  2. package/lib/index.js +16 -10
  3. package/package.json +18 -18
package/es/index.js CHANGED
@@ -4,7 +4,7 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
4
4
  import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
5
5
  import classNames from 'classnames';
6
6
  import PropTypes from 'prop-types';
7
- import React, { useCallback, useState, useEffect } from 'react';
7
+ import React, { useCallback, useState, useMemo, useEffect } from 'react';
8
8
  import { TransitionGroup, CSSTransition } from 'react-transition-group';
9
9
  import { PropTypes as PropTypes$1 } from '@micromag/core';
10
10
  import { ScreenElement, PlaceholderTitle, TransitionsStagger } from '@micromag/core/components';
@@ -260,14 +260,14 @@ var SignsGrid = function SignsGrid(_ref) {
260
260
  isEdit = _useScreenRenderConte.isEdit;
261
261
 
262
262
  var backgroundPlaying = current && (isView || isEdit);
263
- var backgroundShouldLoad = !isPlaceholder && (current || active || !isView);
263
+ var mediaShouldLoad = !isPlaceholder && (current || active);
264
264
  return /*#__PURE__*/React.createElement("div", {
265
265
  className: classNames([styles$1.container, _defineProperty({}, className, className !== null)])
266
266
  }, !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
267
267
  background: background || defaultBackground,
268
268
  fit: "cover",
269
269
  playing: backgroundPlaying,
270
- shouldLoad: backgroundShouldLoad
270
+ shouldLoad: mediaShouldLoad
271
271
  }) : null, /*#__PURE__*/React.createElement(Container, {
272
272
  width: width,
273
273
  height: height
@@ -321,7 +321,8 @@ var SignsGrid = function SignsGrid(_ref) {
321
321
  }, image !== null ? /*#__PURE__*/React.createElement("img", {
322
322
  className: styles$1.image,
323
323
  src: image,
324
- alt: id
324
+ alt: id,
325
+ loading: "lazy"
325
326
  }) : null, /*#__PURE__*/React.createElement("div", {
326
327
  className: styles$1.gridText
327
328
  }, /*#__PURE__*/React.createElement("h2", {
@@ -619,7 +620,7 @@ var defaultProps = {
619
620
  };
620
621
 
621
622
  var Horoscope = function Horoscope(_ref) {
622
- var _ref2;
623
+ var _ref3;
623
624
 
624
625
  var defaultSigns = _ref.defaultSigns,
625
626
  signsValue = _ref.signs,
@@ -644,9 +645,14 @@ var Horoscope = function Horoscope(_ref) {
644
645
  hasPopup = _useState2[0],
645
646
  setHasPopup = _useState2[1];
646
647
 
647
- var signs = defaultSigns.map(function (sign, index) {
648
- return _objectSpread(_objectSpread({}, sign), signsValue !== null && signsValue[index] ? signsValue[index] || null : null);
649
- });
648
+ var signs = useMemo(function () {
649
+ return defaultSigns.map(function (defaultSign, index) {
650
+ return _objectSpread(_objectSpread({}, signsValue !== null ? signsValue.find(function (_ref2) {
651
+ var signValueId = _ref2.id;
652
+ return signValueId === defaultSign.id;
653
+ }) || signsValue[index] : null), defaultSign);
654
+ });
655
+ }, []);
650
656
 
651
657
  var _useState3 = useState(null),
652
658
  _useState4 = _slicedToArray(_useState3, 2),
@@ -704,7 +710,7 @@ var Horoscope = function Horoscope(_ref) {
704
710
  var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
705
711
  var scrollingDisabled = !isEdit && transitionDisabled || !current;
706
712
  var backgroundPlaying = current && (isView || isEdit);
707
- var backgroundShouldLoad = !isPlaceholder && (current || active || !isView); // Create elements
713
+ var mediaShouldLoad = !isPlaceholder && (current || active); // Create elements
708
714
 
709
715
  var items = [/*#__PURE__*/React.createElement("div", {
710
716
  className: styles.headerContainer
@@ -792,7 +798,7 @@ var Horoscope = function Horoscope(_ref) {
792
798
  return el !== null;
793
799
  });
794
800
  return /*#__PURE__*/React.createElement("div", {
795
- className: classNames([styles.container, (_ref2 = {}, _defineProperty(_ref2, className, className !== null), _defineProperty(_ref2, styles.isPlaceholder, isPlaceholder), _ref2)]),
801
+ className: classNames([styles.container, (_ref3 = {}, _defineProperty(_ref3, className, className !== null), _defineProperty(_ref3, styles.isPlaceholder, isPlaceholder), _ref3)]),
796
802
  "data-screen-ready": true
797
803
  }, !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
798
804
  background: background,
@@ -800,7 +806,7 @@ var Horoscope = function Horoscope(_ref) {
800
806
  height: height,
801
807
  resolution: resolution,
802
808
  playing: backgroundPlaying,
803
- shouldLoad: backgroundShouldLoad
809
+ shouldLoad: mediaShouldLoad
804
810
  }) : null, /*#__PURE__*/React.createElement(Container, {
805
811
  width: width,
806
812
  height: height
package/lib/index.js CHANGED
@@ -294,14 +294,14 @@ var SignsGrid = function SignsGrid(_ref) {
294
294
  isEdit = _useScreenRenderConte.isEdit;
295
295
 
296
296
  var backgroundPlaying = current && (isView || isEdit);
297
- var backgroundShouldLoad = !isPlaceholder && (current || active || !isView);
297
+ var mediaShouldLoad = !isPlaceholder && (current || active);
298
298
  return /*#__PURE__*/React__default["default"].createElement("div", {
299
299
  className: classNames__default["default"]([styles$1.container, _defineProperty__default["default"]({}, className, className !== null)])
300
300
  }, !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
301
301
  background: background || defaultBackground,
302
302
  fit: "cover",
303
303
  playing: backgroundPlaying,
304
- shouldLoad: backgroundShouldLoad
304
+ shouldLoad: mediaShouldLoad
305
305
  }) : null, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
306
306
  width: width,
307
307
  height: height
@@ -355,7 +355,8 @@ var SignsGrid = function SignsGrid(_ref) {
355
355
  }, image !== null ? /*#__PURE__*/React__default["default"].createElement("img", {
356
356
  className: styles$1.image,
357
357
  src: image,
358
- alt: id
358
+ alt: id,
359
+ loading: "lazy"
359
360
  }) : null, /*#__PURE__*/React__default["default"].createElement("div", {
360
361
  className: styles$1.gridText
361
362
  }, /*#__PURE__*/React__default["default"].createElement("h2", {
@@ -653,7 +654,7 @@ var defaultProps = {
653
654
  };
654
655
 
655
656
  var Horoscope = function Horoscope(_ref) {
656
- var _ref2;
657
+ var _ref3;
657
658
 
658
659
  var defaultSigns = _ref.defaultSigns,
659
660
  signsValue = _ref.signs,
@@ -678,9 +679,14 @@ var Horoscope = function Horoscope(_ref) {
678
679
  hasPopup = _useState2[0],
679
680
  setHasPopup = _useState2[1];
680
681
 
681
- var signs = defaultSigns.map(function (sign, index) {
682
- return _objectSpread__default["default"](_objectSpread__default["default"]({}, sign), signsValue !== null && signsValue[index] ? signsValue[index] || null : null);
683
- });
682
+ var signs = React.useMemo(function () {
683
+ return defaultSigns.map(function (defaultSign, index) {
684
+ return _objectSpread__default["default"](_objectSpread__default["default"]({}, signsValue !== null ? signsValue.find(function (_ref2) {
685
+ var signValueId = _ref2.id;
686
+ return signValueId === defaultSign.id;
687
+ }) || signsValue[index] : null), defaultSign);
688
+ });
689
+ }, []);
684
690
 
685
691
  var _useState3 = React.useState(null),
686
692
  _useState4 = _slicedToArray__default["default"](_useState3, 2),
@@ -738,7 +744,7 @@ var Horoscope = function Horoscope(_ref) {
738
744
  var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
739
745
  var scrollingDisabled = !isEdit && transitionDisabled || !current;
740
746
  var backgroundPlaying = current && (isView || isEdit);
741
- var backgroundShouldLoad = !isPlaceholder && (current || active || !isView); // Create elements
747
+ var mediaShouldLoad = !isPlaceholder && (current || active); // Create elements
742
748
 
743
749
  var items = [/*#__PURE__*/React__default["default"].createElement("div", {
744
750
  className: styles.headerContainer
@@ -826,7 +832,7 @@ var Horoscope = function Horoscope(_ref) {
826
832
  return el !== null;
827
833
  });
828
834
  return /*#__PURE__*/React__default["default"].createElement("div", {
829
- className: classNames__default["default"]([styles.container, (_ref2 = {}, _defineProperty__default["default"](_ref2, className, className !== null), _defineProperty__default["default"](_ref2, styles.isPlaceholder, isPlaceholder), _ref2)]),
835
+ className: classNames__default["default"]([styles.container, (_ref3 = {}, _defineProperty__default["default"](_ref3, className, className !== null), _defineProperty__default["default"](_ref3, styles.isPlaceholder, isPlaceholder), _ref3)]),
830
836
  "data-screen-ready": true
831
837
  }, !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
832
838
  background: background,
@@ -834,7 +840,7 @@ var Horoscope = function Horoscope(_ref) {
834
840
  height: height,
835
841
  resolution: resolution,
836
842
  playing: backgroundPlaying,
837
- shouldLoad: backgroundShouldLoad
843
+ shouldLoad: mediaShouldLoad
838
844
  }) : null, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
839
845
  width: width,
840
846
  height: height
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-urbania-horoscope",
3
- "version": "0.3.103",
3
+ "version": "0.3.106",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -41,27 +41,27 @@
41
41
  "rollup": "../../node_modules/.bin/rollup --config ../../rollup.config.js"
42
42
  },
43
43
  "devDependencies": {
44
- "react": "^16.8.0 || ^17.0.0",
45
- "react-dom": "^16.8.0 || ^17.0.0"
44
+ "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
45
+ "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
46
46
  },
47
47
  "peerDependencies": {
48
- "react": "^16.8.0 || ^17.0.0",
49
- "react-dom": "^16.8.0 || ^17.0.0"
48
+ "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
49
+ "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
50
50
  },
51
51
  "dependencies": {
52
52
  "@babel/runtime": "^7.13.10",
53
- "@micromag/core": "^0.3.91",
54
- "@micromag/element-background": "^0.3.91",
55
- "@micromag/element-button": "^0.3.91",
56
- "@micromag/element-call-to-action": "^0.3.103",
57
- "@micromag/element-container": "^0.3.91",
58
- "@micromag/element-grid": "^0.3.91",
59
- "@micromag/element-heading": "^0.3.91",
60
- "@micromag/element-layout": "^0.3.91",
61
- "@micromag/element-scroll": "^0.3.91",
62
- "@micromag/element-text": "^0.3.91",
63
- "@micromag/element-urbania-author": "^0.3.91",
64
- "@micromag/transforms": "^0.3.91",
53
+ "@micromag/core": "^0.3.106",
54
+ "@micromag/element-background": "^0.3.106",
55
+ "@micromag/element-button": "^0.3.106",
56
+ "@micromag/element-call-to-action": "^0.3.106",
57
+ "@micromag/element-container": "^0.3.106",
58
+ "@micromag/element-grid": "^0.3.106",
59
+ "@micromag/element-heading": "^0.3.106",
60
+ "@micromag/element-layout": "^0.3.106",
61
+ "@micromag/element-scroll": "^0.3.106",
62
+ "@micromag/element-text": "^0.3.106",
63
+ "@micromag/element-urbania-author": "^0.3.106",
64
+ "@micromag/transforms": "^0.3.106",
65
65
  "classnames": "^2.2.6",
66
66
  "lodash": "^4.17.21",
67
67
  "prop-types": "^15.7.2",
@@ -72,5 +72,5 @@
72
72
  "publishConfig": {
73
73
  "access": "public"
74
74
  },
75
- "gitHead": "660b2ada7b03941feb841470abf5cd2cc6e3e68f"
75
+ "gitHead": "865842ef7fbdc41f89dd0891857989ded63d44c4"
76
76
  }