@51yzone/pc-components
Version:
An enterprise-class UI design language and React-based implementation
318 lines (262 loc) • 11.8 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
require("antd/lib/modal/style");
var _modal = _interopRequireDefault(require("antd/lib/modal"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
require("antd/lib/button/style");
var _button = _interopRequireDefault(require("antd/lib/button"));
require("antd/lib/upload/style");
var _upload = _interopRequireDefault(require("antd/lib/upload"));
var _react = _interopRequireWildcard(require("react"));
var _icons = require("@ant-design/icons");
var _classnames = _interopRequireDefault(require("classnames"));
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
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;
};
/**
* 关键字：上传
* 新增人：徐友万
* 完善中
*/
var Dragger = _upload["default"].Dragger;
var imageExpendRegExp = /.(gif|png|jpg|jpeg|webp|svg|psd|bmp|tif)/i; // 图片转换成base64
var getBase64 = function getBase64(file) {
return new Promise(function (resolve, reject) {
var reader = new FileReader();
if (file) {
reader.readAsDataURL(file);
reader.onload = function () {
return resolve(reader.result);
};
reader.onerror = function (error) {
return reject(error);
};
}
});
}; // 上传按钮
var uploadButtons = {
text: /*#__PURE__*/_react["default"].createElement(_button["default"], {
icon: /*#__PURE__*/_react["default"].createElement(_icons.UploadOutlined, null)
}, "\u4E0A\u4F20"),
picture: /*#__PURE__*/_react["default"].createElement(_button["default"], {
icon: /*#__PURE__*/_react["default"].createElement(_icons.UploadOutlined, null)
}, "\u4E0A\u4F20"),
'picture-card': /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_icons.PlusOutlined, null), /*#__PURE__*/_react["default"].createElement("div", {
style: {
marginTop: 8
}
}, "\u4E0A\u4F20"))
};
var Component = function Component(_a) {
var trigger = _a.trigger,
_a$value = _a.value,
value = _a$value === void 0 ? [] : _a$value,
_a$maxLength = _a.maxLength,
maxLength = _a$maxLength === void 0 ? 9 : _a$maxLength,
request = _a.request,
action = _a.action,
_a$fileName = _a.fileName,
fileName = _a$fileName === void 0 ? 'file' : _a$fileName,
data = _a.data,
_a$uidResFormat = _a.uidResFormat,
uidResFormat = _a$uidResFormat === void 0 ? 'data' : _a$uidResFormat,
_a$uploadType = _a.uploadType,
uploadType = _a$uploadType === void 0 ? 'default' : _a$uploadType,
_a$draggerTitle = _a.draggerTitle,
draggerTitle = _a$draggerTitle === void 0 ? '点击或拖拽上传文件' : _a$draggerTitle,
draggerSubtitle = _a.draggerSubtitle,
_a$listType = _a.listType,
listType = _a$listType === void 0 ? 'picture-card' : _a$listType,
_a$accept = _a.accept,
accept = _a$accept === void 0 ? 'image/*' : _a$accept,
prefixCls = _a.prefixCls,
className = _a.className,
style = _a.style,
onChange = _a.onChange,
rest = __rest(_a, ["trigger", "value", "maxLength", "request", "action", "fileName", "data", "uidResFormat", "uploadType", "draggerTitle", "draggerSubtitle", "listType", "accept", "prefixCls", "className", "style", "onChange"]); // 图片预览
var _useState = (0, _react.useState)(false),
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
previewVisible = _useState2[0],
setPreviewVisible = _useState2[1];
var _useState3 = (0, _react.useState)(''),
_useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
previewImage = _useState4[0],
setPreviewImage = _useState4[1];
var _useState5 = (0, _react.useState)('预览'),
_useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
previewTitle = _useState6[0],
setPreviewTitle = _useState6[1];
var handlePreview = function handlePreview(file) {
return __awaiter(void 0, void 0, void 0, /*#__PURE__*/_regenerator["default"].mark(function _callee() {
return _regenerator["default"].wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
_context.prev = 0;
if (!(file.url && !imageExpendRegExp.test(file.url) || !file.url && !imageExpendRegExp.test(file.name))) {
_context.next = 3;
break;
}
return _context.abrupt("return");
case 3:
_context.t0 = !file.url && !file.preview;
if (!_context.t0) {
_context.next = 8;
break;
}
_context.next = 7;
return getBase64(file.originFileObj);
case 7:
file.preview = _context.sent;
case 8:
setPreviewImage(file.url || file.preview);
setPreviewVisible(true);
setPreviewTitle(file.name || '预览');
_context.next = 16;
break;
case 13:
_context.prev = 13;
_context.t1 = _context["catch"](0);
console.log('error:', _context.t1);
case 16:
case "end":
return _context.stop();
}
}
}, _callee, null, [[0, 13]]);
}));
}; // 自定义上传
var handleCustomRequest = function handleCustomRequest(_ref) {
var file = _ref.file,
onProgress = _ref.onProgress,
onError = _ref.onError,
onSuccess = _ref.onSuccess;
return __awaiter(void 0, void 0, void 0, /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
var baseRequestForm;
return _regenerator["default"].wrap(function _callee2$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
if (request) {
baseRequestForm = request.requestForm.bind(request);
baseRequestForm(action, (0, _extends3["default"])((0, _defineProperty2["default"])({}, fileName, file), data), {
onUploadProgress: function onUploadProgress(_ref2) {
var total = _ref2.total,
loaded = _ref2.loaded;
onProgress({
percent: loaded / total * 100
}, file);
}
}).then(function (res) {
var uidRes = res;
uidResFormat.split('.').forEach(function (n) {
return uidRes = uidRes[n];
});
res.uid = uidRes;
onSuccess(res, file);
})["catch"](onError);
}
case 1:
case "end":
return _context2.stop();
}
}
}, _callee2);
}));
}; // onChange
var handleChange = function handleChange(_ref3) {
var fileList = _ref3.fileList;
fileList = fileList.slice(-maxLength);
fileList.forEach(function (item) {
if (item.response) {
item.response.uid && (item.uid = item.response.uid);
}
});
onChange && onChange(fileList);
};
var props = (0, _extends3["default"])({
listType: listType,
accept: accept,
onPreview: handlePreview,
customRequest: handleCustomRequest,
fileList: value,
onChange: handleChange
}, rest);
return /*#__PURE__*/_react["default"].createElement("div", {
className: (0, _classnames["default"])(className, "".concat(prefixCls, "-wrapper")),
style: style
}, uploadType === 'default' && /*#__PURE__*/_react["default"].createElement(_upload["default"], (0, _extends3["default"])({}, props), value.length < maxLength && (trigger || uploadButtons[listType])), uploadType === 'dragger' && /*#__PURE__*/_react["default"].createElement(Dragger, (0, _extends3["default"])({}, props), trigger || /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("p", {
className: "ant-upload-drag-icon"
}, /*#__PURE__*/_react["default"].createElement(_icons.InboxOutlined, null)), /*#__PURE__*/_react["default"].createElement("p", {
className: "ant-upload-text"
}, draggerTitle), draggerSubtitle && /*#__PURE__*/_react["default"].createElement("p", {
className: "ant-upload-hint"
}, draggerSubtitle))), /*#__PURE__*/_react["default"].createElement(_modal["default"], {
visible: previewVisible,
title: previewTitle,
footer: null,
onCancel: function onCancel() {
return setPreviewVisible(false);
}
}, /*#__PURE__*/_react["default"].createElement("img", {
alt: "\u9884\u89C8",
style: {
width: '100%'
},
src: previewImage
})));
};
Component.defaultProps = {
maxLength: 9,
data: {},
listType: 'picture-card',
prefixCls: 'one-uplood',
className: '',
style: {}
};
var _default = Component;
exports["default"] = _default;