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

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/{esm/McUpload → McUpload}/comps/McUploadTrigger/index.js

@@ -9,7 +9,7 @@ import { Button, Image, Progress, Spin } from 'antd';
 import classNames from 'classnames';
 import { useState } from 'react';
 import { isNumber } from "../../tools/materialVerification";
-import "./index.less";
+import "./index.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";

package/dist/McUpload/demo/base.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/McUpload/demo/base.js

@@ -0,0 +1,26 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+/**
+ * title: 点击上传
+ * description: 经典款式，用户点击按钮弹出文件选择框。
+ */
+import { message } from 'antd';
+import { E_McUploadTriggerType, McUpload } from "../..";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default (function () {
+  var props = {
+    name: 'file',
+    action: 'https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload',
+    headers: {
+      authorization: 'authorization-text'
+    },
+    onChange: function onChange(info) {
+      if (info.file.status === 'done') {
+        message.success("".concat(info.file.name, " file uploaded successfully"));
+      } else if (info.file.status === 'error') {
+        message.error("".concat(info.file.name, " file upload failed."));
+      }
+    },
+    listType: E_McUploadTriggerType.BUTTON
+  };
+  return /*#__PURE__*/_jsx(McUpload, _objectSpread({}, props));
+});

package/dist/McUpload/demo/beforeUploadDemo.d.ts

@@ -0,0 +1,6 @@
+/**
+ * title: 增强的beforeUpload
+ * description: beforeUpolad参数中增加文件MD5哈希方法、校验方法（需和verifierConfig属性搭配使用）、任务队列（也可通过配置组件的taskQueueRef属性获取）
+ */
+declare const BaforeUploadDemo: () => import("react/jsx-runtime").JSX.Element;
+export default BaforeUploadDemo;

package/dist/McUpload/demo/beforeUploadDemo.js

@@ -0,0 +1,147 @@
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/**
+ * title: 增强的beforeUpload
+ * description: beforeUpolad参数中增加文件MD5哈希方法、校验方法（需和verifierConfig属性搭配使用）、任务队列（也可通过配置组件的taskQueueRef属性获取）
+ */
+
+import { message } from 'antd';
+import { E_McUploadTriggerType, McUpload } from "../..";
+import { useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var BaforeUploadDemo = function BaforeUploadDemo() {
+  var _useState = useState([{
+      uid: '-1',
+      name: 'xxx.png',
+      status: 'done',
+      url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
+    }]),
+    _useState2 = _slicedToArray(_useState, 2),
+    fileList = _useState2[0],
+    setFileList = _useState2[1];
+  var _useState3 = useState({
+      name: '喝咖啡的小姐姐.jpg',
+      md5: '30415542c74c2cdeb157b40cbb62bd21'
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    fileInfo = _useState4[0],
+    setFileInfo = _useState4[1];
+  var getBase64 = function getBase64(file) {
+    return new Promise(function (resolve, reject) {
+      var reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onload = function () {
+        return resolve(reader.result);
+      };
+      reader.onerror = function (error) {
+        return reject(error);
+      };
+    });
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    children: [/*#__PURE__*/_jsx(McUpload, {
+      accept: "image/*",
+      listType: E_McUploadTriggerType.SQUARE,
+      fileList: fileList,
+      verifierConfig: {
+        size: {
+          min: 0,
+          max: 1024 * 1024 * 1
+        }
+      },
+      beforeUpload: ( /*#__PURE__*/function () {
+        var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(_ref) {
+          var file, getMD5, taskQueue, basicVerifier, res, _res$errList, md5;
+          return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+            while (1) switch (_context2.prev = _context2.next) {
+              case 0:
+                file = _ref.file, getMD5 = _ref.getMD5, taskQueue = _ref.taskQueue, basicVerifier = _ref.basicVerifier;
+                _context2.next = 3;
+                return basicVerifier(file);
+              case 3:
+                res = _context2.sent;
+                if (res.isPassed) {
+                  _context2.next = 7;
+                  break;
+                }
+                message.error(res === null || res === void 0 || (_res$errList = res.errList) === null || _res$errList === void 0 || (_res$errList = _res$errList[0]) === null || _res$errList === void 0 || (_res$errList = _res$errList.messages) === null || _res$errList === void 0 ? void 0 : _res$errList[0]);
+                return _context2.abrupt("return", false);
+              case 7:
+                _context2.next = 9;
+                return getMD5(file);
+              case 9:
+                md5 = _context2.sent;
+                taskQueue.addTask({
+                  id: md5,
+                  task: function () {
+                    var _task = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+                      var base64;
+                      return _regeneratorRuntime().wrap(function _callee$(_context) {
+                        while (1) switch (_context.prev = _context.next) {
+                          case 0:
+                            _context.next = 2;
+                            return getBase64(file);
+                          case 2:
+                            base64 = _context.sent;
+                            setFileInfo({
+                              md5: md5,
+                              name: file.name
+                            });
+                            setFileList(function (prev) {
+                              return [].concat(_toConsumableArray(prev), [{
+                                uid: file.uid,
+                                name: file.name,
+                                status: 'done',
+                                url: base64
+                              }]);
+                            });
+                          case 5:
+                          case "end":
+                            return _context.stop();
+                        }
+                      }, _callee);
+                    }));
+                    function task() {
+                      return _task.apply(this, arguments);
+                    }
+                    return task;
+                  }()
+                });
+              case 11:
+              case "end":
+                return _context2.stop();
+            }
+          }, _callee2);
+        }));
+        return function (_x) {
+          return _ref2.apply(this, arguments);
+        };
+      }()),
+      onChange: function onChange(info) {
+        var file = info.file;
+        if (file.status === 'removed') {
+          setFileList(function (prev) {
+            return prev.filter(function (item) {
+              return item.uid !== file.uid;
+            });
+          });
+        }
+      }
+    }), /*#__PURE__*/_jsxs("div", {
+      style: {
+        marginTop: 20,
+        fontSize: 12,
+        color: '#8c8c8c'
+      },
+      children: [/*#__PURE__*/_jsxs("div", {
+        children: ["\u6587\u4EF6\u540D\uFF1A", fileInfo.name || '']
+      }), /*#__PURE__*/_jsxs("div", {
+        children: ["md5\uFF1A", fileInfo.md5 || '']
+      })]
+    })]
+  });
+};
+export default BaforeUploadDemo;

package/dist/McUpload/demo/complexVerification.d.ts

@@ -0,0 +1,7 @@
+/**
+ * title: 复杂校验
+ * description: 如一个视频文件大小不得超过15MB，时长不能错过10秒，宽度最大为160px,高度最大为90px,显示宽高比为16:9，这些可配置在verifierConfig属性中，beforeUpload的basicVerifier方法会校验这些配置，并返回校验结果（当第一个属性校验不通过时停止校验剩余属性）
+ *
+ */
+declare const ComplexVerification: () => import("react/jsx-runtime").JSX.Element;
+export default ComplexVerification;

package/dist/McUpload/demo/complexVerification.js

@@ -0,0 +1,139 @@
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/**
+ * title: 复杂校验
+ * description: 如一个视频文件大小不得超过15MB，时长不能错过10秒，宽度最大为160px,高度最大为90px,显示宽高比为16:9，这些可配置在verifierConfig属性中，beforeUpload的basicVerifier方法会校验这些配置，并返回校验结果（当第一个属性校验不通过时停止校验剩余属性）
+ *
+ */
+
+import { message } from 'antd';
+import { E_McUploadTriggerType, McUpload } from "../..";
+import { useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var ComplexVerification = function ComplexVerification() {
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    fileList = _useState2[0],
+    setFileList = _useState2[1];
+  var _useState3 = useState({}),
+    _useState4 = _slicedToArray(_useState3, 2),
+    fileInfo = _useState4[0],
+    setFileInfo = _useState4[1];
+  var getBase64 = function getBase64(file) {
+    return new Promise(function (resolve, reject) {
+      var reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onload = function () {
+        return resolve(reader.result);
+      };
+      reader.onerror = function (error) {
+        return reject(error);
+      };
+    });
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    children: [/*#__PURE__*/_jsx(McUpload, {
+      accept: "video/*",
+      listType: E_McUploadTriggerType.SQUARE,
+      fileList: fileList,
+      verifierConfig: {
+        size: {
+          min: 0,
+          max: 1024 * 1024 * 15
+        }
+      },
+      beforeUpload: ( /*#__PURE__*/function () {
+        var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(_ref) {
+          var file, getMD5, taskQueue, basicVerifier, res, _res$errList, md5;
+          return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+            while (1) switch (_context2.prev = _context2.next) {
+              case 0:
+                file = _ref.file, getMD5 = _ref.getMD5, taskQueue = _ref.taskQueue, basicVerifier = _ref.basicVerifier;
+                _context2.next = 3;
+                return basicVerifier(file);
+              case 3:
+                res = _context2.sent;
+                setFileInfo(res);
+                if (res.isPassed) {
+                  _context2.next = 8;
+                  break;
+                }
+                message.error(res === null || res === void 0 || (_res$errList = res.errList) === null || _res$errList === void 0 || (_res$errList = _res$errList[0]) === null || _res$errList === void 0 || (_res$errList = _res$errList.messages) === null || _res$errList === void 0 ? void 0 : _res$errList[0]);
+                return _context2.abrupt("return", false);
+              case 8:
+                _context2.next = 10;
+                return getMD5(file);
+              case 10:
+                md5 = _context2.sent;
+                taskQueue.addTask({
+                  id: md5,
+                  task: function () {
+                    var _task = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+                      var base64;
+                      return _regeneratorRuntime().wrap(function _callee$(_context) {
+                        while (1) switch (_context.prev = _context.next) {
+                          case 0:
+                            _context.next = 2;
+                            return getBase64(file);
+                          case 2:
+                            base64 = _context.sent;
+                            setFileInfo({
+                              md5: md5,
+                              name: file.name
+                            });
+                            setFileList(function (prev) {
+                              return [].concat(_toConsumableArray(prev), [{
+                                uid: file.uid,
+                                name: file.name,
+                                status: 'done',
+                                url: base64
+                              }]);
+                            });
+                          case 5:
+                          case "end":
+                            return _context.stop();
+                        }
+                      }, _callee);
+                    }));
+                    function task() {
+                      return _task.apply(this, arguments);
+                    }
+                    return task;
+                  }()
+                });
+              case 12:
+              case "end":
+                return _context2.stop();
+            }
+          }, _callee2);
+        }));
+        return function (_x) {
+          return _ref2.apply(this, arguments);
+        };
+      }()),
+      onChange: function onChange(info) {
+        var file = info.file;
+        if (file.status === 'removed') {
+          setFileList(function (prev) {
+            return prev.filter(function (item) {
+              return item.uid !== file.uid;
+            });
+          });
+        }
+      }
+    }), /*#__PURE__*/_jsx("div", {
+      style: {
+        marginTop: 20,
+        fontSize: 12,
+        color: '#8c8c8c'
+      },
+      children: /*#__PURE__*/_jsxs("div", {
+        children: ["\u68C0\u9A8C\u7ED3\u679C\uFF1A", JSON.stringify(fileInfo || {}, null, 2)]
+      })
+    })]
+  });
+};
+export default ComplexVerification;

package/dist/McUpload/demo/drager.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const Dragger: React.FC;
+export default Dragger;

package/dist/McUpload/demo/drager.js

@@ -0,0 +1,25 @@
+/**
+ * title: 拖拽上传
+ * description: 支持点击、拖拽上传，会返回文件相对于拖拽的文件夹的路径,适用于需要继承文件夹路径的场景。
+ */
+import { McUpload } from "../..";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var Dragger = function Dragger() {
+  return /*#__PURE__*/_jsx(McUpload.Dragger, {
+    uploadFile: function uploadFile(info) {
+      console.log(info);
+    },
+    children: function children() {
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx("div", {
+          children: "1. \u4EC5\u652F\u6301\u4E0A\u4F20\u89C6\u9891\u6587\u4EF6"
+        }), /*#__PURE__*/_jsx("div", {
+          children: "2. \u786E\u4FDD\u4E0A\u4F20\u5267\u96C6\u7684\u5185\u5BB9\u8FDE\u8D2F\u3001\u4E0D\u5305\u542B\u654F\u611F\u5185\u5BB9"
+        })]
+      });
+    }
+  });
+};
+export default Dragger;

package/dist/McUpload/demo/formUpload.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const FormUpload: React.FC;
+export default FormUpload;