@fonixtree/magic-design 0.1.77 → 0.1.79

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

@@ -11,6 +11,8 @@ var _antd = require("antd");
 
 require("./index.less");
 
+var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
+
 var _locale = require("../../../locale");
 
 var _SpacingConfig = _interopRequireDefault(require("../../../composite-comp/common/config-panels/SpacingConfig"));
@@ -104,11 +106,11 @@ function (_super) {
 
       _this.updateAttr(data, 'hover', {
         open: true,
-        buttonBorder: data.buttonBorder,
-        buttonIcon: data.buttonIcon,
-        buttonText: data.buttonText,
+        buttonBorder: (0, _cloneDeep["default"])(data.buttonBorder),
+        buttonIcon: (0, _cloneDeep["default"])(data.buttonIcon),
+        buttonText: (0, _cloneDeep["default"])(data.buttonText),
         content: {
-          backgroundColor: data.content.backgroundColor
+          backgroundColor: (0, _cloneDeep["default"])(data.content.backgroundColor)
         }
       }); // console.log('--ffd, button hover first click', data);
 
@@ -162,7 +164,7 @@ function (_super) {
 
     var fontSizeKey = window.magicDesign.device == 'pc' ? 'pcFontSize' : 'fontSize';
 
-    var ButtonTextSetting = function ButtonTextSetting(data) {
+    var ButtonTextSetting = function ButtonTextSetting(_data) {
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_common.Field, {
         title: (0, _locale.i18n)('FONT_STYLE')
       }, /*#__PURE__*/_react["default"].createElement(_antd.Select, {
@@ -171,24 +173,24 @@ function (_super) {
             return t.key == v;
           });
 
-          _extends(data, __assign(__assign({}, findOne), {
+          _extends(_data, __assign(__assign({}, findOne), {
             sizeType: findOne === null || findOne === void 0 ? void 0 : findOne.key
           }));
 
           _this.selfRender();
         },
-        value: data.sizeType
+        value: _data.sizeType
       }, _TextConfig.sizeTypeList.map(function (sizeType) {
         return /*#__PURE__*/_react["default"].createElement(_antd.Select.Option, {
           value: sizeType.key
         }, sizeType.key);
-      }))), data.sizeType == 'Customize font styles' && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_common.Field, {
+      }))), _data.sizeType == 'Customize font styles' && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_common.Field, {
         title: (0, _locale.i18n)('FONT_FAMILY')
       }, /*#__PURE__*/_react["default"].createElement(_antd.Select, {
         onChange: function onChange(v) {
-          _this.updateAttr(data, 'fontFamily', v);
+          _this.updateAttr(_data, 'fontFamily', v);
         },
-        value: data.fontFamily
+        value: _data.fontFamily
       }, /*#__PURE__*/_react["default"].createElement(_antd.Select.Option, {
         value: "Montserrat"
       }, "Montserrat"), /*#__PURE__*/_react["default"].createElement(_antd.Select.Option, {
@@ -197,9 +199,9 @@ function (_super) {
         title: (0, _locale.i18n)('FONT_WEIGHT')
       }, /*#__PURE__*/_react["default"].createElement(_antd.Select, {
         onChange: function onChange(v) {
-          _this.updateAttr(data, 'fontWeight', v);
+          _this.updateAttr(_data, 'fontWeight', v);
         },
-        value: data.fontWeight
+        value: _data.fontWeight
       }, /*#__PURE__*/_react["default"].createElement(_antd.Select.Option, {
         value: 400
       }, (0, _locale.i18n)('REGULAR')), /*#__PURE__*/_react["default"].createElement(_antd.Select.Option, {
@@ -210,34 +212,34 @@ function (_super) {
         onChange: function onChange(_a) {
           var count = _a.count;
 
-          _this.updateAttr(data, fontSizeKey, count);
+          _this.updateAttr(_data, fontSizeKey, count);
         },
         unit: "px",
         value: {
-          count: data[fontSizeKey]
+          count: _data[fontSizeKey]
         }
       }))), /*#__PURE__*/_react["default"].createElement(_common.Field, {
         title: ""
       }, /*#__PURE__*/_react["default"].createElement(_common.FontStyles, {
         onChange: function onChange(value) {
-          _extends(data, value);
+          _extends(_data, value);
 
           _this.selfRender();
         },
-        value: data
+        value: _data
       })));
     };
 
-    var ButtonBorderSetting = function ButtonBorderSetting(data) {
+    var ButtonBorderSetting = function ButtonBorderSetting(_data) {
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_common.Field, {
         split: true,
         title: (0, _locale.i18n)('BORDER_COLOR')
       }, /*#__PURE__*/_react["default"].createElement(_common.ColorPickerInput, {
         colorType: "rgba",
         onChange: function onChange(value) {
-          _this.updateAttr(data, 'borderColor', value);
+          _this.updateAttr(_data, 'borderColor', value);
         },
-        value: data.borderColor
+        value: _data.borderColor
       })), /*#__PURE__*/_react["default"].createElement(_common.Field, {
         title: (0, _locale.i18n)('BORDER_RADIUS')
       }, /*#__PURE__*/_react["default"].createElement(_common.Slider, {
@@ -245,15 +247,15 @@ function (_super) {
         onChange: function onChange(_a) {
           var count = _a.count;
 
-          _this.updateAttr(data, 'borderRadius', count);
+          _this.updateAttr(_data, 'borderRadius', count);
         },
         value: {
-          count: data.borderRadius
+          count: _data.borderRadius
         }
       })));
     };
 
-    var ButtonIconSetting = function ButtonIconSetting(data) {
+    var ButtonIconSetting = function ButtonIconSetting(_data) {
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_common.Field, {
         title: (0, _locale.i18n)('ICON')
       }, /*#__PURE__*/_react["default"].createElement(_common.IconPicker, {
@@ -262,18 +264,18 @@ function (_super) {
         },
         onClick: function onClick() {
           _this.setState({
-            isHover: data == _this.props.data.hover.buttonIcon
+            isHover: _data == _this.props._data.hover.buttonIcon
           });
         },
-        value: data.iconUrl
-      })), data.iconUrl && /*#__PURE__*/_react["default"].createElement(_common.Field, {
+        value: _data.iconUrl
+      })), _data.iconUrl && /*#__PURE__*/_react["default"].createElement(_common.Field, {
         title: (0, _locale.i18n)('ICON_PLACEMENT')
       }, /*#__PURE__*/_react["default"].createElement(_common.ButtonIconLayout, {
-        icon: data.iconUrl,
+        icon: _data.iconUrl,
         onChange: function onChange(value) {
-          return _this.updateAttr(data, 'layout', value);
+          return _this.updateAttr(_data, 'layout', value);
         },
-        value: data.layout
+        value: _data.layout
       })));
     };
 

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

@@ -202,7 +202,7 @@ function (_super) {
   function ImageConfig() {
     var _this = _super !== null && _super.apply(this, arguments) || this;
 
-    _this.onClick = function (event) {// console.log(event);
+    _this.onClick = function () {// console.log(event);
     };
 
     _this.getImg = function (v, way) {
@@ -319,7 +319,9 @@ function (_super) {
         data = _a.data,
         needHover = _a.needHover,
         needClickArea = _a.needClickArea,
-        needURL = _a.needURL;
+        needURL = _a.needURL,
+        recommendImgSize = _a.recommendImgSize,
+        onlySpecificCode = _a.onlySpecificCode;
     var selectImg = this.getSelectedImg(data);
 
     var ContentSetting = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_common.ImagePicker, {
@@ -330,6 +332,7 @@ function (_super) {
       onChange: function onChange(v, way) {
         _this.getImg(v, way);
       },
+      recommendImgSize: recommendImgSize,
       value: selectImg
     }), needClickArea && selectImg && /*#__PURE__*/_react["default"].createElement(_HotAreaConfig["default"], {
       imgUrl: selectImg,
@@ -346,51 +349,10 @@ function (_super) {
 
         _this.selfRender();
       },
+      onlySpecificCode: onlySpecificCode,
       value: data.content.clickUrl
     })));
 
-    var HoverSetting = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_common.Field, {
-      split: data.hover.backgroundType === 'new',
-      title: (0, _locale.i18n)('IMAGE')
-    }, /*#__PURE__*/_react["default"].createElement(_antd.Select, {
-      className: "hoverSelect",
-      onChange: function onChange(v) {
-        data.hover.backgroundType = v;
-
-        _this.selfRender();
-      },
-      size: "large",
-      value: data.hover.backgroundType
-    }, /*#__PURE__*/_react["default"].createElement(_antd.Select.Option, {
-      value: "enlarge"
-    }, (0, _locale.i18n)('ENLARGE')), /*#__PURE__*/_react["default"].createElement(_antd.Select.Option, {
-      value: "new"
-    }, (0, _locale.i18n)('NEW_IMAGE')))), data.hover.backgroundType === 'enlarge' && /*#__PURE__*/_react["default"].createElement(_common.Field, {
-      title: (0, _locale.i18n)('MAGNIFICATION')
-    }, /*#__PURE__*/_react["default"].createElement(_common.Slider, {
-      inputType: "float",
-      maxVal: 3,
-      minVal: 1,
-      onChange: function onChange(v) {
-        data.hover.magnification = v.count;
-
-        _this.selfRender();
-      },
-      step: 0.25,
-      value: {
-        count: data.hover.magnification
-      }
-    })), data.hover.backgroundType === 'new' && /*#__PURE__*/_react["default"].createElement(_common.ImagePicker, {
-      imageSelectedWay: data.hover.imageSelectedWay || {
-        pc: '',
-        mobile: ''
-      },
-      onChange: function onChange(v, way) {
-        return _this.getImgHoverUrl(v, way);
-      },
-      value: (0, _coreUtil.isPc)() ? data.hover.pcImgHoverUrl : data.hover.h5ImgHoverUrl
-    }));
-
     var imageSource = [{
       key: '1',
       name: (0, _locale.i18n)('CONTENT'),
@@ -398,6 +360,50 @@ function (_super) {
     }];
 
     if (needHover) {
+      console.log('needHover', needHover);
+
+      var HoverSetting = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_common.Field, {
+        split: data.hover.backgroundType === 'new',
+        title: (0, _locale.i18n)('IMAGE')
+      }, /*#__PURE__*/_react["default"].createElement(_antd.Select, {
+        className: "hoverSelect",
+        onChange: function onChange(v) {
+          data.hover.backgroundType = v;
+
+          _this.selfRender();
+        },
+        size: "large",
+        value: data.hover.backgroundType
+      }, /*#__PURE__*/_react["default"].createElement(_antd.Select.Option, {
+        value: "enlarge"
+      }, (0, _locale.i18n)('ENLARGE')), /*#__PURE__*/_react["default"].createElement(_antd.Select.Option, {
+        value: "new"
+      }, (0, _locale.i18n)('NEW_IMAGE')))), data.hover.backgroundType === 'enlarge' && /*#__PURE__*/_react["default"].createElement(_common.Field, {
+        title: (0, _locale.i18n)('MAGNIFICATION')
+      }, /*#__PURE__*/_react["default"].createElement(_common.Slider, {
+        inputType: "float",
+        maxVal: 3,
+        minVal: 1,
+        onChange: function onChange(v) {
+          data.hover.magnification = v.count;
+
+          _this.selfRender();
+        },
+        step: 0.25,
+        value: {
+          count: data.hover.magnification
+        }
+      })), data.hover.backgroundType === 'new' && /*#__PURE__*/_react["default"].createElement(_common.ImagePicker, {
+        imageSelectedWay: data.hover.imageSelectedWay || {
+          pc: '',
+          mobile: ''
+        },
+        onChange: function onChange(v, way) {
+          return _this.getImgHoverUrl(v, way);
+        },
+        value: (0, _coreUtil.isPc)() ? data.hover.pcImgHoverUrl : data.hover.h5ImgHoverUrl
+      }));
+
       imageSource.push({
         key: '5',
         name: (0, _locale.i18n)('HOVER'),

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

@@ -0,0 +1,100 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactQuill = _interopRequireDefault(require("react-quill"));
+
+require("react-quill/dist/quill.snow.css");
+
+var _antd = require("antd");
+
+require("./index.less");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var __extends = void 0 && (void 0).__extends || function () {
+  var _extendStatics = function extendStatics(d, b) {
+    _extendStatics = Object.setPrototypeOf || {
+      __proto__: []
+    } instanceof Array && function (d, b) {
+      d.__proto__ = b;
+    } || function (d, b) {
+      for (var p in b) {
+        if (b.hasOwnProperty(p)) d[p] = b[p];
+      }
+    };
+
+    return _extendStatics(d, b);
+  };
+
+  return function (d, b) {
+    _extendStatics(d, b);
+
+    function __() {
+      this.constructor = d;
+    }
+
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+  };
+}();
+
+var TextEditModal =
+/** @class */
+function (_super) {
+  __extends(TextEditModal, _super);
+
+  function TextEditModal() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.state = {
+      value: ''
+    };
+    _this.reactQuillRef = null;
+    _this.quillRef = null;
+
+    _this.getHtml = function () {
+      return _this.quillRef.root.innerHTML;
+    };
+
+    return _this;
+  }
+
+  TextEditModal.prototype.componentDidMount = function () {
+    this.quillRef = this.reactQuillRef.getEditor();
+  };
+
+  TextEditModal.prototype.render = function () {
+    var _this = this;
+
+    var _a = this.props,
+        onCancel = _a.onCancel,
+        onOk = _a.onOk;
+    var value = this.state.value;
+    return /*#__PURE__*/_react["default"].createElement(_antd.Modal, {
+      closable: false,
+      onCancel: onCancel,
+      onOk: onOk,
+      visible: true,
+      width: 1000
+    }, /*#__PURE__*/_react["default"].createElement(_reactQuill["default"], {
+      ref: function ref(el) {
+        _this.reactQuillRef = el;
+      },
+      style: {
+        height: 600
+      },
+      value: value
+    }));
+  };
+
+  TextEditModal.defaultProps = {};
+  return TextEditModal;
+}(_react["default"].Component);
+
+var _default = TextEditModal;
+exports["default"] = _default;

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

@@ -0,0 +1,25 @@
+.text-label-content {
+  background-color: #f5f6f7;
+
+  .label-wrap {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+
+    .label-item {
+      padding: 5px 11px;
+      font-size: 14px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 5px;
+      background-color: #fff;
+      margin: 8px;
+      cursor: pointer;
+
+      &:hover {
+        background-color: #f6f6f7;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,108 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _antd = require("antd");
+
+var _react = _interopRequireDefault(require("react"));
+
+require("./index.less");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var __extends = void 0 && (void 0).__extends || function () {
+  var _extendStatics = function extendStatics(d, b) {
+    _extendStatics = Object.setPrototypeOf || {
+      __proto__: []
+    } instanceof Array && function (d, b) {
+      d.__proto__ = b;
+    } || function (d, b) {
+      for (var p in b) {
+        if (b.hasOwnProperty(p)) d[p] = b[p];
+      }
+    };
+
+    return _extendStatics(d, b);
+  };
+
+  return function (d, b) {
+    _extendStatics(d, b);
+
+    function __() {
+      this.constructor = d;
+    }
+
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+  };
+}();
+/* eslint-disable react/no-danger */
+
+
+var UnderlineSelect =
+/** @class */
+function (_super) {
+  __extends(UnderlineSelect, _super);
+
+  function UnderlineSelect() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.containerRef = /*#__PURE__*/_react["default"].createRef();
+    return _this;
+  }
+
+  UnderlineSelect.prototype.render = function () {
+    var _this = this;
+
+    var _a = this.props.repeatCount,
+        repeatCount = _a === void 0 ? 50 : _a;
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      ref: this.containerRef,
+      className: "underline-select-wrap"
+    }, /*#__PURE__*/_react["default"].createElement(_antd.Select, _extends({
+      getPopupContainer: function getPopupContainer() {
+        return _this.containerRef.current;
+      }
+    }, this.props), /*#__PURE__*/_react["default"].createElement(_antd.Select.Option, {
+      value: "solid"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "line-config line-solid",
+      dangerouslySetInnerHTML: {
+        __html: '&nbsp;'.repeat(repeatCount)
+      }
+    })), /*#__PURE__*/_react["default"].createElement(_antd.Select.Option, {
+      value: "dashed"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "line-config dashed-line",
+      dangerouslySetInnerHTML: {
+        __html: '&nbsp;'.repeat(repeatCount)
+      }
+    })), /*#__PURE__*/_react["default"].createElement(_antd.Select.Option, {
+      value: "double"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "line-config double-line",
+      dangerouslySetInnerHTML: {
+        __html: '&nbsp;'.repeat(repeatCount)
+      }
+    })), /*#__PURE__*/_react["default"].createElement(_antd.Select.Option, {
+      value: "wavy"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "line-config wavy-line",
+      dangerouslySetInnerHTML: {
+        __html: '&nbsp;'.repeat(repeatCount)
+      }
+    }))));
+  };
+
+  UnderlineSelect.defaultProps = {
+    repeatCount: 50
+  };
+  return UnderlineSelect;
+}(_react["default"].Component);
+
+var _default = UnderlineSelect;
+exports["default"] = _default;

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

@@ -0,0 +1,26 @@
+.underline-select-wrap {
+  .line-config {
+    text-decoration-line: line-through;
+    text-decoration-color: #000;
+    font-size: 14px;
+    font-weight: 600;
+
+    &.line-solid {
+      text-decoration-style: solid;
+    }
+
+    &.dashed-line {
+      text-decoration-style: dashed;
+    }
+
+    &.double-line {
+      text-decoration-style: double;
+    }
+
+    &.wavy-line {
+      text-decoration-style: wavy;
+    }
+  }
+
+
+}

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

@@ -13,6 +13,8 @@ var _antd = require("antd");
 
 var _TextLabel = _interopRequireDefault(require("./TextLabel"));
 
+var _UnderlineSelect = _interopRequireDefault(require("./UnderlineSelect"));
+
 var _coreUtil = require("../../../utils/coreUtil");
 
 var _locale = require("../../../locale");
@@ -146,6 +148,7 @@ function (_super) {
     var _this = _super !== null && _super.apply(this, arguments) || this;
 
     _this.state = {};
+    _this.containerRef = /*#__PURE__*/_react["default"].createRef();
 
     _this.onSizeTypeChange = function (v, obj) {
       _extends(obj, sizeTypeMap[v]);
@@ -329,42 +332,17 @@ function (_super) {
         value: data.underline.textDecorationColor
       })), /*#__PURE__*/_react["default"].createElement(_common.Field, {
         title: (0, _locale.i18n)('UNDERLINE_STYLE')
-      }, /*#__PURE__*/_react["default"].createElement(_antd.Select, {
+      }, /*#__PURE__*/_react["default"].createElement(_UnderlineSelect["default"], {
         onChange: function onChange(v) {
           data.underline.textDecorationStyle = v;
 
           _this.selfRender();
         },
+        style: {
+          width: '100%'
+        },
         value: data.underline.textDecorationStyle
-      }, /*#__PURE__*/_react["default"].createElement(_antd.Select.Option, {
-        value: "solid"
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "line-config line-solid",
-        dangerouslySetInnerHTML: {
-          __html: ' '.repeat(50)
-        }
-      })), /*#__PURE__*/_react["default"].createElement(_antd.Select.Option, {
-        value: "dashed"
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "line-config dashed-line",
-        dangerouslySetInnerHTML: {
-          __html: ' '.repeat(50)
-        }
-      })), /*#__PURE__*/_react["default"].createElement(_antd.Select.Option, {
-        value: "double"
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "line-config double-line",
-        dangerouslySetInnerHTML: {
-          __html: ' '.repeat(50)
-        }
-      })), /*#__PURE__*/_react["default"].createElement(_antd.Select.Option, {
-        value: "wavy"
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "line-config wavy-line",
-        dangerouslySetInnerHTML: {
-          __html: ' '.repeat(50)
-        }
-      }))))),
+      }))),
       metaOption: data.underline,
       toggleType: 'checkbox'
     }];
@@ -380,6 +358,7 @@ function (_super) {
     }
 
     return /*#__PURE__*/_react["default"].createElement("div", {
+      ref: this.containerRef,
       className: "m-text-config"
     }, /*#__PURE__*/_react["default"].createElement(_common.Collapse // divider="dashed"
     // headerSize="small"

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

@@ -3,22 +3,18 @@
   flex-direction: column;
   padding: 0 12px;
   background-color: #F5F6F7;
-  .line-config {
-    text-decoration-line: line-through;
-    text-decoration-color: #000;
+
+  .edit-text-btn {
+    margin: 8px auto;
+    padding: 6px 16px;
+    background-color: #2e54eb;
+    color: #fff;
     font-size: 14px;
-    font-weight: 600;
-  }
-  .line-solid {
-    text-decoration-style: solid;
-  }
-  .dashed-line {
-    text-decoration-style: dashed;
-  }
-  .double-line {
-    text-decoration-style: double;
-  }
-  .wavy-line {
-    text-decoration-style: wavy;
+    border-radius: 8px;
+    cursor: pointer;
+
+    &:hover {
+      background-color: #0837f4;
+    }
   }
 }