react-admin-component
Version:
react library
158 lines • 8.49 kB
JavaScript
import * as tslib_1 from "tslib";
import React from 'react';
import { Upload, Icon, Modal, Form, Input, Button } from 'antd';
import { PrototypeCheck } from '../utils';
var FormUpload = (function (_super) {
tslib_1.__extends(FormUpload, _super);
function FormUpload(props) {
var _this = _super.call(this, props) || this;
_this.handleCancel = function () { return _this.setState({ previewVisible: false }); };
_this.handlePreview = function (file) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
var _a;
return tslib_1.__generator(this, function (_b) {
switch (_b.label) {
case 0:
if (this.props.handlePreview) {
return [2, this.props.handlePreview(file)];
}
if (!(!file.url && !file.preview)) return [3, 2];
_a = file;
return [4, getBase64(file.originFileObj)];
case 1:
_a.preview = _b.sent();
_b.label = 2;
case 2:
this.setState({
previewImage: file.url || file.preview,
previewVisible: true,
});
return [2];
}
});
}); };
_this.handleChange = function (info, type, cb, option) {
var _a;
var fileList = info.fileList, event = info.event;
var _b = _this.props.form, setFieldsValue = _b.setFieldsValue, getFieldValue = _b.getFieldValue;
var _c = _this.props, field = _c.field, normalizeValue = _c.normalizeValue, controlNum = _c.controlNum, showProgress = _c.showProgress;
if (event && showProgress) {
_this.setState({ progressPercent: Number(event.percent.toFixed(0)) });
}
if (type === 'file') {
fileList = _this.handleFileChange(fileList, controlNum);
}
var value = normalizeValue
? normalizeValue(fileList, option, getFieldValue(field))
: fileList;
setFieldsValue((_a = {},
_a[field] = value,
_a));
cb && cb(value, _this.props.form);
};
_this.handleFileChange = function (fileList, controlNum) {
var cNums = controlNum ? controlNum : 0;
var negNum = 0 - cNums;
fileList = fileList.slice(negNum);
fileList = fileList.map(function (file) {
if (file.response) {
file.url = file.response.url;
}
return file;
});
return fileList;
};
_this.getTypedList = function (fileList) {
var typedList;
typedList = PrototypeCheck.isArray(fileList)
? fileList.map(function (item) {
var typedListItem = {};
typedListItem = tslib_1.__assign({}, item);
typedListItem.url = _this.props.getImageUrl(item);
typedListItem.name =
typedListItem.name || _this.props.textForAnchor || typedListItem.url || '';
return typedListItem;
})
: undefined;
return typedList;
};
_this.renderUploadComponentByFiletype = function (type, fileList, controlNum) {
var cNums = controlNum ? controlNum : fileList && fileList.length + 1;
var textForDisplay = _this.props.textForDisplay;
var text = textForDisplay ? textForDisplay : '上传';
var uploadButtonForImage = (React.createElement("div", null,
React.createElement(Icon, { type: "plus" }),
React.createElement("div", { className: "ant-upload-text" }, text)));
var uploadButtonForButton = (React.createElement(Button, null,
text,
React.createElement(Icon, { type: "upload" })));
if (type === 'image') {
if (fileList) {
return fileList.length >= cNums ? null : uploadButtonForImage;
}
return uploadButtonForImage;
}
else if (type === 'file') {
if (fileList) {
return fileList.length >= cNums ? null : uploadButtonForButton;
}
return uploadButtonForButton;
}
};
_this.onRemove = function () {
_this.setState({ progressPercent: 0 });
};
_this.state = {
previewVisible: false,
previewImage: '',
fileList: [],
};
return _this;
}
FormUpload.prototype.render = function () {
var _this = this;
var _a = this.props, label = _a.label, labelCol = _a.labelCol, wrapperCol = _a.wrapperCol, field = _a.field, action = _a.action, controlNum = _a.controlNum, listType = _a.listType, fileType = _a.fileType, initialValue = _a.initialValue, required = _a.required, validator = _a.validator, customUploadList = _a.customUploadList, handleChangeCallBack = _a.handleChangeCallBack, headers = _a.headers, textForAnchor = _a.textForAnchor, restProps = tslib_1.__rest(_a, ["label", "labelCol", "wrapperCol", "field", "action", "controlNum", "listType", "fileType", "initialValue", "required", "validator", "customUploadList", "handleChangeCallBack", "headers", "textForAnchor"]);
var _b = this.props.form, getFieldDecorator = _b.getFieldDecorator, getFieldValue = _b.getFieldValue;
var _c = this.state, previewVisible = _c.previewVisible, previewImage = _c.previewImage, progressPercent = _c.progressPercent;
return (React.createElement(Form.Item, tslib_1.__assign({}, {
label: label,
labelCol: labelCol,
wrapperCol: wrapperCol,
}, { className: "rac_form_upload" }),
getFieldDecorator(field, {
initialValue: initialValue,
rules: [
{ required: required, message: "\u8BF7\u4E0A\u4F20" + label },
{
validator: function (rule, value, callback) {
return validator ? validator(rule, value, callback) : callback();
},
},
],
})(React.createElement(Input, { style: { display: 'none' } })),
restProps.readOnly ? (restProps.render ? (restProps.render(getFieldValue(field))) : (React.createElement("span", null, getFieldValue(field)))) : (React.createElement(Upload, tslib_1.__assign({ action: action, listType: listType, fileList: getFieldValue(field)
? this.getTypedList(getFieldValue(field))
: undefined, onPreview: this.handlePreview, onChange: function (fileList) {
_this.handleChange(fileList, fileType, handleChangeCallBack);
}, headers: PrototypeCheck.isFunction(headers) ? headers() : headers, onRemove: this.onRemove }, restProps), this.renderUploadComponentByFiletype(fileType, getFieldValue(field)
? this.getTypedList(getFieldValue(field))
: undefined, controlNum))),
!!progressPercent && (React.createElement("span", { className: "rac_form_upload_progress" },
"\u5DF2\u4E0A\u4F20",
progressPercent,
"%")),
!!customUploadList && customUploadList(getFieldValue(field)),
React.createElement(Modal, { visible: previewVisible, footer: null, onCancel: this.handleCancel },
React.createElement("img", { style: { width: '100%' }, src: previewImage, alt: "\u56FE\u7247" }))));
};
return FormUpload;
}(React.Component));
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); };
});
}
export default FormUpload;
//# sourceMappingURL=index.js.map