@fonixtree/magic-design 0.1.77 → 0.1.79

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

@@ -0,0 +1,136 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _UnderlineSelectPicker = _interopRequireDefault(require("./UnderlineSelectPicker"));
+
+var _FontColorSVG = _interopRequireDefault(require("../../images/FontColorSVG"));
+
+var _BackgroundSVG = _interopRequireDefault(require("../../images/BackgroundSVG"));
+
+var _UnderlineSVG = _interopRequireDefault(require("../../images/UnderlineSVG"));
+
+var _ColorPicker = _interopRequireDefault(require("../../../../../../common/ColorPicker"));
+
+var _Iconfont = _interopRequireDefault(require("../../../../../../common/Iconfont"));
+
+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 ColorPickerBtn =
+/** @class */
+function (_super) {
+  __extends(ColorPickerBtn, _super);
+
+  function ColorPickerBtn() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.state = {
+      visibility: false,
+      showSelectUnderline: false
+    };
+    return _this;
+  }
+
+  ColorPickerBtn.prototype.render = function () {
+    var _this = this;
+
+    var _a = this.props,
+        value = _a.value,
+        onChange = _a.onChange,
+        _b = _a.type,
+        type = _b === void 0 ? 'color' : _b,
+        underlineValue = _a.underlineValue,
+        underlineOnChange = _a.underlineOnChange;
+    var _c = this.state,
+        visibility = _c.visibility,
+        showSelectUnderline = _c.showSelectUnderline;
+    var color = value === null || value === void 0 ? void 0 : value.color;
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: (0, _classnames["default"])('color-picker-tool-btn-wrap', {
+        padding: type == 'text-decoration-color'
+      })
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      onClick: function onClick() {
+        _this.setState({
+          visibility: !visibility
+        });
+      }
+    }, type == 'color' && /*#__PURE__*/_react["default"].createElement(_FontColorSVG["default"], {
+      color: color || '#262626'
+    }), type == 'background' && /*#__PURE__*/_react["default"].createElement(_BackgroundSVG["default"], {
+      color: color || '#262626'
+    }), type == 'text-decoration-color' && /*#__PURE__*/_react["default"].createElement(_UnderlineSVG["default"], {
+      color: color || '#262626'
+    })), type == 'text-decoration-color' && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
+      className: "btn_icon",
+      color: "#8493AF",
+      onClick: function onClick() {
+        return _this.setState({
+          showSelectUnderline: !showSelectUnderline
+        });
+      },
+      size: 12,
+      type: "icon-outlined-down"
+    }), showSelectUnderline && /*#__PURE__*/_react["default"].createElement(_UnderlineSelectPicker["default"], {
+      onChange: function onChange(v) {
+        underlineOnChange(v);
+
+        _this.setState({
+          showSelectUnderline: !showSelectUnderline
+        });
+      },
+      value: underlineValue
+    })), /*#__PURE__*/_react["default"].createElement(_ColorPicker["default"], {
+      color: color,
+      onChangeColor: onChange,
+      onClose: function onClose() {
+        _this.setState({
+          visibility: false
+        });
+      },
+      placement: "bottomRight",
+      visibility: visibility
+    }));
+  };
+
+  ColorPickerBtn.defaultProps = {};
+  return ColorPickerBtn;
+}(_react["default"].Component);
+
+var _default = ColorPickerBtn;
+exports["default"] = _default;

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

@@ -0,0 +1,27 @@
+.color-picker-tool-btn-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  >div {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &.padding {
+    padding: 0 5px;
+  }
+
+  .underlineWrap {
+    position: absolute;
+    left: 0;
+    top: 27px;
+    padding: 5px;
+    background-color: #fff;
+    // border: 1px solid #E7E9E8;
+    box-shadow: 0 8px 16px 4px hsla(0, 0%, 0%, 0.04);
+    color: #262626;
+    border-radius: 6px;
+  }
+}

package/lib/core/Designer/ToolBarModal/ToolBtn/components/LinkBtn/LinkInputPicker/index.js

@@ -0,0 +1,99 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _common = require("../../../../../../../common");
+
+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 LinkInputPicker =
+/** @class */
+function (_super) {
+  __extends(LinkInputPicker, _super);
+
+  function LinkInputPicker() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.state = {
+      value: ''
+    };
+
+    _this.onUrlChange = function (v) {
+      console.log('v', v);
+
+      _this.setState({
+        value: v
+      });
+    };
+
+    _this.onCommit = function () {
+      var value = _this.state.value;
+      var _a = _this.props,
+          onChange = _a.onChange,
+          onClose = _a.onClose;
+      onChange(value);
+      onClose();
+    };
+
+    return _this;
+  }
+
+  LinkInputPicker.prototype.render = function () {
+    var _a = this.props,
+        visibility = _a.visibility,
+        onClose = _a.onClose;
+    var value = this.state.value;
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "link-input-picker-panel"
+    }, visibility && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "panel-bg",
+      onClick: onClose
+    }), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "panel-content"
+    }, /*#__PURE__*/_react["default"].createElement(_common.UrlPicker, {
+      onChange: this.onUrlChange,
+      value: value
+    }), /*#__PURE__*/_react["default"].createElement("span", {
+      className: "commit-btn",
+      onClick: this.onCommit
+    }, "Confirm"))));
+  };
+
+  return LinkInputPicker;
+}(_react["default"].Component);
+
+var _default = LinkInputPicker;
+exports["default"] = _default;

package/lib/core/Designer/ToolBarModal/ToolBtn/components/LinkBtn/LinkInputPicker/index.less

@@ -0,0 +1,39 @@
+.link-input-picker-panel {
+  z-index: 999;
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+
+  .panel-bg {
+    position: fixed;
+    z-index: 0;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+
+  .panel-content {
+    display: flex;
+    align-items: center;
+    padding: 16px;
+    border: 1px solid rgba(0, 0, 0, .04);
+    background-color: #fff;
+    border-radius: 8px;
+
+    .commit-btn {
+      margin-left: 12px;
+      background-color: #2e54eb;
+      padding: 5px 12px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #fff;
+      border-radius: 8px;
+      white-space: nowrap;
+      font-size: 12px;
+      cursor: pointer;
+      position: relative;
+    }
+  }
+}

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

@@ -0,0 +1,93 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _LinkInputPicker = _interopRequireDefault(require("./LinkInputPicker"));
+
+var _LinkSVG = _interopRequireDefault(require("../../images/LinkSVG"));
+
+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 ColorPickerBtn =
+/** @class */
+function (_super) {
+  __extends(ColorPickerBtn, _super);
+
+  function ColorPickerBtn() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.state = {
+      visibility: false
+    };
+    return _this;
+  }
+
+  ColorPickerBtn.prototype.render = function () {
+    var _this = this;
+
+    var _a = this.props,
+        value = _a.value,
+        onChange = _a.onChange;
+    var visibility = this.state.visibility;
+    var color = value === null || value === void 0 ? void 0 : value.color;
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: (0, _classnames["default"])('tool-btn-wrap')
+    }, /*#__PURE__*/_react["default"].createElement(_LinkSVG["default"], {
+      color: color || '#262626',
+      onChange: function onChange() {
+        _this.setState({
+          visibility: !visibility
+        });
+      }
+    }), visibility && /*#__PURE__*/_react["default"].createElement(_LinkInputPicker["default"], {
+      onChange: onChange,
+      onClose: function onClose() {
+        _this.setState({
+          visibility: false
+        });
+      },
+      visibility: true
+    }));
+  };
+
+  ColorPickerBtn.defaultProps = {};
+  return ColorPickerBtn;
+}(_react["default"].Component);
+
+var _default = ColorPickerBtn;
+exports["default"] = _default;

package/lib/core/Designer/ToolBarModal/ToolBtn/components/LinkBtn/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/components/OrderedPicker/IconSelectPicker/index.js

@@ -0,0 +1,133 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+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 IconSelectPicker =
+/** @class */
+function (_super) {
+  __extends(IconSelectPicker, _super);
+
+  function IconSelectPicker() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+
+  IconSelectPicker.prototype.render = function () {
+    var _a = this.props,
+        visibility = _a.visibility,
+        value = _a.value,
+        _onChange = _a.onChange;
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "align-select-picker-panel"
+    }, visibility && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "panel-bg"
+    }), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "select-modal-content"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "select-content-row"
+    }, /*#__PURE__*/_react["default"].createElement("span", {
+      className: (0, _classnames["default"])('select-item', {
+        active: value == 'decimal'
+      })
+    }, /*#__PURE__*/_react["default"].createElement(_DecimalSVG["default"], {
+      onChange: function onChange() {
+        return _onChange('decimal');
+      }
+    })), /*#__PURE__*/_react["default"].createElement("span", {
+      className: (0, _classnames["default"])('select-item', {
+        active: value == 'lower-alpha'
+      })
+    }, /*#__PURE__*/_react["default"].createElement(_LowerAlphaSVG["default"], {
+      onChange: function onChange() {
+        return _onChange('lower-alpha');
+      }
+    })), /*#__PURE__*/_react["default"].createElement("span", {
+      className: (0, _classnames["default"])('select-item', {
+        active: value == 'lower-roman'
+      })
+    }, /*#__PURE__*/_react["default"].createElement(_LowerRomanSVG["default"], {
+      onChange: function onChange() {
+        return _onChange('lower-roman');
+      }
+    }))), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "select-content-row"
+    }, /*#__PURE__*/_react["default"].createElement("span", {
+      className: (0, _classnames["default"])('select-item', {
+        active: value == 'cjk-decimal'
+      })
+    }, /*#__PURE__*/_react["default"].createElement(_CJLDecimalSVG["default"], {
+      onChange: function onChange() {
+        return _onChange('cjk-decimal');
+      }
+    })), /*#__PURE__*/_react["default"].createElement("span", {
+      className: (0, _classnames["default"])('select-item', {
+        active: value == 'upper-alpha'
+      })
+    }, /*#__PURE__*/_react["default"].createElement(_UpperAlphaSVG["default"], {
+      onChange: function onChange() {
+        return _onChange('upper-alpha');
+      }
+    })), /*#__PURE__*/_react["default"].createElement("span", {
+      className: (0, _classnames["default"])('select-item', {
+        active: value == 'upper-roman'
+      })
+    }, /*#__PURE__*/_react["default"].createElement(_UpperRomanSVG["default"], {
+      onChange: function onChange() {
+        return _onChange('upper-roman');
+      }
+    }))))));
+  };
+
+  return IconSelectPicker;
+}(_react["default"].Component);
+
+var _default = IconSelectPicker;
+exports["default"] = _default;

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

@@ -0,0 +1,60 @@
+.align-select-picker-panel {
+  z-index: 999;
+  position: absolute;
+  top: 100%;
+  left: 0;
+
+  .panel-bg {
+    position: fixed;
+    z-index: 0;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+
+  .select-modal-content {
+    display: flex;
+    align-items: center;
+    padding: 5px;
+    background-color: #fff;
+    border: 1px solid #E7E9E8;
+    box-shadow: 0 8px 16px 4px hsla(0, 0%, 0%, 0.04);
+    color: #262626;
+    border-radius: 6px;
+    flex-direction: column;
+
+    .select-content-row{
+      display: flex;
+      align-items: center;
+    }
+
+    .select-item {
+      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;
+      margin: 0 5px;
+
+      &:hover {
+        background: #f8f8f8;
+      }
+
+      &.active {
+        background: #E7E9E8;
+      }
+
+      svg {
+        height: 18px;
+        height: 18px;
+      }
+    }
+  }
+}

package/lib/core/Designer/ToolBarModal/ToolBtn/components/OrderedPicker/images/CJLDecimalSVG.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = function _default(_a) {
+  var onChange = _a.onChange;
+  return /*#__PURE__*/_react["default"].createElement("svg", {
+    fill: "none",
+    onClick: onChange,
+    viewBox: "0 0 19 16",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M10.5 8H17.5",
+    stroke: "#232F46",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "1.1"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M10.5 4H17.5",
+    stroke: "#232F46",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "1.1"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M10.5 12H17.5",
+    stroke: "#232F46",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "1.1"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M0.816867 3.46922H6.37287V4.25522H0.816867V3.46922ZM6.93164 5.78027C6.93164 5.59668 6.98145 5.46777 7.08105 5.39355C7.18262 5.31934 7.30469 5.28223 7.44727 5.28223C7.58594 5.28223 7.70508 5.31934 7.80469 5.39355C7.90625 5.46777 7.95703 5.59668 7.95703 5.78027C7.95703 5.95605 7.90625 6.08301 7.80469 6.16113C7.70508 6.23926 7.58594 6.27832 7.44727 6.27832C7.30469 6.27832 7.18262 6.23926 7.08105 6.16113C6.98145 6.08301 6.93164 5.95605 6.93164 5.78027Z",
+    fill: "#232F46"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M1.41087 8.734H5.76687V9.526H1.41087V8.734ZM0.912867 12.214H6.27087V13.042H0.912867V12.214ZM6.93164 12.5811C6.93164 12.3975 6.98145 12.2686 7.08105 12.1943C7.18262 12.1201 7.30469 12.083 7.44727 12.083C7.58594 12.083 7.70508 12.1201 7.80469 12.1943C7.90625 12.2686 7.95703 12.3975 7.95703 12.5811C7.95703 12.7568 7.90625 12.8838 7.80469 12.9619C7.70508 13.04 7.58594 13.0791 7.44727 13.0791C7.30469 13.0791 7.18262 13.04 7.08105 12.9619C6.98145 12.8838 6.93164 12.7568 6.93164 12.5811Z",
+    fill: "#232F46"
+  }));
+};
+
+exports["default"] = _default;