zy-react-library 1.4.4 → 1.4.5

package/components/Descriptions/index.d.ts

@@ -0,0 +1,31 @@
+import type { DescriptionsProps as AntDescriptionsProps, DescriptionsItemType } from "antd/es/descriptions";
+import type { ReactElement, ReactNode } from "react";
+
+export type DescriptionDataIndex = string | number | (string | number)[];
+
+export interface DescriptionItem<DataSource = Record<string, any>> extends Omit<DescriptionsItemType, "children"> {
+  /** 数据字段，支持嵌套路径 */
+  dataIndex?: DescriptionDataIndex;
+  /** 当前字段为空时展示的内容，默认继承组件 emptyText */
+  emptyText?: ReactNode;
+  /** 是否隐藏当前项 */
+  hidden?: boolean | ((dataSource: DataSource) => boolean);
+  /** 自定义字段内容 */
+  render?: (value: any, dataSource: DataSource, index: number) => ReactNode;
+}
+
+export interface DescriptionsProps<DataSource = Record<string, any>> extends Omit<AntDescriptionsProps, "items"> {
+  /** 详情数据，默认 {} */
+  dataSource?: DataSource;
+  /** 字段配置，默认 [] */
+  items?: DescriptionItem<DataSource>[];
+  /** 空值展示内容，默认 "-" */
+  emptyText?: ReactNode;
+  /** 是否加载中，默认 false */
+  loading?: boolean;
+}
+
+/**
+ * 配置式详情展示组件
+ */
+export default function Descriptions<DataSource = Record<string, any>>(props: DescriptionsProps<DataSource>): ReactElement;

package/components/Descriptions/index.js

@@ -0,0 +1 @@
+import{Spin as e,Descriptions as t}from"antd";import{get as r}from"lodash-es";import{isEmpty as n}from"../../utils/index.js";import{jsx as i}from"react/jsx-runtime";const o=o=>{const{dataSource:s={},items:a=[],emptyText:l="-",loading:m=!1,column:d=2,styles:c,...p}=o,u=a.map((e,t)=>{const{dataIndex:i,hidden:o,render:a,emptyText:m,...d}=e;if("function"==typeof o?o(s):o)return null;const c=((e,t)=>{if(void 0!==t)return r(e,t)})(s,i),p=a?a(c,s,t):c;return{...d,key:d.key??(Array.isArray(i)?i.join("."):i)??t,children:n(p)?m??l:p}}).filter(Boolean);return i(e,{spinning:m,children:i(t,{...p,column:d,items:u,styles:{...c,label:{width:200,...c?.label}}})})};o.displayName="Descriptions";export{o as default};

package/components/Excel/index.d.ts

@@ -0,0 +1,24 @@
+import type { CSSProperties, FC, ReactNode } from "react";
+
+export interface ExcelProps {
+  /** 是否显示弹窗，默认 false */
+  visible?: boolean;
+  /** 关闭回调 */
+  onCancel?: () => void;
+  /** xlsx 文件地址 */
+  file?: string;
+  /** xlsx 文件名 */
+  name?: string;
+  /** 是否内联展示，默认 false */
+  inline?: boolean;
+  /** 弹窗标题，默认 "Excel预览" */
+  title?: string;
+  /** 内联模式下的样式 */
+  style?: CSSProperties;
+  /** 弹窗底部额外的按钮 */
+  extraButtons?: ReactNode;
+}
+
+declare const Excel: FC<ExcelProps>;
+
+export default Excel;

package/components/Excel/index.js

@@ -0,0 +1 @@
+import{Spin as e,Modal as t,Button as r,message as n}from"antd";import i from"exceljs";import{useRef as o,useState as l,useEffect as c}from"react";import a from"x-data-spreadsheet";import u from"../../hooks/useDownloadFile/index.js";import{getFileUrl as s}from"../../utils/index.js";import"x-data-spreadsheet/dist/xspreadsheet.css";import{jsx as d}from"react/jsx-runtime";function h(h){const{visible:f=!1,onCancel:x,file:p,name:w,inline:v=!1,title:g="Excel预览",style:y={},extraButtons:C}=h,k=o(null),E=o(!1),I=s(),[T,b]=l(!1),{downloadFile:j}=u(),S=async()=>{if(k.current){b(!0),k.current.innerHTML="";try{const e=await fetch(p.includes(I)?p:I+p);if(!e.ok)return void n.error("加载 Excel 文件失败");const t=await e.arrayBuffer(),r=new i.Workbook;if(await r.xlsx.load(t),E.current)return;new a(k.current,{mode:"read",showToolbar:!1,showContextmenu:!1,view:{height:()=>k.current?.clientHeight||520,width:()=>k.current?.clientWidth||800}}).loadData(function(e){const t=e.worksheets.map(m);return t.length>0?t:[{name:"Sheet1",rows:{}}]}(r))}catch{n.error("加载 Excel 文件失败"),x&&x()}finally{E.current||b(!1)}}};c(()=>{if(!f&&!v||!p)return;E.current=!1;const e=setTimeout(S,100);return()=>{E.current=!0,clearTimeout(e),k.current&&(k.current.innerHTML="")}},[f,v,p]);const D=d(e,{spinning:T,children:d("div",{style:{height:"72vh",overflow:"hidden",...y},children:d("div",{ref:k,style:{width:"100%",height:"100%"}})})});return v?D:d(t,{style:{top:100,maxWidth:"calc(100vw - 32px)",paddingBottom:24},open:f,maskClosable:!1,width:1e3,title:g,onCancel:x,getContainer:!1,footer:[d(r,{onClick:x,children:"关闭"},"cancel"),d(r,{type:"primary",onClick:()=>j({url:p,name:w}),children:"下载"},"download"),C],children:D})}function m(e){const t={name:e.name,rows:{},cols:{len:e.columnCount||26},merges:e.model?.merges||[]};return e.columns.forEach((e,r)=>{e.width&&(t.cols[r]={width:Math.round(8*e.width)})}),e.eachRow({includeEmpty:!0},(e,r)=>{const n={cells:{}};e.height&&(n.height=Math.round(1.4*e.height)),e.eachCell({includeEmpty:!0},(e,t)=>{n.cells[t-1]={text:f(e)}}),t.rows[r-1]=n}),t.merges.forEach(e=>{const r=function(e){const[t,r=t]=e.split(":"),n=x(t),i=x(r);return{sri:n.rowIndex,sci:n.colIndex,eri:i.rowIndex,eci:i.colIndex}}(e),n=t.rows[r.sri]?.cells?.[r.sci];n&&(n.merge=[r.eri-r.sri,r.eci-r.sci])}),t}function f(e){if(null===e.value||void 0===e.value)return"";if(e.formula)return null===e.result||void 0===e.result?`=${e.formula}`:String(e.result);if(e.text)return e.text;if(e.value instanceof Date)return e.value.toLocaleDateString();if("object"==typeof e.value){if(e.value.text)return e.value.text;if(e.value.richText)return e.value.richText.map(e=>e.text).join("");if(void 0!==e.value.result)return String(e.value.result)}return String(e.value)}function x(e){const t=/^([A-Z]+)(\d+)$/i.exec(e);return t?{rowIndex:Number(t[2])-1,colIndex:(r=t[1],r.toUpperCase().split("").reduce((e,t)=>26*e+t.charCodeAt(0)-64,0)-1)}:{rowIndex:0,colIndex:0};var r}h.displayName="Excel";export{h as default};

package/components/FilePreview/index.d.ts

@@ -0,0 +1,38 @@
+import type { FC } from "react";
+import type { ExcelProps } from "../Excel";
+import type { PdfProps } from "../Pdf";
+import type { PreviewImgProps } from "../PreviewImg";
+import type { VideoProps } from "../Video";
+import type { WordProps } from "../Word";
+
+export interface FilePreviewComponentProps {
+  /** 图片组件参数 */
+  image?: Omit<PreviewImgProps, "files">;
+  /** PDF 组件参数 */
+  pdf?: Omit<PdfProps, "file" | "name" | "visible" | "onCancel">;
+  /** Word 组件参数 */
+  word?: Omit<WordProps, "file" | "name" | "visible" | "onCancel">;
+  /** Excel 组件参数 */
+  excel?: Omit<ExcelProps, "file" | "name" | "visible" | "onCancel">;
+  /** 视频组件参数 */
+  video?: Omit<VideoProps, "source" | "title" | "visible" | "onCancel">;
+}
+
+export interface FilePreviewProps {
+  /** 文件列表，和 name、url 冲突 */
+  files?: { filePath?: string; fileName?: string; name?: string; [key: string]: string }[];
+  /** 文件名字段名，传入 files 时优先查找 name、fileName */
+  nameKey?: string;
+  /** 文件路径字段名，传入 files 时优先查找 filePath、url */
+  urlKey?: string;
+  /** 单个文件名，和 files 冲突 */
+  name?: string;
+  /** 单个文件路径，和 files 冲突 */
+  url?: string;
+  /** 各底层预览组件的额外参数 */
+  componentProps?: FilePreviewComponentProps;
+}
+
+declare const FilePreview: FC<FilePreviewProps>;
+
+export default FilePreview;

package/components/FilePreview/index.js

@@ -0,0 +1 @@
+import{Space as e,Button as i}from"antd";import{useState as r}from"react";import{getFileName as l}from"../../utils/index.js";import n from"../Excel/index.js";import m from"../Pdf/index.js";import o from"../PreviewImg/index.js";import t from"../Video/index.js";import a from"../Word/index.js";import{jsxs as d,Fragment as p,jsx as s}from"react/jsx-runtime";const c=c=>{const{files:u=[],nameKey:f="",urlKey:x="",name:v,url:g,componentProps:h={}}=c,[y,j]=r(null),w=u.length>0?u.map(e=>{const i=e.filePath||e.url||e[x];return{name:e.name||e.fileName||e[f]||l(i),url:i}}).filter(e=>e.url):v&&g?[{name:v,url:g}]:[],b=()=>{j(null)};return 0===w.length?null:d(p,{children:[s(e,{direction:"vertical",children:w.map(r=>{const l=(e=>{const i=e.url.split(/[?#]/)[0],r=i.slice(i.lastIndexOf(".")+1).toLowerCase();return["jpg","jpeg","png","gif","webp","bmp","svg"].includes(r)?"image":"pdf"===r?"pdf":"docx"===r?"word":"xlsx"===r?"excel":["mp4","webm","m3u8"].includes(r)?"video":void 0})(r),n=`${r.name}-${r.url}`;return"image"===l?s(e,{children:s(o,{...h.image,files:[r.url]})},n):d(e,{children:[s("span",{children:r.name}),l?s(i,{type:"primary",size:"small",onClick:()=>((e,i)=>{j({...e,type:i})})(r,l),children:"预览"}):s("span",{children:"暂不支持预览"})]},n)})}),"pdf"===y?.type&&s(m,{...h.pdf,visible:!0,file:y.url,name:y.name,onCancel:b}),"word"===y?.type&&s(a,{...h.word,visible:!0,file:y.url,name:y.name,onCancel:b}),"excel"===y?.type&&s(n,{...h.excel,visible:!0,file:y.url,name:y.name,onCancel:b}),"video"===y?.type&&s(t,{...h.video,visible:!0,source:y.url,title:y.name,onCancel:b})]})};c.displayName="FilePreview";export{c as default};

package/components/PreviewExcel/index.d.ts

@@ -0,0 +1,18 @@
+import type { FC } from "react";
+
+export interface PreviewExcelProps {
+  /** 文件列表，和 name、url 冲突 */
+  files?: { filePath?: string; fileName?: string; name?: string; [key: string]: string }[];
+  /** 文件名字段名，传入 files 时优先查找 name、fileName */
+  nameKey?: string;
+  /** 文件路径字段名，传入 files 时优先查找 filePath、url */
+  urlKey?: string;
+  /** 单个文件名，和 files 冲突 */
+  name?: string;
+  /** 单个文件路径，和 files 冲突 */
+  url?: string;
+}
+
+declare const PreviewExcel: FC<PreviewExcelProps>;
+
+export default PreviewExcel;

package/components/PreviewExcel/index.js

@@ -0,0 +1 @@
+import{Space as e,Button as i}from"antd";import{useState as l}from"react";import{getFileName as r}from"../../utils/index.js";import n from"../Excel/index.js";import{jsxs as a,Fragment as m,jsx as t}from"react/jsx-runtime";const c=c=>{const{files:o=[],nameKey:s="",urlKey:d="",name:p="",url:h=""}=c,[f,u]=l(!1),[y,x]=l(""),[v,C]=l(""),g=(e,i)=>{u(!0),x(e),C(i)},j=()=>{u(!1),x(""),C("")},b=e=>e.filePath||e.url||e[d],k=e=>e.name||e.fileName||e[s]||r(b(e));return 0===o.length&&p&&h?a(m,{children:[a(e,{children:[t("span",{children:p}),t(i,{type:"primary",size:"small",onClick:()=>g(h,p),children:"预览"})]}),t(n,{visible:f,file:y,name:v,onCancel:j})]}):o.length>0&&!p&&!h?a(m,{children:[o.map(l=>t("div",{style:{marginTop:5},children:a(e,{children:[t("span",{children:k(l)}),t(i,{type:"primary",size:"small",onClick:()=>g(b(l),k(l)),children:"预览"})]})},b(l))),t(n,{visible:f,file:y,name:v,onCancel:j})]}):null};c.displayName="PreviewExcel";export{c as default};

package/components/PreviewPdf/index.d.ts

@@ -3,9 +3,9 @@ import type { FC } from "react";
 export interface PreviewPdfProps {
   /** 文件列表，和 name、url 冲突 */
   files?: { filePath?: string; fileName?: string; name?: string; [key: string]: string }[];
-  /** 文件名字段名，传入 files 时会优先查找是否存在 name、fileName  */
+  /** 文件名字段名，传入 files 时优先查找 name、fileName */
   nameKey?: string;
-  /** 文件路径字段名，传入 files 时会优先查找是否存在 filePath */
+  /** 文件路径字段名，传入 files 时优先查找 filePath、url */
   urlKey?: string;
   /** 单个文件名，和 files 冲突 */
   name?: string;

package/components/PreviewWord/index.d.ts

@@ -0,0 +1,18 @@
+import type { FC } from "react";
+
+export interface PreviewWordProps {
+  /** 文件列表，和 name、url 冲突 */
+  files?: { filePath?: string; fileName?: string; name?: string; [key: string]: string }[];
+  /** 文件名字段名，传入 files 时优先查找 name、fileName */
+  nameKey?: string;
+  /** 文件路径字段名，传入 files 时优先查找 filePath、url */
+  urlKey?: string;
+  /** 单个文件名，和 files 冲突 */
+  name?: string;
+  /** 单个文件路径，和 files 冲突 */
+  url?: string;
+}
+
+declare const PreviewWord: FC<PreviewWordProps>;
+
+export default PreviewWord;

package/components/PreviewWord/index.js

@@ -0,0 +1 @@
+import{Space as e,Button as i}from"antd";import{useState as r}from"react";import{getFileName as l}from"../../utils/index.js";import n from"../Word/index.js";import{jsxs as a,Fragment as m,jsx as t}from"react/jsx-runtime";const o=o=>{const{files:s=[],nameKey:c="",urlKey:d="",name:p="",url:h=""}=o,[f,u]=r(!1),[y,v]=r(""),[x,C]=r(""),g=(e,i)=>{u(!0),v(e),C(i)},j=()=>{u(!1),v(""),C("")},b=e=>e.filePath||e.url||e[d],k=e=>e.name||e.fileName||e[c]||l(b(e));return 0===s.length&&p&&h?a(m,{children:[a(e,{children:[t("span",{children:p}),t(i,{type:"primary",size:"small",onClick:()=>g(h,p),children:"预览"})]}),t(n,{visible:f,file:y,name:x,onCancel:j})]}):s.length>0&&!p&&!h?a(m,{children:[s.map(r=>t("div",{style:{marginTop:5},children:a(e,{children:[t("span",{children:k(r)}),t(i,{type:"primary",size:"small",onClick:()=>g(b(r),k(r)),children:"预览"})]})},b(r))),t(n,{visible:f,file:y,name:x,onCancel:j})]}):null};o.displayName="PreviewWord";export{o as default};

package/components/Word/index.d.ts

@@ -0,0 +1,24 @@
+import type { CSSProperties, FC, ReactNode } from "react";
+
+export interface WordProps {
+  /** 是否显示弹窗，默认 false */
+  visible?: boolean;
+  /** 关闭回调 */
+  onCancel?: () => void;
+  /** docx 文件地址 */
+  file?: string;
+  /** docx 文件名 */
+  name?: string;
+  /** 是否内联展示，默认 false */
+  inline?: boolean;
+  /** 弹窗标题，默认 "Word预览" */
+  title?: string;
+  /** 内联模式下的样式 */
+  style?: CSSProperties;
+  /** 弹窗底部额外的按钮 */
+  extraButtons?: ReactNode;
+}
+
+declare const Word: FC<WordProps>;
+
+export default Word;

package/components/Word/index.js

@@ -0,0 +1 @@
+import{Spin as r,Modal as e,Button as n,message as t}from"antd";import{renderAsync as i}from"docx-preview";import{useRef as o,useState as a,useEffect as c}from"react";import l from"../../hooks/useDownloadFile/index.js";import{getFileUrl as d}from"../../utils/index.js";import{jsx as u}from"react/jsx-runtime";function s(s){const{visible:f=!1,onCancel:m,file:p,name:h,inline:w=!1,title:g="Word预览",style:y={},extraButtons:v}=s,x=o(null),k=o(!1),W=d(),[C,b]=a(!1),{downloadFile:T}=l(),j=async()=>{if(x.current){b(!0),x.current.innerHTML="";try{const r=await fetch(p.includes(W)?p:W+p);if(!r.ok)return void t.error("加载 Word 文件失败");const e=await r.arrayBuffer();if(k.current)return;await i(e,x.current,null,{className:"docx-preview",inWrapper:!0,ignoreWidth:!1,ignoreHeight:!1,breakPages:!0})}catch{t.error("加载 Word 文件失败"),m&&m()}finally{k.current||b(!1)}}};c(()=>{if(!f&&!w||!p)return;k.current=!1;const r=setTimeout(j,100);return()=>{k.current=!0,clearTimeout(r),x.current&&(x.current.innerHTML="")}},[f,w,p]);const B=u(r,{spinning:C,children:u("div",{style:{height:"72vh",overflowY:"auto",padding:24,background:"#f5f5f5",...y},children:u("div",{ref:x})})});return w?B:u(e,{style:{top:100,maxWidth:"calc(100vw - 32px)",paddingBottom:24},open:f,maskClosable:!1,width:900,title:g,onCancel:m,getContainer:!1,footer:[u(n,{onClick:m,children:"关闭"},"cancel"),u(n,{type:"primary",onClick:()=>T({url:p,name:h}),children:"下载"},"download"),v],children:B})}s.displayName="Word";export{s as default};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "zy-react-library",
   "private": false,
-  "version": "1.4.4",
+  "version": "1.4.5",
   "type": "module",
   "description": "",
   "author": "LiuJiaNan",
@@ -32,11 +32,14 @@
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-react": "^1.0.6",
     "dayjs": "^1.11.18",
+    "docx-preview": "^0.3.7",
+    "exceljs": "^4.4.0",
     "lodash-es": "^4.17.21",
     "react-pdf": "^10.2.0",
     "react-signature-canvas": "^1.1.0-alpha.2",
     "throttle-debounce": "^5.0.2",
-    "use-antd-resizable-header": "^3.2.2"
+    "use-antd-resizable-header": "^3.2.2",
+    "x-data-spreadsheet": "^1.1.9"
   },
   "devDependencies": {
     "@ahooksjs/use-url-state": "^3.5.1",