fx-form-widget
Version:
184 lines (179 loc) • 7.66 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _modal = _interopRequireDefault(require("antd/lib/modal"));
var _space = _interopRequireDefault(require("antd/lib/space"));
var _upload = _interopRequireDefault(require("antd/lib/upload"));
var _message2 = _interopRequireDefault(require("antd/lib/message"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
var React = _react;
var _nanoid = require("nanoid");
var _tools = require("../../config/tools");
var _icons = require("@ant-design/icons");
var _url = require("./url");
var _tools2 = require("./tools");
require("./index.less");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
var API_HOST = new Map([['dev', 'https://dev-gateway.fxqifu.net/pangu'], ['qa', 'https://qa-gateway.fxqifu.net/pangu'], ['prod', 'https://gateway.fxqifu.net/pangu']]);
var UploadPic = function UploadPic(_ref) {
var _ref$schema = _ref.schema,
schema = _ref$schema === void 0 ? {} : _ref$schema,
_ref$onChange = _ref.onChange,
_onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
_ref$value = _ref.value,
value = _ref$value === void 0 ? (0, _tools2.isNotNullValue)(schema.data) ? schema.data : [] : _ref$value;
var _schema$readonly = schema.readonly,
readonly = _schema$readonly === void 0 ? false : _schema$readonly,
_schema$maxFileCount = schema.maxFileCount,
maxFileCount = _schema$maxFileCount === void 0 ? 1 : _schema$maxFileCount,
_schema$limitedFileSi = schema.limitedFileSize,
limitedFileSize = _schema$limitedFileSi === void 0 ? undefined : _schema$limitedFileSi,
_schema$isMultipleUpl = schema.isMultipleUpload,
isMultipleUpload = _schema$isMultipleUpl === void 0 ? false : _schema$isMultipleUpl;
var _useState = (0, _react.useState)([]),
fileList = _useState[0],
setFileList = _useState[1];
var _useState2 = (0, _react.useState)({
previewVisible: false,
previewImage: '',
previewTitle: ''
}),
previewModel = _useState2[0],
setPreviewModel = _useState2[1];
var fileLength = 0;
(0, _react.useEffect)(function () {
if (value !== null && value !== void 0 && value.length) {
setFileList(value.filter(function (item) {
return item.status === 'done';
}));
}
}, [value]);
var options = {
disabled: readonly,
multiple: isMultipleUpload
};
var ENV = (0, _tools.getEnv)();
var token = (0, _tools.getToken)();
var loadProps = (0, _extends2["default"])({}, options, {
name: 'files',
style: {
width: '100 % '
},
accept: '.png, .jpg, .jpeg,',
action: API_HOST.get(ENV) + _url.fileUpload,
withCredentials: true,
fileList: fileList,
listType: 'picture-card',
headers: {
authority_token: token
},
onPreview: function onPreview(file) {
var _file$url = file.url,
url = _file$url === void 0 ? '' : _file$url,
_file$name = file.name,
name = _file$name === void 0 ? '' : _file$name;
setPreviewModel({
previewVisible: true,
previewImage: url,
previewTitle: name
});
},
onChange: function onChange(info) {
setFileList(info.fileList.filter(function (item) {
return item.status === 'done';
}));
_onChange(info.fileList.filter(function (item) {
return item.status === 'done';
}));
},
beforeUpload: function beforeUpload(file, fileArray) {
fileLength += 1;
if (fileArray.length + fileList.length > maxFileCount) {
fileLength === fileArray.length && _message2["default"].error("\u4E0A\u4F20\u4E0D\u80FD\u8D85\u8FC7" + maxFileCount + "\u5F20\u56FE\u7247");
return false;
}
if (limitedFileSize) {
return new Promise(function (resolve, reject) {
var isUnderLimitedSize = file.size / 1024 / 1024 < limitedFileSize;
if (!isUnderLimitedSize) {
_message2["default"].error("\u6587\u4EF6\u5927\u5C0F\u4E0D\u80FD\u8D85\u8FC7" + limitedFileSize + "MB");
return reject(false);
}
return resolve(true);
});
}
return true;
}
});
var customProps = {
onSuccess: function onSuccess(file) {
var success = file.success,
_file$data = file.data,
data = _file$data === void 0 ? [] : _file$data;
if (success) {
data === null || data === void 0 ? void 0 : data.forEach(function (dataListItem) {
fileList.push({
uid: (0, _nanoid.nanoid)(4),
name: dataListItem.originName,
status: 'done',
url: dataListItem.url
});
});
setFileList([].concat(fileList));
_onChange(fileList);
} else {
_message2["default"].error("" + file.message);
}
}
};
// 上传按钮
var uploadButton = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_icons.PlusOutlined, null), /*#__PURE__*/React.createElement("div", {
style: {
marginTop: 8
}
}, "\u4E0A\u4F20\u56FE\u7247"));
// 关闭弹窗
var handleCancel = function handleCancel() {
return setPreviewModel((0, _extends2["default"])({}, previewModel, {
previewVisible: false
}));
};
// 渲染限制最大图片支持的大小
var renderLimitFileSize = function renderLimitFileSize(limitedFileSize) {
if (!limitedFileSize) {
return null;
}
return /*#__PURE__*/React.createElement("div", {
className: "tips_limitedFileSize"
}, "\u8BF7\u4E0A\u4F20\u5927\u5C0F\u4E0D\u8D85\u8FC7", limitedFileSize, "M\u7684\u6587\u4EF6");
};
// 渲染最多可以上传多少张图片
var renderMaxFileCount = function renderMaxFileCount(maxFileCount) {
if (!maxFileCount) {
return null;
}
return /*#__PURE__*/React.createElement("div", {
className: "tips_limitedFileSize"
}, "\u56FE\u7247\u6700\u591A\u4E0D\u80FD\u8D85\u8FC7", maxFileCount, "\u5F20");
};
return /*#__PURE__*/React.createElement("div", {
style: {
width: '100%'
}
}, /*#__PURE__*/React.createElement(_upload["default"], (0, _extends2["default"])({}, loadProps, customProps), fileList.length >= maxFileCount ? null : uploadButton), /*#__PURE__*/React.createElement(_space["default"], null, renderLimitFileSize(limitedFileSize), renderMaxFileCount(maxFileCount)), /*#__PURE__*/React.createElement(_modal["default"], {
open: previewModel.previewVisible,
title: previewModel.previewTitle,
footer: null,
onCancel: handleCancel
}, /*#__PURE__*/React.createElement("img", {
alt: "example",
style: {
width: '100%'
},
src: previewModel.previewImage
})));
};
var _default = exports["default"] = UploadPic;