szld-libs 0.1.7 → 0.1.8

package/es/components/BackHeader/index.d.ts

@@ -7,6 +7,7 @@ interface BackHeaderProps {
     className?: string;
     style?: CSSProperties;
     titleStyle?: CSSProperties;
+    level?: 1 | 2 | 3 | 4 | 5;
 }
 declare const BackHeader: (props: BackHeaderProps) => JSX.Element;
 export default BackHeader;

package/es/components/BackHeader/index.js

@@ -20,7 +20,8 @@ const BackHeader = (props) => {
     subTitle = null,
     className,
     style,
-    titleStyle
+    titleStyle,
+    level = 2
   } = props;
   const navigate = useNavigate();
   const renderSubtitle = () => {
@@ -35,7 +36,7 @@ const BackHeader = (props) => {
   return /* @__PURE__ */ jsxs("div", { className: classNames(styles.main, className), style, children: [
     /* @__PURE__ */ jsxs(Space, { children: [
       isBack && /* @__PURE__ */ jsx(ArrowLeftOutlined, { style: { fontSize: 24 }, onClick: goBack }),
-      /* @__PURE__ */ jsxs(Title, { level: 2, className: styles.title, style: titleStyle, children: [
+      /* @__PURE__ */ jsxs(Title, { level, className: styles.title, style: titleStyle, children: [
         title2,
         renderSubtitle()
       ] })

package/es/components/Upload/index.d.ts

@@ -4,6 +4,11 @@ export interface UploadFileProps extends UploadProps {
     maxSize?: number;
     uploadBtnName?: string | ReactNode;
     uploadHint?: any;
+    compression?: {
+        type?: string;
+        quality?: number;
+        limit?: number;
+    };
 }
 declare const UploadFile: (props: UploadFileProps) => JSX.Element;
 export default UploadFile;

package/es/components/Upload/index.js

@@ -5,6 +5,7 @@ import { FileSuffix } from "../../utils/filetype";
 import { useState } from "react";
 import { getFileSuffix, getBase64 } from "../../utils";
 import "react-dom";
+import { compressionFile } from "../../utils/compression-file";
 const defaultFileType = [FileSuffix.jpeg, FileSuffix.jpg, FileSuffix.png];
 const UploadFile = (props) => {
   const {
@@ -14,7 +15,8 @@ const UploadFile = (props) => {
     maxSize = 2,
     accept = defaultFileType.join(","),
     uploadBtnName = "上传",
-    uploadHint = null
+    uploadHint = null,
+    compression
   } = props;
   const [preview, setPreview] = useState(false);
   const [previewSrc, setPreviewSrc] = useState("");
@@ -34,18 +36,33 @@ const UploadFile = (props) => {
     ] });
   };
   const beforeUpload = (file) => {
-    const acceptList = accept.split(",");
-    const suffix = getFileSuffix(file.name) || "";
-    if (!acceptList.includes(suffix)) {
-      message.error(`只允许上传 ${accept} 文件`);
-      return Upload.LIST_IGNORE;
-    }
-    const isLess = file.size / 1024 / 1024 < maxSize;
-    if (!isLess) {
-      message.error(`文件必须小于${maxSize}MB`);
+    const result = new Promise((resolve, reject) => {
+      const acceptList = accept.split(",");
+      const suffix = getFileSuffix(file.name) || "";
+      if (!acceptList.includes(suffix)) {
+        message.error(`只允许上传 ${accept} 文件`);
+        reject(false);
+      }
+      const isLess = file.size / 1024 / 1024 < maxSize;
+      if (!isLess) {
+        message.error(`文件必须小于${maxSize}MB`);
+        reject(false);
+      }
+      if (compression) {
+        resolve(
+          compressionFile(
+            file,
+            compression.type,
+            compression.quality,
+            compression.limit
+          )
+        );
+      }
+      resolve(file);
+    }).catch((err) => {
       return Upload.LIST_IGNORE;
-    }
-    return true;
+    });
+    return result;
   };
   const onChange = (info) => {
     props.onChange && props.onChange(info);

package/es/index.js

@@ -2,11 +2,12 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import ReactDOM from "react-dom/client";
 import { BrowserRouter } from "react-router-dom";
-import { EditTable, showWorkFlow } from "./main";
-import { Form, Button } from "antd";
+import { UploadFile, showWorkFlow } from "./main";
+import { Form, Button, Input } from "antd";
+import { fileToDataURL, compressionFile } from "./utils/compression-file";
 const Demo = () => {
   Form.useForm();
-  const [list, setList] = useState([
+  useState([
     {
       PNOrderNo: 1,
       PNName: "未分配",
@@ -26,40 +27,6 @@ const Demo = () => {
       Remark: ""
     }
   ]);
-  const columns = [
-    {
-      dataIndex: "PNOrderNo",
-      title: "序号",
-      width: 80
-    },
-    {
-      dataIndex: "PNName",
-      title: "节点名称"
-    },
-    {
-      dataIndex: "PlanFinishDate",
-      title: "预计完成时间",
-      editable: true,
-      width: 400,
-      type: "datePicker",
-      valueProps: {
-        placeholder: "请输入内容"
-      }
-    },
-    {
-      dataIndex: "Remark",
-      title: "备注",
-      editable: true,
-      type: "textarea",
-      width: 400,
-      valueProps: {
-        placeholder: "请输入内容",
-        autoSize: {
-          minRows: 3
-        }
-      }
-    }
-  ];
   useState(
     Array.from({ length: 1e5 }, (_, key) => ({
       key,
@@ -68,6 +35,8 @@ const Demo = () => {
     }))
   );
   useState(false);
+  const [file, setFile] = useState("");
+  const [file2, setFile2] = useState("");
   useState([
     {
       uid: "-1",
@@ -102,20 +71,29 @@ const Demo = () => {
       renderContent: (record) => /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("p", { children: record.PNName }) })
     });
   };
+  const onChange = async (e) => {
+    console.log(e);
+    const file3 = e.target.files[0];
+    const base64 = await fileToDataURL(file3);
+    setFile(base64);
+    const newFile = await compressionFile(file3, "image/jpeg", 0.2);
+    console.log(newFile);
+    const base64_2 = await fileToDataURL(newFile);
+    setFile2(base64_2);
+  };
   return /* @__PURE__ */ jsxs("div", { style: { height: "100vh" }, children: [
     /* @__PURE__ */ jsx(Button, { onClick: handleClick, children: "click" }),
+    /* @__PURE__ */ jsx(Input, { type: "file", onChange }),
     /* @__PURE__ */ jsx(
-      EditTable,
+      UploadFile,
       {
-        columns,
-        rowKey: "PNOrderNo",
-        onChange: (row) => {
-          console.log(row);
-        },
-        dataSource: list,
-        pagination: false
+        compression: { type: "image/jpeg", quality: 0.2, limit: 300 },
+        maxSize: 100,
+        onChange: (info) => console.log(info)
       }
-    )
+    ),
+    /* @__PURE__ */ jsx("img", { src: file, style: { width: 400 } }),
+    /* @__PURE__ */ jsx("img", { src: file2, style: { width: 400 } })
   ] });
 };
 ReactDOM.createRoot(document.getElementById("root")).render(

package/es/utils/compression-file.d.ts

@@ -0,0 +1,11 @@
+export declare const fileToDataURL: (file: Blob | File) => Promise<any>;
+export declare const dataURLToImage: (dataURL: string) => Promise<HTMLImageElement>;
+/**
+ * 图片压缩方法
+ * @param {Object}  file 图片文件
+ * @param {String} type 想压缩成的文件类型
+ * @param {Nubmber} quality 压缩质量参数
+ * @param {limit} limit 最小限制大小，小于该值时不进行压缩
+ * @returns 压缩后的新图片
+ */
+export declare const compressionFile: (file: File, type?: string, quality?: number, limit?: number) => Promise<File>;

package/es/utils/compression-file.js

@@ -0,0 +1,65 @@
+const fileToDataURL = (file) => {
+  return new Promise((resolve) => {
+    const reader = new FileReader();
+    reader.onloadend = (e) => resolve(e.target.result);
+    reader.readAsDataURL(file);
+  });
+};
+const dataURLToImage = (dataURL) => {
+  return new Promise((resolve) => {
+    const img = new Image();
+    img.onload = () => resolve(img);
+    img.src = dataURL;
+  });
+};
+const canvastoFile = (canvas, type, quality) => {
+  return new Promise(
+    (resolve) => canvas.toBlob((blob) => resolve(blob), type, quality)
+  );
+};
+const scaleWidthHeight = (img) => {
+  const maxWidth = 1400;
+  const maxHeight = 1400;
+  const originWidth = img.width;
+  const originHeight = img.height;
+  let targetWidth = img.width;
+  let targetHeight = img.height;
+  if (originWidth > maxWidth || originHeight > maxHeight) {
+    if (originWidth / originHeight > maxWidth / maxHeight) {
+      targetWidth = maxWidth;
+      targetHeight = Math.round(maxWidth * (originHeight / originWidth));
+    } else {
+      targetHeight = maxHeight;
+      targetWidth = Math.round(maxHeight * (originWidth / originHeight));
+    }
+  }
+  return {
+    width: targetWidth,
+    height: targetHeight
+  };
+};
+const compressionFile = async (file, type = "image/jpeg", quality = 0.5, limit = 300) => {
+  const fileName = file.name;
+  if (file.size / 1024 < limit) {
+    return file;
+  }
+  const canvas = document.createElement("canvas");
+  const context = canvas.getContext("2d");
+  const base64 = await fileToDataURL(file);
+  const img = await dataURLToImage(base64);
+  const target = scaleWidthHeight(img);
+  canvas.width = target.width;
+  canvas.height = target.height;
+  context.clearRect(0, 0, target.width, target.height);
+  context.drawImage(img, 0, 0, target.width, target.height);
+  const blob = await canvastoFile(canvas, type, quality);
+  const newFile = new File([blob], fileName, {
+    type
+  });
+  return newFile;
+};
+export {
+  compressionFile,
+  dataURLToImage,
+  fileToDataURL
+};

package/lib/components/BackHeader/index.d.ts

@@ -7,6 +7,7 @@ interface BackHeaderProps {
     className?: string;
     style?: CSSProperties;
     titleStyle?: CSSProperties;
+    level?: 1 | 2 | 3 | 4 | 5;
 }
 declare const BackHeader: (props: BackHeaderProps) => JSX.Element;
 export default BackHeader;

package/lib/components/BackHeader/index.js

@@ -21,7 +21,8 @@ const BackHeader = (props) => {
     subTitle = null,
     className,
     style,
-    titleStyle
+    titleStyle,
+    level = 2
   } = props;
   const navigate = reactRouterDom.useNavigate();
   const renderSubtitle = () => {
@@ -36,7 +37,7 @@ const BackHeader = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames(styles.main, className), style, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(antd.Space, { children: [
       isBack && /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowLeftOutlined, { style: { fontSize: 24 }, onClick: goBack }),
-      /* @__PURE__ */ jsxRuntime.jsxs(Title, { level: 2, className: styles.title, style: titleStyle, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Title, { level, className: styles.title, style: titleStyle, children: [
         title2,
         renderSubtitle()
       ] })

package/lib/components/Upload/index.d.ts

@@ -4,6 +4,11 @@ export interface UploadFileProps extends UploadProps {
     maxSize?: number;
     uploadBtnName?: string | ReactNode;
     uploadHint?: any;
+    compression?: {
+        type?: string;
+        quality?: number;
+        limit?: number;
+    };
 }
 declare const UploadFile: (props: UploadFileProps) => JSX.Element;
 export default UploadFile;

package/lib/components/Upload/index.js

@@ -6,6 +6,7 @@ const filetype = require("../../utils/filetype");
 const react = require("react");
 const utils = require("../../utils");
 require("react-dom");
+const compressionFile = require("../../utils/compression-file");
 const defaultFileType = [filetype.FileSuffix.jpeg, filetype.FileSuffix.jpg, filetype.FileSuffix.png];
 const UploadFile = (props) => {
   const {
@@ -15,7 +16,8 @@ const UploadFile = (props) => {
     maxSize = 2,
     accept = defaultFileType.join(","),
     uploadBtnName = "上传",
-    uploadHint = null
+    uploadHint = null,
+    compression
   } = props;
   const [preview, setPreview] = react.useState(false);
   const [previewSrc, setPreviewSrc] = react.useState("");
@@ -35,18 +37,33 @@ const UploadFile = (props) => {
     ] });
   };
   const beforeUpload = (file) => {
-    const acceptList = accept.split(",");
-    const suffix = utils.getFileSuffix(file.name) || "";
-    if (!acceptList.includes(suffix)) {
-      antd.message.error(`只允许上传 ${accept} 文件`);
-      return antd.Upload.LIST_IGNORE;
-    }
-    const isLess = file.size / 1024 / 1024 < maxSize;
-    if (!isLess) {
-      antd.message.error(`文件必须小于${maxSize}MB`);
+    const result = new Promise((resolve, reject) => {
+      const acceptList = accept.split(",");
+      const suffix = utils.getFileSuffix(file.name) || "";
+      if (!acceptList.includes(suffix)) {
+        antd.message.error(`只允许上传 ${accept} 文件`);
+        reject(false);
+      }
+      const isLess = file.size / 1024 / 1024 < maxSize;
+      if (!isLess) {
+        antd.message.error(`文件必须小于${maxSize}MB`);
+        reject(false);
+      }
+      if (compression) {
+        resolve(
+          compressionFile.compressionFile(
+            file,
+            compression.type,
+            compression.quality,
+            compression.limit
+          )
+        );
+      }
+      resolve(file);
+    }).catch((err) => {
       return antd.Upload.LIST_IGNORE;
-    }
-    return true;
+    });
+    return result;
   };
   const onChange = (info) => {
     props.onChange && props.onChange(info);

package/lib/index.js

@@ -5,9 +5,10 @@ const ReactDOM = require("react-dom/client");
 const reactRouterDom = require("react-router-dom");
 const main = require("./main");
 const antd = require("antd");
+const compressionFile = require("./utils/compression-file");
 const Demo = () => {
   antd.Form.useForm();
-  const [list, setList] = react.useState([
+  react.useState([
     {
       PNOrderNo: 1,
       PNName: "未分配",
@@ -27,40 +28,6 @@ const Demo = () => {
       Remark: ""
     }
   ]);
-  const columns = [
-    {
-      dataIndex: "PNOrderNo",
-      title: "序号",
-      width: 80
-    },
-    {
-      dataIndex: "PNName",
-      title: "节点名称"
-    },
-    {
-      dataIndex: "PlanFinishDate",
-      title: "预计完成时间",
-      editable: true,
-      width: 400,
-      type: "datePicker",
-      valueProps: {
-        placeholder: "请输入内容"
-      }
-    },
-    {
-      dataIndex: "Remark",
-      title: "备注",
-      editable: true,
-      type: "textarea",
-      width: 400,
-      valueProps: {
-        placeholder: "请输入内容",
-        autoSize: {
-          minRows: 3
-        }
-      }
-    }
-  ];
   react.useState(
     Array.from({ length: 1e5 }, (_, key) => ({
       key,
@@ -69,6 +36,8 @@ const Demo = () => {
     }))
   );
   react.useState(false);
+  const [file, setFile] = react.useState("");
+  const [file2, setFile2] = react.useState("");
   react.useState([
     {
       uid: "-1",
@@ -103,20 +72,29 @@ const Demo = () => {
       renderContent: (record) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: record.PNName }) })
     });
   };
+  const onChange = async (e) => {
+    console.log(e);
+    const file3 = e.target.files[0];
+    const base64 = await compressionFile.fileToDataURL(file3);
+    setFile(base64);
+    const newFile = await compressionFile.compressionFile(file3, "image/jpeg", 0.2);
+    console.log(newFile);
+    const base64_2 = await compressionFile.fileToDataURL(newFile);
+    setFile2(base64_2);
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { height: "100vh" }, children: [
     /* @__PURE__ */ jsxRuntime.jsx(antd.Button, { onClick: handleClick, children: "click" }),
+    /* @__PURE__ */ jsxRuntime.jsx(antd.Input, { type: "file", onChange }),
     /* @__PURE__ */ jsxRuntime.jsx(
-      main.EditTable,
+      main.UploadFile,
       {
-        columns,
-        rowKey: "PNOrderNo",
-        onChange: (row) => {
-          console.log(row);
-        },
-        dataSource: list,
-        pagination: false
+        compression: { type: "image/jpeg", quality: 0.2, limit: 300 },
+        maxSize: 100,
+        onChange: (info) => console.log(info)
       }
-    )
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("img", { src: file, style: { width: 400 } }),
+    /* @__PURE__ */ jsxRuntime.jsx("img", { src: file2, style: { width: 400 } })
   ] });
 };
 ReactDOM.createRoot(document.getElementById("root")).render(

package/lib/utils/compression-file.d.ts

@@ -0,0 +1,11 @@
+export declare const fileToDataURL: (file: Blob | File) => Promise<any>;
+export declare const dataURLToImage: (dataURL: string) => Promise<HTMLImageElement>;
+/**
+ * 图片压缩方法
+ * @param {Object}  file 图片文件
+ * @param {String} type 想压缩成的文件类型
+ * @param {Nubmber} quality 压缩质量参数
+ * @param {limit} limit 最小限制大小，小于该值时不进行压缩
+ * @returns 压缩后的新图片
+ */
+export declare const compressionFile: (file: File, type?: string, quality?: number, limit?: number) => Promise<File>;

package/lib/utils/compression-file.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const fileToDataURL = (file) => {
+  return new Promise((resolve) => {
+    const reader = new FileReader();
+    reader.onloadend = (e) => resolve(e.target.result);
+    reader.readAsDataURL(file);
+  });
+};
+const dataURLToImage = (dataURL) => {
+  return new Promise((resolve) => {
+    const img = new Image();
+    img.onload = () => resolve(img);
+    img.src = dataURL;
+  });
+};
+const canvastoFile = (canvas, type, quality) => {
+  return new Promise(
+    (resolve) => canvas.toBlob((blob) => resolve(blob), type, quality)
+  );
+};
+const scaleWidthHeight = (img) => {
+  const maxWidth = 1400;
+  const maxHeight = 1400;
+  const originWidth = img.width;
+  const originHeight = img.height;
+  let targetWidth = img.width;
+  let targetHeight = img.height;
+  if (originWidth > maxWidth || originHeight > maxHeight) {
+    if (originWidth / originHeight > maxWidth / maxHeight) {
+      targetWidth = maxWidth;
+      targetHeight = Math.round(maxWidth * (originHeight / originWidth));
+    } else {
+      targetHeight = maxHeight;
+      targetWidth = Math.round(maxHeight * (originWidth / originHeight));
+    }
+  }
+  return {
+    width: targetWidth,
+    height: targetHeight
+  };
+};
+const compressionFile = async (file, type = "image/jpeg", quality = 0.5, limit = 300) => {
+  const fileName = file.name;
+  if (file.size / 1024 < limit) {
+    return file;
+  }
+  const canvas = document.createElement("canvas");
+  const context = canvas.getContext("2d");
+  const base64 = await fileToDataURL(file);
+  const img = await dataURLToImage(base64);
+  const target = scaleWidthHeight(img);
+  canvas.width = target.width;
+  canvas.height = target.height;
+  context.clearRect(0, 0, target.width, target.height);
+  context.drawImage(img, 0, 0, target.width, target.height);
+  const blob = await canvastoFile(canvas, type, quality);
+  const newFile = new File([blob], fileName, {
+    type
+  });
+  return newFile;
+};
+exports.compressionFile = compressionFile;
+exports.dataURLToImage = dataURLToImage;
+exports.fileToDataURL = fileToDataURL;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "szld-libs",
   "private": false,
-  "version": "0.1.7",
+  "version": "0.1.8",
   "type": "module",
   "scripts": {
     "dev": "vite",