zp-bee/lib/bee-upload/index.js

zp-bee，是一款基于 Dumi，由 React + TypeScript 开发的组件库 🎉。

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

require("antd/es/upload/style");

var _upload = _interopRequireDefault(require("antd/es/upload"));

require("antd/es/button/style");

var _button = _interopRequireDefault(require("antd/es/button"));

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _react = _interopRequireWildcard(require("react"));

var _zpBee = require("zp-bee");

var _throttle = _interopRequireDefault(require("lodash/throttle"));

var BeeUpload = function BeeUpload(_ref) {
  var modalTitle = _ref.modalTitle,
      description = _ref.description,
      selectFileTip = _ref.selectFileTip,
      uploadVisible = _ref.uploadVisible,
      importBtnLoading = _ref.importBtnLoading,
      importFile = _ref.importFile,
      onCancel = _ref.onCancel,
      _ref$modalWidth = _ref.modalWidth,
      modalWidth = _ref$modalWidth === void 0 ? 558 : _ref$modalWidth,
      downloadTemplate = _ref.downloadTemplate,
      uploadDescription = _ref.uploadDescription,
      accept = _ref.accept,
      extraContent = _ref.extraContent;

  var _useState = (0, _react.useState)(),
      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
      file = _useState2[0],
      setFile = _useState2[1];

  var uploadProps = {
    maxCount: 1,
    fileList: [],
    accept: accept,
    beforeUpload: function beforeUpload(uploadFile) {
      setFile(uploadFile);
      return false;
    }
  };
  var importFileRefFn = (0, _react.useRef)(null);
  importFileRefFn.current = importFile;
  var handleClickImport = (0, _react.useMemo)(function () {
    return (0, _throttle.default)(function () {
      var _a;

      (_a = importFileRefFn.current) === null || _a === void 0 ? void 0 : _a.call(importFileRefFn, file);
    }, 3000, {
      leading: true,
      trailing: false
    });
  }, [file]);
  (0, _react.useEffect)(function () {
    if (!uploadVisible) {
      // 重置file
      setFile(null);
    }
  }, [uploadVisible]);
  return /*#__PURE__*/_react.default.createElement(_zpBee.BeeModal, {
    footer: null,
    visible: uploadVisible,
    title: modalTitle,
    width: modalWidth,
    onCancel: onCancel,
    className: "bee-upload-wrap"
  }, downloadTemplate && /*#__PURE__*/_react.default.createElement("div", {
    className: "downloadTemplateTip"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "importTemplateTipInfo"
  }, "\u5BFC\u5165\u8BF4\u660E\uFF1A", description || '请下载模版，然后将科目信息添加到模板中'), /*#__PURE__*/_react.default.createElement(_button.default, {
    onClick: downloadTemplate
  }, "\u4E0B\u8F7D\u6587\u4EF6\u6A21\u677F")), /*#__PURE__*/_react.default.createElement("div", {
    className: file ? 'fileShow' : 'uploadFileArea'
  }, file && /*#__PURE__*/_react.default.createElement("div", {
    className: "fileUrl"
  }, /*#__PURE__*/_react.default.createElement(_zpBee.BeeIcon, {
    type: "iconwenjian",
    className: "fileIcon"
  }), /*#__PURE__*/_react.default.createElement("span", null, file.name)), /*#__PURE__*/_react.default.createElement(_upload.default, Object.assign({}, uploadProps), /*#__PURE__*/_react.default.createElement(_button.default, {
    type: "primary",
    className: "selectFileBtn"
  }, file ? '重新选择' : '选择文件')), !file && /*#__PURE__*/_react.default.createElement("div", {
    className: "selectFileTip"
  }, selectFileTip)), file ? /*#__PURE__*/_react.default.createElement(_button.default, {
    onClick: handleClickImport,
    className: "importBtn",
    type: "primary",
    loading: importBtnLoading
  }, "\u7ACB\u5373\u5BFC\u5165") : uploadDescription && /*#__PURE__*/_react.default.createElement("div", {
    className: "uploadTip"
  }, uploadDescription), extraContent);
};

var _default = BeeUpload;
exports.default = _default;