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

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

import "antd/es/upload/style";
import _Upload from "antd/es/upload";
import "antd/es/button/style";
import _Button from "antd/es/button";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { useState, useEffect, useRef, useMemo } from 'react';
import { BeeModal, BeeIcon } from 'zp-bee';
import throttle from '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 = useState(),
      _useState2 = _slicedToArray(_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 = useRef(null);
  importFileRefFn.current = importFile;
  var handleClickImport = useMemo(function () {
    return throttle(function () {
      var _a;

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

export default BeeUpload;