@fonixtree/magic-design 1.0.188 → 1.0.190

package/es/composite-comp/common/components/ProductItem/index.js

@@ -97,8 +97,22 @@ function (_super) {
 
   ProductItem.prototype.componentDidMount = function () {
     if (this.videoRef.current) {
-      this.videoRef.current.setAttribute('playsinline', '');
-      this.videoRef.current.setAttribute('webkit-playsinline', '');
+      var video_1 = this.videoRef.current; // iOS 10+ 特殊处理
+
+      video_1.setAttribute('playsinline', 'true');
+      video_1.setAttribute('webkit-playsinline', 'true');
+      video_1.setAttribute('x-webkit-airplay', 'allow');
+      video_1.setAttribute('muted', 'true'); // 阻止全屏
+
+      video_1.addEventListener('webkitbeginfullscreen', function (e) {
+        e.preventDefault();
+        video_1.webkitExitFullscreen();
+      });
+      video_1.addEventListener('webkitpresentationmodechanged', function () {
+        if (video_1.webkitPresentationMode === 'fullscreen') {
+          video_1.webkitSetPresentationMode('inline');
+        }
+      });
     }
   };
 
@@ -164,7 +178,6 @@ function (_super) {
     })) || []; // ad 卡片
 
     if (data.type === 'ad') {
-      console.log('data', data);
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "m-product-item-advertise",
         onClick: function onClick() {
@@ -176,10 +189,12 @@ function (_super) {
       }), data.url && data.url.includes('.mp4') && /*#__PURE__*/_react["default"].createElement("video", {
         ref: this.videoRef,
         autoPlay: true,
+        disablePictureInPicture: true,
         loop: true,
         muted: true,
         playsinline: true,
-        "webkit-playsinline": true
+        "webkit-playsinline": "true",
+        "x-webkit-airplay": "allow"
       }, /*#__PURE__*/_react["default"].createElement("source", {
         src: data.url,
         type: "video/mp4"

package/es/composite-comp/dito/components/FlashDeal/pc/ProductItem/index.js

@@ -93,12 +93,14 @@ function (_super) {
   }
 
   ProductItem.prototype.render = function () {
-    var _a = this.props,
-        data = _a.data,
-        panelProps = _a.panelProps,
-        onItemClick = _a.onItemClick,
-        unknownPrice = _a.unknownPrice,
-        rest = __rest(_a, ["data", "panelProps", "onItemClick", "unknownPrice"]);
+    var _a, _b;
+
+    var _c = this.props,
+        data = _c.data,
+        panelProps = _c.panelProps,
+        onItemClick = _c.onItemClick,
+        unknownPrice = _c.unknownPrice,
+        rest = __rest(_c, ["data", "panelProps", "onItemClick", "unknownPrice"]);
 
     var promotions = (0, _businessUtil.getPromotionList)(data);
     var price = (0, _currencyUtil.formatCurrency)(data.salesPrice);
@@ -129,6 +131,7 @@ function (_super) {
     var _price = integerPart + " " + (decimalPart ? '.' + decimalPart : '');
 
     var oldPrice = data.marketPrice !== null ? (0, _currencyUtil.formatCurrencyWithSymbol)(data.marketPrice) : null;
+    var salePercent = Number(data.salePercent) / 100 || 0;
     return /*#__PURE__*/_react["default"].createElement("div", _extends({
       className: (0, _classnames["default"])('m-pc-flash-product-item'),
       onClick: function onClick() {
@@ -170,7 +173,7 @@ function (_super) {
       style: {
         color: panelProps.salesPrice.content.color
       }
-    })), /*#__PURE__*/_react["default"].createElement("div", {
+    })), ((_a = panelProps.salesProgressVisible) === null || _a === void 0 ? void 0 : _a.open) && /*#__PURE__*/_react["default"].createElement("div", {
       className: "rate-sold-wrap"
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "rate-wrap"
@@ -180,9 +183,17 @@ function (_super) {
       type: "icon-star"
     }), /*#__PURE__*/_react["default"].createElement("span", {
       className: "rate-text"
-    }, (0, _currencyUtil.numberToFixed)(5.0, 1))), data.salesCnt > 0 && /*#__PURE__*/_react["default"].createElement("div", {
-      className: "sold-count"
-    }, (0, _commonUtil.convertCount)(data.salesCnt), " sold"))));
+    }, (0, _currencyUtil.numberToFixed)(5.0, 1))), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "progress-container"
+    }, /*#__PURE__*/_react["default"].createElement("span", {
+      className: "text"
+    }, salePercent, "% Terjual"), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "progress",
+      style: {
+        width: salePercent + "%",
+        backgroundColor: (_b = panelProps.salesProgressVisible) === null || _b === void 0 ? void 0 : _b.color
+      }
+    })))));
   };
 
   ProductItem.defaultProps = {

package/es/composite-comp/dito/components/FlashDeal/pc/ProductItem/index.less

@@ -54,6 +54,7 @@
       }
 
       .old-price {
+        width: auto !important;
         text-decoration: line-through;
         width: fit-content;
       }
@@ -61,7 +62,7 @@
     }
 
     .rate-sold-wrap {
-      margin-top: 4px;
+      // margin-top: 4px;
       display: flex;
       align-items: center;
 
@@ -75,26 +76,47 @@
           color: #666666;
           margin-left: 4px;
         }
-      }
-
-      .sold-count {
-        font-size: 16px;
-        font-weight: 500;
-        color: #666666;
-        margin-left: 10px;
-        display: flex;
-        align-items: center;
 
-        &:before {
+        &:after {
           content: '';
           display: block;
           width: 2px;
           height: 16px;
-          background-color: #666666;
-          margin-right: 10px;
+          background-color: #666;
+          margin: 0 8px;
+        }
+      }
+
+      .progress-container {
+        width: 100%;
+        height: 16px;
+        background-color: #F8B1B9;
+        border-radius: 8px;
+        position: relative;
+
+        .text {
+          font-family: Montserrat;
+          font-weight: 700;
+          font-size: 12px;
+          line-height: 16px;
+          letter-spacing: 0%;
+          color: #fff;
+          text-align: center;
+          position: absolute;
+          top: 0;
+          left: 0;
+          bottom: 0;
+          right: 0;
+          margin: auto;
+        }
+
+        .progress {
+          width: 10px;
+          border-radius: 8px;
+          height: 100%;
+          background: linear-gradient(289.79deg, #FCD117 -16.44%, #CE1126 58.47%, #0038A7 114.99%);
         }
       }
     }
   }
-
 }

package/es/meta-comp/components/Text/index.js

@@ -139,6 +139,7 @@ function (_super) {
     var _this = _super !== null && _super.apply(this, arguments) || this;
 
     _this.textRef = /*#__PURE__*/_react["default"].createRef();
+    _this.quillWrapRef = /*#__PURE__*/_react["default"].createRef();
     _this.quillRef = null;
     _this.state = {
       editabled: false
@@ -175,10 +176,22 @@ function (_super) {
               close: _this.onEditorClose
             }
           });
+
+          document.addEventListener('mousedown', _this.onEditorBlur);
         }, 100);
       });
     };
 
+    _this.onEditorBlur = function (event) {
+      var _a, _b;
+
+      var toolbarDom = document.querySelector('.toolbar-wrap');
+
+      if (((_a = _this.quillWrapRef) === null || _a === void 0 ? void 0 : _a.current) && !((_b = _this.quillWrapRef) === null || _b === void 0 ? void 0 : _b.current.contains(event.target)) && !toolbarDom.contains(event.target)) {
+        _this.onEditorClose();
+      }
+    };
+
     _this.onContentClick = function () {
       var data = _this.props.data;
 
@@ -190,6 +203,7 @@ function (_super) {
     };
 
     _this.onEditorClose = function () {
+      document.removeEventListener('mousedown', _this.onEditorBlur);
       _this.props.data.html = _this.quillRef.root.innerHTML;
 
       _this.setState({
@@ -253,10 +267,9 @@ function (_super) {
     }
 
     if (editabled) {
-      return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "editor-shadow",
-        onClick: this.onEditorClose
-      }), /*#__PURE__*/_react["default"].createElement("div", {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        ref: this.quillWrapRef
+      }, /*#__PURE__*/_react["default"].createElement("div", {
         className: "quill-text-content-wrap",
         style: {
           zIndex: 3

package/es/meta-comp/config-panels/TextConfig/index.js

@@ -151,6 +151,15 @@ function (_super) {
 
     _this.state = {};
     _this.containerRef = /*#__PURE__*/_react["default"].createRef();
+    _this.editInputRef = /*#__PURE__*/_react["default"].createRef();
+
+    _this.onEditInputBlur = function (event) {
+      var _a, _b;
+
+      if (((_a = _this.editInputRef) === null || _a === void 0 ? void 0 : _a.current) && !((_b = _this.editInputRef) === null || _b === void 0 ? void 0 : _b.current.contains(event.target))) {
+        _this.selfRender();
+      }
+    };
 
     _this.onSizeTypeChange = function (v, obj) {
       _extends(obj, sizeTypeMap[v]);
@@ -165,11 +174,23 @@ function (_super) {
   }
 
   TextConfig.prototype.componentDidMount = function () {
+    var _a, _b;
+
+    var data = this.props.data;
     window.document.addEventListener('text-render', this.selfRender);
+    (_b = (_a = this.editInputRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.addEventListener('input', function () {
+      if (data.html) {
+        data.html = this.textContent;
+      } else {
+        data.text = this.textContent;
+      }
+    });
+    document.addEventListener('mousedown', this.onEditInputBlur);
   };
 
   TextConfig.prototype.componentWillUnmount = function () {
     window.document.removeEventListener('text-render', this.selfRender);
+    document.removeEventListener('mousedown', this.onEditInputBlur);
   };
 
   TextConfig.prototype.render = function () {
@@ -365,13 +386,13 @@ function (_super) {
       className: "text-input",
       split: "solid",
       title: (0, _locale.i18n)('TEXT')
-    }, /*#__PURE__*/_react["default"].createElement(_antd.Input, {
-      onChange: function onChange(e) {
-        data.text = e.target.value;
-
-        _this.selfRender();
-      },
-      value: data.text
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      ref: this.editInputRef,
+      className: "edit-input",
+      contentEditable: "true",
+      dangerouslySetInnerHTML: {
+        __html: data.html || data.text
+      }
     })), /*#__PURE__*/_react["default"].createElement(_common.Collapse // divider="dashed"
     // headerSize="small"
     , {

package/es/meta-comp/config-panels/TextConfig/index.less

@@ -11,6 +11,33 @@
     border-color: #EDF0F4 !important;
   }
 
+  .edit-input {
+    width: 100%;
+    height: 36px;
+    line-height: 36px;
+    padding: 0 11px;
+    color: rgba(0, 0, 0, 0.85);
+    font-size: 14px;
+    background-color: #fff;
+    background-image: none;
+    border: 1px solid #d9d9d9;
+    border-radius: 4px;
+    white-space: nowrap;
+    overflow-x: auto;
+
+    &:hover {
+      border-color: #40a9ff;
+      border-right-width: 1px;
+    }
+
+    &:focus {
+      border-color: #40a9ff;
+      box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+      border-right-width: 1px;
+      outline: 0;
+    }
+  }
+
   .edit-text-btn {
     margin: 8px auto;
     padding: 6px 16px;

package/lib/composite-comp/common/components/ProductItem/index.js

@@ -97,8 +97,22 @@ function (_super) {
 
   ProductItem.prototype.componentDidMount = function () {
     if (this.videoRef.current) {
-      this.videoRef.current.setAttribute('playsinline', '');
-      this.videoRef.current.setAttribute('webkit-playsinline', '');
+      var video_1 = this.videoRef.current; // iOS 10+ 特殊处理
+
+      video_1.setAttribute('playsinline', 'true');
+      video_1.setAttribute('webkit-playsinline', 'true');
+      video_1.setAttribute('x-webkit-airplay', 'allow');
+      video_1.setAttribute('muted', 'true'); // 阻止全屏
+
+      video_1.addEventListener('webkitbeginfullscreen', function (e) {
+        e.preventDefault();
+        video_1.webkitExitFullscreen();
+      });
+      video_1.addEventListener('webkitpresentationmodechanged', function () {
+        if (video_1.webkitPresentationMode === 'fullscreen') {
+          video_1.webkitSetPresentationMode('inline');
+        }
+      });
     }
   };
 
@@ -164,7 +178,6 @@ function (_super) {
     })) || []; // ad 卡片
 
     if (data.type === 'ad') {
-      console.log('data', data);
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "m-product-item-advertise",
         onClick: function onClick() {
@@ -176,10 +189,12 @@ function (_super) {
       }), data.url && data.url.includes('.mp4') && /*#__PURE__*/_react["default"].createElement("video", {
         ref: this.videoRef,
         autoPlay: true,
+        disablePictureInPicture: true,
         loop: true,
         muted: true,
         playsinline: true,
-        "webkit-playsinline": true
+        "webkit-playsinline": "true",
+        "x-webkit-airplay": "allow"
       }, /*#__PURE__*/_react["default"].createElement("source", {
         src: data.url,
         type: "video/mp4"

package/lib/composite-comp/dito/components/FlashDeal/pc/ProductItem/index.js

@@ -93,12 +93,14 @@ function (_super) {
   }
 
   ProductItem.prototype.render = function () {
-    var _a = this.props,
-        data = _a.data,
-        panelProps = _a.panelProps,
-        onItemClick = _a.onItemClick,
-        unknownPrice = _a.unknownPrice,
-        rest = __rest(_a, ["data", "panelProps", "onItemClick", "unknownPrice"]);
+    var _a, _b;
+
+    var _c = this.props,
+        data = _c.data,
+        panelProps = _c.panelProps,
+        onItemClick = _c.onItemClick,
+        unknownPrice = _c.unknownPrice,
+        rest = __rest(_c, ["data", "panelProps", "onItemClick", "unknownPrice"]);
 
     var promotions = (0, _businessUtil.getPromotionList)(data);
     var price = (0, _currencyUtil.formatCurrency)(data.salesPrice);
@@ -129,6 +131,7 @@ function (_super) {
     var _price = integerPart + " " + (decimalPart ? '.' + decimalPart : '');
 
     var oldPrice = data.marketPrice !== null ? (0, _currencyUtil.formatCurrencyWithSymbol)(data.marketPrice) : null;
+    var salePercent = Number(data.salePercent) / 100 || 0;
     return /*#__PURE__*/_react["default"].createElement("div", _extends({
       className: (0, _classnames["default"])('m-pc-flash-product-item'),
       onClick: function onClick() {
@@ -170,7 +173,7 @@ function (_super) {
       style: {
         color: panelProps.salesPrice.content.color
       }
-    })), /*#__PURE__*/_react["default"].createElement("div", {
+    })), ((_a = panelProps.salesProgressVisible) === null || _a === void 0 ? void 0 : _a.open) && /*#__PURE__*/_react["default"].createElement("div", {
       className: "rate-sold-wrap"
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "rate-wrap"
@@ -180,9 +183,17 @@ function (_super) {
       type: "icon-star"
     }), /*#__PURE__*/_react["default"].createElement("span", {
       className: "rate-text"
-    }, (0, _currencyUtil.numberToFixed)(5.0, 1))), data.salesCnt > 0 && /*#__PURE__*/_react["default"].createElement("div", {
-      className: "sold-count"
-    }, (0, _commonUtil.convertCount)(data.salesCnt), " sold"))));
+    }, (0, _currencyUtil.numberToFixed)(5.0, 1))), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "progress-container"
+    }, /*#__PURE__*/_react["default"].createElement("span", {
+      className: "text"
+    }, salePercent, "% Terjual"), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "progress",
+      style: {
+        width: salePercent + "%",
+        backgroundColor: (_b = panelProps.salesProgressVisible) === null || _b === void 0 ? void 0 : _b.color
+      }
+    })))));
   };
 
   ProductItem.defaultProps = {

package/lib/composite-comp/dito/components/FlashDeal/pc/ProductItem/index.less

@@ -54,6 +54,7 @@
       }
 
       .old-price {
+        width: auto !important;
         text-decoration: line-through;
         width: fit-content;
       }
@@ -61,7 +62,7 @@
     }
 
     .rate-sold-wrap {
-      margin-top: 4px;
+      // margin-top: 4px;
       display: flex;
       align-items: center;
 
@@ -75,26 +76,47 @@
           color: #666666;
           margin-left: 4px;
         }
-      }
-
-      .sold-count {
-        font-size: 16px;
-        font-weight: 500;
-        color: #666666;
-        margin-left: 10px;
-        display: flex;
-        align-items: center;
 
-        &:before {
+        &:after {
           content: '';
           display: block;
           width: 2px;
           height: 16px;
-          background-color: #666666;
-          margin-right: 10px;
+          background-color: #666;
+          margin: 0 8px;
+        }
+      }
+
+      .progress-container {
+        width: 100%;
+        height: 16px;
+        background-color: #F8B1B9;
+        border-radius: 8px;
+        position: relative;
+
+        .text {
+          font-family: Montserrat;
+          font-weight: 700;
+          font-size: 12px;
+          line-height: 16px;
+          letter-spacing: 0%;
+          color: #fff;
+          text-align: center;
+          position: absolute;
+          top: 0;
+          left: 0;
+          bottom: 0;
+          right: 0;
+          margin: auto;
+        }
+
+        .progress {
+          width: 10px;
+          border-radius: 8px;
+          height: 100%;
+          background: linear-gradient(289.79deg, #FCD117 -16.44%, #CE1126 58.47%, #0038A7 114.99%);
         }
       }
     }
   }
-
 }

package/lib/meta-comp/components/Text/index.js

@@ -139,6 +139,7 @@ function (_super) {
     var _this = _super !== null && _super.apply(this, arguments) || this;
 
     _this.textRef = /*#__PURE__*/_react["default"].createRef();
+    _this.quillWrapRef = /*#__PURE__*/_react["default"].createRef();
     _this.quillRef = null;
     _this.state = {
       editabled: false
@@ -175,10 +176,22 @@ function (_super) {
               close: _this.onEditorClose
             }
           });
+
+          document.addEventListener('mousedown', _this.onEditorBlur);
         }, 100);
       });
     };
 
+    _this.onEditorBlur = function (event) {
+      var _a, _b;
+
+      var toolbarDom = document.querySelector('.toolbar-wrap');
+
+      if (((_a = _this.quillWrapRef) === null || _a === void 0 ? void 0 : _a.current) && !((_b = _this.quillWrapRef) === null || _b === void 0 ? void 0 : _b.current.contains(event.target)) && !toolbarDom.contains(event.target)) {
+        _this.onEditorClose();
+      }
+    };
+
     _this.onContentClick = function () {
       var data = _this.props.data;
 
@@ -190,6 +203,7 @@ function (_super) {
     };
 
     _this.onEditorClose = function () {
+      document.removeEventListener('mousedown', _this.onEditorBlur);
       _this.props.data.html = _this.quillRef.root.innerHTML;
 
       _this.setState({
@@ -253,10 +267,9 @@ function (_super) {
     }
 
     if (editabled) {
-      return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "editor-shadow",
-        onClick: this.onEditorClose
-      }), /*#__PURE__*/_react["default"].createElement("div", {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        ref: this.quillWrapRef
+      }, /*#__PURE__*/_react["default"].createElement("div", {
         className: "quill-text-content-wrap",
         style: {
           zIndex: 3

package/lib/meta-comp/config-panels/TextConfig/index.js

@@ -151,6 +151,15 @@ function (_super) {
 
     _this.state = {};
     _this.containerRef = /*#__PURE__*/_react["default"].createRef();
+    _this.editInputRef = /*#__PURE__*/_react["default"].createRef();
+
+    _this.onEditInputBlur = function (event) {
+      var _a, _b;
+
+      if (((_a = _this.editInputRef) === null || _a === void 0 ? void 0 : _a.current) && !((_b = _this.editInputRef) === null || _b === void 0 ? void 0 : _b.current.contains(event.target))) {
+        _this.selfRender();
+      }
+    };
 
     _this.onSizeTypeChange = function (v, obj) {
       _extends(obj, sizeTypeMap[v]);
@@ -165,11 +174,23 @@ function (_super) {
   }
 
   TextConfig.prototype.componentDidMount = function () {
+    var _a, _b;
+
+    var data = this.props.data;
     window.document.addEventListener('text-render', this.selfRender);
+    (_b = (_a = this.editInputRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.addEventListener('input', function () {
+      if (data.html) {
+        data.html = this.textContent;
+      } else {
+        data.text = this.textContent;
+      }
+    });
+    document.addEventListener('mousedown', this.onEditInputBlur);
   };
 
   TextConfig.prototype.componentWillUnmount = function () {
     window.document.removeEventListener('text-render', this.selfRender);
+    document.removeEventListener('mousedown', this.onEditInputBlur);
   };
 
   TextConfig.prototype.render = function () {
@@ -365,13 +386,13 @@ function (_super) {
       className: "text-input",
       split: "solid",
       title: (0, _locale.i18n)('TEXT')
-    }, /*#__PURE__*/_react["default"].createElement(_antd.Input, {
-      onChange: function onChange(e) {
-        data.text = e.target.value;
-
-        _this.selfRender();
-      },
-      value: data.text
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      ref: this.editInputRef,
+      className: "edit-input",
+      contentEditable: "true",
+      dangerouslySetInnerHTML: {
+        __html: data.html || data.text
+      }
     })), /*#__PURE__*/_react["default"].createElement(_common.Collapse // divider="dashed"
     // headerSize="small"
     , {

package/lib/meta-comp/config-panels/TextConfig/index.less

@@ -11,6 +11,33 @@
     border-color: #EDF0F4 !important;
   }
 
+  .edit-input {
+    width: 100%;
+    height: 36px;
+    line-height: 36px;
+    padding: 0 11px;
+    color: rgba(0, 0, 0, 0.85);
+    font-size: 14px;
+    background-color: #fff;
+    background-image: none;
+    border: 1px solid #d9d9d9;
+    border-radius: 4px;
+    white-space: nowrap;
+    overflow-x: auto;
+
+    &:hover {
+      border-color: #40a9ff;
+      border-right-width: 1px;
+    }
+
+    &:focus {
+      border-color: #40a9ff;
+      box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+      border-right-width: 1px;
+      outline: 0;
+    }
+  }
+
   .edit-text-btn {
     margin: 8px auto;
     padding: 6px 16px;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fonixtree/magic-design",
   "author": "Cylon Team",
-  "version": "1.0.188",
+  "version": "1.0.190",
   "description": "Magic Design",
   "license": "MIT",
   "module": "es/index.js",