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

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

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.ImageUploader = void 0;
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _antdMobile = require("antd-mobile");
var _classnames2 = _interopRequireDefault(require("classnames"));
var React = _interopRequireWildcard(require("react"));
var _dolyIcons = require("doly-icons");
var _config = require("../../config");
require("./index.css");
var _UploadType = _interopRequireDefault(require("./UploadType"));
var _UploadCustom = _interopRequireDefault(require("./UploadCustom"));
var _BizConfigProvider = require("../BizConfigProvider");
var _utilHelpers = require("util-helpers");
var _excluded = ["block", "type", "deleteStyle", "comfirmDelete", "maxSize", "beforeUpload", "accept", "onDelete", "maxCount", "children", "actionRef", "fileTypeMessage", "fileSizeMessage", "deleteTiptext", "name", "nameProps"];
var prefixCls = "".concat(_config.prefixClass, "-image-uploader");
var BizImageUploader = function BizImageUploader(props) {
  var _useConfig = (0, _BizConfigProvider.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 = (0, _objectWithoutProperties2.default)(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.default, {
      type: type
    }) : null;
  }, [type]);
  var handleBeforeUpload = function handleBeforeUpload(file, files) {
    var maxSizeKB = maxSize * 1024 * 1024;
    // 校验文件大小
    if (file.size > maxSizeKB) {
      fileSizeMessage && _antdMobile.Toast.show(fileSizeMessage.replace(/%s/g, (0, _utilHelpers.bytesToSize)(maxSizeKB)));
      return null;
    }
    // 校验文件类型
    if (!(0, _utilHelpers.checkFileType)(file, accept)) {
      fileTypeMessage && _antdMobile.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 ? _antdMobile.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: (0, _classnames2.default)(prefixCls, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".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(_antdMobile.ImageUploader, (0, _objectSpread2.default)({
    accept: accept,
    beforeUpload: handleBeforeUpload,
    onDelete: handleDelete,
    maxCount: maxCount,
    deleteIcon: deleteStyle === 'circle' ? /*#__PURE__*/React.createElement(_dolyIcons.XCircleFill, null) : undefined
  }, restProps), children || bgview), name && (/*#__PURE__*/React.createElement("div", (0, _objectSpread2.default)((0, _objectSpread2.default)({}, nameProps), {}, {
    className: (0, _classnames2.default)("".concat(prefixCls, "-name"), nameProps === null || nameProps === void 0 ? void 0 : nameProps.className)
  }), name)));
};
BizImageUploader.UploadBackground = _UploadType.default;
BizImageUploader.UploadType = _UploadType.default;
BizImageUploader.UploadCustom = _UploadCustom.default;
/**
 * @deprecated 即将废弃，请使用 `BizImageUploader` 替代。
 */
var ImageUploader = exports.ImageUploader = BizImageUploader;
var _default = exports.default = BizImageUploader;