choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
665 lines (586 loc) • 21.1 kB
JavaScript
"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