@fonixtree/magic-design 2.0.50 → 2.0.52

package/lib/core/Designer/ToolBarModal/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.fontWeightList = exports.fontSizeList = exports.fontFamilyList = exports["default"] = void 0;
+exports.fontWeightList = exports.fontSizeList = exports.fontFamilyList = exports["default"] = exports.OpenSansFontWeightList = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -11,12 +11,8 @@ var _antd = require("antd");
 
 var _ToolBtn = _interopRequireDefault(require("./ToolBtn"));
 
-var _Iconfont = _interopRequireDefault(require("../../../common/Iconfont"));
-
 var _coreUtil = require("../../../utils/coreUtil");
 
-var _UnderlineSelect = _interopRequireDefault(require("../../../meta-comp/config-panels/TextConfig/UnderlineSelect"));
-
 require("./index.less");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -71,6 +67,17 @@ var fontWeightList = [{
   value: '700'
 }];
 exports.fontWeightList = fontWeightList;
+var OpenSansFontWeightList = [{
+  name: 'Regular',
+  value: '400'
+}, {
+  name: 'Semibold',
+  value: '600'
+}, {
+  name: 'Bold',
+  value: '700'
+}];
+exports.OpenSansFontWeightList = OpenSansFontWeightList;
 
 var ToolBarModal =
 /** @class */
@@ -164,24 +171,30 @@ function (_super) {
       } else if (type == 'bullet') {
         _this.props.quillRef.setSelection(0, _this.props.quillRef.getLength());
 
-        _this.props.quillRef.format('list-style-type', value);
+        if (!value || value === quillFormat['list-style-type']) {
+          _this.props.quillRef.format('list-style-type', '');
 
-        if (value === quillFormat['list-style-type']) {
           _this.props.quillRef.format('list', '');
         } else {
+          _this.props.quillRef.format('list-style-type', value);
+
           _this.props.quillRef.format('list', 'bullet');
         }
       } else if (type == 'ordered') {
         _this.props.quillRef.setSelection(0, _this.props.quillRef.getLength());
 
-        _this.props.quillRef.format('list-style-type', value);
+        if (!value || value === quillFormat['list-style-type']) {
+          _this.props.quillRef.format('list-style-type', '');
 
-        if (value === quillFormat['list-style-type']) {
           _this.props.quillRef.format('list', '');
         } else {
+          _this.props.quillRef.format('list-style-type', value);
+
           _this.props.quillRef.format('list', 'ordered');
         }
       } else if (type == 'text-decoration-color') {
+        _this.props.quillRef.setSelection(0, _this.props.quillRef.getLength());
+
         if (value) {
           _this.props.quillRef.format('underline', true);
         } else {
@@ -218,6 +231,10 @@ function (_super) {
     var _this = this;
 
     var quillFormat = this.state.quillFormat;
+    console.log('quillFormat render', quillFormat);
+
+    var _fontWeightList = quillFormat['font-family'] === 'OpenSans' ? OpenSansFontWeightList : fontWeightList;
+
     return /*#__PURE__*/_react["default"].createElement("div", {
       ref: this.toolBarRef,
       className: "toolbar-wrap"
@@ -252,7 +269,7 @@ function (_super) {
         width: '150px'
       },
       value: quillFormat['font-weight']
-    }, fontWeightList.map(function (v) {
+    }, _fontWeightList.map(function (v) {
       return /*#__PURE__*/_react["default"].createElement(_antd.Select.Option, {
         label: v.name,
         value: v.value
@@ -274,20 +291,7 @@ function (_super) {
         label: v.name,
         value: v
       }, v, "px");
-    }))), /*#__PURE__*/_react["default"].createElement("div", {
-      className: "tool-item"
-    }, /*#__PURE__*/_react["default"].createElement(_UnderlineSelect["default"], {
-      onChange: function onChange(v) {
-        _this.onToolBtnClick('text-decoration-style', v);
-      },
-      placeholder: "Underline Style",
-      repeatCount: 28,
-      size: "small",
-      style: {
-        width: '140px'
-      },
-      value: quillFormat['text-decoration-style']
-    }))), /*#__PURE__*/_react["default"].createElement("div", {
+    })))), /*#__PURE__*/_react["default"].createElement("div", {
       className: "toolbar-row"
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "tool-item"
@@ -312,16 +316,13 @@ function (_super) {
         _this.onToolBtnClick('text-decoration-color', value);
       },
       type: "text-decoration-color",
+      underlineOnChange: function underlineOnChange(value) {
+        return _this.onToolBtnClick('text-decoration-style', value);
+      },
+      underlineValue: quillFormat['text-decoration-style'],
       value: {
         color: quillFormat['text-decoration-color']
       }
-    }), /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
-      color: "#8493AF",
-      onClick: function onClick() {
-        return _this.onToolBtnClick('text-decoration-color', '');
-      },
-      size: 12,
-      type: "icon-outlined-down"
     })), /*#__PURE__*/_react["default"].createElement("div", {
       className: "tooll-line"
     }), /*#__PURE__*/_react["default"].createElement("div", {
@@ -354,13 +355,6 @@ function (_super) {
       value: {
         list: quillFormat['list-style-type']
       }
-    }), /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
-      color: "#8493AF",
-      onClick: function onClick() {
-        return _this.onToolBtnClick('text-decoration-color', '');
-      },
-      size: 12,
-      type: "icon-outlined-down"
     })), /*#__PURE__*/_react["default"].createElement("div", {
       className: "tool-item"
     }, /*#__PURE__*/_react["default"].createElement(_ToolBtn["default"], {
@@ -371,34 +365,30 @@ function (_super) {
       value: {
         list: quillFormat['list-style-type']
       }
-    }), /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
-      color: "#8493AF",
-      onClick: function onClick() {
-        return _this.onToolBtnClick('text-decoration-color', '');
-      },
-      size: 12,
-      type: "icon-outlined-down"
     })), /*#__PURE__*/_react["default"].createElement("div", {
       className: "tooll-line"
     }), /*#__PURE__*/_react["default"].createElement("div", {
       className: "tool-item"
     }, /*#__PURE__*/_react["default"].createElement(_ToolBtn["default"], {
-      onChange: function onChange(value) {
-        _this.onToolBtnClick('', value);
+      active: quillFormat['align'] === undefined,
+      onChange: function onChange() {
+        _this.onToolBtnClick('align', '');
       },
       type: "alignLeft"
     })), /*#__PURE__*/_react["default"].createElement("div", {
       className: "tool-item"
     }, /*#__PURE__*/_react["default"].createElement(_ToolBtn["default"], {
-      onChange: function onChange(value) {
-        _this.onToolBtnClick('link', value);
+      active: quillFormat['align'] === 'center',
+      onChange: function onChange() {
+        _this.onToolBtnClick('align', 'center');
       },
       type: "alignCenter"
     })), /*#__PURE__*/_react["default"].createElement("div", {
       className: "tool-item"
     }, /*#__PURE__*/_react["default"].createElement(_ToolBtn["default"], {
-      onChange: function onChange(value) {
-        _this.onToolBtnClick('link', value);
+      active: quillFormat['align'] === 'right',
+      onChange: function onChange() {
+        _this.onToolBtnClick('align', 'right');
       },
       type: "alignRight"
     })), /*#__PURE__*/_react["default"].createElement("div", {

package/lib/core/Renderer/index.js

@@ -62,7 +62,8 @@ var setDesignConfig = function setDesignConfig(props) {
 var Renderer = function Renderer(props) {
   var pageData = props.pageData,
       outputType = props.outputType,
-      noSetWindow = props.noSetWindow;
+      noSetWindow = props.noSetWindow,
+      isPreview = props.isPreview;
 
   var _a = (0, _react.useState)([]),
       floors = _a[0],
@@ -109,7 +110,6 @@ var Renderer = function Renderer(props) {
   });
   (0, _react.useEffect)(function () {
     var disposer = (0, _mobx.autorun)(function () {
-      console.log('--sssf,', _mobx.frameStore.modalState);
       setModalState(_mobx.frameStore.modalState);
     });
     return function () {
@@ -165,7 +165,9 @@ var Renderer = function Renderer(props) {
       key: nodeData.id,
       id: 'node-' + nodeData.id
     }, /*#__PURE__*/_react["default"].createElement(Clazz, __assign({}, newInstanceProps), null));
-  }), modalState.visible && /*#__PURE__*/_react["default"].createElement(_common.MyModal, _extends({}, modalState, {
+  }), modalState.visible && /*#__PURE__*/_react["default"].createElement(_common.MyModal, _extends({
+    isPreview: isPreview
+  }, modalState, {
     onClose: onCloseModal
   })));
 };
@@ -173,7 +175,8 @@ var Renderer = function Renderer(props) {
 Renderer.defaultProps = {
   pageData: {},
   device: 'pc',
-  config: {}
+  config: {},
+  isPreview: false
 };
 var _default = Renderer;
 exports["default"] = _default;

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

@@ -35,6 +35,14 @@
     font-style: normal;
     font-weight: 600;
   }
+
+  .ql-align-center {
+    text-align: center;
+  }
+
+  .ql-align-right {
+    text-align: right;
+  }
 }
 
 .ql-clipboard {

package/package.json

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