@fonixtree/magic-design 2.0.26 → 2.0.28

package/lib/core/Designer/ToolBarModal/ToolBtn/components/OrderedPicker/index.js

@@ -0,0 +1,105 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _IconSelectPicker = _interopRequireDefault(require("./IconSelectPicker"));
+
+var _CJLDecimalSVG = _interopRequireDefault(require("./images/CJLDecimalSVG"));
+
+var _DecimalSVG = _interopRequireDefault(require("./images/DecimalSVG"));
+
+var _LowerAlphaSVG = _interopRequireDefault(require("./images/LowerAlphaSVG"));
+
+var _UpperAlphaSVG = _interopRequireDefault(require("./images/UpperAlphaSVG"));
+
+var _LowerRomanSVG = _interopRequireDefault(require("./images/LowerRomanSVG"));
+
+var _UpperRomanSVG = _interopRequireDefault(require("./images/UpperRomanSVG"));
+
+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 SvgMap = {
+  decimal: _DecimalSVG["default"],
+  'cjk-decimal': _CJLDecimalSVG["default"],
+  'lower-alpha': _LowerAlphaSVG["default"],
+  'upper-alpha': _UpperAlphaSVG["default"],
+  'lower-roman': _LowerRomanSVG["default"],
+  'upper-roman': _UpperRomanSVG["default"]
+};
+
+var OrderedPicker =
+/** @class */
+function (_super) {
+  __extends(OrderedPicker, _super);
+
+  function OrderedPicker() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.state = {
+      visibility: false
+    };
+    return _this;
+  }
+
+  OrderedPicker.prototype.render = function () {
+    var _this = this;
+
+    var _a = this.props,
+        value = _a.value,
+        onChange = _a.onChange;
+    var visibility = this.state.visibility;
+    var list = (value === null || value === void 0 ? void 0 : value.list) || 'decimal';
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: (0, _classnames["default"])('tool-btn-wrap'),
+      onClick: function onClick() {
+        _this.setState({
+          visibility: !visibility
+        });
+      }
+    }, SvgMap[list] ? SvgMap[list]({}) : /*#__PURE__*/_react["default"].createElement(_DecimalSVG["default"], null), /*#__PURE__*/_react["default"].createElement(_IconSelectPicker["default"], {
+      onChange: onChange,
+      visibility: visibility
+    }));
+  };
+
+  OrderedPicker.defaultProps = {};
+  return OrderedPicker;
+}(_react["default"].Component);
+
+var _default = OrderedPicker;
+exports["default"] = _default;

package/lib/core/Designer/ToolBarModal/ToolBtn/components/OrderedPicker/index.less

@@ -0,0 +1,26 @@
+.tool-btn-wrap {
+  width: 26px;
+  height: 26px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border-radius: 6px;
+  padding: 0;
+  border: none;
+  transition: .2s all linear;
+  position: relative;
+
+  &:hover {
+    background: #f8f8f8;
+  }
+
+  &.active {
+    background: #E7E9E8;
+  }
+
+  svg {
+    height: 18px;
+    height: 18px;
+  }
+}

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

@@ -27,6 +27,10 @@ var _OrderSVG = _interopRequireDefault(require("./images/OrderSVG"));
 
 var _UnorderSVG = _interopRequireDefault(require("./images/UnorderSVG"));
 
+var _BulletPicker = _interopRequireDefault(require("./components/BulletPicker"));
+
+var _OrderedPicker = _interopRequireDefault(require("./components/OrderedPicker"));
+
 require("./index.less");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -80,6 +84,12 @@ var iconTypeMap = {
   align: function align(props) {
     return /*#__PURE__*/_react["default"].createElement(_AlignPicker["default"], props);
   },
+  bullet: function bullet(props) {
+    return /*#__PURE__*/_react["default"].createElement(_BulletPicker["default"], props);
+  },
+  ordered: function ordered(props) {
+    return /*#__PURE__*/_react["default"].createElement(_OrderedPicker["default"], props);
+  },
   'text-decoration-color': function textDecorationColor(props) {
     return /*#__PURE__*/_react["default"].createElement(_ColorPickerBtn["default"], _extends({
       type: "text-decoration-color"

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

@@ -150,6 +150,14 @@ function (_super) {
         _this.props.quillRef.format('font-family', value);
       } else if (type == 'text-decoration-style') {
         _this.props.quillRef.format('text-decoration-style', value);
+      } else if (type == 'bullet') {
+        _this.props.quillRef.format('list-style-type', value);
+
+        _this.props.quillRef.format('list', 'bullet');
+      } else if (type == 'ordered') {
+        _this.props.quillRef.format('list-style-type', value);
+
+        _this.props.quillRef.format('list', 'ordered');
       } else if (type == 'text-decoration-color') {
         if (value) {
           _this.props.quillRef.format('underline', true);
@@ -309,19 +317,23 @@ function (_super) {
     })), /*#__PURE__*/_react["default"].createElement("div", {
       className: "tool-item"
     }, /*#__PURE__*/_react["default"].createElement(_ToolBtn["default"], {
-      active: quillFormat['list'] == 'bullet',
-      onChange: function onChange() {
-        _this.onToolBtnClick('listUnOrder');
+      onChange: function onChange(value) {
+        _this.onToolBtnClick('bullet', value);
       },
-      type: "listUnOrder"
+      type: "bullet",
+      value: {
+        list: quillFormat['list-style-type']
+      }
     })), /*#__PURE__*/_react["default"].createElement("div", {
       className: "tool-item"
     }, /*#__PURE__*/_react["default"].createElement(_ToolBtn["default"], {
-      active: quillFormat['list'] == 'ordered',
-      onChange: function onChange() {
-        _this.onToolBtnClick('listOrder');
+      onChange: function onChange(value) {
+        _this.onToolBtnClick('ordered', value);
       },
-      type: "listOrder"
+      type: "ordered",
+      value: {
+        list: quillFormat['list-style-type']
+      }
     })), /*#__PURE__*/_react["default"].createElement("div", {
       className: "tooll-line"
     }), /*#__PURE__*/_react["default"].createElement("div", {

package/lib/meta-comp/components/Text/formats/listStyleTypeStyle.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListStyleTypeStyle = exports.ListStyleTypeAttributor = void 0;
+
+var _quill = _interopRequireDefault(require("quill"));
+
+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 Parchment = _quill["default"]["import"]('parchment');
+
+var ListStyleTypeAttributor =
+/** @class */
+function (_super) {
+  __extends(ListStyleTypeAttributor, _super);
+
+  function ListStyleTypeAttributor() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+
+  return ListStyleTypeAttributor;
+}(Parchment.Attributor.Style);
+
+exports.ListStyleTypeAttributor = ListStyleTypeAttributor;
+var ListStyleTypeStyle = new ListStyleTypeAttributor('list-style-type', 'list-style-type', {
+  scope: Parchment.Scope.BLOCK
+});
+exports.ListStyleTypeStyle = ListStyleTypeStyle;
+
+_quill["default"].register('formats/list-style-type', ListStyleTypeStyle, true);

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

@@ -17,6 +17,8 @@ require("./formats/fontFamily");
 
 require("./formats/textDecorationColor");
 
+require("./formats/listStyleTypeStyle");
+
 require("./formats/textDecorationStyle");
 
 var _decorator = require("../../../decorator");

package/package.json

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