@kingteza/crud-component 1.2.0 → 1.2.2

package/dist/crud/CrudSearchComponent.es.js

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

package/dist/crud/CrudTextAreaComponent.cjs.js

@@ -0,0 +1 @@
+"use strict";const u=require("react/jsx-runtime"),C=require("../common/text-field/TextArea.cjs.js"),T=require("../common/rich/index.cjs.js"),h=require("antd"),j=require("../util/CrudUtil.cjs.js"),p=({onChange:t,label:r,required:s,rules:o,name:i,updatable:n=!0,...c})=>{const a=h.Form.useFormInstance(),l=j.getRealName(i,"upsertFieldName");if(c.rich)return u.jsx(T.RichTextEditor,{name:l,label:r,required:s,rules:o,disabled:!n});{const{placeholder:m,rows:x,cols:f,fieldClassName:N,fieldTooltip:q}=c;return u.jsx(C.default,{rules:o,placeholder:m,onChange:t?e=>{var d;return t((d=e==null?void 0:e.target)==null?void 0:d.value,a)}:void 0,tooltip:q,required:s,disabled:!n,name:i,label:r,className:N,rows:x,cols:f})}};module.exports=p;

package/dist/crud/CrudTextAreaComponent.d.ts

@@ -0,0 +1,22 @@
+import { InitialCrudField } from './CrudComponent';
+import { FormInstance } from 'antd/lib';
+interface InitialTextAreaProps<T> extends InitialCrudField<T> {
+    type: "textarea";
+    onChange?: (value: string, form: FormInstance<T>) => void;
+    /**
+     * number of lines to show. If false will not show truncated
+     * @default 2
+     */
+    truncated?: boolean | number;
+}
+interface TextAreaProps<T> extends InitialTextAreaProps<T> {
+    placeholder?: string;
+    rows?: number;
+    cols?: number;
+}
+interface RichTextAreaProps<T> extends InitialTextAreaProps<T> {
+    rich?: true;
+}
+export type TextAreaBasedFieldProps<T> = TextAreaProps<T> & RichTextAreaProps<T>;
+declare const CrudTextAreaComponent: <T>({ onChange, label, required, rules, name, updatable, ...props }: TextAreaBasedFieldProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default CrudTextAreaComponent;

package/dist/crud/CrudTextAreaComponent.es.js

@@ -0,0 +1,52 @@
+import { jsx as d } from "react/jsx-runtime";
+import N from "../common/text-field/TextArea.es.js";
+import { RichTextEditor as T } from "../common/rich/index.es.js";
+import { Form as h } from "antd";
+import F from "../util/CrudUtil.es.js";
+const E = ({
+  onChange: e,
+  label: t,
+  required: r,
+  rules: m,
+  name: i,
+  updatable: s = !0,
+  ...a
+}) => {
+  const c = h.useFormInstance(), f = F.getRealName(i, "upsertFieldName");
+  if (a.rich)
+    return /* @__PURE__ */ d(
+      T,
+      {
+        name: f,
+        label: t,
+        required: r,
+        rules: m,
+        disabled: !s
+      }
+    );
+  {
+    const { placeholder: l, rows: p, cols: u, fieldClassName: x, fieldTooltip: C } = a;
+    return /* @__PURE__ */ d(
+      N,
+      {
+        rules: m,
+        placeholder: l,
+        onChange: e ? (o) => {
+          var n;
+          return e((n = o == null ? void 0 : o.target) == null ? void 0 : n.value, c);
+        } : void 0,
+        tooltip: C,
+        required: r,
+        disabled: !s,
+        name: i,
+        label: t,
+        className: x,
+        rows: p,
+        cols: u
+      }
+    );
+  }
+};
+export {
+  E as default
+};

package/dist/crud/FileCrudField.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime");;/* empty css               */const d=require("@ant-design/icons"),F=require("antd"),N=require("mime"),c=require("react"),z=require("../locale/index.cjs.js"),G=require("../util/ValidationUtil.cjs.js"),p=require("../common/button/Button.cjs.js"),J=require("../common/layout/VerticalSpace.cjs.js"),K=require("../util/CrudUtil.cjs.js");function Q({name:n,label:e,required:l,provider:s,onUploading:a,onRemoved:h,fieldClassName:j,accept:P,rules:k,maxCount:q=1,block:E,fieldHelper:_,...$}){const f=F.Form.useFormInstance(),H=K.getRealName(n,"upsertFieldName"),x=F.Form.useWatch(H,f),[O,b]=c.useState(!1),[V,R]=c.useState(!1),A=c.useCallback(async r=>{var i,u;try{const{file:o}=r,g=o.name;b(!0),R(!0),a==null||a(!0);const C=g??"",S=C.split("."),W=S[S.length-1],B=s.generateFileName(C),M=`${await s.getInitialPath()}/${B}.${W}`;console.log({filePath:M});const D=await s.upload({...o,originFileObj:o},M);a==null||a(!1),f.setFieldValue(n,D),(i=r.onSuccess)==null||i.call(r,D)}catch(o){(u=r.onError)==null||u.call(r,o)}finally{b(!1)}},[f,n,a,s]),[w,I]=c.useState([]);c.useEffect(()=>{!V&&x&&Promise.all((Array.isArray(x)?x:[x]).map(async r=>{const i=N.getType(r),u=r.split("/").pop(),o=await s.getRealUrl(r);return{uid:r,url:o,type:i,name:u}})).then(r=>I(()=>{const i=r.map(({url:u,type:o,uid:g,name:C})=>({uid:g,url:u,type:o,response:g,thumbUrl:u,name:C}));return console.log(i),i}))},[x,V,O,s]);const L=c.useCallback(async r=>{const i=r.response,u=i||f.getFieldValue(n);await s.delete(u),h==null||h(),r&&f.setFieldsValue({[n]:null})},[f,n,h,s]);return t.jsxs(F.Form.Item,{label:e,required:l,name:n,className:j,rules:[...l?G.required(e):[],...k??[]],help:_,children:[t.jsx("input",{hidden:!0}),t.jsx(F.Upload,{...$,fileList:w,className:((w==null?void 0:w.length)??0)>=q?"hide-upload":"",maxCount:q,customRequest:A,onRemove:L,listType:"picture",onChange:({fileList:r})=>{I(r)},style:E?{width:"100%"}:void 0,children:t.jsx(p,{loading:O,children:"Upload File"})})]})}const X=({provider:n,value:e})=>{const[l,s]=c.useState();return c.useEffect(()=>{e&&n.getRealUrl(e).then(a=>{s({mimeType:N.getType(e),url:a,fileName:e.split("/").pop()??e})})},[n,e]),l?t.jsx(U,{fileName:l.fileName,url:l==null?void 0:l.url,mimeType:l==null?void 0:l.mimeType}):t.jsx(t.Fragment,{})},U=({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]),[h,j]=c.useState(!1),{t:P}=z.useTranslationLib();return s!=="file"&&s!=="text"?t.jsxs(t.Fragment,{children:[t.jsx(F.Modal,{open:h,title:l,onCancel:()=>j(!1),footer:t.jsx(t.Fragment,{}),width:"100%",style:{top:"8px",minHeight:"700px"},destroyOnHidden:!0,children:t.jsxs(J,{children:[t.jsx(p,{tooltip:l,icon:t.jsx(d.ExportOutlined,{}),target:"_blank",href:n,style:{textDecoration:"none"},children:P("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(p,{tooltip:l,icon:a,shape:"circle",onClick:()=>j(!0)})]}):t.jsx(p,{tooltip:l,icon:a,target:"_blank",href:n,shape:"circle"})};exports.FileCellValue=U;exports.FileCrudCellValue=X;exports.default=Q;

package/dist/crud/FileCrudField.d.ts

@@ -0,0 +1,25 @@
+import { FC } from 'react';
+import { InitialCrudField } from './CrudComponent';
+import { FileDownloadProvider, FileUploadProvider } from './ImageCrudField';
+export interface FileCrudField<T> extends _FileCrudField<T> {
+    type: "file";
+}
+export interface _FileCrudField<T> extends InitialCrudField<T> {
+    provider: FileUploadProvider;
+    onUploading?: (isUploading: boolean) => void;
+    onRemoved?: () => void;
+    fieldClassName?: string;
+    accept?: string;
+    maxCount?: number;
+    block?: boolean;
+}
+export default function FileCrudFieldComponent<T>({ name, label, required, provider, onUploading, onRemoved, fieldClassName, accept, rules, maxCount, block, fieldHelper: help, ...props }: Readonly<_FileCrudField<T>>): import("react/jsx-runtime").JSX.Element;
+export declare const FileCrudCellValue: FC<{
+    value: string;
+    provider: FileDownloadProvider;
+}>;
+export declare const FileCellValue: FC<{
+    url: string;
+    mimeType?: string | null;
+    fileName: string;
+}>;

package/dist/crud/FileCrudField.es.js

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

package/dist/crud/ImageCrudField.cjs.js

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

package/dist/crud/ImageCrudField.d.ts

@@ -0,0 +1,38 @@
+import { UploadListType } from 'antd/es/upload/interface';
+import { UploadFile } from 'antd/lib';
+import { FC } from 'react';
+import { InitialCrudField } from './CrudComponent';
+export interface _ImageCrudField<T> extends InitialCrudField<T> {
+    provider: FileUploadProvider;
+    onUploading?: (isUploading: boolean) => void;
+    onRemoved?: () => void;
+    aspectRatio?: number;
+    fieldClassName?: string;
+    listType?: UploadListType;
+}
+export interface ImageCrudField<T> extends _ImageCrudField<T> {
+    type: "image";
+}
+export declare abstract class FileDownloadProvider {
+    abstract getRealUrl(filePath?: string): Promise<string>;
+}
+export declare abstract class FileUploadProvider extends FileDownloadProvider {
+    rootPath: string;
+    subPath: string;
+    constructor(rootPath?: string, subPath?: string);
+    cloneFilePath(filePath: string): string;
+    abstract getInitialPath(): Promise<string>;
+    abstract upload(file: UploadFile<any>, filePath: string): Promise<string>;
+    abstract delete(filePath: string): Promise<boolean>;
+    abstract clone(filePath: string): Promise<string>;
+    abstract getRealUrl(filePath: string): Promise<string>;
+    generateFileName(initialFileName: string): string;
+}
+export default function ImageCrudFieldComponent<T>({ name, label, required, provider, onUploading, aspectRatio, onRemoved, fieldClassName, hideLabel, listType, fieldHelper: help, }: Readonly<_ImageCrudField<T>>): import("react/jsx-runtime").JSX.Element;
+export declare const ImageCrudCellValue: FC<{
+    value: string;
+    provider: FileDownloadProvider;
+}>;
+export declare const ImageCellValue: FC<{
+    url: string;
+}>;

package/dist/crud/ImageCrudField.es.js

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

package/dist/crud/actions/index.cjs.js

@@ -0,0 +1 @@
+"use strict";const v=require("react/jsx-runtime"),Y=require("react"),A=require("../../common/button/CloneButtonTable.cjs.js"),H=require("../../common/button/DeleteButtonTable.cjs.js"),V=require("../../common/button/ExportButton.cjs.js"),s=require("../../common/button/HideButtonTable.cjs.js"),c=require("../../common/button/UpdateButtonTable.cjs.js"),r=require("../modal/index.cjs.js");function F({data:b,idField:j="id",extraAction:T,onUpdate:g,onClickUpdate:m,onClickClone:x,onDelete:h,onHide:z,onExport:E,isHiding:J,isDeleting:K,confirmHiding:Z,confirmDeleting:_,closeViewOnClickUpdate:$,recentUpdateOrDeleteId:L,setRecentUpdateOrDeleteId:q,setOpenView:G,inBuiltModalProps:f}){var S;const y=T==null?void 0:T(b),N=Y.useRef(null),Q=Y.useCallback((u,w=!0,W=!1)=>{var X;q==null||q(u[j]),f?(X=N.current)==null||X.update(u,w,W):W?x==null||x(u):m==null||m(u),$&&(G==null||G(void 0))},[f,m]);return console.log({onUpdate:g,onClickUpdate:m,onClickClone:x,onDelete:h}),(Array.isArray(y)?(S=y==null?void 0:y.filter(Boolean))!=null&&S.length:y)||g||m||f!=null&&f.onUpdate||x||f!=null&&f.onCreate||h||E||z?v.jsxs(v.Fragment,{children:[f&&v.jsx(r,{ref:N,...f}),y,(g||m||(f==null?void 0:f.onUpdate))&&v.jsx(c,{value:b,onClick:u=>Q(u)}),(x||(f==null?void 0:f.onCreate))&&v.jsx(A,{value:b,onClick:u=>Q(u,!1,!0)}),E&&v.jsx(V.ExportButton,{value:b,onClick:async u=>await E(u)}),z&&v.jsx(s,{value:b,disabled:J,shouldConfirm:Z,loading:J&&b[j]===L,onClick:async u=>{q==null||q(u[j]),await z({[j]:u[j]})}}),h&&v.jsx(H,{value:b,disabled:K,shouldConfirm:_,loading:K&&b[j]===L,onClick:async u=>{q==null||q(u[j]),await h({[j]:u[j]})}})]}):void 0}module.exports=F;

package/dist/crud/actions/index.d.ts

@@ -0,0 +1,26 @@
+import { ReactElement } from 'react';
+import { default as IdProps } from '../../types/Id';
+import { CrudModalProps } from '../modal';
+export interface CrudActionsProps<T, FormType> {
+    idField?: string;
+    extraAction?: (t: T) => ReactElement | undefined | ReactElement[];
+    onUpdate?: (t: FormType & IdProps) => Promise<any>;
+    onClickUpdate?: (t: T) => void;
+    onClickClone?: (t: T) => Promise<any>;
+    onDelete?: (id: any) => Promise<any>;
+    onHide?: (id: any) => Promise<any>;
+    onExport?: (t: T) => Promise<any>;
+    isHiding?: boolean;
+    isDeleting?: boolean;
+    confirmHiding?: boolean;
+    confirmDeleting?: boolean;
+    closeViewOnClickUpdate?: boolean;
+    recentUpdateOrDeleteId?: string;
+    setRecentUpdateOrDeleteId?: (id: string) => void;
+    setOpenView?: (data: T | undefined) => void;
+    inBuiltModalProps?: CrudModalProps<T, FormType>;
+}
+declare function CrudActions<T, FormType>({ data, idField, extraAction, onUpdate, onClickUpdate, onClickClone, onDelete, onHide, onExport, isHiding, isDeleting, confirmHiding, confirmDeleting, closeViewOnClickUpdate, recentUpdateOrDeleteId, setRecentUpdateOrDeleteId, setOpenView, inBuiltModalProps, }: CrudActionsProps<T, FormType> & {
+    data: T;
+}): import("react/jsx-runtime").JSX.Element | undefined;
+export default CrudActions;