@fonixtree/magic-design 2.0.60 → 2.0.61

package/es/common/ImagePicker/index.js

@@ -0,0 +1,317 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+require("./index.less");
+
+var _antd = require("antd");
+
+var _locale = require("../../locale");
+
+var _ImageModal = _interopRequireDefault(require("../ImageModal"));
+
+var _ = require("..");
+
+var _AiImageGenerator = _interopRequireDefault(require("../../core/Designer/AiImageGenerator"));
+
+var _Iconfont = _interopRequireDefault(require("../Iconfont"));
+
+var _coreUtil = require("../../utils/coreUtil");
+
+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 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) {
+  __extends(ImagePicker, _super);
+
+  function ImagePicker() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.state = {
+      visible: false,
+      inputVal: '',
+      aiImageVisible: 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) {
+        _this.props.onChange(data[0]);
+      }
+    };
+
+    _this.onAiImageClick = function () {
+      _this.setState({
+        aiImageVisible: true
+      });
+    };
+
+    _this.getImagePick = function () {
+      var visible = _this.state.visible;
+      var _a = _this.props,
+          value = _a.value,
+          recommendImgSize = _a.recommendImgSize;
+      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({
+            url: ''
+          });
+        }
+      }, /*#__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_'), recommendImgSize && recommendImgSize.width && /*#__PURE__*/_react["default"].createElement("span", null, (0, _locale.i18n)('RECOMMENDED_SIZE'), ": ", recommendImgSize.width, "*", recommendImgSize.height)), /*#__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.onAiImageConfirm = function (data) {
+      _this.setState({
+        aiImageVisible: false
+      });
+
+      _this.props.onChange({
+        contentTitle: data.fileName,
+        contentType: 'File',
+        imgUrl: data.oriUrl,
+        url: data.oriUrl
+      });
+    };
+
+    _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"
+      }))));
+    };
+
+    _this.changePickerWay = function (way) {
+      var tempObj = _this.props.imageSelectedWay;
+
+      if ((0, _coreUtil.isPc)()) {
+        tempObj.pc = way;
+        if (!tempObj.mobile) tempObj.mobile = way;
+      } else {
+        tempObj.mobile = way;
+        if (!tempObj.pc) tempObj.pc = way;
+      }
+
+      var onChange = _this.props.onChange;
+      onChange(null, tempObj);
+    };
+
+    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 imageSelectedWay = this.props.imageSelectedWay;
+    var way = (0, _coreUtil.isPc)() ? imageSelectedWay.pc : imageSelectedWay.mobile;
+    var aiImageVisible = this.state.aiImageVisible;
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "image-picker-wrap"
+    }, /*#__PURE__*/_react["default"].createElement(_.Field, {
+      title: (0, _locale.i18n)('ADD_IMAGE')
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "select-wrap"
+    }, /*#__PURE__*/_react["default"].createElement(_antd.Select, {
+      className: "image-picker-select",
+      onChange: function onChange(value) {
+        _this.changePickerWay(value);
+      },
+      size: "large",
+      value: way || 'upload'
+    }, selectList.map(function (v) {
+      return /*#__PURE__*/_react["default"].createElement(Option, {
+        key: v.key,
+        value: v.key
+      }, v.value);
+    })), window.magicDesign.needAi && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "ai-btn",
+      onClick: this.onAiImageClick
+    }, /*#__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'))))), way === 'url' ? this.getImageUrl() : this.getImagePick(), /*#__PURE__*/_react["default"].createElement(_AiImageGenerator["default"], {
+      onClose: function onClose() {
+        return _this.setState({
+          aiImageVisible: false
+        });
+      },
+      onConfirm: this.onAiImageConfirm,
+      single: true,
+      visible: aiImageVisible
+    }));
+  };
+
+  ImagePicker.defaultProps = {
+    value: '',
+    onChange: function onChange() {},
+    imageSelectedWay: {
+      pc: '',
+      mobile: ''
+    }
+  };
+  return ImagePicker;
+}(_react["default"].Component);
+
+var _default = ImagePicker;
+exports["default"] = _default;

package/es/common/ImagePicker/index.less

@@ -0,0 +1,206 @@
+.image-picker-wrap {
+  border-bottom: 1px dashed #D2D9E5;
+  margin-bottom: 16px;
+
+  .select-wrap {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .ai-btn {
+      cursor: pointer;
+      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;
+  width: 100%;
+  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;
+    }
+  }
+}