linkmore-design
Version:
🌈 🚀lm组件库。🚀
108 lines (105 loc) • 4.2 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import React, { useRef } from 'react';
import Spin from "../spin";
import message from "../message";
import cn from 'classnames';
import IconFont from "../icon-font";
var UploadBox = function UploadBox(props) {
var _props$value = props.value,
value = _props$value === void 0 ? [] : _props$value,
onChange = props.onChange,
_props$label = props.label,
label = _props$label === void 0 ? '上传文件' : _props$label,
_props$icon = props.icon,
icon = _props$icon === void 0 ? /*#__PURE__*/React.createElement(IconFont, {
type: "lmweb-cloud-upload",
className: "upload_btn_icon"
}) : _props$icon,
_props$length = props.length,
length = _props$length === void 0 ? 10 : _props$length,
accept = props.accept,
_props$type = props.type,
type = _props$type === void 0 ? ['xls', 'xlsx', 'jpg', 'png'] : _props$type,
_props$size = props.size,
size = _props$size === void 0 ? 'small' : _props$size,
_props$fileSize = props.fileSize,
fileSize = _props$fileSize === void 0 ? 50 : _props$fileSize,
multiple = props.multiple,
children = props.children,
fileUpload = props.fileUpload,
isLoading = props.isLoading,
_props$valueType = props.valueType,
valueType = _props$valueType === void 0 ? 'object' : _props$valueType;
var fielRef = useRef(null);
var clearInput = function clearInput() {
var _fielRef$current;
if ((_fielRef$current = fielRef.current) !== null && _fielRef$current !== void 0 && _fielRef$current.value) {
fielRef.current.value = '';
}
};
// 触发外部OnChange事件
var handleUpload = function handleUpload(file) {
var nValue = valueType === 'array' ? [].concat(_toConsumableArray(value), [file]) : file;
onChange === null || onChange === void 0 ? void 0 : onChange(nValue);
clearInput();
};
// 上传前置处理
var beforeUpload = function beforeUpload(e) {
var file = e.target.files;
if (length > 0 && file.length + value.length > length) {
return message.warning("\u6587\u4EF6\u4E0A\u4F20\u5931\u8D25\uFF01\u6700\u591A\u53EA\u80FD\u4E0A\u4F20".concat(length, "\u4E2A\u6587\u4EF6"), 1.5);
}
// 循环文件检查是否存在不符合要求的文件
for (var i = 0, len = file.length; i < len; i += 1) {
var item = file[i];
if (!type.includes(item.name.replace(/.*\./, '').toLowerCase())) {
var content = type.join('、');
clearInput();
return message.warning("\u6587\u4EF6\u4E0A\u4F20\u5931\u8D25\uFF01\u4EC5\u652F\u6301".concat(content, "\u7684\u6587\u4EF6\u7C7B\u578B\uFF01"), 1.5);
}
if (item.size / 1024 / 1024 > fileSize) {
clearInput();
return message.warning("\u6587\u4EF6\u4E0A\u4F20\u5931\u8D25\uFF01\u9644\u4EF6\u5927\u5C0F\u4E0D\u80FD\u8D85\u8FC7".concat(fileSize, "M\uFF01"), 1.5);
}
// 单个文件上传
fileUpload === null || fileUpload === void 0 ? void 0 : fileUpload({
file: item,
size: size,
value: value,
onChange: handleUpload
});
}
return false;
};
var config = {
type: 'file',
multiple: multiple,
accept: accept,
title: '',
className: 'upload_input',
onChange: beforeUpload
};
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Spin, {
spinning: isLoading,
size: "small"
}, /*#__PURE__*/React.createElement("div", {
className: "upload_diy"
}, /*#__PURE__*/React.createElement("input", _extends({
ref: fielRef
}, config)), children || /*#__PURE__*/React.createElement("div", {
className: cn('upload_btn', {
small: size === 'small'
})
}, icon, /*#__PURE__*/React.createElement("div", {
className: "upload_btn_text"
}, label)))));
};
var Index = function Index(props) {
return /*#__PURE__*/React.createElement("div", {
className: "lm_upload_btn"
}, /*#__PURE__*/React.createElement("div", {
className: "upload_body"
}, /*#__PURE__*/React.createElement(UploadBox, props)));
};
export default Index;