@fonixtree/magic-design 0.0.1

package/es/common/ImageModal/index.less

@@ -0,0 +1,21 @@
+.catg_tree_container {
+  .ant-tree-title {
+    max-width: 200px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: inline-block;
+  }
+}
+
+.catg_img {
+  .ant-spin-container {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .ant-upload-list-item-thumbnail {
+    img {
+      object-fit: contain;
+    }
+  }
+}

package/es/common/ImagePicker/index.js

@@ -0,0 +1,162 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+require("./index.less");
+
+var _ImageModal = _interopRequireDefault(require("../ImageModal"));
+
+var _Iconfont = _interopRequireDefault(require("../Iconfont"));
+
+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 ImagePicker =
+/** @class */
+function (_super) {
+  __extends(ImagePicker, _super);
+
+  function ImagePicker() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.state = {
+      visible: false
+    };
+
+    _this.onChange = function (v) {
+      _this.props.onChange(v);
+    };
+
+    _this.onModalOk = function (data) {
+      // setContents(params => {
+      //   const uids = params.map(param => param.contentId);
+      //   const newContents = [...params, ...data.filter(el => !uids.includes(el.contentId))];
+      //   if (onChange) {
+      //     onChange(newContents);
+      //   }
+      //   return newContents;
+      // });
+      _this.setState({
+        visible: false
+      });
+
+      if ((data === null || data === void 0 ? void 0 : data.length) > 0) {
+        console.log('---', data);
+
+        _this.props.onChange(data[0]);
+      }
+    };
+
+    return _this;
+  }
+
+  ImagePicker.prototype.render = function () {
+    var _this = this;
+
+    var visible = this.state.visible;
+    var value = this.props.value;
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "m-image-picker"
+    }, value ? /*#__PURE__*/_react["default"].createElement("div", {
+      className: "img-wrap",
+      onClick: function onClick() {
+        _this.setState({
+          visible: true
+        });
+      }
+    }, /*#__PURE__*/_react["default"].createElement("img", {
+      src: value
+    }), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "btn-icons-modal",
+      onClick: function onClick(e) {
+        return e.stopPropagation();
+      }
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "btn-edit",
+      onClick: function onClick() {
+        _this.setState({
+          visible: true
+        });
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
+      color: "#fff",
+      onClick: function onClick() {},
+      size: 25,
+      type: "icon-setting"
+    }), "Edit"), /*#__PURE__*/_react["default"].createElement("span", {
+      className: "line"
+    }), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "btn-del",
+      onClick: function onClick() {
+        _this.props.onChange('');
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
+      color: "#fff",
+      onClick: function onClick() {},
+      size: 25,
+      type: "icon-delete1"
+    }), "Delete"))) : /*#__PURE__*/_react["default"].createElement("div", {
+      className: "no-img"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "hint-txt"
+    }, "Looks like you don't have any images in your gallery. Choose images to feature on this page."), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "pick-btn",
+      onClick: function onClick() {
+        _this.setState({
+          visible: true
+        });
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
+      color: "#FFFFFF",
+      size: 18,
+      type: "icon-add"
+    }), /*#__PURE__*/_react["default"].createElement("p", null, "Add Image"))), visible && /*#__PURE__*/_react["default"].createElement(_ImageModal["default"], {
+      onCancel: function onCancel() {
+        _this.setState({
+          visible: false
+        });
+      },
+      onOk: this.onModalOk,
+      visible: true
+    }));
+  };
+
+  ImagePicker.defaultProps = {
+    value: '',
+    onChange: function onChange() {}
+  };
+  return ImagePicker;
+}(_react["default"].Component);
+
+var _default = ImagePicker;
+exports["default"] = _default;

package/es/common/ImagePicker/index.less

@@ -0,0 +1,104 @@
+.m-image-picker {
+  padding-bottom: 12px;
+  border-bottom: 1px dashed #D2D9E5;
+  width: 100%;
+  margin-bottom: 16px;
+  cursor: pointer;
+
+  .no-img {
+    .hint-txt {
+      font-family: 'Open Sans';
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 20px;
+      color: #232F46;
+      margin-bottom: 12px;
+    }
+
+    .pick-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: #2F54EB;
+      height: 48px;
+      border-radius: 8px;
+      color: #FFFFFF;
+      cursor: pointer;
+
+      &>p {
+        margin-left: 12px;
+        font-family: 'Open Sans';
+        font-weight: 600;
+        font-size: 16px;
+        // line-height: 24px;
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  .img-wrap {
+    width: 100%;
+    height: 140px;
+    position: relative;
+
+    &:hover {
+      .btn-icons-modal {
+        display: flex;
+        transition: all .25s;
+      }
+    }
+
+    .btn-icons-modal {
+      display: none;
+      position: absolute;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      font-family: 'Open Sans';
+      font-style: normal;
+      font-weight: 400;
+      font-size: 16px;
+      line-height: 24px;
+      color: #FFFFFF;
+      background: rgba(35, 47, 70, 0.6);
+      align-items: center;
+      justify-content: center;
+
+      .btn-edit {
+        display: flex;
+        align-items: center;
+        margin-right: 20px;
+        cursor: pointer;
+
+        >span {
+          margin-right: 5px;
+        }
+      }
+
+      .btn-del {
+        display: flex;
+        align-items: center;
+        margin-left: 20px;
+        cursor: pointer;
+
+        >span {
+          margin-right: 5px;
+        }
+      }
+
+      .line {
+        display: inline-block;
+        width: 1px;
+        height: 16px;
+        background: rgba(255, 255, 255, 0.5);
+      }
+    }
+
+    &>img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+  }
+}

package/es/common/InputNumber/index.js

@@ -0,0 +1,91 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+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 NewInputNumber =
+/** @class */
+function (_super) {
+  __extends(NewInputNumber, _super);
+
+  function NewInputNumber() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+
+  NewInputNumber.prototype.render = function () {
+    var _a = this.props,
+        value = _a.value,
+        _onChange = _a.onChange,
+        min = _a.min,
+        max = _a.max,
+        step = _a.step,
+        unit = _a.unit;
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "m-input-number"
+    }, /*#__PURE__*/_react["default"].createElement(_antd.InputNumber, {
+      className: "input",
+      controls: false,
+      max: max,
+      min: min,
+      onChange: function onChange(v) {
+        return _onChange(v);
+      },
+      step: step,
+      style: {
+        width: unit ? '30px' : '100%'
+      },
+      value: value
+    }), unit && /*#__PURE__*/_react["default"].createElement("span", {
+      className: "unit"
+    }, unit));
+  };
+
+  NewInputNumber.defaultProps = {
+    value: '',
+    onChange: function onChange() {},
+    min: 1,
+    max: 100,
+    step: 0,
+    unit: ''
+  };
+  return NewInputNumber;
+}(_react["default"].Component);
+
+var _default = NewInputNumber;
+exports["default"] = _default;

package/es/common/InputNumber/index.less

@@ -0,0 +1,33 @@
+.m-input-number {
+  width: 60px;
+  height: 34px;
+  background: #FFFFFF;
+  border: 1px solid #D2D9E5;
+  border-radius: 8px;
+  padding: 0 7px;
+  position: relative;
+
+  .ant-input-number-focused {
+    box-shadow: none;
+  }
+
+  .input {
+    height: 100%;
+    border-radius: 8px;
+    border: none;
+
+    input {
+      width: 100%;
+      padding: 0;
+      text-align: center;
+      border: none;
+    }
+  }
+
+  .unit {
+    color: #7988a5;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+}

package/es/common/LayoutSelector/index.js

@@ -0,0 +1,111 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+require("./index.less");
+
+var _left = _interopRequireDefault(require("./imgs/left.png"));
+
+var _center = _interopRequireDefault(require("./imgs/center.png"));
+
+var _right = _interopRequireDefault(require("./imgs/right.png"));
+
+var _Iconfont = _interopRequireDefault(require("../Iconfont"));
+
+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 defaultSource = [{
+  id: 'layout1',
+  name: 'left',
+  image: _left["default"]
+}, {
+  id: 'layout2',
+  name: 'center',
+  image: _center["default"]
+}, {
+  id: 'layout3',
+  name: 'right',
+  image: _right["default"]
+}];
+
+var LayoutSelector =
+/** @class */
+function (_super) {
+  __extends(LayoutSelector, _super);
+
+  function LayoutSelector() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.state = {};
+    return _this;
+  }
+
+  LayoutSelector.prototype.render = function () {
+    var _a = this.props,
+        source = _a.source,
+        onChange = _a.onChange,
+        value = _a.value;
+    var sourceList = source || defaultSource;
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "m-layout-selector"
+    }, sourceList.map(function (item) {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        key: item.name,
+        className: (0, _classnames["default"])('item-wrap', {
+          active: value === item.name
+        }),
+        onClick: function onClick() {
+          onChange(item.name);
+        }
+      }, item.image ? /*#__PURE__*/_react["default"].createElement("img", {
+        alt: item.name,
+        src: item.image
+      }) : /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
+        size: 32,
+        type: item.icon
+      }));
+    }));
+  };
+
+  LayoutSelector.defaultProps = {
+    value: 'left',
+    onChange: function onChange() {}
+  };
+  return LayoutSelector;
+}(_react["default"].Component);
+
+var _default = LayoutSelector;
+exports["default"] = _default;

package/es/common/LayoutSelector/index.less

@@ -0,0 +1,34 @@
+.m-layout-selector {
+  display: flex;
+  flex-wrap: wrap;
+  max-width: 306px;
+
+  .item-wrap {
+    width: 94px;
+    height: 70px;
+    background: #F5F6F7;
+    // border: 1px solid #D2D9E5;
+    border-radius: 8px;
+    margin-bottom: 12px;
+    margin-right: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    overflow: hidden;
+
+    &>img {
+      width: 100%;
+      height: 100%;
+    }
+
+    &:nth-of-type(3n) {
+      margin-right: 0;
+    }
+
+    &.active {
+      background: #FFFFFF;
+      border: 2px solid #2F54EB;
+    }
+  }
+}