@fonixtree/magic-design 1.0.4 → 1.0.6

package/es/core/Designer/ToolBarModal/ToolBtn/components/BulletPicker/index.js

@@ -0,0 +1,96 @@
+"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 _CircleSVG = _interopRequireDefault(require("./images/CircleSVG"));
+
+var _InitialSVG = _interopRequireDefault(require("./images/InitialSVG"));
+
+var _SquareSVG = _interopRequireDefault(require("./images/SquareSVG"));
+
+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 = {
+  initial: _InitialSVG["default"],
+  circle: _CircleSVG["default"],
+  square: _SquareSVG["default"]
+};
+
+var BulletPicker =
+/** @class */
+function (_super) {
+  __extends(BulletPicker, _super);
+
+  function BulletPicker() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.state = {
+      visibility: false
+    };
+    return _this;
+  }
+
+  BulletPicker.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) || 'initial';
+    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(_InitialSVG["default"], null), /*#__PURE__*/_react["default"].createElement(_IconSelectPicker["default"], {
+      onChange: onChange,
+      visibility: visibility
+    }));
+  };
+
+  BulletPicker.defaultProps = {};
+  return BulletPicker;
+}(_react["default"].Component);
+
+var _default = BulletPicker;
+exports["default"] = _default;

package/es/core/Designer/ToolBarModal/ToolBtn/components/BulletPicker/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/es/core/Designer/ToolBarModal/ToolBtn/components/ColorPickerBtn/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 _FontColorSVG = _interopRequireDefault(require("../../images/FontColorSVG"));
+
+var _BackgroundSVG = _interopRequireDefault(require("../../images/BackgroundSVG"));
+
+var _UnderlineSVG = _interopRequireDefault(require("../../images/UnderlineSVG"));
+
+var _ColorPicker = _interopRequireDefault(require("../../../../../../common/ColorPicker"));
+
+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,
+        _b = _a.type,
+        type = _b === void 0 ? 'color' : _b;
+    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'),
+      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'
+    }), /*#__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/es/core/Designer/ToolBarModal/ToolBtn/components/ColorPickerBtn/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/es/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/es/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/es/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/es/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/es/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;