acud
Version:
acg react 组件库
350 lines (348 loc) • 16 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof3 = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _LocaleReceiver = _interopRequireDefault(require("../locale-provider/LocaleReceiver"));
var _modal = _interopRequireDefault(require("../modal"));
var _upload = _interopRequireDefault(require("../upload"));
var _EasyCrop = _interopRequireDefault(require("./EasyCrop"));
var _configProvider = require("../config-provider");
var _constants = require("./constants");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var __awaiter = void 0 && (void 0).__awaiter || function (thisArg, _arguments, P, generator) {
function adopt(value) {
return value instanceof P ? value : new P(function (resolve) {
resolve(value);
});
}
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) {
try {
step(generator.next(value));
} catch (e) {
reject(e);
}
}
function rejected(value) {
try {
step(generator["throw"](value));
} catch (e) {
reject(e);
}
}
function step(result) {
result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
}
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __rest = void 0 && (void 0).__rest || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
}
return t;
};
/**
* @file img crop
* @author wangpantuo
*/
var ImgCrop = /*#__PURE__*/(0, _react.forwardRef)(function (props, cropperRef) {
var _props$aspect = props.aspect,
aspect = _props$aspect === void 0 ? 1 : _props$aspect,
_props$shape = props.shape,
shape = _props$shape === void 0 ? 'rect' : _props$shape,
_props$grid = props.grid,
grid = _props$grid === void 0 ? false : _props$grid,
_props$quality = props.quality,
quality = _props$quality === void 0 ? 0.4 : _props$quality,
_props$fillColor = props.fillColor,
fillColor = _props$fillColor === void 0 ? 'white' : _props$fillColor,
customPrefixCls = props.prefixCls,
_props$zoom = props.zoom,
zoom = _props$zoom === void 0 ? true : _props$zoom,
_props$rotate = props.rotate,
rotate = _props$rotate === void 0 ? false : _props$rotate,
_props$minZoom = props.minZoom,
minZoom = _props$minZoom === void 0 ? 1 : _props$minZoom,
_props$maxZoom = props.maxZoom,
maxZoom = _props$maxZoom === void 0 ? 3 : _props$maxZoom,
modalTitle = props.modalTitle,
modalWidth = props.modalWidth,
modalOk = props.modalOk,
modalCancel = props.modalCancel,
modalMaskTransitionName = props.modalMaskTransitionName,
modalTransitionName = props.modalTransitionName,
modalClassName = props.modalClassName,
onModalOk = props.onModalOk,
onModalCancel = props.onModalCancel,
beforeCrop = props.beforeCrop,
onUploadFail = props.onUploadFail,
cropperProps = props.cropperProps,
children = props.children;
var _React$useContext = _react["default"].useContext(_configProvider.ConfigContext),
getPrefixCls = _React$useContext.getPrefixCls;
var prefixCls = getPrefixCls('imgcrop', customPrefixCls);
var cb = (0, _react.useRef)({});
cb.current.onModalOk = onModalOk;
cb.current.onModalCancel = onModalCancel;
cb.current.beforeCrop = beforeCrop;
cb.current.onUploadFail = onUploadFail;
/**
* Upload
*/
var _useState = (0, _react.useState)(''),
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
image = _useState2[0],
setImage = _useState2[1];
var fileRef = (0, _react.useRef)({});
var beforeUploadRef = (0, _react.useRef)();
var resolveRef = (0, _react.useRef)(function () {});
var rejectRef = (0, _react.useRef)(function () {});
var uploadComponent = (0, _react.useMemo)(function () {
var upload = Array.isArray(children) ? children[0] : children;
var _a = upload.props,
beforeUpload = _a.beforeUpload,
accept = _a.accept,
restUploadProps = __rest(_a, ["beforeUpload", "accept"]);
beforeUploadRef.current = beforeUpload;
return (0, _extends2["default"])((0, _extends2["default"])({}, upload), {
props: (0, _extends2["default"])((0, _extends2["default"])({}, restUploadProps), {
accept: accept || 'image/*',
beforeUpload: function beforeUpload(file, fileList) {
return new Promise(function (resolve, reject) {
return __awaiter(void 0, void 0, void 0, /*#__PURE__*/_regenerator["default"].mark(function _callee() {
var shouldCrop, reader;
return _regenerator["default"].wrap(function (_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
if (!cb.current.beforeCrop) {
_context.next = 2;
break;
}
_context.next = 1;
return cb.current.beforeCrop(file, fileList);
case 1:
shouldCrop = _context.sent;
if (shouldCrop) {
_context.next = 2;
break;
}
return _context.abrupt("return", reject());
case 2:
fileRef.current = file;
resolveRef.current = function (newFile) {
var _a, _b;
(_b = (_a = cb.current).onModalOk) === null || _b === void 0 ? void 0 : _b.call(_a, newFile);
resolve(newFile);
};
rejectRef.current = function (uploadErr) {
var _a, _b;
(_b = (_a = cb.current).onUploadFail) === null || _b === void 0 ? void 0 : _b.call(_a, uploadErr);
reject();
};
reader = new FileReader();
reader.addEventListener('load', function () {
if (typeof reader.result === 'string') {
setImage(reader.result);
}
});
reader.readAsDataURL(file);
case 3:
case "end":
return _context.stop();
}
}, _callee);
}));
});
}
})
});
}, [children]);
/**
* Crop
*/
var easyCropRef = (0, _react.useRef)({});
/**
* Modal
*/
var modalProps = (0, _react.useMemo)(function () {
var obj = {
width: modalWidth,
okText: modalOk,
cancelText: modalCancel,
maskTransitionName: modalMaskTransitionName,
transitionName: modalTransitionName
};
Object.keys(obj).forEach(function (prop) {
var key = prop;
if (obj[key] === undefined) {
delete obj[key];
}
});
return obj;
}, [modalCancel, modalMaskTransitionName, modalOk, modalTransitionName, modalWidth]);
var onClose = function onClose() {
setImage('');
easyCropRef.current.setZoomVal(_constants.INIT_ZOOM);
easyCropRef.current.setRotateVal(_constants.INIT_ROTATE);
};
var onCancel = (0, _react.useCallback)(function () {
var _a, _b;
(_b = (_a = cb.current).onModalCancel) === null || _b === void 0 ? void 0 : _b.call(_a);
onClose();
}, []);
var onOk = (0, _react.useCallback)(function (event) {
return __awaiter(void 0, void 0, void 0, /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
var _a, canvas, ctx, target, context, imgSource, _easyCropRef$current$, cropWidth, cropHeight, cropX, cropY, imgWidth, imgHeight, angle, sine, cosine, squareWidth, squareHeight, squareHalfWidth, squareHalfHeight, imgX, imgY, imgData, _fileRef$current, type, name, uid;
return _regenerator["default"].wrap(function (_context3) {
while (1) switch (_context3.prev = _context3.next) {
case 0:
onClose();
canvas = document.createElement('canvas');
ctx = canvas.getContext('2d');
target = event.target;
context = ((_a = target === null || target === void 0 ? void 0 : target.getRootNode) === null || _a === void 0 ? void 0 : _a.call(target)) || document;
imgSource = context.querySelector(".".concat(prefixCls, "-media"));
_easyCropRef$current$ = easyCropRef.current.cropPixelsRef.current, cropWidth = _easyCropRef$current$.width, cropHeight = _easyCropRef$current$.height, cropX = _easyCropRef$current$.x, cropY = _easyCropRef$current$.y;
if (rotate && easyCropRef.current.rotateVal !== _constants.INIT_ROTATE) {
imgWidth = imgSource.naturalWidth, imgHeight = imgSource.naturalHeight;
angle = easyCropRef.current.rotateVal * (Math.PI / 180); // get container for rotated image
sine = Math.abs(Math.sin(angle));
cosine = Math.abs(Math.cos(angle));
squareWidth = imgWidth * cosine + imgHeight * sine;
squareHeight = imgHeight * cosine + imgWidth * sine;
canvas.width = squareWidth;
canvas.height = squareHeight;
ctx.fillStyle = fillColor;
ctx.fillRect(0, 0, squareWidth, squareHeight);
// rotate container
squareHalfWidth = squareWidth / 2;
squareHalfHeight = squareHeight / 2;
ctx.translate(squareHalfWidth, squareHalfHeight);
ctx.rotate(angle);
ctx.translate(-squareHalfWidth, -squareHalfHeight);
// draw rotated image
imgX = (squareWidth - imgWidth) / 2;
imgY = (squareHeight - imgHeight) / 2;
ctx.drawImage(imgSource, 0, 0, imgWidth, imgHeight, imgX, imgY, imgWidth, imgHeight);
// crop rotated image
imgData = ctx.getImageData(0, 0, squareWidth, squareHeight);
canvas.width = cropWidth;
canvas.height = cropHeight;
ctx.putImageData(imgData, -cropX, -cropY);
} else {
canvas.width = cropWidth;
canvas.height = cropHeight;
ctx.fillStyle = fillColor;
ctx.fillRect(0, 0, cropWidth, cropHeight);
ctx.drawImage(imgSource, cropX, cropY, cropWidth, cropHeight, 0, 0, cropWidth, cropHeight);
}
// get the new image
_fileRef$current = fileRef.current, type = _fileRef$current.type, name = _fileRef$current.name, uid = _fileRef$current.uid;
canvas.toBlob(function (blob) {
return __awaiter(void 0, void 0, void 0, /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
var newFile, rcFile, result;
return _regenerator["default"].wrap(function (_context2) {
while (1) switch (_context2.prev = _context2.next) {
case 0:
newFile = (0, _extends2["default"])(new File([blob], name, {
type: type
}), {
uid: uid
});
if (beforeUploadRef.current) {
_context2.next = 1;
break;
}
return _context2.abrupt("return", resolveRef.current(newFile));
case 1:
rcFile = newFile;
_context2.next = 2;
return beforeUploadRef.current(rcFile, [rcFile]);
case 2:
result = _context2.sent;
if (!(result === true)) {
_context2.next = 3;
break;
}
return _context2.abrupt("return", resolveRef.current(newFile));
case 3:
if (!(result === false)) {
_context2.next = 4;
break;
}
return _context2.abrupt("return", rejectRef.current(new Error('beforeUpload return false')));
case 4:
delete newFile[_upload["default"].LIST_IGNORE];
if (!(result === _upload["default"].LIST_IGNORE)) {
_context2.next = 5;
break;
}
Object.defineProperty(newFile, _upload["default"].LIST_IGNORE, {
value: true,
configurable: true
});
return _context2.abrupt("return", rejectRef.current(new Error('beforeUpload return LIST_IGNORE')));
case 5:
if (!((0, _typeof2["default"])(result) === 'object' && result !== null)) {
_context2.next = 6;
break;
}
return _context2.abrupt("return", resolveRef.current(result));
case 6:
case "end":
return _context2.stop();
}
}, _callee2);
}));
}, type, quality);
case 1:
case "end":
return _context3.stop();
}
}, _callee3);
}));
}, [fillColor, quality, rotate]);
var getComponent = function getComponent(titleOfModal) {
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, uploadComponent, image && /*#__PURE__*/_react["default"].createElement(_modal["default"], (0, _extends2["default"])({
visible: true,
className: "".concat(prefixCls, "-modal ").concat(modalClassName || ''),
title: titleOfModal,
onOk: onOk,
onCancel: onCancel,
maskClosable: false,
destroyOnClose: true
}, modalProps), /*#__PURE__*/_react["default"].createElement(_EasyCrop["default"], {
ref: easyCropRef,
cropperRef: cropperRef,
image: image,
aspect: aspect,
shape: shape,
grid: grid,
zoom: zoom,
rotate: rotate,
minZoom: minZoom,
maxZoom: maxZoom,
cropperProps: cropperProps
})));
};
if (modalTitle) {
return getComponent(modalTitle);
}
return /*#__PURE__*/_react["default"].createElement(_LocaleReceiver["default"], {
componentName: "ImgCrop"
}, function (locale) {
return getComponent(locale.modalTitle);
});
});
var _default = exports["default"] = ImgCrop;