@fonixtree/magic-design 1.0.162 → 1.0.163

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/common/ProductCardModal/index.js +29 -8
  2. package/lib/common/ProductCardModal/index.js +29 -8
  3. package/package.json +1 -1
package/es/common/ProductCardModal/index.js CHANGED
@@ -44,19 +44,17 @@ function ProductCardModal(_a) {
44
44
 
45
45
  var flag = true;
46
46
 
47
- var _data = data.slice(0, 2);
48
-
49
47
  var handleNext = function handleNext(e) {
50
48
  e.stopPropagation();
51
49
  setActive(function (prev) {
52
- return (prev + 1) % _data.length;
50
+ return (prev + 1) % data.length;
53
51
  });
54
52
  };
55
53
 
56
54
  var handlePrev = function handlePrev(e) {
57
55
  e.stopPropagation();
58
56
  setActive(function (prev) {
59
- return (prev - 1 + _data.length) % _data.length;
57
+ return (prev - 1 + data.length) % data.length;
60
58
  });
61
59
  };
62
60
 
@@ -64,9 +62,32 @@ function ProductCardModal(_a) {
64
62
  return index === active;
65
63
  };
66
64
 
65
+ var isShow = function isShow(index) {
66
+ if (data.length > 3) {
67
+ var oneShow = 0;
68
+ var twoShow = 0;
69
+
70
+ if (active === 0) {
71
+ oneShow = data.length - 1;
72
+ twoShow = active + 1;
73
+ } else if (active === data.length - 1) {
74
+ oneShow = active - 1;
75
+ twoShow = 0;
76
+ } else {
77
+ oneShow = active - 1;
78
+ twoShow = active + 1;
79
+ }
80
+
81
+ return index === oneShow || index === twoShow;
82
+ } else {
83
+ return true;
84
+ }
85
+ };
86
+
67
87
  var randomRotateY = function randomRotateY(index) {
68
88
  // return Math.floor(Math.random() * 21) - 10;
69
- return Math.floor((index % 2 === 0 ? -index : index) * 0.1 * 21) - 10;
89
+ // return Math.floor((index % 2 === 0 ? -index : index) * 0.1 * 21) - 10;
90
+ return index === 0 || index === 1 ? -10 : 10;
70
91
  };
71
92
 
72
93
  var handleScroll = function handleScroll(e) {
@@ -123,15 +144,15 @@ function ProductCardModal(_a) {
123
144
  onClick: function onClick(e) {
124
145
  return e.stopPropagation();
125
146
  }
126
- }, /*#__PURE__*/_react["default"].createElement(_framerMotion.AnimatePresence, null, _data.map(function (item, index) {
147
+ }, /*#__PURE__*/_react["default"].createElement(_framerMotion.AnimatePresence, null, data.map(function (item, index) {
127
148
  return /*#__PURE__*/_react["default"].createElement(_framerMotion.motion.div, {
128
149
  key: item.offerId,
129
150
  animate: {
130
- opacity: isActive(index) ? 1 : 0.7,
151
+ opacity: isActive(index) ? 1 : isShow(index) ? 0.7 : 0,
131
152
  scale: isActive(index) ? 1 : 0.95,
132
153
  z: isActive(index) ? 0 : -100,
133
154
  rotate: isActive(index) ? 0 : randomRotateY(index),
134
- zIndex: isActive(index) ? 999 : _data.length + 2 - index,
155
+ zIndex: isActive(index) ? 999 : data.length + 2 - index,
135
156
  y: isActive(index) ? [0, -80, 0] : 0
136
157
  },
137
158
  className: "card",
package/lib/common/ProductCardModal/index.js CHANGED
@@ -44,19 +44,17 @@ function ProductCardModal(_a) {
44
44
 
45
45
  var flag = true;
46
46
 
47
- var _data = data.slice(0, 2);
48
-
49
47
  var handleNext = function handleNext(e) {
50
48
  e.stopPropagation();
51
49
  setActive(function (prev) {
52
- return (prev + 1) % _data.length;
50
+ return (prev + 1) % data.length;
53
51
  });
54
52
  };
55
53
 
56
54
  var handlePrev = function handlePrev(e) {
57
55
  e.stopPropagation();
58
56
  setActive(function (prev) {
59
- return (prev - 1 + _data.length) % _data.length;
57
+ return (prev - 1 + data.length) % data.length;
60
58
  });
61
59
  };
62
60
 
@@ -64,9 +62,32 @@ function ProductCardModal(_a) {
64
62
  return index === active;
65
63
  };
66
64
 
65
+ var isShow = function isShow(index) {
66
+ if (data.length > 3) {
67
+ var oneShow = 0;
68
+ var twoShow = 0;
69
+
70
+ if (active === 0) {
71
+ oneShow = data.length - 1;
72
+ twoShow = active + 1;
73
+ } else if (active === data.length - 1) {
74
+ oneShow = active - 1;
75
+ twoShow = 0;
76
+ } else {
77
+ oneShow = active - 1;
78
+ twoShow = active + 1;
79
+ }
80
+
81
+ return index === oneShow || index === twoShow;
82
+ } else {
83
+ return true;
84
+ }
85
+ };
86
+
67
87
  var randomRotateY = function randomRotateY(index) {
68
88
  // return Math.floor(Math.random() * 21) - 10;
69
- return Math.floor((index % 2 === 0 ? -index : index) * 0.1 * 21) - 10;
89
+ // return Math.floor((index % 2 === 0 ? -index : index) * 0.1 * 21) - 10;
90
+ return index === 0 || index === 1 ? -10 : 10;
70
91
  };
71
92
 
72
93
  var handleScroll = function handleScroll(e) {
@@ -123,15 +144,15 @@ function ProductCardModal(_a) {
123
144
  onClick: function onClick(e) {
124
145
  return e.stopPropagation();
125
146
  }
126
- }, /*#__PURE__*/_react["default"].createElement(_framerMotion.AnimatePresence, null, _data.map(function (item, index) {
147
+ }, /*#__PURE__*/_react["default"].createElement(_framerMotion.AnimatePresence, null, data.map(function (item, index) {
127
148
  return /*#__PURE__*/_react["default"].createElement(_framerMotion.motion.div, {
128
149
  key: item.offerId,
129
150
  animate: {
130
- opacity: isActive(index) ? 1 : 0.7,
151
+ opacity: isActive(index) ? 1 : isShow(index) ? 0.7 : 0,
131
152
  scale: isActive(index) ? 1 : 0.95,
132
153
  z: isActive(index) ? 0 : -100,
133
154
  rotate: isActive(index) ? 0 : randomRotateY(index),
134
- zIndex: isActive(index) ? 999 : _data.length + 2 - index,
155
+ zIndex: isActive(index) ? 999 : data.length + 2 - index,
135
156
  y: isActive(index) ? [0, -80, 0] : 0
136
157
  },
137
158
  className: "card",
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.162",
4
+ "version": "1.0.163",
5
5
  "description": "Magic Design",
6
6
  "license": "MIT",
7
7
  "module": "es/index.js",