mobile-more
Version:
基于 antd-mobile v5 扩展移动端 UI 组件
104 lines • 5.15 kB
JavaScript
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["block", "type", "deleteStyle", "comfirmDelete", "maxSize", "beforeUpload", "accept", "onDelete", "maxCount", "children", "actionRef", "fileTypeMessage", "fileSizeMessage", "deleteTiptext", "name", "nameProps"];
import { Dialog, ImageUploader as BaseImageUploader, Toast } from 'antd-mobile';
import classnames from 'classnames';
import * as React from 'react';
import { XCircleFill } from 'doly-icons';
import { prefixClass } from '../../config';
import "./index.css";
import UploadType from './UploadType';
import UploadCustom from './UploadCustom';
import { useConfig } from '../BizConfigProvider';
import { bytesToSize, checkFileType } from 'util-helpers';
var prefixCls = "".concat(prefixClass, "-image-uploader");
var BizImageUploader = function BizImageUploader(props) {
var _useConfig = useConfig(),
locale = _useConfig.locale;
var block = props.block,
type = props.type,
_props$deleteStyle = props.deleteStyle,
deleteStyle = _props$deleteStyle === void 0 ? 'circle' : _props$deleteStyle,
_props$comfirmDelete = props.comfirmDelete,
comfirmDelete = _props$comfirmDelete === void 0 ? false : _props$comfirmDelete,
_props$maxSize = props.maxSize,
maxSize = _props$maxSize === void 0 ? 2 : _props$maxSize,
beforeUpload = props.beforeUpload,
_props$accept = props.accept,
accept = _props$accept === void 0 ? 'image/*' : _props$accept,
onDelete = props.onDelete,
outMaxCount = props.maxCount,
children = props.children,
actionRef = props.actionRef,
_props$fileTypeMessag = props.fileTypeMessage,
fileTypeMessage = _props$fileTypeMessag === void 0 ? locale.form.upload.fileTypeMessage : _props$fileTypeMessag,
_props$fileSizeMessag = props.fileSizeMessage,
fileSizeMessage = _props$fileSizeMessag === void 0 ? locale.form.upload.fileSizeMessage : _props$fileSizeMessag,
_props$deleteTiptext = props.deleteTiptext,
deleteTiptext = _props$deleteTiptext === void 0 ? locale.form.upload.deleteTiptext : _props$deleteTiptext,
name = props.name,
nameProps = props.nameProps,
restProps = _objectWithoutProperties(props, _excluded);
var wrapperRef = React.useRef(null);
var maxCount = React.useMemo(function () {
return type ? 1 : outMaxCount;
}, [outMaxCount, type]);
var bgview = React.useMemo(function () {
return type ? /*#__PURE__*/React.createElement(UploadType, {
type: type
}) : null;
}, [type]);
var handleBeforeUpload = function handleBeforeUpload(file, files) {
var maxSizeKB = maxSize * 1024 * 1024;
// 校验文件大小
if (file.size > maxSizeKB) {
fileSizeMessage && Toast.show(fileSizeMessage.replace(/%s/g, bytesToSize(maxSizeKB)));
return null;
}
// 校验文件类型
if (!checkFileType(file, accept)) {
fileTypeMessage && Toast.show(fileTypeMessage.replace(/%s/g, accept));
return null;
}
return typeof beforeUpload === 'function' ? beforeUpload === null || beforeUpload === void 0 ? void 0 : beforeUpload(file, files) : file;
};
var handleDelete = function handleDelete(item) {
if (typeof onDelete === 'function') {
return onDelete(item);
}
return comfirmDelete ? Dialog.confirm({
content: deleteTiptext
}) : true;
};
React.useImperativeHandle(actionRef, function () {
return {
clickInput: function clickInput() {
if (wrapperRef.current) {
var inputEl = wrapperRef.current.querySelector('input[type="file"]');
inputEl === null || inputEl === void 0 ? void 0 : inputEl.click();
}
}
};
});
return /*#__PURE__*/React.createElement("div", {
className: classnames(prefixCls, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-type"), type), "".concat(prefixCls, "-type-").concat(type), type), "".concat(prefixCls, "-block"), !!type || block), "".concat(prefixCls, "-delete-circle"), deleteStyle === 'circle'), "".concat(prefixCls, "-single"), maxCount === 1)),
ref: wrapperRef
}, /*#__PURE__*/React.createElement(BaseImageUploader, _objectSpread({
accept: accept,
beforeUpload: handleBeforeUpload,
onDelete: handleDelete,
maxCount: maxCount,
deleteIcon: deleteStyle === 'circle' ? /*#__PURE__*/React.createElement(XCircleFill, null) : undefined
}, restProps), children || bgview), name && (/*#__PURE__*/React.createElement("div", _objectSpread(_objectSpread({}, nameProps), {}, {
className: classnames("".concat(prefixCls, "-name"), nameProps === null || nameProps === void 0 ? void 0 : nameProps.className)
}), name)));
};
BizImageUploader.UploadBackground = UploadType;
BizImageUploader.UploadType = UploadType;
BizImageUploader.UploadCustom = UploadCustom;
/**
* @deprecated 即将废弃，请使用 `BizImageUploader` 替代。
*/
export var ImageUploader = BizImageUploader;
export default BizImageUploader;