@kingteza/crud-component 1.0.4 → 1.0.6

package/dist/src/components/crud/CrudReportComponent.cjs

@@ -0,0 +1,4 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("../../../_virtual/jsx-runtime.cjs"),D=require("@ant-design/icons"),r=require("antd"),a=require("react"),y=require("./CrudField.cjs"),H=require("./view/CrudViewer.cjs"),v=require("../common/button/Button.cjs"),J=require("../common/button/PrintButton.cjs"),K=require("../common/report/SelectFieldInReport.cjs"),Q=require("../common/select/SelectComponent.cjs"),I=require("./view/CrudViewerUtil.cjs"),V={lg:6,md:8,sm:12,xs:24},W={lg:12,md:16,sm:24,xs:24};function X({fields:u,data:d,idField:A,loadingData:x,onSubmit:S,paginateProps:_,size:L,onClickPrint:j,onClickExcelExport:b,minusHeight:M,extraSearchFields:g,searchOnMount:E,summary:O}){const{searchable:G,selectable:m,sortable:B,defaultSort:c}=a.useMemo(()=>{var f,p,C,N,T;const e=[],s=[],o=[];let n;for(const l of u.filter(z=>!z.hidden))l.type==="image"||!l.report||((f=l.report)!=null&&f.searchable&&e.push(l),(p=l.report)!=null&&p.sortable&&(s.push(l),!n&&((C=l.report)!=null&&C.defaultSort)&&(n=l)),l.hideInTable||o.push({id:l.name,label:l.label,lock:(N=l.report)==null?void 0:N.lock,alreadySelected:(T=l.report)==null?void 0:T.alreadySelected}));return{defaultSort:n,searchable:e,sortable:s,selectable:o}},[u]),[R,F]=a.useState([]),h=a.useCallback(async({sortBy:e,sortByType:s,showFields:o=[],...n})=>{const f=[];e&&f.push({field:e,sort:s??"DESC"}),F(u.filter(p=>o.includes(p.name)).map(p=>({...p,hideInTable:!1}))),S({showFields:o,sortBy:f,...n})},[u,S]),[i]=r.Form.useForm(),[w,U]=a.useState(!1),[q,$]=a.useState(!0);return a.useEffect(()=>{if(E&&q){const e=setTimeout(()=>{i.validateFields().then(s=>{h(s)}),$(!1)},200);return()=>clearTimeout(e)}},[h,i,q,E]),a.useEffect(()=>{var s,o,n;!i.getFieldValue("sortBy")&&c&&(console.log((s=c.report)==null?void 0:s.defaultSort),i.setFieldsValue({sortBy:c.name,sortByType:typeof((o=c.report)==null?void 0:o.defaultSort)=="string"?(n=c.report)==null?void 0:n.defaultSort:"ASC"}))},[c,i]),a.useEffect(()=>{if(w){const e=m.filter(s=>s.alreadySelected).map(s=>s.id);F(u.filter(s=>e.includes(s.name)).map(s=>({...s,hideInTable:!1}))),U(!1)}},[u,w,m]),t.jsxRuntimeExports.jsx(t.jsxRuntimeExports.Fragment,{children:t.jsxRuntimeExports.jsxs(r.Space,{className:"w-100",direction:"vertical",children:[t.jsxRuntimeExports.jsxs(r.Form,{form:i,layout:"vertical",onFinish:h,children:[t.jsxRuntimeExports.jsxs(r.Row,{gutter:[8,8],children:[G.map(e=>{var s,o,n;return t.jsxRuntimeExports.jsx(r.Col,{...e.grid??V,style:{alignSelf:"end"},children:(s=e.report)!=null&&s.customRender?e.report.customRender(i):e.type==="date"?t.jsxRuntimeExports.jsx(y.default,{...e,type:"date",range:(o=e.report)==null?void 0:o.range,required:!!((n=e.report)!=null&&n.required),readonly:!1,fieldClassName:"mb-0"}):e.type==="select"?t.jsxRuntimeExports.jsx(y.default,{...e,type:"select",multiple:!0,required:!1,readonly:!1,fieldClassName:"mb-0"}):t.jsxRuntimeExports.jsx(y.default,{...e,readonly:!1,required:!1,fieldClassName:"mb-0"})},e.name)}),!!(m!=null&&m.length)&&t.jsxRuntimeExports.jsx(r.Col,{...W,children:t.jsxRuntimeExports.jsx(K.SelectFieldInReport,{items:m,name:"showFields",mode:"multiple",label:"Show Fields",className:"mb-0"})}),!!B.length&&t.jsxRuntimeExports.jsx(r.Col,{...V,children:t.jsxRuntimeExports.jsx(Q.default,{label:"Sort By",name:"sortBy",items:B.map(e=>({id:e.name,label:e.label})),nameFieldInArray:"label",fieldId:"id",className:"mb-0",dropdownRender:e=>t.jsxRuntimeExports.jsxs(t.jsxRuntimeExports.Fragment,{children:[e,t.jsxRuntimeExports.jsx(r.Form.Item,{name:"sortByType",noStyle:!0,className:"mt-3",children:t.jsxRuntimeExports.jsx(r.Radio.Group,{className:"w-100",defaultValue:"DESC",optionType:"button",children:t.jsxRuntimeExports.jsxs(r.Row,{children:[t.jsxRuntimeExports.jsx(r.Col,{xs:12,children:t.jsxRuntimeExports.jsx(r.Radio,{className:"w-100",style:{borderTopRightRadius:0,borderBottomRightRadius:0},value:"ASC",children:"Ascending"})}),t.jsxRuntimeExports.jsx(r.Col,{xs:12,children:t.jsxRuntimeExports.jsx(r.Radio,{className:"w-100",style:{borderTopLeftRadius:0,borderBottomLeftRadius:0},value:"DESC",children:"Descending"})})]})})})]})})}),g?g(i):null]}),t.jsxRuntimeExports.jsx(v.default,{className:"mt-3",type:"primary",block:!0,htmlType:"submit",disabled:x,children:"Submit"})]}),t.jsxRuntimeExports.jsxs(r.Space,{children:[!!j&&t.jsxRuntimeExports.jsx(J.PrintButton,{disabled:x||!d.length,onClick:()=>j==null?void 0:j({tableId:"#crud-table table",data:d,fields:R.map(e=>({...e,render:I.getRendererValueCrudViewer(e)}))})}),!!b&&t.jsxRuntimeExports.jsx(v.default,{disabled:x||!d.length,onClick:()=>b==null?void 0:b({tableId:"#crud-table table",data:d,fields:R.map(e=>({...e,render:I.getRendererValueCrudViewer(e)}))}),icon:t.jsxRuntimeExports.jsx(D.FileExcelOutlined,{}),className:`group
+                ${x||!d.length?"":"!bg-green-700 hover:!bg-green-600 !text-white !border-green-700 hover:!border-green-600"}
+                
+              `,children:"Excel"})]}),O,t.jsxRuntimeExports.jsx(H.default,{minusHeight:M,data:d,size:L,fields:R,idField:A,loadingData:x,paginateProps:_,viewable:!1})]})})}exports.default=X;

package/dist/src/components/crud/CrudReportComponent.js

@@ -0,0 +1,255 @@
+import { j as r } from "../../../_virtual/jsx-runtime.js";
+import { FileExcelOutlined as X } from "@ant-design/icons";
+import { Form as j, Space as L, Row as G, Col as f, Radio as S } from "antd";
+import { useMemo as Y, useState as x, useCallback as Z, useEffect as B } from "react";
+import R from "./CrudField.js";
+import E from "./view/CrudViewer.js";
+import O from "../common/button/Button.js";
+import { PrintButton as k } from "../common/button/PrintButton.js";
+import { SelectFieldInReport as P } from "../common/report/SelectFieldInReport.js";
+import ee from "../common/select/SelectComponent.js";
+import { getRendererValueCrudViewer as _ } from "./view/CrudViewerUtil.js";
+const $ = { lg: 6, md: 8, sm: 12, xs: 24 }, re = { lg: 12, md: 16, sm: 24, xs: 24 };
+function pe({
+  fields: n,
+  data: i,
+  idField: z,
+  loadingData: c,
+  onSubmit: F,
+  paginateProps: D,
+  size: H,
+  onClickPrint: b,
+  onClickExcelExport: h,
+  minusHeight: J,
+  extraSearchFields: w,
+  searchOnMount: N,
+  summary: K
+}) {
+  const { searchable: M, selectable: d, sortable: T, defaultSort: m } = Y(() => {
+    var p, u, V, q, A;
+    const e = [], t = [], l = [];
+    let o;
+    for (const s of n.filter((W) => !W.hidden))
+      s.type === "image" || !s.report || ((p = s.report) != null && p.searchable && e.push(s), (u = s.report) != null && u.sortable && (t.push(s), !o && ((V = s.report) != null && V.defaultSort) && (o = s)), s.hideInTable || l.push({
+        id: s.name,
+        label: s.label,
+        lock: (q = s.report) == null ? void 0 : q.lock,
+        alreadySelected: (A = s.report) == null ? void 0 : A.alreadySelected
+      }));
+    return {
+      defaultSort: o,
+      searchable: e,
+      sortable: t,
+      selectable: l
+    };
+  }, [n]), [y, v] = x(
+    []
+  ), g = Z(
+    async ({
+      sortBy: e,
+      sortByType: t,
+      showFields: l = [],
+      ...o
+    }) => {
+      const p = [];
+      e && p.push({
+        field: e,
+        sort: t ?? "DESC"
+      }), v(
+        n.filter((u) => l.includes(u.name)).map((u) => ({ ...u, hideInTable: !1 }))
+      ), F({ showFields: l, sortBy: p, ...o });
+    },
+    [n, F]
+  ), [a] = j.useForm(), [C, Q] = x(!1), [I, U] = x(!0);
+  return B(() => {
+    if (N && I) {
+      const e = setTimeout(() => {
+        a.validateFields().then((t) => {
+          g(t);
+        }), U(!1);
+      }, 200);
+      return () => clearTimeout(e);
+    }
+  }, [g, a, I, N]), B(() => {
+    var t, l, o;
+    !a.getFieldValue("sortBy") && m && (console.log((t = m.report) == null ? void 0 : t.defaultSort), a.setFieldsValue({
+      sortBy: m.name,
+      sortByType: typeof ((l = m.report) == null ? void 0 : l.defaultSort) == "string" ? (o = m.report) == null ? void 0 : o.defaultSort : "ASC"
+    }));
+  }, [m, a]), B(() => {
+    if (C) {
+      const e = d.filter((t) => t.alreadySelected).map((t) => t.id);
+      v(
+        n.filter((t) => e.includes(t.name)).map((t) => ({ ...t, hideInTable: !1 }))
+      ), Q(!1);
+    }
+  }, [n, C, d]), /* @__PURE__ */ r.jsx(r.Fragment, { children: /* @__PURE__ */ r.jsxs(L, { className: "w-100", direction: "vertical", children: [
+    /* @__PURE__ */ r.jsxs(j, { form: a, layout: "vertical", onFinish: g, children: [
+      /* @__PURE__ */ r.jsxs(G, { gutter: [8, 8], children: [
+        M.map((e) => {
+          var t, l, o;
+          return /* @__PURE__ */ r.jsx(
+            f,
+            {
+              ...e.grid ?? $,
+              style: { alignSelf: "end" },
+              children: (t = e.report) != null && t.customRender ? e.report.customRender(a) : e.type === "date" ? /* @__PURE__ */ r.jsx(
+                R,
+                {
+                  ...e,
+                  type: "date",
+                  range: (l = e.report) == null ? void 0 : l.range,
+                  required: !!((o = e.report) != null && o.required),
+                  readonly: !1,
+                  fieldClassName: "mb-0"
+                }
+              ) : e.type === "select" ? /* @__PURE__ */ r.jsx(
+                R,
+                {
+                  ...e,
+                  type: "select",
+                  multiple: !0,
+                  required: !1,
+                  readonly: !1,
+                  fieldClassName: "mb-0"
+                }
+              ) : /* @__PURE__ */ r.jsx(
+                R,
+                {
+                  ...e,
+                  readonly: !1,
+                  required: !1,
+                  fieldClassName: "mb-0"
+                }
+              )
+            },
+            e.name
+          );
+        }),
+        !!(d != null && d.length) && /* @__PURE__ */ r.jsx(f, { ...re, children: /* @__PURE__ */ r.jsx(
+          P,
+          {
+            items: d,
+            name: "showFields",
+            mode: "multiple",
+            label: "Show Fields",
+            className: "mb-0"
+          }
+        ) }),
+        !!T.length && /* @__PURE__ */ r.jsx(f, { ...$, children: /* @__PURE__ */ r.jsx(
+          ee,
+          {
+            label: "Sort By",
+            name: "sortBy",
+            items: T.map((e) => ({ id: e.name, label: e.label })),
+            nameFieldInArray: "label",
+            fieldId: "id",
+            className: "mb-0",
+            dropdownRender: (e) => /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+              e,
+              /* @__PURE__ */ r.jsx(j.Item, { name: "sortByType", noStyle: !0, className: "mt-3", children: /* @__PURE__ */ r.jsx(
+                S.Group,
+                {
+                  className: "w-100",
+                  defaultValue: "DESC",
+                  optionType: "button",
+                  children: /* @__PURE__ */ r.jsxs(G, { children: [
+                    /* @__PURE__ */ r.jsx(f, { xs: 12, children: /* @__PURE__ */ r.jsx(
+                      S,
+                      {
+                        className: "w-100",
+                        style: {
+                          borderTopRightRadius: 0,
+                          borderBottomRightRadius: 0
+                        },
+                        value: "ASC",
+                        children: "Ascending"
+                      }
+                    ) }),
+                    /* @__PURE__ */ r.jsx(f, { xs: 12, children: /* @__PURE__ */ r.jsx(
+                      S,
+                      {
+                        className: "w-100",
+                        style: {
+                          borderTopLeftRadius: 0,
+                          borderBottomLeftRadius: 0
+                        },
+                        value: "DESC",
+                        children: "Descending"
+                      }
+                    ) })
+                  ] })
+                }
+              ) })
+            ] })
+          }
+        ) }),
+        w ? w(a) : null
+      ] }),
+      /* @__PURE__ */ r.jsx(
+        O,
+        {
+          className: "mt-3",
+          type: "primary",
+          block: !0,
+          htmlType: "submit",
+          disabled: c,
+          children: "Submit"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ r.jsxs(L, { children: [
+      !!b && /* @__PURE__ */ r.jsx(
+        k,
+        {
+          disabled: c || !i.length,
+          onClick: () => b == null ? void 0 : b({
+            tableId: "#crud-table table",
+            data: i,
+            fields: y.map((e) => ({
+              ...e,
+              render: _(e)
+            }))
+          })
+        }
+      ),
+      !!h && /* @__PURE__ */ r.jsx(
+        O,
+        {
+          disabled: c || !i.length,
+          onClick: () => h == null ? void 0 : h({
+            tableId: "#crud-table table",
+            data: i,
+            fields: y.map((e) => ({
+              ...e,
+              render: _(e)
+            }))
+          }),
+          icon: /* @__PURE__ */ r.jsx(X, {}),
+          className: `group
+                ${c || !i.length ? "" : "!bg-green-700 hover:!bg-green-600 !text-white !border-green-700 hover:!border-green-600"}
+                
+              `,
+          children: "Excel"
+        }
+      )
+    ] }),
+    K,
+    /* @__PURE__ */ r.jsx(
+      E,
+      {
+        minusHeight: J,
+        data: i,
+        size: H,
+        fields: y,
+        idField: z,
+        loadingData: c,
+        paginateProps: D,
+        viewable: !1
+      }
+    )
+  ] }) });
+}
+export {
+  pe as default
+};

package/dist/src/components/crud/CrudSearchComponent.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../../_virtual/jsx-runtime.cjs"),o=require("react"),E=require("@ant-design/icons"),i=require("antd"),a=require("./CrudField.cjs"),q=require("../common/button/Button.cjs");function M({searchFields:t=[],fields:m,searchOnChange:d,onSearch:b,searchDefaultValues:g,searchFieldsCustomColumnProps:r}){const R=o.useMemo(()=>t.map(n=>typeof n=="string"?{...m.find(y=>n===y.name),required:!1}:{...m.find(f=>(n==null?void 0:n.name)===f.name),...n}).filter(n=>n&&!(n!=null&&n.hidden)),[t,m]),j=o.useMemo(()=>t.length===1?{field:22,button:2}:t.length===2?{field:11,button:2}:t.length===3?{field:6,button:6}:t.length===4?{field:5,button:4}:t.length===5?{field:4,button:4}:{field:4,button:4},[t.length]),p=o.useMemo(()=>t.length===1?{field:22,button:2}:t.length===2?{field:11,button:2}:t.length===3?{field:6,button:6}:t.length===4?{field:5,button:4}:t.length===5?{field:4,button:4}:{field:4,button:4},[t.length]),s=o.useMemo(()=>t.length===1?{field:21,button:3}:t.length===2?{field:11,button:2}:t.length===3?{field:24,button:24}:t.length===4?{field:5,button:4}:t.length===5?{field:4,button:4}:{field:4,button:4},[t.length]),[u]=i.Form.useForm(),x=o.useCallback(async n=>{if((n||d)&&b){const l=await u.validateFields();b(l)}},[u,b,d]);return o.useEffect(()=>{g&&(u.setFieldsValue(g),x(!0))},[u,g]),t!=null&&t.length?e.jsxRuntimeExports.jsx(i.Form,{form:u,onFinish:()=>x(!0),layout:"vertical",className:"mb-2",onChange:()=>x(!1),children:e.jsxRuntimeExports.jsxs(i.Row,{gutter:[4,8],className:"w-100",children:[R.map((n,l)=>{const f=(r==null?void 0:r[l])??{md:j.field,sm:p.field,xs:s.field};return o.createElement(i.Col,{...f,key:`search_field_${String(n.name)}`,className:"align-self-end"},e.jsxRuntimeExports.jsx(a.default,{...n,readonly:!1,fieldClassName:"mb-0"}))}),e.jsxRuntimeExports.jsx(i.Col,{md:j.button,sm:p.button,xs:s.button,style:{alignSelf:"end"},children:e.jsxRuntimeExports.jsx(q.default,{type:"primary",htmlType:"submit",block:!0,icon:e.jsxRuntimeExports.jsx(E.SearchOutlined,{})})})]})}):e.jsxRuntimeExports.jsx(e.jsxRuntimeExports.Fragment,{})}exports.default=M;

package/dist/src/components/crud/CrudSearchComponent.js

@@ -0,0 +1,95 @@
+import { j as o } from "../../../_virtual/jsx-runtime.js";
+import { useMemo as l, useCallback as k, useEffect as E, createElement as v } from "react";
+import { SearchOutlined as R } from "@ant-design/icons";
+import { Form as y, Row as S, Col as w } from "antd";
+import _ from "./CrudField.js";
+import q from "../common/button/Button.js";
+function G({
+  searchFields: t = [],
+  fields: e,
+  searchOnChange: p,
+  onSearch: i,
+  searchDefaultValues: b,
+  searchFieldsCustomColumnProps: g
+}) {
+  const N = l(
+    () => t.map((n) => typeof n == "string" ? {
+      ...e.find((a) => n === a.name),
+      required: !1
+    } : {
+      ...e.find(
+        (u) => (n == null ? void 0 : n.name) === u.name
+      ),
+      ...n
+    }).filter((n) => n && !(n != null && n.hidden)),
+    [t, e]
+  ), x = l(
+    () => t.length === 1 ? { field: 22, button: 2 } : t.length === 2 ? { field: 11, button: 2 } : t.length === 3 ? { field: 6, button: 6 } : t.length === 4 ? { field: 5, button: 4 } : t.length === 5 ? { field: 4, button: 4 } : { field: 4, button: 4 },
+    [t.length]
+  ), d = l(
+    () => t.length === 1 ? { field: 22, button: 2 } : t.length === 2 ? { field: 11, button: 2 } : t.length === 3 ? { field: 6, button: 6 } : t.length === 4 ? { field: 5, button: 4 } : t.length === 5 ? { field: 4, button: 4 } : { field: 4, button: 4 },
+    [t.length]
+  ), j = l(
+    () => t.length === 1 ? { field: 21, button: 3 } : t.length === 2 ? { field: 11, button: 2 } : t.length === 3 ? { field: 24, button: 24 } : t.length === 4 ? { field: 5, button: 4 } : t.length === 5 ? { field: 4, button: 4 } : { field: 4, button: 4 },
+    [t.length]
+  ), [f] = y.useForm(), r = k(
+    async (n) => {
+      if ((n || p) && i) {
+        const m = await f.validateFields();
+        i(m);
+      }
+    },
+    [f, i, p]
+  );
+  return E(() => {
+    b && (f.setFieldsValue(b), r(!0));
+  }, [f, b]), t != null && t.length ? /* @__PURE__ */ o.jsx(
+    y,
+    {
+      form: f,
+      onFinish: () => r(!0),
+      layout: "vertical",
+      className: "mb-2",
+      onChange: () => r(!1),
+      children: /* @__PURE__ */ o.jsxs(S, { gutter: [4, 8], className: "w-100", children: [
+        N.map((n, m) => {
+          const u = (g == null ? void 0 : g[m]) ?? {
+            md: x.field,
+            sm: d.field,
+            xs: j.field
+          };
+          return /* @__PURE__ */ v(
+            w,
+            {
+              ...u,
+              key: `search_field_${String(n.name)}`,
+              className: "align-self-end"
+            },
+            /* @__PURE__ */ o.jsx(_, { ...n, readonly: !1, fieldClassName: "mb-0" })
+          );
+        }),
+        /* @__PURE__ */ o.jsx(
+          w,
+          {
+            md: x.button,
+            sm: d.button,
+            xs: j.button,
+            style: { alignSelf: "end" },
+            children: /* @__PURE__ */ o.jsx(
+              q,
+              {
+                type: "primary",
+                htmlType: "submit",
+                block: !0,
+                icon: /* @__PURE__ */ o.jsx(R, {})
+              }
+            )
+          }
+        )
+      ] })
+    }
+  ) : /* @__PURE__ */ o.jsx(o.Fragment, {});
+}
+export {
+  G as default
+};

package/dist/src/components/crud/FileCrudField.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../../_virtual/jsx-runtime.cjs");;/* empty css            */const x=require("@ant-design/icons"),h=require("antd"),M=require("mime"),u=require("react"),B=require("react-i18next"),H=require("../../locale/hooks/translation-constants.cjs"),z=require("../../util/ValidationUtil.cjs"),w=require("../common/button/Button.cjs"),G=require("../common/layout/VerticalSpace.cjs");function J({name:l,label:t,required:r,provider:s,onUploading:i,onRemoved:d,fieldClassName:p,accept:g,rules:D,maxCount:C=1,block:N,...k}){const j=h.Form.useFormInstance(),f=h.Form.useWatch(l,j),[P,O]=u.useState(!1),[q,U]=u.useState(!1),_=u.useCallback(async n=>{var a,o;try{const{file:c}=n,R=c.name;O(!0),U(!0),i==null||i(!0);const F=R??"",b=F.split("."),L=b[b.length-1],W=s.generateFileName(F),I=`${await s.getInitialPath()}/${W}.${L}`;console.log({filePath:I});const V=await s.upload({...c,originFileObj:c},I);i==null||i(!1),j.setFieldValue(l,V),(a=n.onSuccess)==null||a.call(n,V)}catch(c){(o=n.onError)==null||o.call(n,c)}finally{O(!1)}},[j,l,i,s]),[E,S]=u.useState([]);u.useEffect(()=>{!q&&f&&Promise.all((Array.isArray(f)?f:[f]).map(async n=>{const a=M.getType(n),o=n.split("/").pop(),c=await s.getRealUrl(n);return{uid:n,url:c,type:a,name:o}})).then(n=>S(()=>{const a=n.map(({url:o,type:c,uid:R,name:F})=>({uid:R,url:o,type:c,response:R,thumbUrl:o,name:F}));return console.log(a),a}))},[f,q,P,s]);const $=u.useCallback(async n=>{const a=n.response,o=a||j.getFieldValue(l);await s.delete(o),d==null||d(),n&&j.setFieldsValue({[l]:null})},[j,l,d,s]);return e.jsxRuntimeExports.jsxs(h.Form.Item,{label:t,required:r,name:l,className:p,rules:[...r?z.default.required(t):[],...D??[]],children:[e.jsxRuntimeExports.jsx("input",{hidden:!0}),e.jsxRuntimeExports.jsx(h.Upload,{...k,fileList:E,className:((E==null?void 0:E.length)??0)>=C?"hide-upload":"",maxCount:C,customRequest:_,onRemove:$,listType:"picture",onChange:({fileList:n})=>{S(n)},style:N?{width:"100%"}:void 0,children:e.jsxRuntimeExports.jsx(w.default,{loading:P,children:"Upload File"})})]})}const K=({provider:l,value:t})=>{const[r,s]=u.useState();return u.useEffect(()=>{t&&l.getRealUrl(t).then(i=>{s({mimeType:M.getType(t),url:i,fileName:t.split("/").pop()??t})})},[l,t]),r?e.jsxRuntimeExports.jsx(A,{fileName:r.fileName,url:r==null?void 0:r.url,mimeType:r==null?void 0:r.mimeType}):e.jsxRuntimeExports.jsx(e.jsxRuntimeExports.Fragment,{})},A=({url:l,mimeType:t="",fileName:r})=>{const s=u.useMemo(()=>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]),i=u.useMemo(()=>{switch(s){case"image":return e.jsxRuntimeExports.jsx(x.FileImageOutlined,{});case"pdf":return e.jsxRuntimeExports.jsx(x.FilePdfOutlined,{});case"word":return e.jsxRuntimeExports.jsx(x.FileWordOutlined,{});case"text":return e.jsxRuntimeExports.jsx(x.FileTextOutlined,{});case"excel":return e.jsxRuntimeExports.jsx(x.FileExcelOutlined,{});case"presentation":return e.jsxRuntimeExports.jsx(x.FilePptOutlined,{});default:return e.jsxRuntimeExports.jsx(x.FileOutlined,{})}},[s]),[d,p]=u.useState(!1),{t:g}=B.useTranslation(H.TRANSLATION_NAMESPACE);return s!=="file"&&s!=="text"?e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsx(h.Modal,{open:d,title:r,onCancel:()=>p(!1),footer:e.jsxRuntimeExports.jsx(e.jsxRuntimeExports.Fragment,{}),width:"100%",style:{top:"8px",minHeight:"700px"},destroyOnClose:!0,children:e.jsxRuntimeExports.jsxs(G.default,{children:[e.jsxRuntimeExports.jsx(w.default,{tooltip:r,icon:e.jsxRuntimeExports.jsx(x.ExportOutlined,{}),target:"_blank",href:l,style:{textDecoration:"none"},children:g("str.openInNewTab")}),s==="image"?e.jsxRuntimeExports.jsx("img",{src:l,alt:r,style:{width:"100%"}}):s==="pdf"?e.jsxRuntimeExports.jsxs("iframe",{title:r,src:l,width:"100%",height:"700px",children:["This browser does not support PDFs. Please download the PDF to view it:",e.jsxRuntimeExports.jsx("a",{href:l,children:"Download PDF"}),"."]}):e.jsxRuntimeExports.jsxs("iframe",{title:r,src:`https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(l)}`,width:"100%",height:"700px",children:["This browser does not support open ",s.toUpperCase(),". Please download the",s.toUpperCase()," to view it:",e.jsxRuntimeExports.jsxs("a",{href:l,children:["Download ",s.toUpperCase()]}),"."]})]})}),e.jsxRuntimeExports.jsx(w.default,{tooltip:r,icon:i,shape:"circle",onClick:()=>p(!0)})]}):e.jsxRuntimeExports.jsx(w.default,{tooltip:r,icon:i,target:"_blank",href:l,shape:"circle"})};exports.FileCellValue=A;exports.FileCrudCellValue=K;exports.default=J;

package/dist/src/components/crud/FileCrudField.js

@@ -0,0 +1,220 @@
+import { j as e } from "../../../_virtual/jsx-runtime.js";
+/* empty css          */
+import { FileOutlined as H, FilePptOutlined as z, FileExcelOutlined as G, FileTextOutlined as J, FileWordOutlined as K, FilePdfOutlined as Q, FileImageOutlined as X, ExportOutlined as Y } from "@ant-design/icons";
+import { Form as g, Upload as Z, Modal as v } from "antd";
+import S from "mime";
+import { useState as h, useCallback as N, useEffect as U, useMemo as M } from "react";
+import { useTranslation as y } from "react-i18next";
+import { TRANSLATION_NAMESPACE as m } from "../../locale/hooks/translation-constants.js";
+import T from "../../util/ValidationUtil.js";
+import w from "../common/button/Button.js";
+import tt from "../common/layout/VerticalSpace.js";
+function ht({
+  name: n,
+  label: t,
+  required: r,
+  provider: s,
+  onUploading: a,
+  onRemoved: u,
+  fieldClassName: x,
+  accept: C,
+  rules: k,
+  maxCount: P = 1,
+  block: $,
+  ..._
+}) {
+  const d = g.useFormInstance(), f = g.useWatch(n, d), [O, I] = h(!1), [V, L] = h(!1), R = N(
+    async (l) => {
+      var c, o;
+      try {
+        const { file: i } = l, p = i.name;
+        I(!0), L(!0), a == null || a(!0);
+        const F = p ?? "", E = F.split("."), q = E[E.length - 1], B = s.generateFileName(F), A = `${await s.getInitialPath()}/${B}.${q}`;
+        console.log({ filePath: A });
+        const D = await s.upload(
+          { ...i, originFileObj: i },
+          A
+        );
+        a == null || a(!1), d.setFieldValue(n, D), (c = l.onSuccess) == null || c.call(l, D);
+      } catch (i) {
+        (o = l.onError) == null || o.call(l, i);
+      } finally {
+        I(!1);
+      }
+    },
+    [d, n, a, s]
+  ), [j, b] = h([]);
+  U(() => {
+    !V && f && Promise.all(
+      (Array.isArray(f) ? f : [f]).map(
+        async (l) => {
+          const c = S.getType(l), o = l.split("/").pop(), i = await s.getRealUrl(l);
+          return {
+            uid: l,
+            url: i,
+            type: c,
+            name: o
+          };
+        }
+      )
+    ).then((l) => b(() => {
+      const c = l.map(({ url: o, type: i, uid: p, name: F }) => ({ uid: p, url: o, type: i, response: p, thumbUrl: o, name: F }));
+      return console.log(c), c;
+    }));
+  }, [f, V, O, s]);
+  const W = N(
+    async (l) => {
+      const c = l.response, o = c || d.getFieldValue(n);
+      await s.delete(o), u == null || u(), l && d.setFieldsValue({ [n]: null });
+    },
+    [d, n, u, s]
+  );
+  return /* @__PURE__ */ e.jsxs(
+    g.Item,
+    {
+      label: t,
+      required: r,
+      name: n,
+      className: x,
+      rules: [
+        ...r ? T.required(t) : [],
+        ...k ?? []
+      ],
+      children: [
+        /* @__PURE__ */ e.jsx("input", { hidden: !0 }),
+        /* @__PURE__ */ e.jsx(
+          Z,
+          {
+            ..._,
+            fileList: j,
+            className: ((j == null ? void 0 : j.length) ?? 0) >= P ? "hide-upload" : "",
+            maxCount: P,
+            customRequest: R,
+            onRemove: W,
+            listType: "picture",
+            onChange: ({ fileList: l }) => {
+              b(l);
+            },
+            style: $ ? { width: "100%" } : void 0,
+            children: /* @__PURE__ */ e.jsx(w, { loading: O, children: "Upload File" })
+          }
+        )
+      ]
+    }
+  );
+}
+const xt = ({ provider: n, value: t }) => {
+  const [r, s] = h();
+  return U(() => {
+    t && n.getRealUrl(t).then((a) => {
+      s({
+        mimeType: S.getType(t),
+        url: a,
+        fileName: t.split("/").pop() ?? t
+      });
+    });
+  }, [n, t]), r ? /* @__PURE__ */ e.jsx(
+    et,
+    {
+      fileName: r.fileName,
+      url: r == null ? void 0 : r.url,
+      mimeType: r == null ? void 0 : r.mimeType
+    }
+  ) : /* @__PURE__ */ e.jsx(e.Fragment, {});
+}, et = ({ url: n, mimeType: t = "", fileName: r }) => {
+  const s = M(() => 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 = M(() => {
+    switch (s) {
+      case "image":
+        return /* @__PURE__ */ e.jsx(X, {});
+      case "pdf":
+        return /* @__PURE__ */ e.jsx(Q, {});
+      case "word":
+        return /* @__PURE__ */ e.jsx(K, {});
+      case "text":
+        return /* @__PURE__ */ e.jsx(J, {});
+      case "excel":
+        return /* @__PURE__ */ e.jsx(G, {});
+      case "presentation":
+        return /* @__PURE__ */ e.jsx(z, {});
+      default:
+        return /* @__PURE__ */ e.jsx(H, {});
+    }
+  }, [s]), [u, x] = h(!1), { t: C } = y(m);
+  return s !== "file" && s !== "text" ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    /* @__PURE__ */ e.jsx(
+      v,
+      {
+        open: u,
+        title: r,
+        onCancel: () => x(!1),
+        footer: /* @__PURE__ */ e.jsx(e.Fragment, {}),
+        width: "100%",
+        style: { top: "8px", minHeight: "700px" },
+        destroyOnClose: !0,
+        children: /* @__PURE__ */ e.jsxs(tt, { children: [
+          /* @__PURE__ */ e.jsx(
+            w,
+            {
+              tooltip: r,
+              icon: /* @__PURE__ */ e.jsx(Y, {}),
+              target: "_blank",
+              href: n,
+              style: { textDecoration: "none" },
+              children: C("str.openInNewTab")
+            }
+          ),
+          s === "image" ? /* @__PURE__ */ e.jsx("img", { src: n, alt: r, style: { width: "100%" } }) : s === "pdf" ? /* @__PURE__ */ e.jsxs("iframe", { title: r, src: n, width: "100%", height: "700px", children: [
+            "This browser does not support PDFs. Please download the PDF to view it:",
+            /* @__PURE__ */ e.jsx("a", { href: n, children: "Download PDF" }),
+            "."
+          ] }) : /* @__PURE__ */ e.jsxs(
+            "iframe",
+            {
+              title: r,
+              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:",
+                /* @__PURE__ */ e.jsxs("a", { href: n, children: [
+                  "Download ",
+                  s.toUpperCase()
+                ] }),
+                "."
+              ]
+            }
+          )
+        ] })
+      }
+    ),
+    /* @__PURE__ */ e.jsx(
+      w,
+      {
+        tooltip: r,
+        icon: a,
+        shape: "circle",
+        onClick: () => x(!0)
+      }
+    )
+  ] }) : /* @__PURE__ */ e.jsx(
+    w,
+    {
+      tooltip: r,
+      icon: a,
+      target: "_blank",
+      href: n,
+      shape: "circle"
+    }
+  );
+};
+export {
+  et as FileCellValue,
+  xt as FileCrudCellValue,
+  ht as default
+};

package/dist/src/components/crud/ImageCrudField.cjs

@@ -0,0 +1 @@
+"use strict";var S=Object.defineProperty;var _=(e,a,t)=>a in e?S(e,a,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[a]=t;var h=(e,a,t)=>_(e,typeof a!="symbol"?a+"":a,t);Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("../../../_virtual/jsx-runtime.cjs");;/* empty css            */const O=require("@ant-design/icons"),u=require("antd"),I=require("path-browserify"),i=require("react"),k=require("../../util/NumberUtil.cjs"),A=require("../../util/ValidationUtil.cjs"),D=require("uuid"),M=require("../common/picker/ImagePicker.cjs");class p{}class T extends p{constructor(t="",s=""){super();h(this,"rootPath");h(this,"subPath");this.rootPath=t,this.subPath=s}cloneFilePath(t){const s=I.parse(t),r=`${s.name}_cloned_${k.default.randInt(1e5)}`;return I.format({dir:s.dir,ext:s.ext,name:r})}generateFileName(t){return`${t.split(".")[0]}_${D.v4().replace("-","")}`}}function W({name:e,label:a,required:t,provider:s,onUploading:r,aspectRatio:j,onRemoved:o,fieldClassName:g,hideLabel:q=!1,listType:w}){const c=u.Form.useFormInstance(),f=u.Form.useWatch(e,c),[F,C]=i.useState(!1),P=i.useCallback(async(n,N)=>{if(N){r==null||r(!0);const m=n.name,x=m.split("."),V=x[x.length-1],y=s.generateFileName(m),$=`${await s.getInitialPath()}/${y}.${V}`,b=await s.upload(n,$);C(!0),r==null||r(!1),c.setFieldValue(e,b)}else{console.log(n);const m=c.getFieldsValue(),x=await s.delete(m[e]);o==null||o(),x&&c.setFieldsValue({[e]:null})}},[c,e,o,r,s]),[d,E]=i.useState();return i.useEffect(()=>{!F&&f?s.getRealUrl(f).then(E):E(d)},[f,F,s,d]),l.jsxRuntimeExports.jsx(l.jsxRuntimeExports.Fragment,{children:l.jsxRuntimeExports.jsxs(u.Form.Item,{rules:t?A.default.required(a):[],label:q?null:a,required:t,name:e,children:[l.jsxRuntimeExports.jsx(M.default,{noStyle:!0,listType:w,aspectRatio:j,values:d,onRemove:n=>{n&&P(n,!1)},onAdd:async n=>{n&&await P(n,!0)},className:g}),l.jsxRuntimeExports.jsx(u.Input,{hidden:!0})]})})}const z=({provider:e,value:a})=>{const[t,s]=i.useState();return i.useEffect(()=>{a&&e.getRealUrl(a).then(s)},[e,a]),t?l.jsxRuntimeExports.jsx(R,{url:t}):l.jsxRuntimeExports.jsx(l.jsxRuntimeExports.Fragment,{})},R=({url:e})=>l.jsxRuntimeExports.jsx(u.Avatar,{className:"p-0",children:l.jsxRuntimeExports.jsx(u.Image,{className:"m-0 p-0 position-relative",src:e,preview:{mask:l.jsxRuntimeExports.jsx(O.EyeOutlined,{})}})});exports.FileDownloadProvider=p;exports.FileUploadProvider=T;exports.ImageCellValue=R;exports.ImageCrudCellValue=z;exports.default=W;