@fonixtree/magic-design 1.0.187 → 1.0.189

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

@@ -91,9 +91,21 @@ function (_super) {
     var _this = _super !== null && _super.apply(this, arguments) || this;
 
     _this.state = {};
+    _this.videoRef = /*#__PURE__*/_react["default"].createRef();
     return _this;
   }
 
+  ProductItem.prototype.componentDidMount = function () {
+    if (this.videoRef.current) {
+      this.videoRef.current.setAttribute('playsinline', '');
+      this.videoRef.current.setAttribute('webkit-playsinline', ''); // 阻止全屏
+
+      this.videoRef.current.addEventListener('webkitbeginfullscreen', function (e) {
+        e.preventDefault();
+      });
+    }
+  };
+
   ProductItem.prototype.render = function () {
     var _a, _b, _c, _d, _e, _f, _g;
 
@@ -165,29 +177,18 @@ function (_super) {
       }, data.url && !data.url.includes('.mp4') && /*#__PURE__*/_react["default"].createElement("img", {
         alt: "welcome advertise",
         src: data.url
-      }), data.url && data.url.includes('.mp4') &&
-      /*#__PURE__*/
-      // <video
-      //   autoPlay
-      //   loop
-      //   muted
-      //   playsinline
-      //   webkit-playsinline
-      // >
-      //   <source src={data.url} type="video/mp4" />
-      // </video>
-      _react["default"].createElement("div", {
-        className: "video-wrap"
-      }, /*#__PURE__*/_react["default"].createElement(_common.Video, {
-        key: data.id + "-" + data.url + "}",
-        opts: {
-          source: data.url,
-          controlBarHide: true,
-          autoplay: true,
-          loop: true,
-          speed: 1
-        },
-        videoId: data.id
+      }), 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,
+        "x-webkit-airplay": "deny"
+      }, /*#__PURE__*/_react["default"].createElement("source", {
+        src: data.url,
+        type: "video/mp4"
       })));
     }
 

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

@@ -91,9 +91,21 @@ function (_super) {
     var _this = _super !== null && _super.apply(this, arguments) || this;
 
     _this.state = {};
+    _this.videoRef = /*#__PURE__*/_react["default"].createRef();
     return _this;
   }
 
+  ProductItem.prototype.componentDidMount = function () {
+    if (this.videoRef.current) {
+      this.videoRef.current.setAttribute('playsinline', '');
+      this.videoRef.current.setAttribute('webkit-playsinline', ''); // 阻止全屏
+
+      this.videoRef.current.addEventListener('webkitbeginfullscreen', function (e) {
+        e.preventDefault();
+      });
+    }
+  };
+
   ProductItem.prototype.render = function () {
     var _a, _b, _c, _d, _e, _f, _g;
 
@@ -165,29 +177,18 @@ function (_super) {
       }, data.url && !data.url.includes('.mp4') && /*#__PURE__*/_react["default"].createElement("img", {
         alt: "welcome advertise",
         src: data.url
-      }), data.url && data.url.includes('.mp4') &&
-      /*#__PURE__*/
-      // <video
-      //   autoPlay
-      //   loop
-      //   muted
-      //   playsinline
-      //   webkit-playsinline
-      // >
-      //   <source src={data.url} type="video/mp4" />
-      // </video>
-      _react["default"].createElement("div", {
-        className: "video-wrap"
-      }, /*#__PURE__*/_react["default"].createElement(_common.Video, {
-        key: data.id + "-" + data.url + "}",
-        opts: {
-          source: data.url,
-          controlBarHide: true,
-          autoplay: true,
-          loop: true,
-          speed: 1
-        },
-        videoId: data.id
+      }), 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,
+        "x-webkit-airplay": "deny"
+      }, /*#__PURE__*/_react["default"].createElement("source", {
+        src: data.url,
+        type: "video/mp4"
       })));
     }
 

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.187",
+  "version": "1.0.189",
   "description": "Magic Design",
   "license": "MIT",
   "module": "es/index.js",