@fonixtree/magic-design 1.0.158 → 1.0.160

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 (23) hide show
  1. package/es/common/ProductCardModal/index.js +1 -1
  2. package/es/common/ProductCardModal/index.less +4 -0
  3. package/es/composite-comp/dito/components/SlideImage/pc/components/CardItem/index.js +4 -2
  4. package/es/composite-comp/dito/components/SlideImage/pc/components/ParallaxScroll/index.js +14 -7
  5. package/es/composite-comp/dito/components/SlideImage/pc/components/ParallaxScroll/index.less +14 -3
  6. package/es/composite-comp/dito/components/SlideImage/pc/components/VideoItem/index.js +6 -4
  7. package/es/composite-comp/dito/components/SlideImage/pc/index.js +0 -2
  8. package/es/composite-comp/dito/second-config-panels/GroupedCarouselSecondConfig/index.js +0 -2
  9. package/es/utils/coreUtil.js +3 -5
  10. package/lib/common/ProductCardModal/index.js +1 -1
  11. package/lib/common/ProductCardModal/index.less +4 -0
  12. package/lib/composite-comp/dito/components/SlideImage/pc/components/CardItem/index.js +4 -2
  13. package/lib/composite-comp/dito/components/SlideImage/pc/components/ParallaxScroll/index.js +14 -7
  14. package/lib/composite-comp/dito/components/SlideImage/pc/components/ParallaxScroll/index.less +14 -3
  15. package/lib/composite-comp/dito/components/SlideImage/pc/components/VideoItem/index.js +6 -4
  16. package/lib/composite-comp/dito/components/SlideImage/pc/index.js +0 -2
  17. package/lib/composite-comp/dito/second-config-panels/GroupedCarouselSecondConfig/index.js +0 -2
  18. package/lib/utils/coreUtil.js +3 -5
  19. package/package.json +1 -1
  20. package/es/composite-comp/dito/components/SlideImage/pc/index.less +0 -1
  21. package/es/composite-comp/dito/second-config-panels/GroupedCarouselSecondConfig/index.less +0 -0
  22. package/lib/composite-comp/dito/components/SlideImage/pc/index.less +0 -1
  23. package/lib/composite-comp/dito/second-config-panels/GroupedCarouselSecondConfig/index.less +0 -0
@@ -121,7 +121,7 @@ function ProductCardModal(_a) {
121
121
  onClick: function onClick(e) {
122
122
  return e.stopPropagation();
123
123
  }
124
- }, /*#__PURE__*/_react["default"].createElement(_framerMotion.AnimatePresence, null, data.map(function (item, index) {
124
+ }, /*#__PURE__*/_react["default"].createElement(_framerMotion.AnimatePresence, null, data.slice(0, 2).map(function (item, index) {
125
125
  return /*#__PURE__*/_react["default"].createElement(_framerMotion.motion.div, {
126
126
  key: item.offerId,
127
127
  animate: {
@@ -80,6 +80,10 @@
80
80
  width: 35%;
81
81
  height: 42%;
82
82
  overflow-y: auto;
83
+
84
+ p {
85
+ min-height: 1em;
86
+ }
83
87
  }
84
88
 
85
89
  .btnApply {
@@ -72,7 +72,8 @@ function (_super) {
72
72
  CardItem.prototype.render = function () {
73
73
  var _a = this.props,
74
74
  data = _a.data,
75
- rest = __rest(_a, ["data"]);
75
+ onLoad = _a.onLoad,
76
+ rest = __rest(_a, ["data", "onLoad"]);
76
77
 
77
78
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", _extends({
78
79
  className: (0, _classnames["default"])('slide-image-card-item-wrap'),
@@ -81,7 +82,8 @@ function (_super) {
81
82
  }
82
83
  }, rest), /*#__PURE__*/_react["default"].createElement(_VideoItem["default"], {
83
84
  cursor: data.clickUrl || '',
84
- data: data
85
+ data: data,
86
+ onLoad: onLoad
85
87
  }), data.groupName.open && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
86
88
  className: "text",
87
89
  data: data.groupName,
@@ -85,11 +85,15 @@ function ParallaxScroll(_a) {
85
85
  }
86
86
  };
87
87
 
88
+ var onLoad = function onLoad() {
89
+ initLayout();
90
+ };
91
+
88
92
  (0, _react.useEffect)(function () {
89
93
  if (!(0, _coreUtil.isDesignMode)()) {
90
- setTimeout(function () {
91
- initLayout();
92
- }, 1500);
94
+ // setTimeout(() => {
95
+ // initLayout();
96
+ // }, 1500);
93
97
  window.addEventListener('resize', (0, _debounce["default"])(initLayout, 200));
94
98
  return function () {
95
99
  window.removeEventListener('resize', initLayout);
@@ -100,7 +104,7 @@ function ParallaxScroll(_a) {
100
104
  className: "m-parallax-scroll"
101
105
  }, /*#__PURE__*/_react["default"].createElement("div", {
102
106
  ref: gridRef,
103
- className: "grid grid-cols-3",
107
+ className: "grid-cols-3",
104
108
  style: {
105
109
  gap: xGap + 'px'
106
110
  }
@@ -117,7 +121,8 @@ function ParallaxScroll(_a) {
117
121
  y: translateFirst
118
122
  }
119
123
  }, /*#__PURE__*/_react["default"].createElement(_CardItem["default"], {
120
- data: el
124
+ data: el,
125
+ onLoad: onLoad
121
126
  }));
122
127
  })), /*#__PURE__*/_react["default"].createElement("div", {
123
128
  ref: colTwoRef,
@@ -132,7 +137,8 @@ function ParallaxScroll(_a) {
132
137
  y: translateSecond
133
138
  }
134
139
  }, /*#__PURE__*/_react["default"].createElement(_CardItem["default"], {
135
- data: el
140
+ data: el,
141
+ onLoad: onLoad
136
142
  }));
137
143
  })), /*#__PURE__*/_react["default"].createElement("div", {
138
144
  ref: colThreeRef,
@@ -147,7 +153,8 @@ function ParallaxScroll(_a) {
147
153
  y: translateThird
148
154
  }
149
155
  }, /*#__PURE__*/_react["default"].createElement(_CardItem["default"], {
150
- data: el
156
+ data: el,
157
+ onLoad: onLoad
151
158
  }));
152
159
  }))));
153
160
  }
@@ -1,12 +1,23 @@
1
1
  .m-parallax-scroll {
2
2
 
3
+ .grid-cols-3 {
4
+ display: grid;
5
+ align-content: start;
6
+ grid-template-columns: repeat(3, minmax(0, 1fr));
7
+ }
8
+
3
9
  .grid {
4
10
  display: grid;
5
11
  align-content: start;
6
12
  height: fit-content;
7
- }
8
13
 
9
- .grid-cols-3 {
10
- grid-template-columns: repeat(3, minmax(0, 1fr));
14
+ >div {
15
+ z-index: 2;
16
+
17
+ &:hover {
18
+ z-index: 1;
19
+ }
20
+ }
11
21
  }
22
+
12
23
  }
@@ -98,14 +98,14 @@ function (_super) {
98
98
  });
99
99
  video_1.addEventListener('seeked', function () {
100
100
  // 设置Canvas尺寸与视频一致
101
- canvas_1.width = video_1.offsetWidth;
102
- canvas_1.height = video_1.offsetHeight; // 绘制视频帧到Canvas
101
+ canvas_1.width = video_1.videoWidth;
102
+ canvas_1.height = video_1.videoHeight; // 绘制视频帧到Canvas
103
103
 
104
104
  var ctx = canvas_1.getContext('2d');
105
105
  ctx.drawImage(video_1, 0, 0, canvas_1.width, canvas_1.height); // 转换为缩略图
106
106
 
107
107
  _this.setState({
108
- videoPoster: canvas_1.toDataURL('image/png')
108
+ videoPoster: canvas_1.toDataURL('image/jpeg', 0.95)
109
109
  });
110
110
  });
111
111
  }
@@ -122,7 +122,8 @@ function (_super) {
122
122
 
123
123
  var _g = this.props,
124
124
  data = _g.data,
125
- cursor = _g.cursor;
125
+ cursor = _g.cursor,
126
+ onLoad = _g.onLoad;
126
127
  var _h = this.state,
127
128
  playing = _h.playing,
128
129
  videoPoster = _h.videoPoster;
@@ -150,6 +151,7 @@ function (_super) {
150
151
  className: (0, _classnames["default"])('video-img', {
151
152
  cover: (_f = data.video) === null || _f === void 0 ? void 0 : _f.sourceUrl
152
153
  }),
154
+ onLoad: onLoad,
153
155
  src: img,
154
156
  style: {
155
157
  visibility: playing ? 'hidden' : 'visible'
@@ -7,8 +7,6 @@ exports["default"] = void 0;
7
7
 
8
8
  var _react = _interopRequireDefault(require("react"));
9
9
 
10
- require("./index.less");
11
-
12
10
  var _ParallaxScroll = _interopRequireDefault(require("./components/ParallaxScroll"));
13
11
 
14
12
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -21,8 +21,6 @@ var _BaseConfig = _interopRequireDefault(require("../../../../meta-comp/config-p
21
21
 
22
22
  var _coreUtil = require("../../../../utils/coreUtil");
23
23
 
24
- require("./index.less");
25
-
26
24
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
27
25
 
28
26
  var __extends = void 0 && (void 0).__extends || function () {
@@ -364,13 +364,11 @@ var clickUrl = function clickUrl(url, state) {
364
364
  }
365
365
 
366
366
  var _b = _typeof(url) === 'object' ? (0, _businessUtil.newParseUrl)(url) : (0, _businessUtil.parseUrl)(url),
367
- _link = _b.link,
367
+ link = _b.link,
368
368
  data = _b.data;
369
369
 
370
- var link = isPc() ? "web" + _link : _link;
371
370
  var _c = data.params,
372
- params = _c === void 0 ? {} : _c;
373
- console.log('params...', params); // PC商品卡片弹窗
371
+ params = _c === void 0 ? {} : _c; // PC商品卡片弹窗
374
372
 
375
373
  if (params.type === 'CARD_PRODUCT_LIST') {
376
374
  createProdCardModal(params.offerIds);
@@ -438,7 +436,7 @@ var clickUrl = function clickUrl(url, state) {
438
436
  }
439
437
  } else {
440
438
  if (isPc()) {
441
- window.location.href += link;
439
+ window.location.href += "web" + link;
442
440
  } else {
443
441
  (0, _commonUtil.navigateTo)(link, state);
444
442
  }
@@ -121,7 +121,7 @@ function ProductCardModal(_a) {
121
121
  onClick: function onClick(e) {
122
122
  return e.stopPropagation();
123
123
  }
124
- }, /*#__PURE__*/_react["default"].createElement(_framerMotion.AnimatePresence, null, data.map(function (item, index) {
124
+ }, /*#__PURE__*/_react["default"].createElement(_framerMotion.AnimatePresence, null, data.slice(0, 2).map(function (item, index) {
125
125
  return /*#__PURE__*/_react["default"].createElement(_framerMotion.motion.div, {
126
126
  key: item.offerId,
127
127
  animate: {
@@ -80,6 +80,10 @@
80
80
  width: 35%;
81
81
  height: 42%;
82
82
  overflow-y: auto;
83
+
84
+ p {
85
+ min-height: 1em;
86
+ }
83
87
  }
84
88
 
85
89
  .btnApply {
@@ -72,7 +72,8 @@ function (_super) {
72
72
  CardItem.prototype.render = function () {
73
73
  var _a = this.props,
74
74
  data = _a.data,
75
- rest = __rest(_a, ["data"]);
75
+ onLoad = _a.onLoad,
76
+ rest = __rest(_a, ["data", "onLoad"]);
76
77
 
77
78
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", _extends({
78
79
  className: (0, _classnames["default"])('slide-image-card-item-wrap'),
@@ -81,7 +82,8 @@ function (_super) {
81
82
  }
82
83
  }, rest), /*#__PURE__*/_react["default"].createElement(_VideoItem["default"], {
83
84
  cursor: data.clickUrl || '',
84
- data: data
85
+ data: data,
86
+ onLoad: onLoad
85
87
  }), data.groupName.open && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
86
88
  className: "text",
87
89
  data: data.groupName,
@@ -85,11 +85,15 @@ function ParallaxScroll(_a) {
85
85
  }
86
86
  };
87
87
 
88
+ var onLoad = function onLoad() {
89
+ initLayout();
90
+ };
91
+
88
92
  (0, _react.useEffect)(function () {
89
93
  if (!(0, _coreUtil.isDesignMode)()) {
90
- setTimeout(function () {
91
- initLayout();
92
- }, 1500);
94
+ // setTimeout(() => {
95
+ // initLayout();
96
+ // }, 1500);
93
97
  window.addEventListener('resize', (0, _debounce["default"])(initLayout, 200));
94
98
  return function () {
95
99
  window.removeEventListener('resize', initLayout);
@@ -100,7 +104,7 @@ function ParallaxScroll(_a) {
100
104
  className: "m-parallax-scroll"
101
105
  }, /*#__PURE__*/_react["default"].createElement("div", {
102
106
  ref: gridRef,
103
- className: "grid grid-cols-3",
107
+ className: "grid-cols-3",
104
108
  style: {
105
109
  gap: xGap + 'px'
106
110
  }
@@ -117,7 +121,8 @@ function ParallaxScroll(_a) {
117
121
  y: translateFirst
118
122
  }
119
123
  }, /*#__PURE__*/_react["default"].createElement(_CardItem["default"], {
120
- data: el
124
+ data: el,
125
+ onLoad: onLoad
121
126
  }));
122
127
  })), /*#__PURE__*/_react["default"].createElement("div", {
123
128
  ref: colTwoRef,
@@ -132,7 +137,8 @@ function ParallaxScroll(_a) {
132
137
  y: translateSecond
133
138
  }
134
139
  }, /*#__PURE__*/_react["default"].createElement(_CardItem["default"], {
135
- data: el
140
+ data: el,
141
+ onLoad: onLoad
136
142
  }));
137
143
  })), /*#__PURE__*/_react["default"].createElement("div", {
138
144
  ref: colThreeRef,
@@ -147,7 +153,8 @@ function ParallaxScroll(_a) {
147
153
  y: translateThird
148
154
  }
149
155
  }, /*#__PURE__*/_react["default"].createElement(_CardItem["default"], {
150
- data: el
156
+ data: el,
157
+ onLoad: onLoad
151
158
  }));
152
159
  }))));
153
160
  }
@@ -1,12 +1,23 @@
1
1
  .m-parallax-scroll {
2
2
 
3
+ .grid-cols-3 {
4
+ display: grid;
5
+ align-content: start;
6
+ grid-template-columns: repeat(3, minmax(0, 1fr));
7
+ }
8
+
3
9
  .grid {
4
10
  display: grid;
5
11
  align-content: start;
6
12
  height: fit-content;
7
- }
8
13
 
9
- .grid-cols-3 {
10
- grid-template-columns: repeat(3, minmax(0, 1fr));
14
+ >div {
15
+ z-index: 2;
16
+
17
+ &:hover {
18
+ z-index: 1;
19
+ }
20
+ }
11
21
  }
22
+
12
23
  }
@@ -98,14 +98,14 @@ function (_super) {
98
98
  });
99
99
  video_1.addEventListener('seeked', function () {
100
100
  // 设置Canvas尺寸与视频一致
101
- canvas_1.width = video_1.offsetWidth;
102
- canvas_1.height = video_1.offsetHeight; // 绘制视频帧到Canvas
101
+ canvas_1.width = video_1.videoWidth;
102
+ canvas_1.height = video_1.videoHeight; // 绘制视频帧到Canvas
103
103
 
104
104
  var ctx = canvas_1.getContext('2d');
105
105
  ctx.drawImage(video_1, 0, 0, canvas_1.width, canvas_1.height); // 转换为缩略图
106
106
 
107
107
  _this.setState({
108
- videoPoster: canvas_1.toDataURL('image/png')
108
+ videoPoster: canvas_1.toDataURL('image/jpeg', 0.95)
109
109
  });
110
110
  });
111
111
  }
@@ -122,7 +122,8 @@ function (_super) {
122
122
 
123
123
  var _g = this.props,
124
124
  data = _g.data,
125
- cursor = _g.cursor;
125
+ cursor = _g.cursor,
126
+ onLoad = _g.onLoad;
126
127
  var _h = this.state,
127
128
  playing = _h.playing,
128
129
  videoPoster = _h.videoPoster;
@@ -150,6 +151,7 @@ function (_super) {
150
151
  className: (0, _classnames["default"])('video-img', {
151
152
  cover: (_f = data.video) === null || _f === void 0 ? void 0 : _f.sourceUrl
152
153
  }),
154
+ onLoad: onLoad,
153
155
  src: img,
154
156
  style: {
155
157
  visibility: playing ? 'hidden' : 'visible'
@@ -7,8 +7,6 @@ exports["default"] = void 0;
7
7
 
8
8
  var _react = _interopRequireDefault(require("react"));
9
9
 
10
- require("./index.less");
11
-
12
10
  var _ParallaxScroll = _interopRequireDefault(require("./components/ParallaxScroll"));
13
11
 
14
12
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -21,8 +21,6 @@ var _BaseConfig = _interopRequireDefault(require("../../../../meta-comp/config-p
21
21
 
22
22
  var _coreUtil = require("../../../../utils/coreUtil");
23
23
 
24
- require("./index.less");
25
-
26
24
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
27
25
 
28
26
  var __extends = void 0 && (void 0).__extends || function () {
@@ -364,13 +364,11 @@ var clickUrl = function clickUrl(url, state) {
364
364
  }
365
365
 
366
366
  var _b = _typeof(url) === 'object' ? (0, _businessUtil.newParseUrl)(url) : (0, _businessUtil.parseUrl)(url),
367
- _link = _b.link,
367
+ link = _b.link,
368
368
  data = _b.data;
369
369
 
370
- var link = isPc() ? "web" + _link : _link;
371
370
  var _c = data.params,
372
- params = _c === void 0 ? {} : _c;
373
- console.log('params...', params); // PC商品卡片弹窗
371
+ params = _c === void 0 ? {} : _c; // PC商品卡片弹窗
374
372
 
375
373
  if (params.type === 'CARD_PRODUCT_LIST') {
376
374
  createProdCardModal(params.offerIds);
@@ -438,7 +436,7 @@ var clickUrl = function clickUrl(url, state) {
438
436
  }
439
437
  } else {
440
438
  if (isPc()) {
441
- window.location.href += link;
439
+ window.location.href += "web" + link;
442
440
  } else {
443
441
  (0, _commonUtil.navigateTo)(link, state);
444
442
  }
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.158",
4
+ "version": "1.0.160",
5
5
  "description": "Magic Design",
6
6
  "license": "MIT",
7
7
  "module": "es/index.js",
@@ -1 +0,0 @@
1
- .m-slide-image-pc {}
@@ -1 +0,0 @@
1
- .m-slide-image-pc {}