ze-react-component-library
Version:
ZeroETP React Component Library
314 lines (262 loc) • 7.6 kB
JavaScript
import "antd/es/modal/style";
import _Modal from "antd/es/modal";
import "antd/es/upload/style";
import _Upload from "antd/es/upload";
import "antd/es/button/style";
import _Button from "antd/es/button";
var __assign = this && this.__assign || function () {
__assign = Object.assign || function (t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) {
if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
}
return t;
};
return __assign.apply(this, arguments);
};
var __awaiter = this && this.__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 __generator = this && this.__generator || function (thisArg, body) {
var _ = {
label: 0,
sent: function sent() {
if (t[0] & 1) throw t[1];
return t[1];
},
trys: [],
ops: []
},
f,
y,
t,
g;
return g = {
next: verb(0),
"throw": verb(1),
"return": verb(2)
}, typeof Symbol === "function" && (g[Symbol.iterator] = function () {
return this;
}), g;
function verb(n) {
return function (v) {
return step([n, v]);
};
}
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (_) {
try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0:
case 1:
t = op;
break;
case 4:
_.label++;
return {
value: op[1],
done: false
};
case 5:
_.label++;
y = op[1];
op = [0];
continue;
case 7:
op = _.ops.pop();
_.trys.pop();
continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
_ = 0;
continue;
}
if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
_.label = op[1];
break;
}
if (op[0] === 6 && _.label < t[1]) {
_.label = t[1];
t = op;
break;
}
if (t && _.label < t[2]) {
_.label = t[2];
_.ops.push(op);
break;
}
if (t[2]) _.ops.pop();
_.trys.pop();
continue;
}
op = body.call(thisArg, _);
} catch (e) {
op = [6, e];
y = 0;
} finally {
f = t = 0;
}
}
if (op[0] & 5) throw op[1];
return {
value: op[0] ? op[1] : void 0,
done: true
};
}
};
import React, { useState } from "react";
import { PlusOutlined, UploadOutlined } from "@ant-design/icons";
import { config } from "zeroetp-api-sdk";
function getBase64(file) {
return new Promise(function (resolve, reject) {
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
return resolve(reader.result);
};
reader.onerror = function (error) {
return reject(error);
};
});
}
var ImageUpload = function ImageUpload(_a) {
var _onChange = _a.onChange,
value = _a.value,
_b = _a.type,
type = _b === void 0 ? "image" : _b;
var defaultFileList = [];
if (value) {
if (Array.isArray(value)) {
defaultFileList = value;
} else {
defaultFileList = [value];
}
}
defaultFileList = defaultFileList.map(function (file) {
return {
name: type === "image" ? "图片" : "文件",
url: file,
uid: file,
status: "done"
};
});
var _c = useState(defaultFileList),
fileList = _c[0],
setFileList = _c[1];
var _d = useState(false),
previewVisible = _d[0],
setPreviewVisible = _d[1];
var _e = useState(""),
previewTitle = _e[0],
setPreviewTitle = _e[1];
var _f = useState(),
previewImage = _f[0],
setPreviewImage = _f[1];
var getUploadProp = function getUploadProp() {
return {
name: "file",
action: "" + config.API_URL + (window.publicPath || "/") + "api/v1/util/uploadImage",
headers: {
Authorization: "Bearer " + localStorage.getItem("chatbi-token")
}
};
};
var handlePreview = function handlePreview(file) {
return __awaiter(void 0, void 0, void 0, function () {
var _a;
return __generator(this, function (_b) {
switch (_b.label) {
case 0:
if (!(!file.url && !file.preview)) return [3
/*break*/
, 2]; // eslint-disable-next-line no-param-reassign
_a = file;
return [4
/*yield*/
, getBase64(file.originFileObj)];
case 1:
// eslint-disable-next-line no-param-reassign
_a.preview = _b.sent();
_b.label = 2;
case 2:
setPreviewImage(file.url || file.preview);
setPreviewVisible(true);
setPreviewTitle(file.name || file.url.substring(file.url.lastIndexOf("/") + 1));
return [2
/*return*/
];
}
});
});
};
var uploadButton = type === "image" ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(PlusOutlined, null), /*#__PURE__*/React.createElement("div", {
className: "ant-upload-text"
}, "\u4E0A\u4F20")) : /*#__PURE__*/React.createElement(_Button, {
icon: /*#__PURE__*/React.createElement(UploadOutlined, null)
}, "\u9009\u62E9\u6587\u4EF6");
return /*#__PURE__*/React.createElement("div", {
className: "clearfix"
}, /*#__PURE__*/React.createElement(_Upload, __assign({
accept: type === "image" ? "image/*" : "*"
}, getUploadProp(), {
listType: type === "image" ? "picture-card" : "text",
fileList: fileList,
onPreview: handlePreview,
onChange: function onChange(_a) {
var newFileList = _a.fileList;
if (_onChange) {
if (newFileList.length === 1) {
// TODO: 先做一个的
var file = newFileList[0];
if (file.response && file.response.url) {
_onChange("" + config.API_URL + file.response.url);
}
}
}
setFileList(newFileList);
}
}), fileList.length >= 1 ? null : uploadButton), /*#__PURE__*/React.createElement(_Modal, {
open: previewVisible,
title: previewTitle,
footer: null,
onCancel: function onCancel() {
return setPreviewVisible(false);
}
}, /*#__PURE__*/React.createElement("img", {
alt: "example",
style: {
width: "100%"
},
src: previewImage
})));
};
export default ImageUpload;