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

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

import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _extends from "@babel/runtime/helpers/extends";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";

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 = _getPrototypeOf(Derived),
        result;

    if (isNativeReflectConstruct()) {
      var NewTarget = _getPrototypeOf(this).constructor;

      result = Reflect.construct(Super, arguments, NewTarget);
    } else {
      result = Super.apply(this, arguments);
    }

    return _possibleConstructorReturn(this, result);
  };
}

/**
 * 裁剪头像上传
 */
import React, { Component } from 'react';
import axios from 'axios';
import isString from 'lodash/isString';
import PropTypes from 'prop-types';
import Button from '../button';
import Icon from '../icon';
import Modal from '../modal';
import message from '../message';
import Upload from '../upload';
import Crop from './Crop';
import { getPrefixCls } from '../configure';
import LocaleReceiver from '../locale-provider/LocaleReceiver';
import defaultLocale from '../locale-provider/default';
var Dragger = Upload.Dragger;
var round = Math.round;

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

var Avatarlocale = defaultLocale.imageCrop;

var AvatarUploader =
/*#__PURE__*/
function (_Component) {
  _inherits(AvatarUploader, _Component);

  var _super = _createSuper(AvatarUploader);

  function AvatarUploader(props) {
    var _this;

    _classCallCheck(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.post("".concat(uploadUrl, "?").concat(qs), data, config).then(function (res) {
          // @ts-ignore
          if (res.success) {
            _this.uploadOk(res);
          } else {
            message.error(Avatarlocale.avatarUploadError);

            _this.setState({
              submitting: false
            });

            if (uploadFaild) {
              uploadFaild();
            }
          }
        })["catch"](function (error) {
          message.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;
  }

  _createClass(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 = getPrefixCls('avatar-crop-edit', customizePrefixCls);
      var dataList = previewSizeList.map(function (itemSize) {
        return React.createElement("div", {
          key: itemSize,
          className: "".concat(prefixCls, "-preview-item")
        }, React.createElement("i", _extends({}, _this3.getPreviewProps(itemSize))), React.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 = getPrefixCls('avatar-crop-edit', customizePrefixCls);
      var previewTitleFlag = isString(previewTitle) || React.isValidElement(previewTitle);

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

        if (isString(previewTitle)) {
          return React.createElement("h5", {
            className: "".concat(prefixCls, "-preview-title")
          }, React.createElement("span", null, previewTitle));
        }

        return previewTitle;
      };

      return React.createElement("div", null, React.createElement("h3", {
        className: "".concat(prefixCls, "-text")
      }, React.createElement("span", null, subTitle || Avatarlocale.avatarUpload), React.createElement(Icon, {
        type: "keyboard_arrow_right"
      }), React.createElement("span", null, file.name)), React.createElement("h4", {
        className: "".concat(prefixCls, "-hint")
      }, React.createElement("span", null, Avatarlocale.avatarReminder)), React.createElement("div", {
        className: "".concat(prefixCls, "-wraper")
      }, React.createElement(Crop, {
        defaultRectSize: defaultRectSize,
        minRectSize: minRectSize,
        editorHeight: editorHeight,
        editorWidth: editorWidth,
        rotation: rotate,
        src: src,
        onComplete: function onComplete(stateImage) {
          return _this4.onComplete(stateImage);
        }
      }), React.createElement("div", {
        className: "".concat(prefixCls, "-toolbar")
      }, React.createElement(Button, {
        icon: "replay_90",
        shape: "circle",
        onClick: function onClick() {
          return _this4.setState({
            rotate: rotate - 90
          });
        }
      }), React.createElement(Button, {
        icon: "play_90",
        shape: "circle",
        onClick: function onClick() {
          return _this4.setState({
            rotate: rotate + 90
          });
        }
      })), React.createElement("div", {
        className: "".concat(prefixCls, "-preview")
      }, renderPreviewTitle(), this.renderPreviewItem(previewList))), React.createElement("div", {
        className: "".concat(prefixCls, "-button")
      }, React.createElement(Upload, _extends({}, props), React.createElement(Button, {
        icon: "file_upload",
        type: "primary"
      }, React.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 _objectSpread({
        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.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.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 = getPrefixCls('avatar-crop', customizePrefixCls);
      var props = this.getUploadProps();
      return img ? this.renderEditor(props) : React.createElement(Dragger, _extends({
        className: "".concat(prefixCls, "-dragger")
      }, props), React.createElement(Icon, {
        type: "inbox"
      }), React.createElement("h3", {
        className: "".concat(prefixCls, "-dragger-text")
      }, React.createElement("span", null, Avatarlocale.imageDragHere)), React.createElement("h4", {
        className: "".concat(prefixCls, "-dragger-hint")
      }, React.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.createElement(Button, {
        disabled: submitting,
        key: "cancel",
        onClick: this.handleCancel
      }, React.createElement("span", null, Avatarlocale.cancelButton)), React.createElement(Button, {
        key: "save",
        type: "primary",
        disabled: !img,
        loading: submitting,
        onClick: this.handleOk
      }, React.createElement("span", null, Avatarlocale.saveButton))];
      return React.createElement(LocaleReceiver, {
        componentName: "imageCrop",
        defaultLocale: defaultLocale.imageCrop
      }, function (locale) {
        Avatarlocale = locale || defaultLocale.imageCrop;
        return React.createElement(Modal, _extends({
          title: title || React.createElement("span", null, Avatarlocale.changeAvatar),
          className: "avatar-modal",
          visible: visible,
          width: 980,
          closable: false,
          maskClosable: false,
          footer: modalFooter
        }, modalProps), _this6.renderContainer());
      });
    }
  }]);

  return AvatarUploader;
}(Component);

export { AvatarUploader as default };
AvatarUploader.propTypes = {
  visible: PropTypes.bool.isRequired,
  onClose: PropTypes.func,
  onUploadOk: PropTypes.func,
  limit: PropTypes.object,
  uploadUrl: PropTypes.string,
  previewList: PropTypes.array,
  editorWidth: PropTypes.number,
  editorHeight: PropTypes.number,
  minRectSize: PropTypes.number,
  defaultRectSize: PropTypes.number,
  prefixCls: PropTypes.string,
  handleUpload: PropTypes.func,
  axiosConfig: PropTypes.object,
  cropComplete: PropTypes.func,
  title: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
  subTitle: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
  previewTitle: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
  reloadTitle: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
  uploadProps: PropTypes.object,
  modalProps: PropTypes.object,
  reloadText: PropTypes.func,
  uploadFaild: PropTypes.func,
  uploadError: PropTypes.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