@guiwzh/small-design 0.1.0 → 0.1.1

package/README.md

@@ -1,11 +1,11 @@
-# @guiwz/small-design
+# @guiwzh/small-design
 
 一套轻量级 React 组件库，基于 React 18 + TypeScript + SCSS 构建。
 
 ## 安装
 
 ```bash
-npm install @guiwz/small-design
+npm install @guiwzh/small-design
 ```
 
 ### Peer Dependencies
@@ -29,8 +29,8 @@ npm install react-router-dom
 ## 使用
 
 ```tsx
-import { Button, Menu, AutoComplete } from '@guiwz/small-design'
-import '@guiwz/small-design/dist/index.css'
+import { Button, Menu, AutoComplete } from '@guiwzh/small-design'
+import '@guiwzh/small-design/dist/index.css'
 ```
 
 ## 组件列表

package/dist/index.d.mts

@@ -1,8 +1,7 @@
-import React$1, { ReactNode, FC, InputHTMLAttributes, ReactElement, CSSProperties, PropsWithChildren, RefObject } from 'react';
+import React$1, { ReactNode, FC, InputHTMLAttributes, ReactElement, CSSProperties, RefObject } from 'react';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIconProps } from '@fortawesome/react-fontawesome';
 import { CSSTransitionProps } from 'react-transition-group/CSSTransition';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 
 type ButtonSize = 'lg' | 'sm';
 type ButtonType = 'primary' | 'default' | 'danger' | 'link';
@@ -126,9 +125,24 @@ interface UploadFile {
     percent?: number;
     error?: any;
 }
+interface UploadRequestOptions {
+    action: string;
+    file: File;
+    filename: string;
+    headers?: Record<string, string>;
+    data?: Record<string, string | Blob>;
+    withCredentials?: boolean;
+    onProgress: (percent: number) => void;
+    onSuccess: (response: any) => void;
+    onError: (error: any) => void;
+}
+interface UploadRequestReturn {
+    abort: () => void;
+}
 interface UploadProps {
     action: string;
     beforeUpload?: (file: File) => boolean | Promise<File>;
+    customRequest?: (options: UploadRequestOptions) => UploadRequestReturn;
     onprogress?: (percentage: number, file: UploadFile) => void;
     onSuccess?: (data: any, file: UploadFile) => void;
     onError?: (err: any, file: UploadFile) => void;
@@ -198,18 +212,8 @@ interface LazyloadProps {
 }
 declare const Lazyload: FC<LazyloadProps>;
 
-interface KeepAliveLayoutProps extends PropsWithChildren {
-    keepPaths: Array<string | RegExp>;
-    keepElements?: Record<string, ReactNode>;
-    dropByPath?: (path: string) => void;
-}
-type KeepAliveContextType = Omit<Required<KeepAliveLayoutProps>, "children">;
-declare const KeepAliveContext: React$1.Context<KeepAliveContextType>;
-declare function useKeepOutlet(): react_jsx_runtime.JSX.Element;
-declare const KeepAliveLayout: FC<KeepAliveLayoutProps>;
-
 declare function useDebounce<T>(value: T, delay?: number): T;
 
 declare function useClickOutside(ref: RefObject<HTMLElement>, handler: (event: MouseEvent) => void): void;
 
-export { type AutoCompletProps, AutoComplete, Button, type ButtonSize, type ButtonType, type DataSourceType, type IMenuComponent, Icon, type IconProps, Input, type InputProps, KeepAliveContext, KeepAliveLayout, Lazyload as LazyLoad, TransMenu as Menu, MenuItem, type MenuItemProps, type MenuProps, Progress, type ProgressProps, Signature, SubMenu, type SubMenuProps, type ThemeProps, Transition, Upload, type UploadFile, type UploadProps, VirtualList, useClickOutside, useDebounce, useKeepOutlet };
+export { type AutoCompletProps, AutoComplete, Button, type ButtonSize, type ButtonType, type DataSourceType, type IMenuComponent, Icon, type IconProps, Input, type InputProps, Lazyload as LazyLoad, TransMenu as Menu, MenuItem, type MenuItemProps, type MenuProps, Progress, type ProgressProps, Signature, SubMenu, type SubMenuProps, type ThemeProps, Transition, Upload, type UploadFile, type UploadProps, VirtualList, useClickOutside, useDebounce };

package/dist/index.d.ts

@@ -1,8 +1,7 @@
-import React$1, { ReactNode, FC, InputHTMLAttributes, ReactElement, CSSProperties, PropsWithChildren, RefObject } from 'react';
+import React$1, { ReactNode, FC, InputHTMLAttributes, ReactElement, CSSProperties, RefObject } from 'react';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIconProps } from '@fortawesome/react-fontawesome';
 import { CSSTransitionProps } from 'react-transition-group/CSSTransition';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 
 type ButtonSize = 'lg' | 'sm';
 type ButtonType = 'primary' | 'default' | 'danger' | 'link';
@@ -126,9 +125,24 @@ interface UploadFile {
     percent?: number;
     error?: any;
 }
+interface UploadRequestOptions {
+    action: string;
+    file: File;
+    filename: string;
+    headers?: Record<string, string>;
+    data?: Record<string, string | Blob>;
+    withCredentials?: boolean;
+    onProgress: (percent: number) => void;
+    onSuccess: (response: any) => void;
+    onError: (error: any) => void;
+}
+interface UploadRequestReturn {
+    abort: () => void;
+}
 interface UploadProps {
     action: string;
     beforeUpload?: (file: File) => boolean | Promise<File>;
+    customRequest?: (options: UploadRequestOptions) => UploadRequestReturn;
     onprogress?: (percentage: number, file: UploadFile) => void;
     onSuccess?: (data: any, file: UploadFile) => void;
     onError?: (err: any, file: UploadFile) => void;
@@ -198,18 +212,8 @@ interface LazyloadProps {
 }
 declare const Lazyload: FC<LazyloadProps>;
 
-interface KeepAliveLayoutProps extends PropsWithChildren {
-    keepPaths: Array<string | RegExp>;
-    keepElements?: Record<string, ReactNode>;
-    dropByPath?: (path: string) => void;
-}
-type KeepAliveContextType = Omit<Required<KeepAliveLayoutProps>, "children">;
-declare const KeepAliveContext: React$1.Context<KeepAliveContextType>;
-declare function useKeepOutlet(): react_jsx_runtime.JSX.Element;
-declare const KeepAliveLayout: FC<KeepAliveLayoutProps>;
-
 declare function useDebounce<T>(value: T, delay?: number): T;
 
 declare function useClickOutside(ref: RefObject<HTMLElement>, handler: (event: MouseEvent) => void): void;
 
-export { type AutoCompletProps, AutoComplete, Button, type ButtonSize, type ButtonType, type DataSourceType, type IMenuComponent, Icon, type IconProps, Input, type InputProps, KeepAliveContext, KeepAliveLayout, Lazyload as LazyLoad, TransMenu as Menu, MenuItem, type MenuItemProps, type MenuProps, Progress, type ProgressProps, Signature, SubMenu, type SubMenuProps, type ThemeProps, Transition, Upload, type UploadFile, type UploadProps, VirtualList, useClickOutside, useDebounce, useKeepOutlet };
+export { type AutoCompletProps, AutoComplete, Button, type ButtonSize, type ButtonType, type DataSourceType, type IMenuComponent, Icon, type IconProps, Input, type InputProps, Lazyload as LazyLoad, TransMenu as Menu, MenuItem, type MenuItemProps, type MenuProps, Progress, type ProgressProps, Signature, SubMenu, type SubMenuProps, type ThemeProps, Transition, Upload, type UploadFile, type UploadProps, VirtualList, useClickOutside, useDebounce };

package/dist/index.js

@@ -27,15 +27,13 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/index.ts
-var index_exports = {};
-__export(index_exports, {
+// src/lib.ts
+var lib_exports = {};
+__export(lib_exports, {
   AutoComplete: () => autoComplete_default,
   Button: () => button_default,
   Icon: () => icon_default,
   Input: () => input_default,
-  KeepAliveContext: () => KeepAliveContext,
-  KeepAliveLayout: () => Keepalive_default,
   LazyLoad: () => lazyLoad_default,
   Menu: () => Menu_default,
   MenuItem: () => menuItem_default,
@@ -46,10 +44,9 @@ __export(index_exports, {
   Upload: () => upload_default,
   VirtualList: () => virtualList_default,
   useClickOutside: () => useClickOutside_default,
-  useDebounce: () => useDebounce_default,
-  useKeepOutlet: () => useKeepOutlet
+  useDebounce: () => useDebounce_default
 });
-module.exports = __toCommonJS(index_exports);
+module.exports = __toCommonJS(lib_exports);
 
 // src/components/Button/button.tsx
 var import_classnames = __toESM(require("classnames"));
@@ -545,7 +542,6 @@ var autoComplete_default = AutoComplete;
 
 // src/components/Upload/upload.tsx
 var import_react9 = require("react");
-var import_axios = __toESM(require("axios"));
 
 // src/components/Progress/progress.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
@@ -668,10 +664,57 @@ var dragger_default = Dragger;
 
 // src/components/Upload/upload.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
+function defaultRequest(options) {
+  const { action, file, filename, headers, data, withCredentials, onProgress, onSuccess, onError } = options;
+  const formData = new FormData();
+  formData.append(filename, file);
+  if (data) {
+    Object.keys(data).forEach((key) => formData.append(key, data[key]));
+  }
+  const xhr = new XMLHttpRequest();
+  xhr.upload.addEventListener("progress", (e) => {
+    if (e.lengthComputable) {
+      const percent = Math.floor(e.loaded * 100 / e.total);
+      onProgress(percent);
+    }
+  });
+  xhr.addEventListener("load", () => {
+    if (xhr.status >= 200 && xhr.status < 300) {
+      let response;
+      try {
+        response = JSON.parse(xhr.responseText);
+      } catch (e) {
+        response = xhr.responseText;
+      }
+      onSuccess(response);
+    } else {
+      onError(new Error(`Upload failed with status ${xhr.status}`));
+    }
+  });
+  xhr.addEventListener("error", () => {
+    onError(new Error("Upload failed due to network error"));
+  });
+  xhr.addEventListener("abort", () => {
+  });
+  xhr.open("POST", action, true);
+  if (headers) {
+    Object.keys(headers).forEach((key) => {
+      xhr.setRequestHeader(key, headers[key]);
+    });
+  }
+  if (withCredentials) {
+    xhr.withCredentials = true;
+  }
+  xhr.send(formData);
+  return {
+    abort: () => xhr.abort()
+  };
+}
 var Upload = (props) => {
   const {
     action,
     beforeUpload,
+    customRequest,
     onprogress,
     onSuccess,
     onError,
@@ -698,6 +741,7 @@ var Upload = (props) => {
   const abortRecord = (0, import_react9.useRef)({});
   const FileRecord = (0, import_react9.useRef)(/* @__PURE__ */ new Set());
   const [fileList, setFileList] = (0, import_react9.useState)([]);
+  const request = customRequest || defaultRequest;
   const handleClick = () => {
     var _a;
     (_a = fileInput.current) == null ? void 0 : _a.click();
@@ -709,21 +753,19 @@ var Upload = (props) => {
     }
     let concurrency = 0;
     const queue = [];
-    function AskTask(task) {
-      return new Promise(() => {
-        const executeRequest = () => {
-          concurrency++;
-          task[0]().then(() => {
-            concurrency--;
-            nextTask();
-          });
-        };
-        if (concurrency < limit) {
-          executeRequest();
-        } else {
-          queue.push([executeRequest, task[1]]);
-        }
-      });
+    function askTask(task) {
+      const executeRequest = () => {
+        concurrency++;
+        task[0]().then(() => {
+          concurrency--;
+          nextTask();
+        });
+      };
+      if (concurrency < limit) {
+        executeRequest();
+      } else {
+        queue.push([executeRequest, task[1]]);
+      }
     }
     function nextTask() {
       if (concurrency < limit && queue.length > 0) {
@@ -738,7 +780,7 @@ var Upload = (props) => {
     }
     let uidCounter = 0;
     function dealFile(file) {
-      let _file = {
+      const _file = {
         uid: `upload-file-${Date.now()}-${uidCounter++}`,
         size: file.size,
         name: file.name,
@@ -754,54 +796,40 @@ var Upload = (props) => {
             isSame = true;
           }
         }
-        if (isSame) return prevList;
+        if (isSame) return [...prevList];
         return [_file, ...prevList];
       });
-      const formData = new FormData();
-      formData.append(name || "file", file);
-      data && Object.keys(data).forEach((key) => formData.append(key, data[key]));
-      const controller = new AbortController();
-      abortRecord.current = { ...abortRecord.current, [_file.uid]: controller };
-      return [_file, formData, controller];
+      return _file;
     }
-    const post = (_file, formData, controller, try_nums) => {
+    const post = (_file, tryNums) => {
       return new Promise((resolve) => {
-        import_axios.default.post(action, formData, {
-          headers: {
-            ...headers,
-            "Content-Type": "multipart/form-data"
-          },
+        const requestReturn = request({
+          action,
+          file: _file.raw,
+          filename: name || "file",
+          headers,
+          data,
           withCredentials,
-          signal: controller.signal,
-          onUploadProgress: (e) => {
-            let percentage = Math.floor(e.loaded * 100 / e.total || 0);
-            if (percentage < 100) {
-              updateFileList(_file, {
-                percent: percentage,
-                status: "uploading"
-              });
+          onProgress: (percent) => {
+            if (percent < 100) {
+              updateFileList(_file, { percent, status: "uploading" });
               _file.status = "uploading";
-              _file.percent = percentage;
-              onprogress == null ? void 0 : onprogress(percentage, _file);
+              _file.percent = percent;
+              onprogress == null ? void 0 : onprogress(percent, _file);
             }
-          }
-        }).then((res) => {
-          updateFileList(_file, { status: "success", response: res.data });
-          _file.status = "success";
-          _file.response = res.data;
-          onSuccess == null ? void 0 : onSuccess(res.data, _file);
-          onChange == null ? void 0 : onChange(_file);
-          resolve("success");
-        }).catch((err) => {
-          if (import_axios.default.isCancel(err)) {
-            resolve("cancel");
-          } else {
-            if (try_nums < failednums) {
-              const [_file_new, formData2, controller2] = dealFile(_file.raw);
-              AskTask([
-                () => post(_file_new, formData2, controller2, try_nums + 1),
-                _file.name
-              ]);
+          },
+          onSuccess: (response) => {
+            updateFileList(_file, { status: "success", response });
+            _file.status = "success";
+            _file.response = response;
+            onSuccess == null ? void 0 : onSuccess(response, _file);
+            onChange == null ? void 0 : onChange(_file);
+            resolve("success");
+          },
+          onError: (err) => {
+            if (tryNums < failednums) {
+              const newFile = dealFile(_file.raw);
+              askTask([() => post(newFile, tryNums + 1), _file.name]);
             }
             updateFileList(_file, { status: "error", error: err });
             _file.status = "error";
@@ -811,9 +839,10 @@ var Upload = (props) => {
             resolve("failed");
           }
         });
+        abortRecord.current[_file.uid] = requestReturn;
       });
     };
-    let postFiles = Array.from(files);
+    const postFiles = Array.from(files);
     postFiles.forEach((file) => {
       if (maxsize && file.size > maxsize * 1024 * 1024) {
         onExceed == null ? void 0 : onExceed(`\u6587\u4EF6\u5927\u5C0F\u4E0D\u80FD\u8D85\u8FC7${maxsize}Mb`);
@@ -821,18 +850,18 @@ var Upload = (props) => {
       }
       FileRecord.current.add(file.name);
       if (!beforeUpload) {
-        const [_file, formData, source] = dealFile(file);
-        AskTask([() => post(_file, formData, source, 0), file.name]);
+        const _file = dealFile(file);
+        askTask([() => post(_file, 0), file.name]);
       } else {
         const result = beforeUpload(file);
         if (result && result instanceof Promise) {
-          result.then((processedFile) => {
-            const [_file, formData, source] = dealFile(file);
-            AskTask([() => post(_file, formData, source, 0), file.name]);
+          result.then(() => {
+            const _file = dealFile(file);
+            askTask([() => post(_file, 0), file.name]);
           });
         } else if (result) {
-          const [_file, formData, source] = dealFile(file);
-          AskTask([() => post(_file, formData, source, 0), file.name]);
+          const _file = dealFile(file);
+          askTask([() => post(_file, 0), file.name]);
         }
       }
     });
@@ -1109,74 +1138,12 @@ var Lazyload = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { ref: containerRef, className, style: styles, children: visible ? children : placeholder });
 };
 var lazyLoad_default = Lazyload;
-
-// src/components/Keepalive/Keepalive.tsx
-var import_react13 = require("react");
-var import_react_router_dom = require("react-router-dom");
-var import_jsx_runtime16 = require("react/jsx-runtime");
-var KeepAliveContext = (0, import_react13.createContext)({
-  keepPaths: [],
-  keepElements: {},
-  dropByPath() {
-  }
-});
-var isKeepPath = (keepPaths, path) => {
-  for (let i = 0; i < keepPaths.length; i++) {
-    let item = keepPaths[i];
-    if (item === path) return true;
-    if (item instanceof RegExp && item.test(path)) return true;
-    if (typeof item === "string" && item.toLowerCase() === path) return true;
-  }
-  return false;
-};
-function useKeepOutlet() {
-  const location = (0, import_react_router_dom.useLocation)();
-  const element = (0, import_react_router_dom.useOutlet)();
-  const { keepElements, keepPaths } = (0, import_react13.useContext)(KeepAliveContext);
-  const isKeep = isKeepPath(keepPaths, location.pathname);
-  const keepElementsRef = (0, import_react13.useRef)(keepElements);
-  keepElementsRef.current = keepElements;
-  (0, import_react13.useEffect)(() => {
-    if (isKeep && element) {
-      keepElementsRef.current[location.pathname] = element;
-    }
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
-    Object.entries(keepElements).map(([pathname, el]) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-      "div",
-      {
-        style: {
-          height: "100%",
-          width: "100%",
-          position: "relative",
-          overflow: "hidden auto"
-        },
-        className: "keep-alive-page",
-        hidden: !(0, import_react_router_dom.matchPath)(location.pathname, pathname),
-        children: el
-      },
-      pathname
-    )),
-    !isKeep && element
-  ] });
-}
-var KeepAliveLayout = (props) => {
-  const { keepPaths, children } = props;
-  const [keepElements] = (0, import_react13.useState)({});
-  const dropByPath = (path) => {
-    delete keepElements[path];
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(KeepAliveContext.Provider, { value: { keepPaths, keepElements, dropByPath }, children });
-};
-var Keepalive_default = KeepAliveLayout;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AutoComplete,
   Button,
   Icon,
   Input,
-  KeepAliveContext,
-  KeepAliveLayout,
   LazyLoad,
   Menu,
   MenuItem,
@@ -1187,7 +1154,6 @@ var Keepalive_default = KeepAliveLayout;
   Upload,
   VirtualList,
   useClickOutside,
-  useDebounce,
-  useKeepOutlet
+  useDebounce
 });
 //# sourceMappingURL=index.js.map