@fonixtree/magic-design 1.0.189 → 1.0.190

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/composite-comp/common/components/ProductItem/index.js +15 -6
  2. package/es/composite-comp/dito/components/FlashDeal/pc/ProductItem/index.js +21 -10
  3. package/es/composite-comp/dito/components/FlashDeal/pc/ProductItem/index.less +36 -14
  4. package/lib/composite-comp/common/components/ProductItem/index.js +15 -6
  5. package/lib/composite-comp/dito/components/FlashDeal/pc/ProductItem/index.js +21 -10
  6. package/lib/composite-comp/dito/components/FlashDeal/pc/ProductItem/index.less +36 -14
  7. package/package.json +1 -1
package/es/composite-comp/common/components/ProductItem/index.js CHANGED
@@ -97,11 +97,21 @@ function (_super) {
97
97
 
98
98
  ProductItem.prototype.componentDidMount = function () {
99
99
  if (this.videoRef.current) {
100
- this.videoRef.current.setAttribute('playsinline', '');
101
- this.videoRef.current.setAttribute('webkit-playsinline', ''); // 阻止全屏
100
+ var video_1 = this.videoRef.current; // iOS 10+ 特殊处理
102
101
 
103
- this.videoRef.current.addEventListener('webkitbeginfullscreen', function (e) {
102
+ video_1.setAttribute('playsinline', 'true');
103
+ video_1.setAttribute('webkit-playsinline', 'true');
104
+ video_1.setAttribute('x-webkit-airplay', 'allow');
105
+ video_1.setAttribute('muted', 'true'); // 阻止全屏
106
+
107
+ video_1.addEventListener('webkitbeginfullscreen', function (e) {
104
108
  e.preventDefault();
109
+ video_1.webkitExitFullscreen();
110
+ });
111
+ video_1.addEventListener('webkitpresentationmodechanged', function () {
112
+ if (video_1.webkitPresentationMode === 'fullscreen') {
113
+ video_1.webkitSetPresentationMode('inline');
114
+ }
105
115
  });
106
116
  }
107
117
  };
@@ -168,7 +178,6 @@ function (_super) {
168
178
  })) || []; // ad 卡片
169
179
 
170
180
  if (data.type === 'ad') {
171
- console.log('data', data);
172
181
  return /*#__PURE__*/_react["default"].createElement("div", {
173
182
  className: "m-product-item-advertise",
174
183
  onClick: function onClick() {
@@ -184,8 +193,8 @@ function (_super) {
184
193
  loop: true,
185
194
  muted: true,
186
195
  playsinline: true,
187
- "webkit-playsinline": true,
188
- "x-webkit-airplay": "deny"
196
+ "webkit-playsinline": "true",
197
+ "x-webkit-airplay": "allow"
189
198
  }, /*#__PURE__*/_react["default"].createElement("source", {
190
199
  src: data.url,
191
200
  type: "video/mp4"
package/es/composite-comp/dito/components/FlashDeal/pc/ProductItem/index.js CHANGED
@@ -93,12 +93,14 @@ function (_super) {
93
93
  }
94
94
 
95
95
  ProductItem.prototype.render = function () {
96
- var _a = this.props,
97
- data = _a.data,
98
- panelProps = _a.panelProps,
99
- onItemClick = _a.onItemClick,
100
- unknownPrice = _a.unknownPrice,
101
- rest = __rest(_a, ["data", "panelProps", "onItemClick", "unknownPrice"]);
96
+ var _a, _b;
97
+
98
+ var _c = this.props,
99
+ data = _c.data,
100
+ panelProps = _c.panelProps,
101
+ onItemClick = _c.onItemClick,
102
+ unknownPrice = _c.unknownPrice,
103
+ rest = __rest(_c, ["data", "panelProps", "onItemClick", "unknownPrice"]);
102
104
 
103
105
  var promotions = (0, _businessUtil.getPromotionList)(data);
104
106
  var price = (0, _currencyUtil.formatCurrency)(data.salesPrice);
@@ -129,6 +131,7 @@ function (_super) {
129
131
  var _price = integerPart + " " + (decimalPart ? '.' + decimalPart : '');
130
132
 
131
133
  var oldPrice = data.marketPrice !== null ? (0, _currencyUtil.formatCurrencyWithSymbol)(data.marketPrice) : null;
134
+ var salePercent = Number(data.salePercent) / 100 || 0;
132
135
  return /*#__PURE__*/_react["default"].createElement("div", _extends({
133
136
  className: (0, _classnames["default"])('m-pc-flash-product-item'),
134
137
  onClick: function onClick() {
@@ -170,7 +173,7 @@ function (_super) {
170
173
  style: {
171
174
  color: panelProps.salesPrice.content.color
172
175
  }
173
- })), /*#__PURE__*/_react["default"].createElement("div", {
176
+ })), ((_a = panelProps.salesProgressVisible) === null || _a === void 0 ? void 0 : _a.open) && /*#__PURE__*/_react["default"].createElement("div", {
174
177
  className: "rate-sold-wrap"
175
178
  }, /*#__PURE__*/_react["default"].createElement("div", {
176
179
  className: "rate-wrap"
@@ -180,9 +183,17 @@ function (_super) {
180
183
  type: "icon-star"
181
184
  }), /*#__PURE__*/_react["default"].createElement("span", {
182
185
  className: "rate-text"
183
- }, (0, _currencyUtil.numberToFixed)(5.0, 1))), data.salesCnt > 0 && /*#__PURE__*/_react["default"].createElement("div", {
184
- className: "sold-count"
185
- }, (0, _commonUtil.convertCount)(data.salesCnt), " sold"))));
186
+ }, (0, _currencyUtil.numberToFixed)(5.0, 1))), /*#__PURE__*/_react["default"].createElement("div", {
187
+ className: "progress-container"
188
+ }, /*#__PURE__*/_react["default"].createElement("span", {
189
+ className: "text"
190
+ }, salePercent, "% Terjual"), /*#__PURE__*/_react["default"].createElement("div", {
191
+ className: "progress",
192
+ style: {
193
+ width: salePercent + "%",
194
+ backgroundColor: (_b = panelProps.salesProgressVisible) === null || _b === void 0 ? void 0 : _b.color
195
+ }
196
+ })))));
186
197
  };
187
198
 
188
199
  ProductItem.defaultProps = {
package/es/composite-comp/dito/components/FlashDeal/pc/ProductItem/index.less CHANGED
@@ -54,6 +54,7 @@
54
54
  }
55
55
 
56
56
  .old-price {
57
+ width: auto !important;
57
58
  text-decoration: line-through;
58
59
  width: fit-content;
59
60
  }
@@ -61,7 +62,7 @@
61
62
  }
62
63
 
63
64
  .rate-sold-wrap {
64
- margin-top: 4px;
65
+ // margin-top: 4px;
65
66
  display: flex;
66
67
  align-items: center;
67
68
 
@@ -75,26 +76,47 @@
75
76
  color: #666666;
76
77
  margin-left: 4px;
77
78
  }
78
- }
79
-
80
- .sold-count {
81
- font-size: 16px;
82
- font-weight: 500;
83
- color: #666666;
84
- margin-left: 10px;
85
- display: flex;
86
- align-items: center;
87
79
 
88
- &:before {
80
+ &:after {
89
81
  content: '';
90
82
  display: block;
91
83
  width: 2px;
92
84
  height: 16px;
93
- background-color: #666666;
94
- margin-right: 10px;
85
+ background-color: #666;
86
+ margin: 0 8px;
87
+ }
88
+ }
89
+
90
+ .progress-container {
91
+ width: 100%;
92
+ height: 16px;
93
+ background-color: #F8B1B9;
94
+ border-radius: 8px;
95
+ position: relative;
96
+
97
+ .text {
98
+ font-family: Montserrat;
99
+ font-weight: 700;
100
+ font-size: 12px;
101
+ line-height: 16px;
102
+ letter-spacing: 0%;
103
+ color: #fff;
104
+ text-align: center;
105
+ position: absolute;
106
+ top: 0;
107
+ left: 0;
108
+ bottom: 0;
109
+ right: 0;
110
+ margin: auto;
111
+ }
112
+
113
+ .progress {
114
+ width: 10px;
115
+ border-radius: 8px;
116
+ height: 100%;
117
+ background: linear-gradient(289.79deg, #FCD117 -16.44%, #CE1126 58.47%, #0038A7 114.99%);
95
118
  }
96
119
  }
97
120
  }
98
121
  }
99
-
100
122
  }
package/lib/composite-comp/common/components/ProductItem/index.js CHANGED
@@ -97,11 +97,21 @@ function (_super) {
97
97
 
98
98
  ProductItem.prototype.componentDidMount = function () {
99
99
  if (this.videoRef.current) {
100
- this.videoRef.current.setAttribute('playsinline', '');
101
- this.videoRef.current.setAttribute('webkit-playsinline', ''); // 阻止全屏
100
+ var video_1 = this.videoRef.current; // iOS 10+ 特殊处理
102
101
 
103
- this.videoRef.current.addEventListener('webkitbeginfullscreen', function (e) {
102
+ video_1.setAttribute('playsinline', 'true');
103
+ video_1.setAttribute('webkit-playsinline', 'true');
104
+ video_1.setAttribute('x-webkit-airplay', 'allow');
105
+ video_1.setAttribute('muted', 'true'); // 阻止全屏
106
+
107
+ video_1.addEventListener('webkitbeginfullscreen', function (e) {
104
108
  e.preventDefault();
109
+ video_1.webkitExitFullscreen();
110
+ });
111
+ video_1.addEventListener('webkitpresentationmodechanged', function () {
112
+ if (video_1.webkitPresentationMode === 'fullscreen') {
113
+ video_1.webkitSetPresentationMode('inline');
114
+ }
105
115
  });
106
116
  }
107
117
  };
@@ -168,7 +178,6 @@ function (_super) {
168
178
  })) || []; // ad 卡片
169
179
 
170
180
  if (data.type === 'ad') {
171
- console.log('data', data);
172
181
  return /*#__PURE__*/_react["default"].createElement("div", {
173
182
  className: "m-product-item-advertise",
174
183
  onClick: function onClick() {
@@ -184,8 +193,8 @@ function (_super) {
184
193
  loop: true,
185
194
  muted: true,
186
195
  playsinline: true,
187
- "webkit-playsinline": true,
188
- "x-webkit-airplay": "deny"
196
+ "webkit-playsinline": "true",
197
+ "x-webkit-airplay": "allow"
189
198
  }, /*#__PURE__*/_react["default"].createElement("source", {
190
199
  src: data.url,
191
200
  type: "video/mp4"
package/lib/composite-comp/dito/components/FlashDeal/pc/ProductItem/index.js CHANGED
@@ -93,12 +93,14 @@ function (_super) {
93
93
  }
94
94
 
95
95
  ProductItem.prototype.render = function () {
96
- var _a = this.props,
97
- data = _a.data,
98
- panelProps = _a.panelProps,
99
- onItemClick = _a.onItemClick,
100
- unknownPrice = _a.unknownPrice,
101
- rest = __rest(_a, ["data", "panelProps", "onItemClick", "unknownPrice"]);
96
+ var _a, _b;
97
+
98
+ var _c = this.props,
99
+ data = _c.data,
100
+ panelProps = _c.panelProps,
101
+ onItemClick = _c.onItemClick,
102
+ unknownPrice = _c.unknownPrice,
103
+ rest = __rest(_c, ["data", "panelProps", "onItemClick", "unknownPrice"]);
102
104
 
103
105
  var promotions = (0, _businessUtil.getPromotionList)(data);
104
106
  var price = (0, _currencyUtil.formatCurrency)(data.salesPrice);
@@ -129,6 +131,7 @@ function (_super) {
129
131
  var _price = integerPart + " " + (decimalPart ? '.' + decimalPart : '');
130
132
 
131
133
  var oldPrice = data.marketPrice !== null ? (0, _currencyUtil.formatCurrencyWithSymbol)(data.marketPrice) : null;
134
+ var salePercent = Number(data.salePercent) / 100 || 0;
132
135
  return /*#__PURE__*/_react["default"].createElement("div", _extends({
133
136
  className: (0, _classnames["default"])('m-pc-flash-product-item'),
134
137
  onClick: function onClick() {
@@ -170,7 +173,7 @@ function (_super) {
170
173
  style: {
171
174
  color: panelProps.salesPrice.content.color
172
175
  }
173
- })), /*#__PURE__*/_react["default"].createElement("div", {
176
+ })), ((_a = panelProps.salesProgressVisible) === null || _a === void 0 ? void 0 : _a.open) && /*#__PURE__*/_react["default"].createElement("div", {
174
177
  className: "rate-sold-wrap"
175
178
  }, /*#__PURE__*/_react["default"].createElement("div", {
176
179
  className: "rate-wrap"
@@ -180,9 +183,17 @@ function (_super) {
180
183
  type: "icon-star"
181
184
  }), /*#__PURE__*/_react["default"].createElement("span", {
182
185
  className: "rate-text"
183
- }, (0, _currencyUtil.numberToFixed)(5.0, 1))), data.salesCnt > 0 && /*#__PURE__*/_react["default"].createElement("div", {
184
- className: "sold-count"
185
- }, (0, _commonUtil.convertCount)(data.salesCnt), " sold"))));
186
+ }, (0, _currencyUtil.numberToFixed)(5.0, 1))), /*#__PURE__*/_react["default"].createElement("div", {
187
+ className: "progress-container"
188
+ }, /*#__PURE__*/_react["default"].createElement("span", {
189
+ className: "text"
190
+ }, salePercent, "% Terjual"), /*#__PURE__*/_react["default"].createElement("div", {
191
+ className: "progress",
192
+ style: {
193
+ width: salePercent + "%",
194
+ backgroundColor: (_b = panelProps.salesProgressVisible) === null || _b === void 0 ? void 0 : _b.color
195
+ }
196
+ })))));
186
197
  };
187
198
 
188
199
  ProductItem.defaultProps = {
package/lib/composite-comp/dito/components/FlashDeal/pc/ProductItem/index.less CHANGED
@@ -54,6 +54,7 @@
54
54
  }
55
55
 
56
56
  .old-price {
57
+ width: auto !important;
57
58
  text-decoration: line-through;
58
59
  width: fit-content;
59
60
  }
@@ -61,7 +62,7 @@
61
62
  }
62
63
 
63
64
  .rate-sold-wrap {
64
- margin-top: 4px;
65
+ // margin-top: 4px;
65
66
  display: flex;
66
67
  align-items: center;
67
68
 
@@ -75,26 +76,47 @@
75
76
  color: #666666;
76
77
  margin-left: 4px;
77
78
  }
78
- }
79
-
80
- .sold-count {
81
- font-size: 16px;
82
- font-weight: 500;
83
- color: #666666;
84
- margin-left: 10px;
85
- display: flex;
86
- align-items: center;
87
79
 
88
- &:before {
80
+ &:after {
89
81
  content: '';
90
82
  display: block;
91
83
  width: 2px;
92
84
  height: 16px;
93
- background-color: #666666;
94
- margin-right: 10px;
85
+ background-color: #666;
86
+ margin: 0 8px;
87
+ }
88
+ }
89
+
90
+ .progress-container {
91
+ width: 100%;
92
+ height: 16px;
93
+ background-color: #F8B1B9;
94
+ border-radius: 8px;
95
+ position: relative;
96
+
97
+ .text {
98
+ font-family: Montserrat;
99
+ font-weight: 700;
100
+ font-size: 12px;
101
+ line-height: 16px;
102
+ letter-spacing: 0%;
103
+ color: #fff;
104
+ text-align: center;
105
+ position: absolute;
106
+ top: 0;
107
+ left: 0;
108
+ bottom: 0;
109
+ right: 0;
110
+ margin: auto;
111
+ }
112
+
113
+ .progress {
114
+ width: 10px;
115
+ border-radius: 8px;
116
+ height: 100%;
117
+ background: linear-gradient(289.79deg, #FCD117 -16.44%, #CE1126 58.47%, #0038A7 114.99%);
95
118
  }
96
119
  }
97
120
  }
98
121
  }
99
-
100
122
  }
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.189",
4
+ "version": "1.0.190",
5
5
  "description": "Magic Design",
6
6
  "license": "MIT",
7
7
  "module": "es/index.js",