bhd-components 0.10.12 → 0.10.14

package/es2017/AIMessageList/components/fileList/index.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { fileListProps, FileListRefProps } from "../../type";
+declare const FileList: React.ForwardRefExoticComponent<fileListProps & React.RefAttributes<FileListRefProps>>;
+export default FileList;

package/es2017/AIMessageList/components/fileList/index.js

@@ -0,0 +1,315 @@
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
+import { jsx as _jsx, jsxs as _jsxs } from "@ice/jsx-runtime/jsx-runtime";
+import React, { useState, useEffect, useImperativeHandle, forwardRef, useRef } from "react";
+import styles from "./index.module.less";
+import { fileIconRender, statusRender } from "./fileIcon";
+import { CloseCircleFilled, DoubleRightOutlined } from "../../../icons";
+import { guidGenerator } from "../../../utils/number";
+import { Upload } from "antd";
+// 通过文件名 获取文件后缀
+const getSuffix = (fileName)=>{
+    return fileName.split(".").pop().toLowerCase();
+};
+const FileList = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { prefix, fileUpload, errorCallback, changeFileCanSending } = props;
+    console.log("fileUpload", fileUpload);
+    const [fileList, setFileList] = useState([]);
+    const [page, setPage] = useState(1);
+    const [pageSize, setPageSize] = useState(5);
+    const recordObj = useRef({
+        page: page,
+        pageSize: pageSize,
+        fileList: fileList
+    });
+    useEffect(()=>{
+        recordObj.current.page = page;
+        recordObj.current.pageSize = pageSize;
+        recordObj.current.fileList = fileList;
+    }, [
+        page,
+        pageSize,
+        fileList
+    ]);
+    useEffect(()=>{
+        let flag = fileList.some((item)=>[
+                "waiting",
+                "uploading",
+                "uploadError",
+                "waitParse",
+                "parsing",
+                "parsingError"
+            ].includes(item.status));
+        changeFileCanSending(!flag);
+    }, [
+        fileList
+    ]);
+    useImperativeHandle(ref, ()=>{
+        return {
+            addFile,
+            changePage,
+            deleteFile,
+            updateFile,
+            getFileList: ()=>recordObj.current.fileList,
+            vaildFile,
+            fileToCustomFile,
+            clearFileList
+        };
+    });
+    const getCls = (clsName)=>{
+        return styles[clsName] + " " + prefix + "-" + clsName;
+    };
+    const clearFileList = ()=>{
+        setFileList([]);
+    };
+    const vaildFile = (file, fileId)=>{
+        if (fileUpload.maxCount > 0 && recordObj.current.fileList.length > fileUpload.maxCount) {
+            errorCallback({
+                type: "fileCountOver",
+                message: "上传失败，文件数量超过限制"
+            });
+            return false;
+        }
+        // fileUpload
+        let acceptList = fileUpload.accept.split(/[.,]/).filter((item)=>!!item);
+        let suffix = getSuffix(file.name);
+        if (!acceptList.includes(suffix)) {
+            errorCallback({
+                type: "fileAcceptError",
+                message: "上传失败，文件格式错误"
+            });
+            return false;
+        }
+        if (file.size <= 0) {
+            errorCallback({
+                type: "fileSizeEmpty",
+                message: "上传失败，不支持上传空内容文件"
+            });
+            return false;
+        }
+        if (file.size > fileUpload.maxSize) {
+            errorCallback({
+                type: "fileSizeOver",
+                message: "上传失败，文件大小超过限制"
+            });
+            return false;
+        }
+        let flag = recordObj.current.fileList.some((item)=>{
+            if (fileId) {
+                return item.name === file.name && item.fileId !== fileId;
+            } else {
+                return item.name === file.name;
+            }
+        });
+        // 判断是否有同名文件
+        if (flag) {
+            errorCallback({
+                type: "fileNameExist",
+                message: "上传失败，文件已存在"
+            });
+            return false;
+        }
+        return true;
+    };
+    const addFile = (file, fileId)=>{
+        console.log("addFileaddFile", file, fileUpload);
+        if (vaildFile(file, fileId)) {
+            // 等待上传
+            // 判断是否存在等待上传的文件
+            setFileList((fileList)=>{
+                let uploadingList = fileList.filter((item)=>item.status === "uploading");
+                if (uploadingList.length >= fileUpload.mapUploadCount) {
+                    if (fileId) {
+                        return fileList.map((item)=>{
+                            if (item.fileId === fileId) {
+                                let obj = fileToCustomFile(file, {});
+                                return {
+                                    name: obj.name,
+                                    suffix: obj.suffix,
+                                    fileId: fileId,
+                                    url: "",
+                                    status: "waiting",
+                                    source: file,
+                                    size: file.size
+                                };
+                            }
+                            return item;
+                        });
+                    } else {
+                        return [
+                            ...fileList,
+                            fileToCustomFile(file, {})
+                        ];
+                    }
+                } else {
+                    uploadFile(file);
+                    if (fileId) {
+                        return fileList.map((item)=>{
+                            if (item.fileId === fileId) {
+                                let obj = fileToCustomFile(file, {});
+                                return {
+                                    name: obj.name,
+                                    suffix: obj.suffix,
+                                    fileId: fileId,
+                                    url: "",
+                                    status: "uploading",
+                                    source: file,
+                                    size: file.size
+                                };
+                            }
+                            return item;
+                        });
+                    } else {
+                        return [
+                            ...fileList,
+                            fileToCustomFile(file, {
+                                status: "uploading"
+                            })
+                        ];
+                    }
+                }
+            });
+        }
+    };
+    const uploadFile = (file)=>{
+        fileUpload.customRequest(file).then((res)=>{
+            setFileList((fileList)=>{
+                let list = fileList.map((item)=>{
+                    if (item.source === file) {
+                        return _object_spread({}, item, res);
+                    }
+                    return item;
+                });
+                let waitList = list.filter((item)=>item.status === "waiting");
+                if (waitList.length > 0) {
+                    list = list.map((item)=>{
+                        if (item.fileId === waitList[0].fileId) {
+                            return _object_spread_props(_object_spread({}, item), {
+                                status: "uploading"
+                            });
+                        }
+                        return item;
+                    });
+                    uploadFile(waitList[0].source);
+                }
+                return list;
+            });
+        });
+    };
+    // 删除文件
+    const deleteFile = (fileId)=>{
+        let fileObj = null;
+        setFileList((fileList)=>{
+            return fileList.filter((item)=>{
+                if (item.fileId === fileId) {
+                    fileObj = item;
+                    return true;
+                }
+                return false;
+            });
+        });
+        // 删除文件时如果删除的是最后一条 则page-1
+        const { fileList, page, pageSize } = recordObj.current;
+        let list = fileList.slice((page - 1) * pageSize, page * pageSize);
+        list = list.filter((item)=>item.fileId !== fileId);
+        if (list.length === 0 && page > 1) {
+            changePage(page - 1);
+        }
+        fileUpload.deleteFileAjax && fileUpload.deleteFileAjax(fileId, fileObj);
+    };
+    // 更新文件状态
+    const updateFile = (fileId, status)=>{
+        setFileList((fileList)=>fileList.map((item)=>{
+                if (item.fileId === fileId) {
+                    return _object_spread_props(_object_spread({}, item), {
+                        status: status
+                    });
+                }
+                return item;
+            }));
+    };
+    // file to customFile
+    const fileToCustomFile = (file, params)=>{
+        let customFile = {
+            name: file.name,
+            suffix: getSuffix(file.name),
+            fileId: params.fileId || guidGenerator(),
+            url: params.url || "",
+            status: params.status || "waiting",
+            source: file,
+            size: file.size
+        };
+        return customFile;
+    };
+    const changePage = (page)=>{
+        setPage(page);
+        setPageSize(pageSize);
+    };
+    const list = fileList.slice((page - 1) * pageSize, page * pageSize);
+    if (list.length === 0) return null;
+    return /*#__PURE__*/ _jsxs("div", {
+        className: `${getCls("footer-fileList-wrapper")}`,
+        children: [
+            page !== 1 && /*#__PURE__*/ _jsx("div", {
+                className: `${getCls("footer-fileList-pre")}`,
+                onClick: ()=>changePage(page - 1),
+                children: /*#__PURE__*/ _jsx(DoubleRightOutlined, {
+                    onPointerEnterCapture: undefined,
+                    onPointerLeaveCapture: undefined
+                })
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: `${getCls("footer-fileList-list")}`,
+                children: list.map((item)=>{
+                    return /*#__PURE__*/ _jsxs("div", {
+                        className: `${getCls("footer-fileList-listItem")}`,
+                        children: [
+                            /*#__PURE__*/ _jsx("div", {
+                                className: `${getCls("footer-fileList-listItem-icon")}`,
+                                children: fileIconRender(item.suffix, fileUpload.iconFileRender)
+                            }),
+                            /*#__PURE__*/ _jsx("div", {
+                                className: `${getCls("footer-fileList-listItem-text")}`,
+                                title: item.name,
+                                children: item.name
+                            }),
+                            item.status === "uploadError" ? /*#__PURE__*/ _jsx(Upload, {
+                                fileList: [],
+                                accept: fileUpload.accept,
+                                customRequest: (options)=>addFile(options.file, item.fileId),
+                                multiple: false,
+                                children: /*#__PURE__*/ _jsx("div", {
+                                    className: `${getCls("footer-fileList-listItem-status")}`,
+                                    style: {
+                                        cursor: "pointer"
+                                    },
+                                    children: statusRender(item.status, fileUpload.statusText)
+                                })
+                            }) : /*#__PURE__*/ _jsx("div", {
+                                className: `${getCls("footer-fileList-listItem-status")}`,
+                                children: statusRender(item.status, fileUpload.statusText)
+                            }),
+                            /*#__PURE__*/ _jsx("div", {
+                                className: `${getCls("footer-fileList-listItem-delete")}`,
+                                children: /*#__PURE__*/ _jsx(CloseCircleFilled, {
+                                    onPointerEnterCapture: undefined,
+                                    onPointerLeaveCapture: undefined,
+                                    onClick: ()=>deleteFile(item.fileId)
+                                })
+                            })
+                        ]
+                    }, item.fileId);
+                })
+            }),
+            page * pageSize < fileList.length && /*#__PURE__*/ _jsx("div", {
+                className: `${getCls("footer-fileList-next")}`,
+                onClick: ()=>changePage(page + 1),
+                children: /*#__PURE__*/ _jsx(DoubleRightOutlined, {
+                    onPointerEnterCapture: undefined,
+                    onPointerLeaveCapture: undefined
+                })
+            })
+        ]
+    });
+});
+export default FileList;

package/es2017/AIMessageList/components/fileList/index.module.less

@@ -0,0 +1,95 @@
+.footer-fileList-wrapper {
+  width: 100%;
+  position: relative;
+  padding: 12px 16px;
+  box-sizing: border-box;
+  .footer-fileList-list {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    .footer-fileList-listItem {
+      width: 100%;
+      position: relative;
+      display: flex;
+      overflow: hidden;
+      padding: 8px 12px;
+      box-sizing: border-box;
+      gap: 12px;
+      border-radius: 8px;
+      border: 1px solid #ebebeb;
+      background: rgba(0, 0, 0, 0.02);
+      align-items: center;
+      .footer-fileList-listItem-icon {
+        flex-shrink: 0;
+        & > i {
+          font-size: 24px;
+          display: flex;
+        }
+      }
+      .footer-fileList-listItem-text {
+        flex: 1;
+        overflow: hidden;
+        width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        color: rgba(0, 0, 0, 0.65);
+        font-size: 14px;
+        font-weight: 400;
+        white-space: nowrap;
+      }
+      .footer-fileList-listItem-status {
+        flex-shrink: 0;
+      }
+      .footer-fileList-listItem-delete {
+        position: absolute;
+        right: 0;
+        top: 0;
+        display: none;
+        cursor: pointer;
+      }
+
+      &:hover {
+        background: rgba(0, 0, 0, 0.06);
+        .footer-fileList-listItem-delete {
+          display: flex;
+        }
+      }
+    }
+  }
+  .footer-fileList-pre {
+    display: flex;
+    justify-content: center;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    top: -8px;
+    z-index: 2;
+    :global {
+      .anticon-double-right {
+        font-size: 16px;
+        transform: rotate(-90deg);
+        color: #595959;
+        cursor: pointer;
+      }
+    }
+  }
+
+  .footer-fileList-next {
+    display: flex;
+    justify-content: center;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: -8px;
+    z-index: 2;
+    :global {
+      .anticon-double-right {
+        font-size: 16px;
+        transform: rotate(90deg);
+        color: #595959;
+        cursor: pointer;
+      }
+    }
+  }
+}

package/es2017/AIMessageList/components/footer/index.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import type { footerConfigProps, footerRefProps, errorMessageProps, AIMessageListRefProps } from "../../type";
+interface IProps {
+    footerConfig: footerConfigProps;
+    prefix: string;
+    errorCallback: (error: errorMessageProps) => void;
+    apiRef: AIMessageListRefProps;
+}
+declare const Footer: React.ForwardRefExoticComponent<IProps & React.RefAttributes<footerRefProps>>;
+export default Footer;