mobile-more/es/components/BizImageUploader/index.js

基于 antd-mobile v5 扩展移动端 UI 组件

import _extends from "@babel/runtime/helpers/esm/extends";
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 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 = type ? 1 : outMaxCount;
  var handleBeforeUpload = function handleBeforeUpload(file, files) {
    var maxSizeKB = maxSize * 1024 * 1024;
    // 校验文件大小
    if (file.size > maxSizeKB) {
      if (fileSizeMessage) {
        Toast.show(fileSizeMessage.replace(/%s/g, bytesToSize(maxSizeKB)));
      }
      return null;
    }

    // 校验文件类型
    if (!checkFileType(file, accept)) {
      if (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 || 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, _extends({
    accept: accept,
    beforeUpload: handleBeforeUpload,
    onDelete: handleDelete,
    maxCount: maxCount,
    deleteIcon: deleteStyle === 'circle' ? /*#__PURE__*/React.createElement(XCircleFill, null) : undefined
  }, restProps), children || (type ? /*#__PURE__*/React.createElement(UploadType, {
    type: type
  }) : null)), name && /*#__PURE__*/React.createElement("div", _extends({}, 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;

/**
 * @deprecated 即将废弃，请使用 `BizImageUploaderProps` 替代。
 */

/**
 * @deprecated 即将废弃，请使用 `BizImageUploaderActionType` 替代。
 */

export default BizImageUploader;