@zykj2024/much-library 1.1.7-beta.3 → 1.1.7-beta.5

package/dist/McUpload/comps/McUploadDragger/index.js

@@ -0,0 +1,264 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["maxTaskCounts", "batchProcess", "verifierConfig"];
+import { useLazyRef } from "../../../../packages/hooks/src";
+import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
+import { useDropzone } from 'react-dropzone';
+import { TaskQueue } from "../../../Utils";
+import { calculateMD5, getIdleCPUCores } from "../../tools/calculateMD5";
+import getUid from "../../tools/getUid";
+import { checkFile } from "../../tools/materialVerification";
+import { McUploadTriggerDrag } from "../McUploadTrigger";
+// 删除对象属性类型
+
+// 非必传函数返回值类型提取
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var McUploadDragger = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _props$children;
+  // IO/CPU密集型任务，控制数量，为非批量处理提供MD5线程控制
+  var maxTaskCounts = props.maxTaskCounts,
+    batchProcess = props.batchProcess,
+    verifierConfig = props.verifierConfig,
+    rest = _objectWithoutProperties(props, _excluded);
+  var hasUploadFile = !!props.uploadFile;
+  // 自动任务队列管理
+  var CHECK_QUEUE = useLazyRef(function () {
+    return new TaskQueue(getIdleCPUCores());
+  });
+  // 批处理MD5线程控制
+  var BATCH_CHECK_QUEUE = useLazyRef(function () {
+    return new TaskQueue(getIdleCPUCores());
+  });
+  var batchGetMD5 = function batchGetMD5(file) {
+    return new Promise(function (resolve) {
+      var _BATCH_CHECK_QUEUE$cu;
+      (_BATCH_CHECK_QUEUE$cu = BATCH_CHECK_QUEUE.current) === null || _BATCH_CHECK_QUEUE$cu === void 0 || _BATCH_CHECK_QUEUE$cu.addTask({
+        id: file.uid,
+        task: function () {
+          var _task = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+            var md5;
+            return _regeneratorRuntime().wrap(function _callee$(_context) {
+              while (1) switch (_context.prev = _context.next) {
+                case 0:
+                  _context.next = 2;
+                  return calculateMD5(file);
+                case 2:
+                  md5 = _context.sent;
+                  resolve(md5);
+                case 4:
+                case "end":
+                  return _context.stop();
+              }
+            }, _callee);
+          }));
+          function task() {
+            return _task.apply(this, arguments);
+          }
+          return task;
+        }()
+      });
+    });
+  };
+  var TASK_QUEUE = useLazyRef(function () {
+    return new TaskQueue(maxTaskCounts || 5);
+  });
+  var isBatchProcess = batchProcess;
+  var countNum = useRef(0);
+
+  // 上传
+  var beforeUpload = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee8(file, fileList) {
+      var count, _CHECK_QUEUE$current, _CHECK_QUEUE$current2;
+      return _regeneratorRuntime().wrap(function _callee8$(_context8) {
+        while (1) switch (_context8.prev = _context8.next) {
+          case 0:
+            count = fileList.length;
+            countNum.current = countNum.current + 1;
+            if (countNum.current >= count) {
+              if (isBatchProcess && hasUploadFile) {
+                (_CHECK_QUEUE$current = CHECK_QUEUE.current) === null || _CHECK_QUEUE$current === void 0 || _CHECK_QUEUE$current.addTask({
+                  id: file.uid,
+                  task: function () {
+                    var _task2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4() {
+                      var _props$uploadFile;
+                      return _regeneratorRuntime().wrap(function _callee4$(_context4) {
+                        while (1) switch (_context4.prev = _context4.next) {
+                          case 0:
+                            props === null || props === void 0 || (_props$uploadFile = props.uploadFile) === null || _props$uploadFile === void 0 || _props$uploadFile.call(props, {
+                              fileList: fileList,
+                              basicVerifier: function () {
+                                var _basicVerifier = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(file) {
+                                  return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+                                    while (1) switch (_context2.prev = _context2.next) {
+                                      case 0:
+                                        _context2.next = 2;
+                                        return checkFile(file, verifierConfig || {});
+                                      case 2:
+                                        return _context2.abrupt("return", _context2.sent);
+                                      case 3:
+                                      case "end":
+                                        return _context2.stop();
+                                    }
+                                  }, _callee2);
+                                }));
+                                function basicVerifier(_x3) {
+                                  return _basicVerifier.apply(this, arguments);
+                                }
+                                return basicVerifier;
+                              }(),
+                              getMD5: function () {
+                                var _getMD = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(file) {
+                                  return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+                                    while (1) switch (_context3.prev = _context3.next) {
+                                      case 0:
+                                        _context3.next = 2;
+                                        return batchGetMD5(file);
+                                      case 2:
+                                        return _context3.abrupt("return", _context3.sent);
+                                      case 3:
+                                      case "end":
+                                        return _context3.stop();
+                                    }
+                                  }, _callee3);
+                                }));
+                                function getMD5(_x4) {
+                                  return _getMD.apply(this, arguments);
+                                }
+                                return getMD5;
+                              }(),
+                              taskQueue: TASK_QUEUE.current
+                            });
+                          case 1:
+                          case "end":
+                            return _context4.stop();
+                        }
+                      }, _callee4);
+                    }));
+                    function task() {
+                      return _task2.apply(this, arguments);
+                    }
+                    return task;
+                  }()
+                });
+              }
+              countNum.current = 0; // 重置计数
+            }
+            if (!isBatchProcess && hasUploadFile) {
+              (_CHECK_QUEUE$current2 = CHECK_QUEUE.current) === null || _CHECK_QUEUE$current2 === void 0 || _CHECK_QUEUE$current2.addTask({
+                id: file.uid,
+                task: function () {
+                  var _task3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee7() {
+                    var _props$uploadFile2;
+                    return _regeneratorRuntime().wrap(function _callee7$(_context7) {
+                      while (1) switch (_context7.prev = _context7.next) {
+                        case 0:
+                          props === null || props === void 0 || (_props$uploadFile2 = props.uploadFile) === null || _props$uploadFile2 === void 0 || _props$uploadFile2.call(props, {
+                            file: file,
+                            fileList: fileList,
+                            basicVerifier: function () {
+                              var _basicVerifier2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5(file) {
+                                return _regeneratorRuntime().wrap(function _callee5$(_context5) {
+                                  while (1) switch (_context5.prev = _context5.next) {
+                                    case 0:
+                                      _context5.next = 2;
+                                      return checkFile(file, (props === null || props === void 0 ? void 0 : props.verifierConfig) || {});
+                                    case 2:
+                                      return _context5.abrupt("return", _context5.sent);
+                                    case 3:
+                                    case "end":
+                                      return _context5.stop();
+                                  }
+                                }, _callee5);
+                              }));
+                              function basicVerifier(_x5) {
+                                return _basicVerifier2.apply(this, arguments);
+                              }
+                              return basicVerifier;
+                            }(),
+                            getMD5: function () {
+                              var _getMD2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee6(file) {
+                                return _regeneratorRuntime().wrap(function _callee6$(_context6) {
+                                  while (1) switch (_context6.prev = _context6.next) {
+                                    case 0:
+                                      _context6.next = 2;
+                                      return calculateMD5(file);
+                                    case 2:
+                                      return _context6.abrupt("return", _context6.sent);
+                                    case 3:
+                                    case "end":
+                                      return _context6.stop();
+                                  }
+                                }, _callee6);
+                              }));
+                              function getMD5(_x6) {
+                                return _getMD2.apply(this, arguments);
+                              }
+                              return getMD5;
+                            }(),
+                            taskQueue: TASK_QUEUE.current
+                          });
+                        case 1:
+                        case "end":
+                          return _context7.stop();
+                      }
+                    }, _callee7);
+                  }));
+                  function task() {
+                    return _task3.apply(this, arguments);
+                  }
+                  return task;
+                }()
+              });
+            }
+          case 4:
+          case "end":
+            return _context8.stop();
+        }
+      }, _callee8);
+    }));
+    return function beforeUpload(_x, _x2) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+  var onDrop = function onDrop(acceptedFiles, rejectedFiles, e) {
+    var _props$onDrop;
+    acceptedFiles.forEach(function (file) {
+      file.uid = getUid();
+    });
+    acceptedFiles === null || acceptedFiles === void 0 || acceptedFiles.forEach(function (item) {
+      beforeUpload(item, acceptedFiles);
+    });
+    props === null || props === void 0 || (_props$onDrop = props.onDrop) === null || _props$onDrop === void 0 || _props$onDrop.call(props, acceptedFiles, rejectedFiles, e);
+  };
+  var drMcUpload = useDropzone(_objectSpread(_objectSpread({}, rest || {}), {}, {
+    onDrop: onDrop
+  }));
+  var getRootProps = drMcUpload.getRootProps,
+    getInputProps = drMcUpload.getInputProps,
+    isDragActive = drMcUpload.isDragActive;
+  useEffect(function () {
+    if (props !== null && props !== void 0 && props.taskQueueRef) {
+      props.taskQueueRef.current = TASK_QUEUE.current;
+    }
+  }, []);
+  useImperativeHandle(ref, function () {
+    return {
+      open: function open() {
+        drMcUpload === null || drMcUpload === void 0 || drMcUpload.open();
+      },
+      control: drMcUpload
+    };
+  });
+  return /*#__PURE__*/_jsx("div", {
+    children: /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({}, getRootProps()), {}, {
+      children: [/*#__PURE__*/_jsx("input", _objectSpread({}, getInputProps())), /*#__PURE__*/_jsx(McUploadTriggerDrag, {
+        active: isDragActive,
+        children: (props === null || props === void 0 ? void 0 : props.children) && (props === null || props === void 0 || (_props$children = props.children) === null || _props$children === void 0 ? void 0 : _props$children.call(props, drMcUpload))
+      })]
+    }))
+  });
+});
+export default McUploadDragger;

package/dist/McUpload/comps/McUploadTrigger/index.css

@@ -0,0 +1,236 @@
+.uploadTrigger {
+  position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  border-radius: 4px;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  background: #f5f5f5;
+}
+.square-container {
+  width: 102px;
+  height: 102px;
+}
+.rectangle-container {
+  width: 90px;
+  height: 120px;
+}
+.circle-container {
+  width: 102px;
+  height: 102px;
+  border-radius: 50%;
+}
+.base {
+  width: 100%;
+  height: 100%;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-flow: column;
+  flex-flow: column;
+  border-radius: inherit;
+  gap: 8px;
+  position: relative;
+}
+.picture-container_default {
+  border: 1px dashed #d9d9d9;
+  -webkit-transition: border-color 0.3s, color 0.3s;
+  transition: border-color 0.3s, color 0.3s;
+}
+.picture-container_default:hover {
+  border: 1px dashed #325cf7;
+  color: #325cf7;
+}
+.picture-container_error {
+  background: rgba(255, 77, 79, 0.1);
+  border: 1px dashed #ff4d4f;
+}
+.picture-container_error:hover .mc-trigger-mask {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+.mc-trigger-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  border-radius: inherit;
+  width: 100%;
+  height: 100%;
+  display: none;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  gap: 8px;
+  background: rgba(0, 0, 0, 0.8) !important;
+}
+.img-container {
+  width: 100%;
+  height: 100%;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border-radius: inherit;
+}
+.img-container > img {
+  width: 100%;
+  height: 100% !important;
+  -o-object-fit: cover;
+  object-fit: cover;
+}
+.picture-container_uploading:hover .mc-trigger-mask {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+.picture-container_done {
+  width: 100%;
+  height: 100%;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  position: relative;
+  gap: 8px;
+}
+.picture-container_done:hover .mc-trigger-mask {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+.button-container {
+  height: 24px;
+  margin-top: 4px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  line-height: 1;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.button-container:hover {
+  background: #f5f5f5;
+}
+.button-container:hover .button-content-name-delete {
+  opacity: 1 !important;
+}
+.button-container .button-icon {
+  -webkit-box-sizing: inherit;
+  box-sizing: inherit;
+  padding: 4px 6px 6px;
+}
+.button-container .button-content {
+  height: 24px;
+  -webkit-box-flex: 1;
+  -ms-flex: 1 1;
+  flex: 1 1;
+  width: calc(100% - 48px);
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-flow: column;
+  flex-flow: column;
+  -webkit-box-pack: end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+}
+.button-container .button-content .button-content-name {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  width: 100%;
+}
+.button-container .button-content .button-content-name .button-content-name-delete {
+  opacity: 0;
+  padding: 4px;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.button-container .button-content .button-content-name .button-content-name-delete:hover {
+  background: #d9d9d9;
+}
+.button-container .button-content .button-content-name .delete_error {
+  opacity: 1;
+}
+.button-container .button-content .button-content-progress {
+  line-height: 2px;
+}
+.uploadTriggerDrag {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-flow: column;
+  flex-flow: column;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 24px;
+  border: 1px dashed #d9d9d9;
+  border-radius: 4px;
+  background: #f5f5f5;
+  cursor: pointer;
+}
+.uploadTriggerDrag .uploadTriggerDrag-icon {
+  margin-bottom: 16px;
+}
+.uploadTriggerDrag .uploadTriggerDrag-text {
+  font-weight: 500;
+  color: #262626;
+  margin-bottom: 8px;
+}
+.uploadTriggerDrag .uploadTriggerDrag-desc {
+  font-size: 12px;
+  color: #8c8c8c;
+}
+.uploadTriggerDrag.active {
+  border: 1px dashed #325cf7;
+  background: #eaeefe;
+}

package/dist/McUpload/comps/McUploadTrigger/index.d.ts

@@ -0,0 +1,39 @@
+import { Button, GetProps } from 'antd';
+import { FC, HTMLAttributes, ReactNode } from 'react';
+import './index.less';
+export declare enum E_McUploadTriggerType {
+    BUTTON = "button",
+    SQUARE = "square",
+    RECTANGLE = "rectangle",
+    CIRCLE = "circle",
+    DRAGGER = "dragger"
+}
+export declare enum E_McUploadTriggerStatus {
+    DEFAULT = "default",
+    UPLOADING = "uploading",
+    DONE = "done",
+    ERROR = "error"
+}
+export declare const McUploadTriggerButton: React.FC<{
+    status: E_McUploadTriggerStatus;
+    fileName?: ReactNode;
+    percent?: number;
+    onDelete?: () => void;
+    disabled?: boolean;
+    buttonProps?: GetProps<typeof Button>;
+    rootDivProps?: HTMLAttributes<HTMLDivElement>;
+}>;
+export type McUploadTriggerPictureProps = {
+    type?: E_McUploadTriggerType.SQUARE | E_McUploadTriggerType.RECTANGLE | E_McUploadTriggerType.CIRCLE;
+    status?: E_McUploadTriggerStatus;
+    url?: string;
+    percent?: number;
+    onDelete?: () => void;
+    disabled?: boolean;
+} & HTMLAttributes<HTMLDivElement>;
+export declare const McUploadTriggerPicture: React.FC<McUploadTriggerPictureProps>;
+export declare const McUploadTriggerDrag: FC<{
+    children?: ReactNode;
+    active?: boolean;
+    onUploadClick?: () => void;
+} & HTMLAttributes<HTMLDivElement>>;