@fonixtree/magic-design 1.0.147 → 1.0.149

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 (7) hide show
  1. package/es/common/ProductCardModal/index.js +1 -1
  2. package/es/composite-comp/dito/components/GroupedCarousel/pc/index.js +2 -1
  3. package/es/composite-comp/dito/components/SlideImage/pc/components/ParallaxScroll/index.js +38 -26
  4. package/lib/common/ProductCardModal/index.js +1 -1
  5. package/lib/composite-comp/dito/components/GroupedCarousel/pc/index.js +2 -1
  6. package/lib/composite-comp/dito/components/SlideImage/pc/components/ParallaxScroll/index.js +38 -26
  7. package/package.json +1 -1
package/es/common/ProductCardModal/index.js CHANGED
@@ -115,7 +115,7 @@ function ProductCardModal(_a) {
115
115
  onLoad: function onLoad() {
116
116
  return setLoading(false);
117
117
  },
118
- src: item.imgUrl
118
+ src: item.cardImgUrl
119
119
  }), !loading && /*#__PURE__*/_react["default"].createElement("div", {
120
120
  className: "absoluteWrap"
121
121
  }, /*#__PURE__*/_react["default"].createElement(_framerMotion.motion.div, {
package/es/composite-comp/dito/components/GroupedCarousel/pc/index.js CHANGED
@@ -129,7 +129,8 @@ function (_super) {
129
129
  data: tab.hover.groupName,
130
130
  iconHeight: 46
131
131
  }) : /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
132
- data: tab.groupName
132
+ data: tab.groupName,
133
+ iconHeight: 46
133
134
  })));
134
135
  })), /*#__PURE__*/_react["default"].createElement("div", {
135
136
  className: "tab-content"
package/es/composite-comp/dito/components/SlideImage/pc/components/ParallaxScroll/index.js CHANGED
@@ -11,6 +11,8 @@ var _react = _interopRequireWildcard(require("react"));
11
11
 
12
12
  var _framerMotion = require("framer-motion");
13
13
 
14
+ var _debounce = _interopRequireDefault(require("lodash/debounce"));
15
+
14
16
  var _CardItem = _interopRequireDefault(require("../CardItem"));
15
17
 
16
18
  require("./index.less");
@@ -57,33 +59,43 @@ function ParallaxScroll(_a) {
57
59
  var translateFirst = (0, _framerMotion.useTransform)(scrollYProgress, [0, 1], [0, colOneScrollY]);
58
60
  var translateSecond = (0, _framerMotion.useTransform)(scrollYProgress, [0, 1], [0, colTwoScrollY]);
59
61
  var translateThird = (0, _framerMotion.useTransform)(scrollYProgress, [0, 1], [0, colThreeScrollY]);
62
+
63
+ var initLayout = function initLayout() {
64
+ var _a, _b, _c;
65
+
66
+ console.log('init...');
67
+ var colOneHeight = (_a = colOneRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight;
68
+ var colTwoHeight = (_b = colTwoRef.current) === null || _b === void 0 ? void 0 : _b.offsetHeight;
69
+ var colThreeHeight = (_c = colThreeRef.current) === null || _c === void 0 ? void 0 : _c.offsetHeight;
70
+ var colHeights = [colOneHeight, colTwoHeight, colThreeHeight];
71
+ var space = Math.max.apply(Math, colHeights) - Math.min.apply(Math, colHeights) - 20;
72
+ var minHeightIndex = colHeights.indexOf(Math.min.apply(Math, colHeights));
73
+
74
+ if (minHeightIndex === 0) {
75
+ setColOneScrollY(space);
76
+ setColTwoScrollY(colOneHeight - colTwoHeight + space);
77
+ setColThreeScrollY(colOneHeight - colThreeHeight + space);
78
+ } else if (minHeightIndex === 1) {
79
+ setColOneScrollY(colTwoHeight - colOneHeight + space);
80
+ setColTwoScrollY(space);
81
+ setColThreeScrollY(colTwoHeight - colThreeHeight + space);
82
+ } else {
83
+ setColOneScrollY(colThreeHeight - colOneHeight + space);
84
+ setColTwoScrollY(colThreeHeight - colTwoHeight + space);
85
+ setColThreeScrollY(space);
86
+ }
87
+ };
88
+
60
89
  (0, _react.useEffect)(function () {
61
- setTimeout(function () {
62
- var _a, _b, _c;
63
-
64
- if (!(0, _coreUtil.isDesignMode)()) {
65
- var colOneHeight = (_a = colOneRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight;
66
- var colTwoHeight = (_b = colTwoRef.current) === null || _b === void 0 ? void 0 : _b.offsetHeight;
67
- var colThreeHeight = (_c = colThreeRef.current) === null || _c === void 0 ? void 0 : _c.offsetHeight;
68
- var colHeights = [colOneHeight, colTwoHeight, colThreeHeight];
69
- var space = Math.max.apply(Math, colHeights) - Math.min.apply(Math, colHeights) - 20;
70
- var minHeightIndex = colHeights.indexOf(Math.min.apply(Math, colHeights));
71
-
72
- if (minHeightIndex === 0) {
73
- setColOneScrollY(space);
74
- setColTwoScrollY(colOneHeight - colTwoHeight + space);
75
- setColThreeScrollY(colOneHeight - colThreeHeight + space);
76
- } else if (minHeightIndex === 1) {
77
- setColOneScrollY(colTwoHeight - colOneHeight + space);
78
- setColTwoScrollY(space);
79
- setColThreeScrollY(colTwoHeight - colThreeHeight + space);
80
- } else {
81
- setColOneScrollY(colThreeHeight - colOneHeight + space);
82
- setColTwoScrollY(colThreeHeight - colTwoHeight + space);
83
- setColThreeScrollY(space);
84
- }
85
- }
86
- }, 1500);
90
+ if (!(0, _coreUtil.isDesignMode)()) {
91
+ setTimeout(function () {
92
+ initLayout();
93
+ }, 1500);
94
+ window.addEventListener('resize', (0, _debounce["default"])(initLayout, 200));
95
+ return function () {
96
+ window.removeEventListener('resize', initLayout);
97
+ };
98
+ }
87
99
  }, [scrollYProgress]);
88
100
  return /*#__PURE__*/_react["default"].createElement("div", {
89
101
  className: "m-parallax-scroll"
package/lib/common/ProductCardModal/index.js CHANGED
@@ -115,7 +115,7 @@ function ProductCardModal(_a) {
115
115
  onLoad: function onLoad() {
116
116
  return setLoading(false);
117
117
  },
118
- src: item.imgUrl
118
+ src: item.cardImgUrl
119
119
  }), !loading && /*#__PURE__*/_react["default"].createElement("div", {
120
120
  className: "absoluteWrap"
121
121
  }, /*#__PURE__*/_react["default"].createElement(_framerMotion.motion.div, {
package/lib/composite-comp/dito/components/GroupedCarousel/pc/index.js CHANGED
@@ -129,7 +129,8 @@ function (_super) {
129
129
  data: tab.hover.groupName,
130
130
  iconHeight: 46
131
131
  }) : /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
132
- data: tab.groupName
132
+ data: tab.groupName,
133
+ iconHeight: 46
133
134
  })));
134
135
  })), /*#__PURE__*/_react["default"].createElement("div", {
135
136
  className: "tab-content"
package/lib/composite-comp/dito/components/SlideImage/pc/components/ParallaxScroll/index.js CHANGED
@@ -11,6 +11,8 @@ var _react = _interopRequireWildcard(require("react"));
11
11
 
12
12
  var _framerMotion = require("framer-motion");
13
13
 
14
+ var _debounce = _interopRequireDefault(require("lodash/debounce"));
15
+
14
16
  var _CardItem = _interopRequireDefault(require("../CardItem"));
15
17
 
16
18
  require("./index.less");
@@ -57,33 +59,43 @@ function ParallaxScroll(_a) {
57
59
  var translateFirst = (0, _framerMotion.useTransform)(scrollYProgress, [0, 1], [0, colOneScrollY]);
58
60
  var translateSecond = (0, _framerMotion.useTransform)(scrollYProgress, [0, 1], [0, colTwoScrollY]);
59
61
  var translateThird = (0, _framerMotion.useTransform)(scrollYProgress, [0, 1], [0, colThreeScrollY]);
62
+
63
+ var initLayout = function initLayout() {
64
+ var _a, _b, _c;
65
+
66
+ console.log('init...');
67
+ var colOneHeight = (_a = colOneRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight;
68
+ var colTwoHeight = (_b = colTwoRef.current) === null || _b === void 0 ? void 0 : _b.offsetHeight;
69
+ var colThreeHeight = (_c = colThreeRef.current) === null || _c === void 0 ? void 0 : _c.offsetHeight;
70
+ var colHeights = [colOneHeight, colTwoHeight, colThreeHeight];
71
+ var space = Math.max.apply(Math, colHeights) - Math.min.apply(Math, colHeights) - 20;
72
+ var minHeightIndex = colHeights.indexOf(Math.min.apply(Math, colHeights));
73
+
74
+ if (minHeightIndex === 0) {
75
+ setColOneScrollY(space);
76
+ setColTwoScrollY(colOneHeight - colTwoHeight + space);
77
+ setColThreeScrollY(colOneHeight - colThreeHeight + space);
78
+ } else if (minHeightIndex === 1) {
79
+ setColOneScrollY(colTwoHeight - colOneHeight + space);
80
+ setColTwoScrollY(space);
81
+ setColThreeScrollY(colTwoHeight - colThreeHeight + space);
82
+ } else {
83
+ setColOneScrollY(colThreeHeight - colOneHeight + space);
84
+ setColTwoScrollY(colThreeHeight - colTwoHeight + space);
85
+ setColThreeScrollY(space);
86
+ }
87
+ };
88
+
60
89
  (0, _react.useEffect)(function () {
61
- setTimeout(function () {
62
- var _a, _b, _c;
63
-
64
- if (!(0, _coreUtil.isDesignMode)()) {
65
- var colOneHeight = (_a = colOneRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight;
66
- var colTwoHeight = (_b = colTwoRef.current) === null || _b === void 0 ? void 0 : _b.offsetHeight;
67
- var colThreeHeight = (_c = colThreeRef.current) === null || _c === void 0 ? void 0 : _c.offsetHeight;
68
- var colHeights = [colOneHeight, colTwoHeight, colThreeHeight];
69
- var space = Math.max.apply(Math, colHeights) - Math.min.apply(Math, colHeights) - 20;
70
- var minHeightIndex = colHeights.indexOf(Math.min.apply(Math, colHeights));
71
-
72
- if (minHeightIndex === 0) {
73
- setColOneScrollY(space);
74
- setColTwoScrollY(colOneHeight - colTwoHeight + space);
75
- setColThreeScrollY(colOneHeight - colThreeHeight + space);
76
- } else if (minHeightIndex === 1) {
77
- setColOneScrollY(colTwoHeight - colOneHeight + space);
78
- setColTwoScrollY(space);
79
- setColThreeScrollY(colTwoHeight - colThreeHeight + space);
80
- } else {
81
- setColOneScrollY(colThreeHeight - colOneHeight + space);
82
- setColTwoScrollY(colThreeHeight - colTwoHeight + space);
83
- setColThreeScrollY(space);
84
- }
85
- }
86
- }, 1500);
90
+ if (!(0, _coreUtil.isDesignMode)()) {
91
+ setTimeout(function () {
92
+ initLayout();
93
+ }, 1500);
94
+ window.addEventListener('resize', (0, _debounce["default"])(initLayout, 200));
95
+ return function () {
96
+ window.removeEventListener('resize', initLayout);
97
+ };
98
+ }
87
99
  }, [scrollYProgress]);
88
100
  return /*#__PURE__*/_react["default"].createElement("div", {
89
101
  className: "m-parallax-scroll"
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@fonixtree/magic-design",
3
3
  "author": "Cylon Team",
4
- "version": "1.0.147",
4
+ "version": "1.0.149",
5
5
  "description": "Magic Design",
6
6
  "license": "MIT",
7
7
  "module": "es/index.js",