@kingteza/crud-component 1.43.1 → 1.44.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),d=require("@ant-design/icons"),F=require("antd"),
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),d=require("@ant-design/icons"),F=require("antd"),k=require("mime"),c=require("react"),Q=require("../locale/index.cjs.js"),X=require("../util/ValidationUtil.cjs.js"),q=require("../common/button/Button.cjs.js"),Y=require("../common/layout/VerticalSpace.cjs.js"),Z=require("../util/CrudUtil.cjs.js"),B=require("../util/ImageUtil.cjs.js");function v({name:n,label:e,required:l,provider:s,onUploading:a,onRemoved:f,fieldClassName:j,accept:I,rules:U,maxCount:b=1,block:_,fieldHelper:$,formLayoutProps:H,preprocessBeforeUpload:w,...R}){const h=F.Form.useFormInstance(),A=Z.getRealName(n,"upsertFieldName"),x=F.Form.useWatch(A,h),[V,S]=c.useState(!1),[p,L]=c.useState(!1),W=c.useCallback(async r=>{var o,u;try{const{file:i}=r,C=i.name;S(!0),L(!0),a==null||a(!0);const P=C??"",D=P.split("."),G=D[D.length-1],J=s.generateFileName(P),K=`${await s.getInitialPath()}/${J}.${G}`;let O=i;w&&(typeof w=="function"?O=await w(i):w.compressImage&&(O=await B.resizeImage(i)));const N=await s.upload({...i,originFileObj:O},K);a==null||a(!1),h.setFieldValue(n,N),(o=r.onSuccess)==null||o.call(r,N)}catch(i){(u=r.onError)==null||u.call(r,i)}finally{S(!1)}},[h,n,a,s]),[g,M]=c.useState([]);c.useEffect(()=>{!p&&x&&Promise.all((Array.isArray(x)?x:[x]).map(async r=>{const o=k.getType(r),u=r.split("/").pop(),i=await s.getRealUrl(r);return{uid:r,url:i,type:o,name:u}})).then(r=>M(()=>r.map(({url:u,type:i,uid:C,name:P})=>({uid:C,url:u,type:i,response:C,thumbUrl:u,name:P}))))},[x,p,V,s]);const z=c.useCallback(async r=>{const o=r.response,u=o||h.getFieldValue(n);await s.delete(u),f==null||f(),r&&h.setFieldsValue({[n]:null})},[h,n,f,s]);return t.jsxs(F.Form.Item,{label:e,required:l,name:n,...H,className:j,rules:[...l?X.required(e):[],...U??[]],help:$,children:[t.jsx("input",{hidden:!0}),t.jsx(F.Upload,{...R,fileList:g,className:((g==null?void 0:g.length)??0)>=b?"hide-upload":"",maxCount:b,customRequest:W,onRemove:z,listType:"picture",onChange:({fileList:r})=>{M(r)},accept:I,style:_?{width:"100%"}:void 0,children:t.jsx(q,{loading:V,children:"Upload File"})})]})}const y=({provider:n,value:e})=>{const[l,s]=c.useState();return c.useEffect(()=>{e&&n.getRealUrl(e).then(a=>{s({mimeType:k.getType(e),url:a,fileName:e.split("/").pop()??e})})},[n,e]),l?t.jsx(E,{fileName:l.fileName,url:l==null?void 0:l.url,mimeType:l==null?void 0:l.mimeType}):t.jsx(t.Fragment,{})},E=({url:n,mimeType:e="",fileName:l})=>{const s=c.useMemo(()=>e!=null&&e.includes("image")?"image":e!=null&&e.includes("pdf")?"pdf":e!=null&&e.includes("word")?"word":e!=null&&e.includes("text")?"text":e!=null&&e.includes("presentation")?"presentation":e!=null&&e.includes("excel")||e!=null&&e.includes("spreadsheet")?"excel":"file",[e]),a=c.useMemo(()=>{switch(s){case"image":return t.jsx(d.FileImageOutlined,{});case"pdf":return t.jsx(d.FilePdfOutlined,{});case"word":return t.jsx(d.FileWordOutlined,{});case"text":return t.jsx(d.FileTextOutlined,{});case"excel":return t.jsx(d.FileExcelOutlined,{});case"presentation":return t.jsx(d.FilePptOutlined,{});default:return t.jsx(d.FileOutlined,{})}},[s]),[f,j]=c.useState(!1),{t:I}=Q.useTranslationLib();return s!=="file"&&s!=="text"?t.jsxs(t.Fragment,{children:[t.jsx(F.Modal,{open:f,title:l,onCancel:()=>j(!1),footer:t.jsx(t.Fragment,{}),width:"100%",style:{top:"8px",minHeight:"700px"},destroyOnHidden:!0,children:t.jsxs(Y,{children:[t.jsx(q,{tooltip:l,icon:t.jsx(d.ExportOutlined,{}),target:"_blank",href:n,style:{textDecoration:"none"},children:I("str.openInNewTab")}),s==="image"?t.jsx("img",{src:n,alt:l,style:{width:"100%"}}):s==="pdf"?t.jsxs("iframe",{title:l,src:n,width:"100%",height:"700px",children:["This browser does not support PDFs. Please download the PDF to view it:",t.jsx("a",{href:n,children:"Download PDF"})]}):t.jsxs("iframe",{title:l,src:`https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(n)}`,width:"100%",height:"700px",children:["This browser does not support open ",s.toUpperCase(),". Please download the",s.toUpperCase()," to view it:",t.jsxs("a",{href:n,children:["Download ",s.toUpperCase()]}),"."]})]})}),t.jsx(q,{tooltip:l,icon:a,shape:"circle",onClick:()=>j(!0)})]}):t.jsx(q,{tooltip:l,icon:a,target:"_blank",href:n,shape:"circle"})};exports.FileCellValue=E;exports.FileCrudCellValue=y;exports.default=v;
|
|
@@ -1,12 +1,16 @@
|
|
|
1
1
|
import { FC, ReactNode } from 'react';
|
|
2
2
|
import { InitialCrudField } from './CrudComponent';
|
|
3
3
|
import { FileDownloadProvider, FileUploadProvider } from './ImageCrudField';
|
|
4
|
+
import { RcFile } from 'antd/es/upload';
|
|
4
5
|
export interface FileCrudField<T> extends _FileCrudField<T> {
|
|
5
6
|
type: "file";
|
|
6
7
|
}
|
|
7
8
|
export interface _FileCrudField<T> extends InitialCrudField<T> {
|
|
8
9
|
provider: FileUploadProvider;
|
|
9
10
|
onUploading?: (isUploading: boolean) => void;
|
|
11
|
+
preprocessBeforeUpload?: {
|
|
12
|
+
compressImage?: boolean;
|
|
13
|
+
} | ((file: RcFile) => Promise<RcFile>);
|
|
10
14
|
onRemoved?: () => void;
|
|
11
15
|
fieldClassName?: string;
|
|
12
16
|
accept?: string;
|
|
@@ -14,7 +18,7 @@ export interface _FileCrudField<T> extends InitialCrudField<T> {
|
|
|
14
18
|
block?: boolean;
|
|
15
19
|
help?: ReactNode;
|
|
16
20
|
}
|
|
17
|
-
export default function FileCrudFieldComponent<T>({ name, label, required, provider, onUploading, onRemoved, fieldClassName, accept, rules, maxCount, block, fieldHelper: help, formLayoutProps, ...props }: Readonly<_FileCrudField<T>>): import("react/jsx-runtime").JSX.Element;
|
|
21
|
+
export default function FileCrudFieldComponent<T>({ name, label, required, provider, onUploading, onRemoved, fieldClassName, accept, rules, maxCount, block, fieldHelper: help, formLayoutProps, preprocessBeforeUpload, ...props }: Readonly<_FileCrudField<T>>): import("react/jsx-runtime").JSX.Element;
|
|
18
22
|
export declare const FileCrudCellValue: FC<{
|
|
19
23
|
value: string;
|
|
20
24
|
provider: FileDownloadProvider;
|
|
@@ -1,173 +1,179 @@
|
|
|
1
|
-
import { jsxs as f, jsx as s, Fragment as
|
|
2
|
-
import { FileOutlined as
|
|
3
|
-
import { Form as
|
|
4
|
-
import
|
|
5
|
-
import { useState as
|
|
6
|
-
import { useTranslationLib as
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
import
|
|
11
|
-
|
|
1
|
+
import { jsxs as f, jsx as s, Fragment as V } from "react/jsx-runtime";
|
|
2
|
+
import { FileOutlined as Z, FilePptOutlined as B, FileExcelOutlined as m, FileTextOutlined as v, FileWordOutlined as y, FilePdfOutlined as T, FileImageOutlined as tt, ExportOutlined as et } from "@ant-design/icons";
|
|
3
|
+
import { Form as b, Upload as st, Modal as lt } from "antd";
|
|
4
|
+
import S from "mime";
|
|
5
|
+
import { useState as w, useCallback as j, useEffect as A, useMemo as H } from "react";
|
|
6
|
+
import { useTranslationLib as rt } from "../locale/index.es.js";
|
|
7
|
+
import nt from "../util/ValidationUtil.es.js";
|
|
8
|
+
import P from "../common/button/Button.es.js";
|
|
9
|
+
import at from "../common/layout/VerticalSpace.es.js";
|
|
10
|
+
import it from "../util/CrudUtil.es.js";
|
|
11
|
+
import ct from "../util/ImageUtil.es.js";
|
|
12
|
+
function It({
|
|
12
13
|
name: n,
|
|
13
14
|
label: t,
|
|
14
|
-
required:
|
|
15
|
+
required: l,
|
|
15
16
|
provider: e,
|
|
16
17
|
onUploading: a,
|
|
17
18
|
onRemoved: u,
|
|
18
19
|
fieldClassName: F,
|
|
19
|
-
accept:
|
|
20
|
-
rules:
|
|
21
|
-
maxCount:
|
|
22
|
-
block:
|
|
23
|
-
fieldHelper:
|
|
24
|
-
formLayoutProps:
|
|
25
|
-
|
|
20
|
+
accept: I,
|
|
21
|
+
rules: L,
|
|
22
|
+
maxCount: D = 1,
|
|
23
|
+
block: W,
|
|
24
|
+
fieldHelper: _,
|
|
25
|
+
formLayoutProps: q,
|
|
26
|
+
preprocessBeforeUpload: g,
|
|
27
|
+
...z
|
|
26
28
|
}) {
|
|
27
|
-
const d =
|
|
28
|
-
async (
|
|
29
|
-
var o,
|
|
29
|
+
const d = b.useFormInstance(), R = it.getRealName(n, "upsertFieldName"), h = b.useWatch(R, d), [N, k] = w(!1), [E, G] = w(!1), J = j(
|
|
30
|
+
async (r) => {
|
|
31
|
+
var o, c;
|
|
30
32
|
try {
|
|
31
|
-
const { file:
|
|
32
|
-
|
|
33
|
-
const
|
|
34
|
-
|
|
35
|
-
|
|
33
|
+
const { file: i } = r, x = i.name;
|
|
34
|
+
k(!0), G(!0), a == null || a(!0);
|
|
35
|
+
const C = x ?? "", U = C.split("."), Q = U[U.length - 1], X = e.generateFileName(C), Y = `${await e.getInitialPath()}/${X}.${Q}`;
|
|
36
|
+
let O = i;
|
|
37
|
+
g && (typeof g == "function" ? O = await g(i) : g.compressImage && (O = await ct.resizeImage(i)));
|
|
38
|
+
const $ = await e.upload(
|
|
39
|
+
{ ...i, originFileObj: O },
|
|
40
|
+
Y
|
|
36
41
|
);
|
|
37
|
-
a == null || a(!1), d.setFieldValue(n,
|
|
38
|
-
} catch (
|
|
39
|
-
(
|
|
42
|
+
a == null || a(!1), d.setFieldValue(n, $), (o = r.onSuccess) == null || o.call(r, $);
|
|
43
|
+
} catch (i) {
|
|
44
|
+
(c = r.onError) == null || c.call(r, i);
|
|
40
45
|
} finally {
|
|
41
|
-
|
|
46
|
+
k(!1);
|
|
42
47
|
}
|
|
43
48
|
},
|
|
44
49
|
[d, n, a, e]
|
|
45
|
-
), [
|
|
46
|
-
|
|
47
|
-
!
|
|
50
|
+
), [p, M] = w([]);
|
|
51
|
+
A(() => {
|
|
52
|
+
!E && h && Promise.all(
|
|
48
53
|
(Array.isArray(h) ? h : [h]).map(
|
|
49
|
-
async (
|
|
50
|
-
const o =
|
|
54
|
+
async (r) => {
|
|
55
|
+
const o = S.getType(r), c = r.split("/").pop(), i = await e.getRealUrl(r);
|
|
51
56
|
return {
|
|
52
|
-
uid:
|
|
53
|
-
url:
|
|
57
|
+
uid: r,
|
|
58
|
+
url: i,
|
|
54
59
|
type: o,
|
|
55
|
-
name:
|
|
60
|
+
name: c
|
|
56
61
|
};
|
|
57
62
|
}
|
|
58
63
|
)
|
|
59
|
-
).then((
|
|
60
|
-
}, [h,
|
|
61
|
-
const
|
|
62
|
-
async (
|
|
63
|
-
const o =
|
|
64
|
-
await e.delete(
|
|
64
|
+
).then((r) => M(() => r.map(({ url: c, type: i, uid: x, name: C }) => ({ uid: x, url: c, type: i, response: x, thumbUrl: c, name: C }))));
|
|
65
|
+
}, [h, E, N, e]);
|
|
66
|
+
const K = j(
|
|
67
|
+
async (r) => {
|
|
68
|
+
const o = r.response, c = o || d.getFieldValue(n);
|
|
69
|
+
await e.delete(c), u == null || u(), r && d.setFieldsValue({ [n]: null });
|
|
65
70
|
},
|
|
66
71
|
[d, n, u, e]
|
|
67
72
|
);
|
|
68
73
|
return /* @__PURE__ */ f(
|
|
69
|
-
|
|
74
|
+
b.Item,
|
|
70
75
|
{
|
|
71
76
|
label: t,
|
|
72
|
-
required:
|
|
77
|
+
required: l,
|
|
73
78
|
name: n,
|
|
74
|
-
...
|
|
79
|
+
...q,
|
|
75
80
|
className: F,
|
|
76
81
|
rules: [
|
|
77
|
-
...
|
|
78
|
-
...
|
|
82
|
+
...l ? nt.required(t) : [],
|
|
83
|
+
...L ?? []
|
|
79
84
|
],
|
|
80
|
-
help:
|
|
85
|
+
help: _,
|
|
81
86
|
children: [
|
|
82
87
|
/* @__PURE__ */ s("input", { hidden: !0 }),
|
|
83
88
|
/* @__PURE__ */ s(
|
|
84
|
-
|
|
89
|
+
st,
|
|
85
90
|
{
|
|
86
|
-
...
|
|
87
|
-
fileList:
|
|
88
|
-
className: ((
|
|
89
|
-
maxCount:
|
|
90
|
-
customRequest:
|
|
91
|
-
onRemove:
|
|
91
|
+
...z,
|
|
92
|
+
fileList: p,
|
|
93
|
+
className: ((p == null ? void 0 : p.length) ?? 0) >= D ? "hide-upload" : "",
|
|
94
|
+
maxCount: D,
|
|
95
|
+
customRequest: J,
|
|
96
|
+
onRemove: K,
|
|
92
97
|
listType: "picture",
|
|
93
|
-
onChange: ({ fileList:
|
|
94
|
-
|
|
98
|
+
onChange: ({ fileList: r }) => {
|
|
99
|
+
M(r);
|
|
95
100
|
},
|
|
96
|
-
|
|
97
|
-
|
|
101
|
+
accept: I,
|
|
102
|
+
style: W ? { width: "100%" } : void 0,
|
|
103
|
+
children: /* @__PURE__ */ s(P, { loading: N, children: "Upload File" })
|
|
98
104
|
}
|
|
99
105
|
)
|
|
100
106
|
]
|
|
101
107
|
}
|
|
102
108
|
);
|
|
103
109
|
}
|
|
104
|
-
const
|
|
105
|
-
const [
|
|
106
|
-
return
|
|
110
|
+
const Ot = ({ provider: n, value: t }) => {
|
|
111
|
+
const [l, e] = w();
|
|
112
|
+
return A(() => {
|
|
107
113
|
t && n.getRealUrl(t).then((a) => {
|
|
108
114
|
e({
|
|
109
|
-
mimeType:
|
|
115
|
+
mimeType: S.getType(t),
|
|
110
116
|
url: a,
|
|
111
117
|
fileName: t.split("/").pop() ?? t
|
|
112
118
|
});
|
|
113
119
|
});
|
|
114
|
-
}, [n, t]),
|
|
115
|
-
|
|
120
|
+
}, [n, t]), l ? /* @__PURE__ */ s(
|
|
121
|
+
ot,
|
|
116
122
|
{
|
|
117
|
-
fileName:
|
|
118
|
-
url:
|
|
119
|
-
mimeType:
|
|
123
|
+
fileName: l.fileName,
|
|
124
|
+
url: l == null ? void 0 : l.url,
|
|
125
|
+
mimeType: l == null ? void 0 : l.mimeType
|
|
120
126
|
}
|
|
121
|
-
) : /* @__PURE__ */ s(
|
|
122
|
-
},
|
|
123
|
-
const e =
|
|
127
|
+
) : /* @__PURE__ */ s(V, {});
|
|
128
|
+
}, ot = ({ url: n, mimeType: t = "", fileName: l }) => {
|
|
129
|
+
const e = H(() => t != null && t.includes("image") ? "image" : t != null && t.includes("pdf") ? "pdf" : t != null && t.includes("word") ? "word" : t != null && t.includes("text") ? "text" : t != null && t.includes("presentation") ? "presentation" : t != null && t.includes("excel") || t != null && t.includes("spreadsheet") ? "excel" : "file", [t]), a = H(() => {
|
|
124
130
|
switch (e) {
|
|
125
131
|
case "image":
|
|
126
|
-
return /* @__PURE__ */ s(
|
|
132
|
+
return /* @__PURE__ */ s(tt, {});
|
|
127
133
|
case "pdf":
|
|
128
|
-
return /* @__PURE__ */ s(
|
|
134
|
+
return /* @__PURE__ */ s(T, {});
|
|
129
135
|
case "word":
|
|
130
|
-
return /* @__PURE__ */ s(
|
|
136
|
+
return /* @__PURE__ */ s(y, {});
|
|
131
137
|
case "text":
|
|
132
|
-
return /* @__PURE__ */ s(
|
|
138
|
+
return /* @__PURE__ */ s(v, {});
|
|
133
139
|
case "excel":
|
|
134
|
-
return /* @__PURE__ */ s(
|
|
140
|
+
return /* @__PURE__ */ s(m, {});
|
|
135
141
|
case "presentation":
|
|
136
|
-
return /* @__PURE__ */ s(
|
|
142
|
+
return /* @__PURE__ */ s(B, {});
|
|
137
143
|
default:
|
|
138
|
-
return /* @__PURE__ */ s(
|
|
144
|
+
return /* @__PURE__ */ s(Z, {});
|
|
139
145
|
}
|
|
140
|
-
}, [e]), [u, F] =
|
|
141
|
-
return e !== "file" && e !== "text" ? /* @__PURE__ */ f(
|
|
146
|
+
}, [e]), [u, F] = w(!1), { t: I } = rt();
|
|
147
|
+
return e !== "file" && e !== "text" ? /* @__PURE__ */ f(V, { children: [
|
|
142
148
|
/* @__PURE__ */ s(
|
|
143
|
-
|
|
149
|
+
lt,
|
|
144
150
|
{
|
|
145
151
|
open: u,
|
|
146
|
-
title:
|
|
152
|
+
title: l,
|
|
147
153
|
onCancel: () => F(!1),
|
|
148
|
-
footer: /* @__PURE__ */ s(
|
|
154
|
+
footer: /* @__PURE__ */ s(V, {}),
|
|
149
155
|
width: "100%",
|
|
150
156
|
style: { top: "8px", minHeight: "700px" },
|
|
151
157
|
destroyOnHidden: !0,
|
|
152
|
-
children: /* @__PURE__ */ f(
|
|
158
|
+
children: /* @__PURE__ */ f(at, { children: [
|
|
153
159
|
/* @__PURE__ */ s(
|
|
154
|
-
|
|
160
|
+
P,
|
|
155
161
|
{
|
|
156
|
-
tooltip:
|
|
157
|
-
icon: /* @__PURE__ */ s(
|
|
162
|
+
tooltip: l,
|
|
163
|
+
icon: /* @__PURE__ */ s(et, {}),
|
|
158
164
|
target: "_blank",
|
|
159
165
|
href: n,
|
|
160
166
|
style: { textDecoration: "none" },
|
|
161
|
-
children:
|
|
167
|
+
children: I("str.openInNewTab")
|
|
162
168
|
}
|
|
163
169
|
),
|
|
164
|
-
e === "image" ? /* @__PURE__ */ s("img", { src: n, alt:
|
|
170
|
+
e === "image" ? /* @__PURE__ */ s("img", { src: n, alt: l, style: { width: "100%" } }) : e === "pdf" ? /* @__PURE__ */ f("iframe", { title: l, src: n, width: "100%", height: "700px", children: [
|
|
165
171
|
"This browser does not support PDFs. Please download the PDF to view it:",
|
|
166
172
|
/* @__PURE__ */ s("a", { href: n, children: "Download PDF" })
|
|
167
173
|
] }) : /* @__PURE__ */ f(
|
|
168
174
|
"iframe",
|
|
169
175
|
{
|
|
170
|
-
title:
|
|
176
|
+
title: l,
|
|
171
177
|
src: `https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(
|
|
172
178
|
n
|
|
173
179
|
)}`,
|
|
@@ -191,18 +197,18 @@ const gt = ({ provider: n, value: t }) => {
|
|
|
191
197
|
}
|
|
192
198
|
),
|
|
193
199
|
/* @__PURE__ */ s(
|
|
194
|
-
|
|
200
|
+
P,
|
|
195
201
|
{
|
|
196
|
-
tooltip:
|
|
202
|
+
tooltip: l,
|
|
197
203
|
icon: a,
|
|
198
204
|
shape: "circle",
|
|
199
205
|
onClick: () => F(!0)
|
|
200
206
|
}
|
|
201
207
|
)
|
|
202
208
|
] }) : /* @__PURE__ */ s(
|
|
203
|
-
|
|
209
|
+
P,
|
|
204
210
|
{
|
|
205
|
-
tooltip:
|
|
211
|
+
tooltip: l,
|
|
206
212
|
icon: a,
|
|
207
213
|
target: "_blank",
|
|
208
214
|
href: n,
|
|
@@ -211,7 +217,7 @@ const gt = ({ provider: n, value: t }) => {
|
|
|
211
217
|
);
|
|
212
218
|
};
|
|
213
219
|
export {
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
220
|
+
ot as FileCellValue,
|
|
221
|
+
Ot as FileCrudCellValue,
|
|
222
|
+
It as default
|
|
217
223
|
};
|