@fonixtree/magic-design 2.0.161 → 2.0.162

package/lib/common/ImagePicker/index.js

@@ -1,315 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-require("./index.less");
-
-var _antd = require("antd4");
-
-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'), 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
-          });
-        },
-        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/lib/common/ImagePicker/index.less

@@ -1,206 +0,0 @@
-.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;
-    }
-  }
-}