@fonixtree/magic-design 0.1.58 → 1.0.3

package/lib/assets/less/modal.less

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

package/lib/common/ImageModal/index.js

@@ -23,8 +23,6 @@ var _CommonSelPicCard = _interopRequireDefault(require("./CommonSelPicCard"));
 
 var _const2 = require("./const");
 
-var _utils = require("./utils");
-
 var _Iconfont = _interopRequireDefault(require("../Iconfont"));
 
 var _commonUtil = require("../../utils/commonUtil");
@@ -489,7 +487,7 @@ function ImageModal(_a) {
 
   var handleUpload = function handleUpload(file) {
     return __awaiter(_this, void 0, void 0, function () {
-      var config, result, form, result;
+      var form, result;
       return __generator(this, function (_a) {
         switch (_a.label) {
           case 0:
@@ -507,37 +505,6 @@ function ImageModal(_a) {
               }
             }
 
-            console.log('file: ', file);
-            return [4
-            /*yield*/
-            , (0, _utils.getUploadParamCodeConfig)()];
-
-          case 1:
-            config = _a.sent();
-            if (!(file.size > config.maxSize)) return [3
-            /*break*/
-            , 3];
-            setSpinning(true);
-            setProcess(0);
-            return [4
-            /*yield*/
-            , (0, _utils.chunksUpload)({
-              file: file,
-              contentCatgId: selectedKeys[0]
-            }, function (process) {
-              // console.log('process', process);
-              setProcess(process);
-            })];
-
-          case 2:
-            result = _a.sent();
-            setProcess(null);
-            setSpinning(false);
-            return [2
-            /*return*/
-            , result];
-
-          case 3:
             form = new FormData();
             form.append('file', file); // 文件对象
 
@@ -551,7 +518,7 @@ function ImageModal(_a) {
             /*yield*/
             , onUpload(form)];
 
-          case 4:
+          case 1:
             result = _a.sent();
             return [2
             /*return*/

package/lib/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,152 @@ 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.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();
-      }
-    }, /*#__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"
+      className: "image-picker-wrap"
+    }, /*#__PURE__*/_react["default"].createElement(_.Field, {
+      title: (0, _locale.i18n)('ADD_IMAGE')
     }, /*#__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() {
+      className: "select-wrap"
+    }, /*#__PURE__*/_react["default"].createElement(_antd.Select, {
+      className: "image-picker-select",
+      onChange: function onChange(value) {
         _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);
+    })))), imageWay === 'upload' ? this.getImagePick() : this.getImageUrl());
   };
 
   ImagePicker.defaultProps = {

package/lib/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 {

package/lib/common/LinkModal/SelectVideoModal/index.js

@@ -69,8 +69,6 @@ function (_super) {
     _this.onFieldChange = function (data) {
       _extends(_this.videoSetting, data);
 
-      console.log(data);
-
       _this.setState({});
 
       _this.props.setUrl({

package/lib/composite-comp/bol/components/Banner/mobile/index.less

@@ -1,54 +1,80 @@
 .m-banner-mobile {
   position: relative;
-}
-.m-banner-mobile .cylon-carousel .slick-track {
-  display: flex;
-  align-items: center;
-}
-.m-banner-mobile .carouselItem {
-  position: relative;
-  display: flex;
-}
-.m-banner-mobile .carouselItem .carouseContent {
-  padding: 0 0.56rem;
-  position: absolute;
-  z-index: 2;
-  display: flex;
-  flex-direction: column;
-  margin-bottom: auto;
-}
-.m-banner-mobile .carouselItem .title {
-  margin-bottom: 0.16rem;
-}
-.m-banner-mobile .carouselItem .sub-title {
-  margin-bottom: 0.4rem;
-}
-.m-banner-mobile .carouselItem .btn-wrap {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-}
-.m-banner-mobile .carouselItem .btn-wrap .btn {
-  margin-right: 0.24rem;
-}
-.m-banner-mobile .swiper-ban {
-  position: absolute;
-  width: 100%;
-  bottom: 0.2rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.m-banner-mobile .swiper-ban .ban {
-  font-size: 0.32rem;
-  width: 1.5em;
-  height: 0.3em;
-  background: #FFF;
-  cursor: inherit;
-  margin-right: 0.3em;
-  transition: all 0.5s;
-}
-.m-banner-mobile .swiper-ban .ban.active {
-  width: 1.5em;
-  opacity: 1;
-}
+  // .turnPage {
+  //   position: absolute;
+  //   top: 50%;
+  //   transform: translateY(-50%);
+  //   z-index: 3;
+  //   cursor: pointer;
+  // }
+  // .leftBtn {
+  //   left: 20px;
+  // }
+  // .rightBtn {
+  //   right: 20px;
+  // }
+
+  .cylon-carousel {
+    .slick-track {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  .carouselItem {
+    // height: 386px;
+    position: relative;
+    display: flex;
+
+    .carouseContent {
+      padding: 0 28px;
+      position: absolute;
+      z-index: 2;
+      display: flex;
+      flex-direction: column;
+      margin-bottom: auto;
+    }
+
+    .title {
+      margin-bottom: 8px;
+    }
+
+    .sub-title {
+      margin-bottom: 20px;
+    }
+
+    .btn-wrap {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+
+      .btn {
+        margin-right: 12px;
+      }
+    }
+  }
+
+  .swiper-ban {
+    position: absolute;
+    width: 100%;
+    bottom: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .ban {
+      font-size: 16px;
+      width: 1.5em;
+      height: 0.3em;
+      background: #FFF;
+      cursor: inherit;
+      margin-right: 0.3em;
+      transition: all .5s;
+
+      &.active {
+        width: 1.5em;
+        opacity: 1;
+      }
+    }
+  }
+}

package/lib/composite-comp/bol/components/Banner/pc/index.js

@@ -176,13 +176,14 @@ function (_super) {
         textAlign: item.customize.align
       };
 
-      if (item.customize.vertical === 'top') {
-        styleObj.top = 30;
-      } else if (item.customize.vertical === 'bottom') {
+      if (item.customize.vertical === 'bottom') {
         styleObj.bottom = 30;
       } else if (item.customize.vertical === 'center') {
         styleObj.top = '50%';
         styleObj.transform = 'translateY(-50%)';
+      } else {
+        // item.customize.vertical === 'top'
+        styleObj.top = 30;
       }
 
       return styleObj;