@fonixtree/magic-design 0.1.57 → 0.1.59

package/es/assets/less/modal.less

@@ -18,6 +18,7 @@
       .cylon-modal-body {
         padding: 16px 16px 12px 16px !important;
         max-height: 800px !important;
+        overflow: scroll;
       }
     }
   }

package/es/assets/less/slider.less

@@ -18,4 +18,52 @@
     border: solid 5px #fff !important;
     box-shadow: 1px 1px 4px 1px rgba(132, 147, 175, 0.21) !important;
   }
-}
+
+  &.cylon-slider-sm {
+    .cylon-slider-rail {
+      background-color: #E9F0FF !important;
+      height: 4px;
+    }
+    .cylon-slider-track {
+      background-color: #2F54EB !important;
+      height: 4px;
+    }
+    .cylon-slider-step {
+      height: 4px;
+      .cylon-slider-dot {
+        top: 0px;
+        width: 4px;
+        height: 4px;
+        background-color: #D2D9E5;
+        border: none; 
+        border-radius: 50%;
+        cursor: pointer;
+      }
+    }
+    .cylon-slider-handle {
+      height: 12px;
+      width: 12px;
+      margin-top: -4px !important;
+      background-color: #597EF7 !important;
+      border: solid 3px #fff !important;
+      box-shadow: 1px 1px 4px 1px rgba(132, 147, 175, 0.21) !important;
+    }
+    .cylon-slider-tooltip {
+      top: -20px !important;
+      padding-bottom: 0;
+      .cylon-tooltip-content {
+        .cylon-tooltip-arrow {
+          display: none;
+        }
+        .cylon-tooltip-inner {
+          background-color: transparent;
+          color: #000;
+          box-shadow: none;
+          min-height: 0;
+          padding: 0;
+        }
+      }
+    }
+  }
+
+}

package/es/common/ImagePicker/index.js

@@ -9,10 +9,14 @@ var _react = _interopRequireDefault(require("react"));
 
 require("./index.less");
 
+var _antd = require("antd");
+
 var _locale = require("../../locale");
 
 var _ImageModal = _interopRequireDefault(require("../ImageModal"));
 
+var _ = require("..");
+
 var _Iconfont = _interopRequireDefault(require("../Iconfont"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -43,6 +47,15 @@ var __extends = void 0 && (void 0).__extends || function () {
   };
 }();
 
+var Option = _antd.Select.Option;
+var selectList = [{
+  key: 'upload',
+  value: (0, _locale.i18n)('UPLOAD')
+}, {
+  key: 'url',
+  value: (0, _locale.i18n)('IMAGE_URL')
+}];
+
 var ImagePicker =
 /** @class */
 function (_super) {
@@ -52,7 +65,9 @@ function (_super) {
     var _this = _super !== null && _super.apply(this, arguments) || this;
 
     _this.state = {
-      visible: false
+      visible: false,
+      imageWay: 'upload',
+      inputVal: ''
     };
 
     _this.onChange = function (v) {
@@ -73,84 +88,166 @@ function (_super) {
       });
 
       if ((data === null || data === void 0 ? void 0 : data.length) > 0) {
-        console.log('---', data);
-
         _this.props.onChange(data[0]);
       }
     };
 
+    _this.getImagePick = function () {
+      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"
+      }), (0, _locale.i18n)('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"
+      }), (0, _locale.i18n)('DELETE')))) : /*#__PURE__*/_react["default"].createElement("div", {
+        className: "no-img"
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "hint-txt"
+      }, (0, _locale.i18n)('LOOKS_LIKE_YOU_DO_NOT_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, (0, _locale.i18n)('ADD_IMAGE')))), visible && /*#__PURE__*/_react["default"].createElement(_ImageModal["default"], {
+        onCancel: function onCancel() {
+          _this.setState({
+            visible: false
+          });
+        },
+        onOk: _this.onModalOk,
+        visible: true
+      }));
+    };
+
+    _this.getImageUrl = function () {
+      var onChange = _this.props.onChange;
+      var inputVal = _this.state.inputVal;
+      return /*#__PURE__*/_react["default"].createElement(_.Field, {
+        title: (0, _locale.i18n)('IMAGE_URL')
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "input-url"
+      }, /*#__PURE__*/_react["default"].createElement("input", {
+        onBlur: function onBlur() {
+          onChange({
+            url: inputVal
+          });
+        },
+        onChange: function onChange(e) {
+          _this.setState({
+            inputVal: e.target.value
+          });
+
+          console.log('---d', e.target.value);
+        },
+        placeholder: (0, _locale.i18n)('PLEASE_ADD_A_LINK'),
+        type: "text",
+        value: inputVal
+      }), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "icon-btns"
+      }, /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
+        color: "#FF4141",
+        onClick: function onClick() {
+          return onChange({
+            url: ''
+          });
+        },
+        size: "20px",
+        type: "icon-delete1"
+      }))));
+    };
+
     return _this;
   }
 
+  ImagePicker.prototype.componentDidMount = function () {
+    this.setState({
+      inputVal: this.props.value
+    });
+  };
+
+  ImagePicker.prototype.componentWillReceiveProps = function (nextProps) {
+    if (nextProps.value != this.props.value) {
+      this.setState({
+        inputVal: nextProps.value
+      });
+    }
+  };
+
   ImagePicker.prototype.render = function () {
     var _this = this;
 
-    var visible = this.state.visible;
-    var value = this.props.value;
+    var imageWay = this.state.imageWay;
     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();
-      }
+      className: "image-picker-wrap"
+    }, /*#__PURE__*/_react["default"].createElement(_.Field, {
+      title: (0, _locale.i18n)('ADD_IMAGE')
     }, /*#__PURE__*/_react["default"].createElement("div", {
-      className: "btn-edit",
-      onClick: function onClick() {
+      className: "select-wrap"
+    }, /*#__PURE__*/_react["default"].createElement(_antd.Select, {
+      className: "image-picker-select",
+      onChange: function onChange(value) {
         _this.setState({
-          visible: true
-        });
-      }
-    }, /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
-      color: "#fff",
-      onClick: function onClick() {},
-      size: 25,
-      type: "icon-setting"
-    }), (0, _locale.i18n)('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"
-    }), (0, _locale.i18n)('DELETE')))) : /*#__PURE__*/_react["default"].createElement("div", {
-      className: "no-img"
-    }, /*#__PURE__*/_react["default"].createElement("div", {
-      className: "hint-txt"
-    }, (0, _locale.i18n)('LOOKS_LIKE_YOU_DO_NOT_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, (0, _locale.i18n)('ADD_IMAGE')))), visible && /*#__PURE__*/_react["default"].createElement(_ImageModal["default"], {
-      onCancel: function onCancel() {
-        _this.setState({
-          visible: false
+          imageWay: value
         });
       },
-      onOk: this.onModalOk,
-      visible: true
-    }));
+      size: "large",
+      value: imageWay
+    }, selectList.map(function (v) {
+      return /*#__PURE__*/_react["default"].createElement(Option, {
+        key: v.key,
+        value: v.key
+      }, v.value);
+    })), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "ai-btn"
+    }, /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
+      color: "#2F54EB",
+      size: 20,
+      type: "icon-ai"
+    }), /*#__PURE__*/_react["default"].createElement("span", {
+      className: "btn-txt"
+    }, (0, _locale.i18n)('AI_IMAGE'))))), imageWay === 'upload' ? this.getImagePick() : this.getImageUrl());
   };
 
   ImagePicker.defaultProps = {

package/es/common/ImagePicker/index.less

@@ -1,8 +1,109 @@
+.image-picker-wrap {
+  border-bottom: 1px dashed #D2D9E5;
+  margin-bottom: 16px;
+
+  .select-wrap {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .ai-btn {
+      background: #FFFFFF;
+      border: 1px solid #2F54EB;
+      border-radius: 8px;
+      padding: 7px 10px;
+      .btn-txt {
+        font-family: 'Open Sans';
+        font-style: normal;
+        font-weight: 600;
+        font-size: 16px;
+        line-height: 24px;
+        color: #2F54EB;
+        margin-left: 6px;
+      }
+    }
+    .image-picker-select {
+      width: 156px;
+      height: 40px;
+
+      .cylon-select-selector {
+        border-radius: 8px !important;
+        height: 40px !important;
+      }
+    }
+  }
+  .input-url {
+    width: 100%;
+    height: 40px;
+    background: #FFFFFF;
+    border: 1px solid #D2D9E5;
+    border-radius: 8px;
+    display: flex;
+    padding: 9px 14px;
+    display: flex;
+    align-items: center;
+
+    input {
+      border: none;
+      outline: none;
+      height: 24px;
+      flex-grow: 1;
+      font-family: 'Open Sans';
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      color: #232F46;
+    }
+
+    /* 使用webkit内核的浏览器 */
+    input::-webkit-input-placeholder {
+      font-family: 'Open Sans';
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      color: #8493AF;
+    }
+
+    /* Firefox版本4-18 */
+    input:-moz-placeholder {
+      font-family: 'Open Sans';
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      color: #8493AF;
+    }
+
+    /* Firefox版本19+ */
+    input::-moz-placeholder {
+      font-family: 'Open Sans';
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      color: #8493AF;
+    }
+
+    /* IE浏览器 */
+    input:-ms-input-placeholder {
+      font-family: 'Open Sans';
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      color: #8493AF;
+    }
+
+    .icon-btns {
+      display: flex;
+      align-items: center;
+
+      &>span {
+        margin-left: 12px;
+        cursor: pointer;
+      }
+    }
+  }
+}
 .m-image-picker {
   padding-bottom: 12px;
-  border-bottom: 1px dashed #D2D9E5;
   width: 100%;
-  margin-bottom: 16px;
   cursor: pointer;
 
   .no-img {