"use strict";

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

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

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 _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));

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

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

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

var _reactEasyCrop = _interopRequireDefault(require("react-easy-crop"));

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 _LocaleReceiver = _interopRequireDefault(require("../locale-provider/LocaleReceiver"));

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

var _ConfigContext = _interopRequireDefault(require("../config-provider/ConfigContext"));

/**
 * 裁剪头像上传
 */
var Dragger = _upload["default"].Dragger;
var round = Math.round;
var ButtonGroup = _button["default"].Group;
var maxZoomVal = 3;
var zoomStep = 0.5;

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 = (0, _createSuper2["default"])(AvatarUploader);

  function AvatarUploader(props, context) {
    var _this;

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

    _this.zoomImage = function (type) {
      var zoom = _this.state.zoom;
      var _this$state = _this.state,
          _this$state$imageStyl = _this$state.imageStyle,
          width = _this$state$imageStyl.width,
          height = _this$state$imageStyl.height,
          cropSize = _this$state.cropSize;
      var minZoomVal = cropSize / Math.min(width, height);

      switch (type) {
        case 'add':
          {
            zoom = zoom + zoomStep >= maxZoomVal ? maxZoomVal : zoom + zoomStep;

            _this.setState({
              zoom: zoom
            });

            break;
          }

        case 'sub':
          {
            zoom = zoom - zoomStep <= minZoomVal ? minZoomVal : zoom - zoomStep;

            _this.setState({
              zoom: zoom
            });

            break;
          }

        case 'init':
          {
            var x = (width - cropSize) / 2 / width;
            var y = (height - cropSize) / 2 / width;

            _this.setState({
              zoom: 1,
              rotate: 0,
              crop: {
                x: x,
                y: y
              }
            });
          }
          break;

        default:
          break;
      }
    };

    _this.handleOk = function () {
      var _this$state2 = _this.state,
          x = _this$state2.x,
          y = _this$state2.y,
          size = _this$state2.size,
          rotate = _this$state2.rotate,
          file = _this$state2.file,
          _this$state2$imageSty = _this$state2.imageStyle,
          width = _this$state2$imageSty.width,
          height = _this$state2$imageSty.height,
          naturalWidth = _this$state2.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) {
          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 rectSize = props.rectSize;
    _this.state = {
      submitting: false,
      img: null,
      file: '',
      imageStyle: {
        width: 0,
        height: 0
      },
      crop: {
        x: 0,
        y: 0
      },
      rotate: 0,
      zoom: 1,
      cropSize: rectSize
    };
    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,
          rectSize = _this$props2.rectSize;
      var naturalWidth = img.naturalWidth,
          naturalHeight = img.naturalHeight;
      var flag = rotateFlag(rotate);
      var width = flag ? naturalHeight : naturalWidth;
      var height = flag ? naturalWidth : naturalHeight;

      if (width < rectSize || height < rectSize) {
        if (width > height) {
          width = width / height * rectSize;
          height = rectSize;
        } else {
          height = height / width * rectSize;
          width = rectSize;
        }
      } 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(rectSize, 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,
        cropSize: size,
        x: (width - size) / 2,
        y: (height - size) / 2,
        rotate: rotate
      });
    }
  }, {
    key: "onComplete",
    value: function onComplete(imgState) {
      var _this$state3 = this.state,
          zoom = _this$state3.zoom,
          _this$state3$imageSty = _this$state3.imageStyle,
          width = _this$state3$imageSty.width,
          height = _this$state3$imageSty.height,
          cropSize = _this$state3.cropSize;
      var x = imgState.x,
          y = imgState.y;
      x = Math.ceil(x * width / 100);
      y = Math.ceil(y * height / 100);
      var imageState = {
        x: x,
        y: y,
        size: cropSize / zoom
      };
      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$state4 = this.state,
          size = _this$state4.size,
          x = _this$state4.x,
          y = _this$state4.y,
          src = _this$state4.img.src,
          rotate = _this$state4.rotate,
          _this$state4$imageSty = _this$state4.imageStyle,
          width = _this$state4$imageSty.width,
          height = _this$state4$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 getPrefixCls = this.context.getPrefixCls;
      var prefixCls = getPrefixCls('avatar-crop-edit', customizePrefixCls);
      return previewSizeList.map(function (itemSize) {
        return /*#__PURE__*/_react["default"].createElement("div", {
          key: itemSize,
          className: "".concat(prefixCls, "-preview-item")
        }, /*#__PURE__*/_react["default"].createElement("i", (0, _extends2["default"])({}, _this3.getPreviewProps(itemSize))), /*#__PURE__*/_react["default"].createElement("p", null, "".concat(itemSize, "\uFF0A").concat(itemSize)));
      });
    }
  }, {
    key: "renderEditor",
    value: function renderEditor(props) {
      var _this4 = this;

      var _this$state5 = this.state,
          img = _this$state5.img,
          rotate = _this$state5.rotate,
          zoom = _this$state5.zoom,
          crop = _this$state5.crop,
          _this$state5$imageSty = _this$state5.imageStyle,
          width = _this$state5$imageSty.width,
          height = _this$state5$imageSty.height,
          cropSize = _this$state5.cropSize;
      var _this$props3 = this.props,
          customizePrefixCls = _this$props3.prefixCls,
          previewList = _this$props3.previewList,
          editorWidth = _this$props3.editorWidth,
          editorHeight = _this$props3.editorHeight,
          previewTitle = _this$props3.previewTitle,
          reloadTitle = _this$props3.reloadTitle;
      var getPrefixCls = this.context.getPrefixCls;
      var src = img.src;
      var style = {
        width: editorWidth,
        height: editorHeight,
        position: 'relative'
      };
      var minZoomVal = cropSize / Math.min(width, height);
      var isMinZoom = zoom === minZoomVal;
      var isMaxZoom = zoom === maxZoomVal;
      var prefixCls = getPrefixCls('avatar-crop-edit', customizePrefixCls);

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

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

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

        return previewTitle;
      };

      return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(prefixCls, "-wraper")
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(prefixCls, "-edit"),
        style: style
      }, /*#__PURE__*/_react["default"].createElement(_reactEasyCrop["default"], {
        image: src,
        crop: crop,
        showGrid: false,
        cropSize: {
          width: cropSize,
          height: cropSize
        },
        zoom: zoom,
        minZoom: minZoomVal,
        rotation: rotate,
        aspect: 1 / 1,
        onCropChange: function onCropChange(crop) {
          return _this4.setState({
            crop: crop
          });
        },
        onCropComplete: function onCropComplete(_ref) {
          var x = _ref.x,
              y = _ref.y;
          return _this4.onComplete({
            x: x,
            y: y,
            cropSize: cropSize
          });
        },
        onZoomChange: function onZoomChange(zoom) {
          _this4.setState({
            zoom: zoom
          });
        }
      })), /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(prefixCls, "-preview")
      }, renderPreviewTitle(), this.renderPreviewItem(previewList))), /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(prefixCls, "-button"),
        style: {
          width: editorWidth
        }
      }, /*#__PURE__*/_react["default"].createElement(ButtonGroup, null, /*#__PURE__*/_react["default"].createElement(_button["default"], {
        funcType: "raised",
        icon: "zoom_in",
        disabled: isMaxZoom,
        onClick: function onClick() {
          return _this4.zoomImage('add');
        }
      }), /*#__PURE__*/_react["default"].createElement(_button["default"], {
        funcType: "raised",
        icon: "zoom_out",
        disabled: isMinZoom,
        onClick: function onClick() {
          return _this4.zoomImage('sub');
        }
      })), /*#__PURE__*/_react["default"].createElement(_button["default"], {
        funcType: "raised",
        icon: "play_90",
        onClick: function onClick() {
          return _this4.setState({
            rotate: rotate + 90 >= 360 ? 0 : rotate + 90
          });
        }
      }), /*#__PURE__*/_react["default"].createElement(_button["default"], {
        funcType: "raised",
        onClick: function onClick() {
          return _this4.zoomImage('init');
        }
      }, "1:1"), /*#__PURE__*/_react["default"].createElement(_upload["default"], (0, _extends2["default"])({}, props), /*#__PURE__*/_react["default"].createElement(_button["default"], {
        funcType: "raised",
        icon: "file_upload"
      }, /*#__PURE__*/_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"])((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(_ref2) {
          var file = _ref2.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 getPrefixCls = this.context.getPrefixCls;
      var prefixCls = getPrefixCls('avatar-crop', customizePrefixCls);
      var props = this.getUploadProps();
      return img ? this.renderEditor(props) : /*#__PURE__*/_react["default"].createElement(Dragger, (0, _extends2["default"])({
        className: "".concat(prefixCls, "-dragger")
      }, props), /*#__PURE__*/_react["default"].createElement(_icon["default"], {
        type: "inbox"
      }), /*#__PURE__*/_react["default"].createElement("h3", {
        className: "".concat(prefixCls, "-dragger-text")
      }, /*#__PURE__*/_react["default"].createElement("span", null, Avatarlocale.imageDragHere)), /*#__PURE__*/_react["default"].createElement("h4", {
        className: "".concat(prefixCls, "-dragger-hint")
      }, /*#__PURE__*/_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$state6 = this.state,
          img = _this$state6.img,
          submitting = _this$state6.submitting;
      var cancelButtonProps = {
        disabled: submitting,
        funcType: 'raised'
      };
      var okButtonProps = {
        funcType: 'raised',
        type: 'primary',
        disabled: !img,
        loading: submitting
      };
      return /*#__PURE__*/_react["default"].createElement(_LocaleReceiver["default"], {
        componentName: "imageCrop",
        defaultLocale: _default["default"].imageCrop
      }, function (locale) {
        Avatarlocale = locale || _default["default"].imageCrop;
        return /*#__PURE__*/_react["default"].createElement(_modal["default"], (0, _extends2["default"])({
          title: title || /*#__PURE__*/_react["default"].createElement("span", null, Avatarlocale.changeAvatar),
          className: "avatar-modal",
          visible: visible,
          width: 600,
          closable: true,
          maskClosable: false,
          onOk: _this6.handleOk,
          onCancel: _this6.handleCancel,
          okButtonProps: okButtonProps,
          cancelButtonProps: cancelButtonProps
        }, modalProps), _this6.renderContainer());
      });
    }
  }], [{
    key: "contextType",
    get: function get() {
      return _ConfigContext["default"];
    }
  }]);
  return AvatarUploader;
}(_react.Component);

exports["default"] = AvatarUploader;
AvatarUploader.defaultProps = {
  limit: {
    type: 'jpeg,png,jpg',
    size: 1024
  },
  previewList: [80, 48, 34],
  editorWidth: 380,
  editorHeight: 380,
  rectSize: 280
};
//# sourceMappingURL=avatarUpload.js.map
