choerodon-ui/lib/image-crop/avatarUpload.js

An enterprise-class UI design language and React-based implementation

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _react = _interopRequireWildcard(require("react"));

var _axios = _interopRequireDefault(require("axios"));

var _isString = _interopRequireDefault(require("lodash/isString"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _button = _interopRequireDefault(require("../button"));

var _icon = _interopRequireDefault(require("../icon"));

var _modal = _interopRequireDefault(require("../modal"));

var _message = _interopRequireDefault(require("../message"));

var _upload = _interopRequireDefault(require("../upload"));

var _Crop = _interopRequireDefault(require("./Crop"));

var _configure = require("../configure");

var _LocaleReceiver = _interopRequireDefault(require("../locale-provider/LocaleReceiver"));

var _default = _interopRequireDefault(require("../locale-provider/default"));

function _createSuper(Derived) {
  function isNativeReflectConstruct() {
    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
    if (Reflect.construct.sham) return false;
    if (typeof Proxy === "function") return true;

    try {
      Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
      return true;
    } catch (e) {
      return false;
    }
  }

  return function () {
    var Super = (0, _getPrototypeOf2["default"])(Derived),
        result;

    if (isNativeReflectConstruct()) {
      var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor;
      result = Reflect.construct(Super, arguments, NewTarget);
    } else {
      result = Super.apply(this, arguments);
    }

    return (0, _possibleConstructorReturn2["default"])(this, result);
  };
}

var Dragger = _upload["default"].Dragger;
var round = Math.round;

function rotateFlag(rotate) {
  return rotate / 90 % 2 !== 0;
}

var Avatarlocale = _default["default"].imageCrop;

var AvatarUploader =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2["default"])(AvatarUploader, _Component);

  var _super = _createSuper(AvatarUploader);

  function AvatarUploader(props) {
    var _this;

    (0, _classCallCheck2["default"])(this, AvatarUploader);
    _this = _super.call(this, props);

    _this.handleOk = function () {
      var _this$state = _this.state,
          x = _this$state.x,
          y = _this$state.y,
          size = _this$state.size,
          rotate = _this$state.rotate,
          file = _this$state.file,
          _this$state$imageStyl = _this$state.imageStyle,
          width = _this$state$imageStyl.width,
          height = _this$state$imageStyl.height,
          naturalWidth = _this$state.img.naturalWidth;
      var _this$props = _this.props,
          uploadUrl = _this$props.uploadUrl,
          uploadFaild = _this$props.uploadFaild,
          uploadError = _this$props.uploadError,
          handleUpload = _this$props.handleUpload,
          axiosConfig = _this$props.axiosConfig;
      var flag = rotateFlag(rotate);
      var scale = naturalWidth / width;
      var startX = flag ? x - (width - height) / 2 : x;
      var startY = flag ? y + (width - height) / 2 : y;
      var QsData = {
        rotate: rotate,
        startX: round(startX * scale),
        startY: round(startY * scale),
        endX: round(size * scale),
        endY: round(size * scale)
      };
      var qs = JSON.stringify(QsData);
      var data = new FormData();
      data.append('file', file);

      _this.setState({
        submitting: true
      });

      if (uploadUrl) {
        var config;

        if (axiosConfig) {
          config = axiosConfig;
        }

        _axios["default"].post("".concat(uploadUrl, "?").concat(qs), data, config).then(function (res) {
          // @ts-ignore
          if (res.success) {
            _this.uploadOk(res);
          } else {
            _message["default"].error(Avatarlocale.avatarUploadError);

            _this.setState({
              submitting: false
            });

            if (uploadFaild) {
              uploadFaild();
            }
          }
        })["catch"](function (error) {
          _message["default"].error("".concat(Avatarlocale.avatarServerError).concat(error));

          _this.setState({
            submitting: false
          });

          if (uploadError) {
            uploadError(error);
          }
        });
      }

      if (handleUpload) {
        QsData.file = file;
        handleUpload(QsData);
      }
    };

    _this.handleCancel = function () {
      _this.close();
    };

    var defaultRectSize = props.defaultRectSize;
    _this.state = {
      submitting: false,
      img: null,
      file: '',
      imageStyle: {
        width: 0,
        height: 0
      },
      size: defaultRectSize,
      x: 0,
      y: 0,
      rotate: 0
    };
    return _this;
  }

  (0, _createClass2["default"])(AvatarUploader, [{
    key: "close",
    value: function close() {
      var onClose = this.props.onClose;
      this.setState({
        img: null
      });

      if (onClose) {
        onClose(false);
      }
    }
  }, {
    key: "uploadOk",
    value: function uploadOk(res) {
      var onUploadOk = this.props.onUploadOk;
      this.setState({
        img: null,
        submitting: false
      }, function () {
        if (onUploadOk) {
          onUploadOk(res);
        }
      });
    }
  }, {
    key: "initImageSize",
    value: function initImageSize(img) {
      var rotate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
      var _this$props2 = this.props,
          editorWidth = _this$props2.editorWidth,
          editorHeight = _this$props2.editorHeight,
          minRectSize = _this$props2.minRectSize,
          defaultRectSize = _this$props2.defaultRectSize;
      var naturalWidth = img.naturalWidth,
          naturalHeight = img.naturalHeight;
      var flag = rotateFlag(rotate);
      var width = flag ? naturalHeight : naturalWidth;
      var height = flag ? naturalWidth : naturalHeight;

      if (width < minRectSize || height < minRectSize) {
        if (width > height) {
          width = width / height * minRectSize;
          height = minRectSize;
        } else {
          height = height / width * minRectSize;
          width = minRectSize;
        }
      } else if (width > editorWidth || height > editorHeight) {
        if (width / editorWidth > height / editorHeight) {
          height = height / width * editorWidth;
          width = editorWidth;
        } else {
          width = width / height * editorHeight;
          height = editorHeight;
        }
      }

      if (flag) {
        var tmp = width;
        width = height;
        height = tmp;
      }

      var size = Math.min(defaultRectSize, width, height);
      this.setState({
        img: img,
        imageStyle: {
          width: width,
          height: height,
          top: (editorHeight - height) / 2,
          left: (editorWidth - width) / 2,
          transform: "rotate(".concat(rotate, "deg)")
        },
        size: size,
        x: (width - size) / 2,
        y: (height - size) / 2,
        rotate: rotate
      });
    }
  }, {
    key: "onComplete",
    value: function onComplete(imageState) {
      var cropComplete = this.props.cropComplete;
      this.setState(imageState);

      if (cropComplete) {
        cropComplete(imageState);
      }
    }
  }, {
    key: "loadImage",
    value: function loadImage(src) {
      var _this2 = this;

      if (typeof window !== 'undefined') {
        var img = new Image();
        img.src = src;

        img.onload = function () {
          _this2.initImageSize(img);
        };
      }
    }
  }, {
    key: "getPreviewProps",
    value: function getPreviewProps(previewSize) {
      var _this$state2 = this.state,
          size = _this$state2.size,
          x = _this$state2.x,
          y = _this$state2.y,
          src = _this$state2.img.src,
          rotate = _this$state2.rotate,
          _this$state2$imageSty = _this$state2.imageStyle,
          width = _this$state2$imageSty.width,
          height = _this$state2$imageSty.height;
      var previewScale = previewSize / size;
      var radius = rotate % 360 / 90;
      var px = -x;
      var py = -y;
      if (radius < 0) radius += 4;

      if (radius === 1) {
        py = x + (height - width) / 2 - height + size;
        px = (height - width) / 2 - y;
      } else if (radius === 2) {
        px = x - width + size;
        py = y - height + size;
      } else if (radius === 3) {
        px = y + (width - height) / 2 - width + size;
        py = (width - height) / 2 - x;
      }

      return {
        style: {
          width: previewSize,
          height: previewSize,
          backgroundImage: "url('".concat(src, "')"),
          backgroundSize: "".concat(width * previewScale, "px ").concat(height * previewScale, "px"),
          backgroundPosition: "".concat(px * previewScale, "px ").concat(py * previewScale, "px"),
          transform: "rotate(".concat(rotate, "deg)")
        }
      };
    }
  }, {
    key: "renderPreviewItem",
    value: function renderPreviewItem(previewSizeList) {
      var _this3 = this;

      var customizePrefixCls = this.props.prefixCls;
      var prefixCls = (0, _configure.getPrefixCls)('avatar-crop-edit', customizePrefixCls);
      var dataList = previewSizeList.map(function (itemSize) {
        return _react["default"].createElement("div", {
          key: itemSize,
          className: "".concat(prefixCls, "-preview-item")
        }, _react["default"].createElement("i", (0, _extends2["default"])({}, _this3.getPreviewProps(itemSize))), _react["default"].createElement("p", null, "".concat(itemSize, "\uFF0A").concat(itemSize)));
      });
      return dataList;
    }
  }, {
    key: "renderEditor",
    value: function renderEditor(props) {
      var _this4 = this;

      var _this$state3 = this.state,
          img = _this$state3.img,
          file = _this$state3.file,
          rotate = _this$state3.rotate;
      var _this$props3 = this.props,
          customizePrefixCls = _this$props3.prefixCls,
          previewList = _this$props3.previewList,
          editorWidth = _this$props3.editorWidth,
          editorHeight = _this$props3.editorHeight,
          defaultRectSize = _this$props3.defaultRectSize,
          minRectSize = _this$props3.minRectSize,
          subTitle = _this$props3.subTitle,
          previewTitle = _this$props3.previewTitle,
          reloadTitle = _this$props3.reloadTitle;
      var src = img.src;
      var prefixCls = (0, _configure.getPrefixCls)('avatar-crop-edit', customizePrefixCls);

      var previewTitleFlag = (0, _isString["default"])(previewTitle) || _react["default"].isValidElement(previewTitle);

      var renderPreviewTitle = function renderPreviewTitle() {
        if (!previewTitleFlag || !previewTitle) return null;

        if ((0, _isString["default"])(previewTitle)) {
          return _react["default"].createElement("h5", {
            className: "".concat(prefixCls, "-preview-title")
          }, _react["default"].createElement("span", null, previewTitle));
        }

        return previewTitle;
      };

      return _react["default"].createElement("div", null, _react["default"].createElement("h3", {
        className: "".concat(prefixCls, "-text")
      }, _react["default"].createElement("span", null, subTitle || Avatarlocale.avatarUpload), _react["default"].createElement(_icon["default"], {
        type: "keyboard_arrow_right"
      }), _react["default"].createElement("span", null, file.name)), _react["default"].createElement("h4", {
        className: "".concat(prefixCls, "-hint")
      }, _react["default"].createElement("span", null, Avatarlocale.avatarReminder)), _react["default"].createElement("div", {
        className: "".concat(prefixCls, "-wraper")
      }, _react["default"].createElement(_Crop["default"], {
        defaultRectSize: defaultRectSize,
        minRectSize: minRectSize,
        editorHeight: editorHeight,
        editorWidth: editorWidth,
        rotation: rotate,
        src: src,
        onComplete: function onComplete(stateImage) {
          return _this4.onComplete(stateImage);
        }
      }), _react["default"].createElement("div", {
        className: "".concat(prefixCls, "-toolbar")
      }, _react["default"].createElement(_button["default"], {
        icon: "replay_90",
        shape: "circle",
        onClick: function onClick() {
          return _this4.setState({
            rotate: rotate - 90
          });
        }
      }), _react["default"].createElement(_button["default"], {
        icon: "play_90",
        shape: "circle",
        onClick: function onClick() {
          return _this4.setState({
            rotate: rotate + 90
          });
        }
      })), _react["default"].createElement("div", {
        className: "".concat(prefixCls, "-preview")
      }, renderPreviewTitle(), this.renderPreviewItem(previewList))), _react["default"].createElement("div", {
        className: "".concat(prefixCls, "-button")
      }, _react["default"].createElement(_upload["default"], (0, _extends2["default"])({}, props), _react["default"].createElement(_button["default"], {
        icon: "file_upload",
        type: "primary"
      }, _react["default"].createElement("span", null, reloadTitle || Avatarlocale.reUpload)))));
    }
  }, {
    key: "getUploadProps",
    value: function getUploadProps() {
      var _this5 = this;

      var _this$props4 = this.props,
          _this$props4$limit = _this$props4.limit,
          limitSize = _this$props4$limit.size,
          type = _this$props4$limit.type,
          uploadProps = _this$props4.uploadProps;
      var typeLimit = type.split(',').map(function (item) {
        return "image/".concat(item);
      }).join(',');
      return (0, _objectSpread2["default"])({
        multiple: false,
        name: 'file',
        accept: typeLimit,
        headers: {
          Authorization: "bearer"
        },
        showUploadList: false
      }, uploadProps, {
        beforeUpload: function beforeUpload(file) {
          var size = file.size;

          if (size > limitSize * 1024) {
            _message["default"].warning(Avatarlocale.imageTooLarge);

            return false;
          }

          _this5.setState({
            file: file
          });

          var windowURL = window.URL || window.webkitURL;

          if (windowURL && windowURL.createObjectURL) {
            _this5.loadImage(windowURL.createObjectURL(file));

            return false;
          }

          return false;
        },
        onChange: function onChange(_ref) {
          var file = _ref.file;
          var status = file.status,
              response = file.response;

          if (status === 'done') {
            _this5.loadImage(response);
          } else if (status === 'error') {
            _message["default"].error(Avatarlocale.imageUploadError);
          }
        }
      });
    }
  }, {
    key: "renderContainer",
    value: function renderContainer() {
      var _this$props5 = this.props,
          customizePrefixCls = _this$props5.prefixCls,
          _this$props5$limit = _this$props5.limit,
          limitSize = _this$props5$limit.size,
          type = _this$props5$limit.type;
      var img = this.state.img;
      var prefixCls = (0, _configure.getPrefixCls)('avatar-crop', customizePrefixCls);
      var props = this.getUploadProps();
      return img ? this.renderEditor(props) : _react["default"].createElement(Dragger, (0, _extends2["default"])({
        className: "".concat(prefixCls, "-dragger")
      }, props), _react["default"].createElement(_icon["default"], {
        type: "inbox"
      }), _react["default"].createElement("h3", {
        className: "".concat(prefixCls, "-dragger-text")
      }, _react["default"].createElement("span", null, Avatarlocale.imageDragHere)), _react["default"].createElement("h4", {
        className: "".concat(prefixCls, "-dragger-hint")
      }, _react["default"].createElement("span", null, "".concat(Avatarlocale.pleaseUpload).concat(limitSize / 1024, "M,").concat(Avatarlocale.uploadType).concat(type).concat(Avatarlocale.picture))));
    }
  }, {
    key: "render",
    value: function render() {
      var _this6 = this;

      var _this$props6 = this.props,
          visible = _this$props6.visible,
          modalProps = _this$props6.modalProps,
          title = _this$props6.title;
      var _this$state4 = this.state,
          img = _this$state4.img,
          submitting = _this$state4.submitting;
      var modalFooter = [_react["default"].createElement(_button["default"], {
        disabled: submitting,
        key: "cancel",
        onClick: this.handleCancel
      }, _react["default"].createElement("span", null, Avatarlocale.cancelButton)), _react["default"].createElement(_button["default"], {
        key: "save",
        type: "primary",
        disabled: !img,
        loading: submitting,
        onClick: this.handleOk
      }, _react["default"].createElement("span", null, Avatarlocale.saveButton))];
      return _react["default"].createElement(_LocaleReceiver["default"], {
        componentName: "imageCrop",
        defaultLocale: _default["default"].imageCrop
      }, function (locale) {
        Avatarlocale = locale || _default["default"].imageCrop;
        return _react["default"].createElement(_modal["default"], (0, _extends2["default"])({
          title: title || _react["default"].createElement("span", null, Avatarlocale.changeAvatar),
          className: "avatar-modal",
          visible: visible,
          width: 980,
          closable: false,
          maskClosable: false,
          footer: modalFooter
        }, modalProps), _this6.renderContainer());
      });
    }
  }]);
  return AvatarUploader;
}(_react.Component);

exports["default"] = AvatarUploader;
AvatarUploader.propTypes = {
  visible: _propTypes["default"].bool.isRequired,
  onClose: _propTypes["default"].func,
  onUploadOk: _propTypes["default"].func,
  limit: _propTypes["default"].object,
  uploadUrl: _propTypes["default"].string,
  previewList: _propTypes["default"].array,
  editorWidth: _propTypes["default"].number,
  editorHeight: _propTypes["default"].number,
  minRectSize: _propTypes["default"].number,
  defaultRectSize: _propTypes["default"].number,
  prefixCls: _propTypes["default"].string,
  handleUpload: _propTypes["default"].func,
  axiosConfig: _propTypes["default"].object,
  cropComplete: _propTypes["default"].func,
  title: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
  subTitle: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
  previewTitle: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
  reloadTitle: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
  uploadProps: _propTypes["default"].object,
  modalProps: _propTypes["default"].object,
  reloadText: _propTypes["default"].func,
  uploadFaild: _propTypes["default"].func,
  uploadError: _propTypes["default"].func
};
AvatarUploader.defaultProps = {
  limit: {
    type: 'jpeg,png,jpg',
    size: 1024
  },
  previewList: [80, 30, 18],
  editorWidth: 540,
  editorHeight: 300,
  minRectSize: 80,
  defaultRectSize: 200
};
//# sourceMappingURL=avatarUpload.js.map