@kingteza/crud-component 1.9.0 → 1.10.0

package/dist/common/button/NewButton.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),l=require("@ant-design/icons"),a=require("../../locale/index.cjs.js"),d=require("./Button.cjs.js"),j=({size:n,block:r,className:o,type:u="primary",onClick:e,title:i,to:s})=>{const{t:c}=a.useTranslationLib();return t.jsx(d,{type:u,className:o,to:s,block:r,size:n,onClick:e&&(()=>e(!0)),icon:t.jsx(l.PlusOutlined,{}),children:i??c("str.new")})};exports.NewButton=j;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),d=require("@ant-design/icons"),j=require("../../locale/index.cjs.js"),q=require("./Button.cjs.js"),x=({size:n,block:r,className:o,type:u="primary",onClick:e,title:i,to:s,...c})=>{const{t:l}=j.useTranslationLib();return t.jsx(q,{type:u,className:o,to:s,block:r,size:n,onClick:e&&(a=>e(!0,a)),icon:t.jsx(d.PlusOutlined,{}),...c,children:i??l("str.new")})};exports.NewButton=x;

package/dist/common/button/NewButton.d.ts

@@ -1,12 +1,13 @@
 import { SizeType } from 'antd/es/config-provider/SizeContext';
 import { ButtonType } from 'antd/lib/button';
-import { FC } from 'react';
+import { FC, MouseEvent } from 'react';
+import { ButtonProps } from 'antd';
 export declare const NewButton: FC<{
     to?: string;
-    onClick?: (value: boolean) => void;
+    onClick?: (value: boolean, event: MouseEvent<HTMLElement>) => void;
     title?: string;
     type?: ButtonType;
     block?: boolean;
     className?: string;
     size?: SizeType;
-}>;
+} & Omit<ButtonProps, "onClick">>;

package/dist/common/button/NewButton.es.js

@@ -1,23 +1,33 @@
 import { jsx as o } from "react/jsx-runtime";
-import { PlusOutlined as u } from "@ant-design/icons";
-import { useTranslationLib as c } from "../../locale/index.es.js";
-import f from "./Button.es.js";
-const x = ({ size: r, block: n, className: i, type: m = "primary", onClick: t, title: e, to: p }) => {
-  const { t: s } = c();
+import { PlusOutlined as f } from "@ant-design/icons";
+import { useTranslationLib as l } from "../../locale/index.es.js";
+import a from "./Button.es.js";
+const b = ({
+  size: r,
+  block: n,
+  className: i,
+  type: m = "primary",
+  onClick: t,
+  title: e,
+  to: p,
+  ...s
+}) => {
+  const { t: u } = l();
   return /* @__PURE__ */ o(
-    f,
+    a,
     {
       type: m,
       className: i,
       to: p,
       block: n,
       size: r,
-      onClick: t && (() => t(!0)),
-      icon: /* @__PURE__ */ o(u, {}),
-      children: e ?? s("str.new")
+      onClick: t && ((c) => t(!0, c)),
+      icon: /* @__PURE__ */ o(f, {}),
+      ...s,
+      children: e ?? u("str.new")
     }
   );
 };
 export {
-  x as NewButton
+  b as NewButton
 };

package/dist/crud/CrudComponent.cjs.js

@@ -1 +1 @@
-"use strict";const e=require("react/jsx-runtime"),C=require("antd"),t=require("react"),J=require("./modal/index.cjs.js"),K=require("./import/CrudImportButton.cjs.js"),L=require("./view/CrudViewer.cjs.js"),M=require("../common/button/NewButton.cjs.js"),O=require("../common/button/PrintButton.cjs.js");function Q({idField:l="id",onCreate:j,onDelete:f,onHide:m,onUpdate:n,onClickUpdate:a,fields:r,data:q,grid:h,isHiding:k,isCreating:B,isDeleting:p,isUpdating:w,paginateProps:N,onPrint:i,printing:v,viewable:R,loadingData:g,formBuilder:y,extraAction:b,minusHeight:P,cloneable:S,fullWidthModal:I=!0,wizard:V,extraView:z,importable:u,onClickNew:d,size:A,...D}){const c=t.useRef(null),E=t.useCallback(()=>{var s;(s=c.current)==null||s.create()},[]),o=t.useCallback(async(s,G=!0,H=!1)=>{var x;await((x=c.current)==null?void 0:x.update(s,G,H))},[]),F=t.useCallback(async s=>{o(s,!1,!0)},[o]);return e.jsxs(e.Fragment,{children:[e.jsxs(C.Space,{direction:"vertical",className:"w-100",children:[e.jsxs("div",{className:"w-100 d-flex",children:[e.jsx("div",{style:{flex:1},children:e.jsx(M.NewButton,{onClick:()=>{d?d():E()},className:"flex-1"})}),e.jsxs(C.Space,{children:[!!i&&e.jsx(O.PrintButton,{className:"float-right",loading:v,onClick:i}),!!u&&e.jsx(K,{fields:r,importProps:u})]})]}),e.jsx(L,{...D,minusHeight:P,data:q,size:A,fields:r,extraAction:b,idField:l,isDeleting:p,loadingData:g,onClickUpdate:a||(n?o:void 0),onHide:m,isHiding:k,onDelete:f,onUpdate:n,onClickClone:S?F:void 0,paginateProps:N,viewable:R,extraView:z})]}),e.jsx(J,{ref:c,fields:r,wizard:V,grid:h,fullWidthModal:I,isCreating:B,isUpdating:w,onCreate:j,onUpdate:n,idField:l,formBuilder:y})]})}module.exports=Q;
+"use strict";const e=require("react/jsx-runtime"),j=require("antd"),n=require("react"),H=require("./modal/index.cjs.js"),J=require("./import/CrudImportButton.cjs.js"),K=require("./view/CrudViewer.cjs.js"),L=require("../common/button/NewButton.cjs.js"),Q=require("../common/button/PrintButton.cjs.js");function T({idField:o="id",onCreate:f,onDelete:m,onHide:h,onUpdate:l,onClickUpdate:u,fields:r,data:q,grid:N,isHiding:v,isCreating:R,isDeleting:g,isUpdating:y,paginateProps:b,onPrint:C,printing:B,viewable:S,loadingData:w,formBuilder:I,extraAction:M,minusHeight:O,cloneable:V,fullWidthModal:W=!0,wizard:_,extraView:p,importable:d,onClickNew:x,newButtonProps:s,size:z,...A}){const t=n.useRef(null),D=n.useCallback(()=>{var c;(c=t.current)==null||c.create()},[]),i=n.useCallback(async(c,a=!0,G=!1)=>{var k;await((k=t.current)==null?void 0:k.update(c,a,G))},[]),E=n.useCallback(async c=>{i(c,!1,!0)},[i]),{onClick:X,...F}=n.useMemo(()=>s||{},[s]);return e.jsxs(e.Fragment,{children:[e.jsxs(j.Space,{direction:"vertical",className:"w-100",children:[e.jsxs("div",{className:"w-100 d-flex",children:[e.jsx("div",{style:{flex:1},children:e.jsx(L.NewButton,{onClick:(c,a)=>{x?x():s!=null&&s.onClick?s.onClick(a):D()},className:"flex-1",...F})}),e.jsxs(j.Space,{children:[!!C&&e.jsx(Q.PrintButton,{className:"float-right",loading:B,onClick:C}),!!d&&e.jsx(J,{fields:r,importProps:d})]})]}),e.jsx(K,{...A,minusHeight:O,data:q,size:z,fields:r,extraAction:M,idField:o,isDeleting:g,loadingData:w,onClickUpdate:u||(l?i:void 0),onHide:h,isHiding:v,onDelete:m,onUpdate:l,onClickClone:V?E:void 0,paginateProps:b,viewable:S,extraView:p})]}),e.jsx(H,{ref:t,fields:r,wizard:_,grid:N,fullWidthModal:W,isCreating:R,isUpdating:y,onCreate:f,onUpdate:l,idField:o,formBuilder:I})]})}module.exports=T;

package/dist/crud/CrudComponent.d.ts

@@ -1,4 +1,4 @@
-import { ColorPickerProps } from 'antd';
+import { ButtonProps, ColorPickerProps } from 'antd';
 import { Rule } from 'antd/es/form';
 import { FormInstance } from 'antd/lib';
 import { Dayjs } from 'dayjs';
@@ -259,9 +259,13 @@ export type CrudComponentProps<T, FormType = T> = {
     wizard?: CrudWizardProp<T>[];
     extraView?: (t: T) => React.ReactElement;
     importable?: CrudImportProps<T>;
+    /**
+     * @deprecated Use {@link CrudComponentProps.newButtonProps?.onClick} instead.
+     */
     onClickNew?: () => void;
+    newButtonProps?: ButtonProps;
     draggable?: CrudDragableProps<T>;
     size?: SizeType;
 } & CrudSearchComponentProps<T, FormType>;
-declare function CrudComponent<T, FormType = T>({ idField, onCreate, onDelete, onHide, onUpdate, onClickUpdate, fields, data, grid, isHiding, isCreating, isDeleting, isUpdating, paginateProps, onPrint, printing, viewable, loadingData, formBuilder, extraAction, minusHeight, cloneable, fullWidthModal, wizard, extraView, importable, onClickNew, size, ...props }: CrudComponentProps<T, FormType>): import("react/jsx-runtime").JSX.Element;
+declare function CrudComponent<T, FormType = T>({ idField, onCreate, onDelete, onHide, onUpdate, onClickUpdate, fields, data, grid, isHiding, isCreating, isDeleting, isUpdating, paginateProps, onPrint, printing, viewable, loadingData, formBuilder, extraAction, minusHeight, cloneable, fullWidthModal, wizard, extraView, importable, onClickNew, newButtonProps, size, ...props }: CrudComponentProps<T, FormType>): import("react/jsx-runtime").JSX.Element;
 export default CrudComponent;

package/dist/crud/CrudComponent.es.js

@@ -1,123 +1,125 @@
-import { jsxs as e, Fragment as J, jsx as o } from "react/jsx-runtime";
-import { Space as p } from "antd";
-import { useRef as K, useCallback as c } from "react";
-import L from "./modal/index.es.js";
-import O from "./import/CrudImportButton.es.js";
-import Q from "./view/CrudViewer.es.js";
-import { NewButton as T } from "../common/button/NewButton.es.js";
-import { PrintButton as W } from "../common/button/PrintButton.es.js";
-function er({
-  idField: i = "id",
-  onCreate: C,
-  onDelete: h,
-  onHide: x,
-  onUpdate: t,
-  onClickUpdate: m,
-  fields: l,
-  data: k,
-  grid: v,
-  isHiding: w,
-  isCreating: B,
-  isDeleting: N,
-  isUpdating: g,
-  paginateProps: y,
-  onPrint: s,
-  printing: j,
-  viewable: R,
-  loadingData: I,
-  formBuilder: M,
-  extraAction: P,
-  minusHeight: S,
-  cloneable: V,
-  fullWidthModal: b = !0,
-  wizard: q,
-  extraView: z,
-  importable: u,
-  onClickNew: f,
-  size: A,
+import { jsxs as l, Fragment as J, jsx as r } from "react/jsx-runtime";
+import { Space as h } from "antd";
+import { useRef as K, useCallback as m, useMemo as L } from "react";
+import Q from "./modal/index.es.js";
+import T from "./import/CrudImportButton.es.js";
+import X from "./view/CrudViewer.es.js";
+import { NewButton as Y } from "../common/button/NewButton.es.js";
+import { PrintButton as Z } from "../common/button/PrintButton.es.js";
+function te({
+  idField: s = "id",
+  onCreate: p,
+  onDelete: x,
+  onHide: N,
+  onUpdate: i,
+  onClickUpdate: f,
+  fields: c,
+  data: v,
+  grid: g,
+  isHiding: y,
+  isCreating: j,
+  isDeleting: M,
+  isUpdating: R,
+  paginateProps: I,
+  onPrint: d,
+  printing: O,
+  viewable: S,
+  loadingData: V,
+  formBuilder: W,
+  extraAction: _,
+  minusHeight: b,
+  cloneable: q,
+  fullWidthModal: w = !0,
+  wizard: z,
+  extraView: A,
+  importable: C,
+  onClickNew: u,
+  newButtonProps: o,
+  size: B,
   ...D
 }) {
-  const n = K(null), E = c(() => {
-    var r;
-    (r = n.current) == null || r.create();
-  }, []), a = c(
-    async (r, G = !0, H = !1) => {
-      var d;
-      await ((d = n.current) == null ? void 0 : d.update(r, G, H));
+  const t = K(null), E = m(() => {
+    var e;
+    (e = t.current) == null || e.create();
+  }, []), a = m(
+    async (e, n = !0, H = !1) => {
+      var k;
+      await ((k = t.current) == null ? void 0 : k.update(e, n, H));
     },
     []
-  ), F = c(
-    async (r) => {
-      a(r, !1, !0);
+  ), F = m(
+    async (e) => {
+      a(e, !1, !0);
     },
     [a]
-  );
-  return /* @__PURE__ */ e(J, { children: [
-    /* @__PURE__ */ e(p, { direction: "vertical", className: "w-100", children: [
-      /* @__PURE__ */ e("div", { className: "w-100 d-flex", children: [
-        /* @__PURE__ */ o("div", { style: { flex: 1 }, children: /* @__PURE__ */ o(
-          T,
+  ), { onClick: $, ...G } = L(() => o || {}, [o]);
+  return /* @__PURE__ */ l(J, { children: [
+    /* @__PURE__ */ l(h, { direction: "vertical", className: "w-100", children: [
+      /* @__PURE__ */ l("div", { className: "w-100 d-flex", children: [
+        /* @__PURE__ */ r("div", { style: { flex: 1 }, children: /* @__PURE__ */ r(
+          Y,
           {
-            onClick: () => {
-              f ? f() : E();
+            onClick: (e, n) => {
+              u ? u() : o != null && o.onClick ? o.onClick(n) : E();
             },
-            className: "flex-1"
+            className: "flex-1",
+            ...G
           }
         ) }),
-        /* @__PURE__ */ e(p, { children: [
-          !!s && /* @__PURE__ */ o(
-            W,
+        /* @__PURE__ */ l(h, { children: [
+          !!d && /* @__PURE__ */ r(
+            Z,
             {
               className: "float-right",
-              loading: j,
-              onClick: s
+              loading: O,
+              onClick: d
             }
           ),
-          !!u && /* @__PURE__ */ o(O, { fields: l, importProps: u })
+          !!C && /* @__PURE__ */ r(T, { fields: c, importProps: C })
         ] })
       ] }),
-      /* @__PURE__ */ o(
-        Q,
+      /* @__PURE__ */ r(
+        X,
         {
           ...D,
-          minusHeight: S,
-          data: k,
-          size: A,
-          fields: l,
-          extraAction: P,
-          idField: i,
-          isDeleting: N,
-          loadingData: I,
-          onClickUpdate: m || (t ? a : void 0),
-          onHide: x,
-          isHiding: w,
-          onDelete: h,
-          onUpdate: t,
-          onClickClone: V ? F : void 0,
-          paginateProps: y,
-          viewable: R,
-          extraView: z
+          minusHeight: b,
+          data: v,
+          size: B,
+          fields: c,
+          extraAction: _,
+          idField: s,
+          isDeleting: M,
+          loadingData: V,
+          onClickUpdate: f || (i ? a : void 0),
+          onHide: N,
+          isHiding: y,
+          onDelete: x,
+          onUpdate: i,
+          onClickClone: q ? F : void 0,
+          paginateProps: I,
+          viewable: S,
+          extraView: A
         }
       )
     ] }),
-    /* @__PURE__ */ o(
-      L,
+    /* @__PURE__ */ r(
+      Q,
       {
-        ref: n,
-        fields: l,
-        wizard: q,
-        grid: v,
-        fullWidthModal: b,
-        isCreating: B,
-        isUpdating: g,
-        onCreate: C,
-        onUpdate: t,
-        idField: i,
-        formBuilder: M
+        ref: t,
+        fields: c,
+        wizard: z,
+        grid: g,
+        fullWidthModal: w,
+        isCreating: j,
+        isUpdating: R,
+        onCreate: p,
+        onUpdate: i,
+        idField: s,
+        formBuilder: W
       }
     )
   ] });
 }
 export {
-  er as default
+  te as default
 };

package/dist/crud/ImageCrudField.cjs.js

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

package/dist/crud/ImageCrudField.d.ts

@@ -1,6 +1,6 @@
 import { UploadListType } from 'antd/es/upload/interface';
 import { UploadFile } from 'antd/lib';
-import { FC } from 'react';
+import { default as React, FC, ForwardedRef } from 'react';
 import { InitialCrudField } from './CrudComponent';
 export interface _ImageCrudField<T> extends InitialCrudField<T> {
     provider: FileUploadProvider;
@@ -28,7 +28,12 @@ export declare abstract class FileUploadProvider extends FileDownloadProvider {
     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 interface ImageCrudFieldRef {
+    uploadBlob: (blob: Blob, fileName: string) => Promise<void>;
+}
+declare function Component<T>({ name, label, required, provider, onUploading, aspectRatio, onRemoved, fieldClassName, hideLabel, listType, fieldHelper: help, }: Readonly<_ImageCrudField<T>>, ref: ForwardedRef<ImageCrudFieldRef>): import("react/jsx-runtime").JSX.Element;
+declare const ImageCrudFieldComponent: <T>(props: React.ComponentProps<typeof Component<T>>, ref: React.Ref<any>) => React.ReactElement | null;
+export default ImageCrudFieldComponent;
 export declare const ImageCrudCellValue: FC<{
     value: string;
     provider: FileDownloadProvider;

package/dist/crud/ImageCrudField.es.js

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

package/dist/crud/index.d.ts

@@ -9,7 +9,7 @@ export type { CrudReportComponentProps, CrudReportSubmitForm, ReportCrudFields,
 export { default as CrudReportComponent } from './CrudReportComponent';
 export { default as CrudSearchComponent } from './CrudSearchComponent';
 export type { CrudSearchComponentProps, CrudSearchOption, } from './CrudSearchComponent';
-export { default as ImageCrudField, FileDownloadProvider, FileUploadProvider, ImageCellValue, ImageCrudCellValue, } from './ImageCrudField';
+export { default as ImageCrudField, FileDownloadProvider, FileUploadProvider, ImageCellValue, ImageCrudCellValue, type ImageCrudFieldRef, } from './ImageCrudField';
 export type { ImageCrudField as ImageCrudFieldProps } from './ImageCrudField';
 export { default as FileCrudField, FileCellValue, FileCrudCellValue, } from './FileCrudField';
 export type { FileCrudField as FileCrudFieldProps } from './FileCrudField';

package/dist/util/ImageUtil.cjs.js

@@ -1 +1 @@
-"use strict";const c=require("browser-image-compression");class g{async resizeImage(t){const e=await c(t,{maxSizeMB:1,maxWidthOrHeight:1920,useWebWorker:!0}),a=t.uid;return Object.assign(e,{uid:a,lastModifiedDate:new Date})}async getImageData(t){const e=await this.getImageData0(t);if(e){const a=new Image;a.src=e.data;const o=await new Promise(n=>{a.onload=function(){n({height:a.height,width:a.width})}});return Object.assign(e,o),e}else return null}async getImageData0(t){try{if(t.startsWith("data:image/")){const e=t.match(/^data:image\/(png|jpeg|jpg);base64,(.*)$/);if(!e)throw new Error("Invalid base64 image data");return{data:t,type:e[1]}}else{const e=await fetch(t);if(!e.ok)throw new Error("Network response was not ok");const a=await e.blob();return new Promise((o,n)=>{const s=new FileReader;s.onloadend=function(){const r=s.result,i=r.match(/^data:image\/(png|jpeg|jpg);base64,/);i?o({data:r,type:i[1]}):n(new Error("Could not determine image type"))},s.onerror=n,s.readAsDataURL(a)})}}catch(e){return console.warn(e),null}}}const d=new g;module.exports=d;
+"use strict";const c=require("browser-image-compression");class d{async resizeImage(t){const e=await c(t,{maxSizeMB:1,maxWidthOrHeight:1920,useWebWorker:!0}),a=t.uid;return Object.assign(e,{uid:a,lastModifiedDate:new Date})}async getImageData(t){const e=await this.getImageData0(t);if(e){const a=new Image;a.src=e.data;const n=await new Promise(r=>{a.onload=function(){r({height:a.height,width:a.width})}});return Object.assign(e,n),e}else return null}async getImageData0(t){try{if(t.startsWith("data:image/")){const e=t.match(/^data:image\/(png|jpeg|jpg);base64,(.*)$/);if(!e)throw new Error("Invalid base64 image data");return{data:t,type:e[1]}}else{const e=await fetch(t);if(!e.ok)throw new Error("Network response was not ok");const a=await e.blob();return new Promise((n,r)=>{const s=new FileReader;s.onloadend=function(){const o=s.result,i=o.match(/^data:image\/(png|jpeg|jpg);base64,/);i?n({data:o,type:i[1]}):r(new Error("Could not determine image type"))},s.onerror=r,s.readAsDataURL(a)})}}catch(e){return console.warn(e),null}}getBase64(t){return new Promise((e,a)=>{const n=new FileReader;n.readAsDataURL(t),n.onload=()=>e(n.result),n.onerror=r=>a(r)})}}const g=new d;module.exports=g;

package/dist/util/ImageUtil.d.ts

@@ -1,7 +1,7 @@
 import { RcFile } from 'antd/lib/upload';
 export type ImageDataReturn = {
     data: string;
-    type: 'png' | 'jpeg' | 'jpg';
+    type: "png" | "jpeg" | "jpg";
     width: number;
     height: number;
 } | null;
@@ -9,6 +9,7 @@ declare class ImageUtl {
     resizeImage(file: RcFile): Promise<RcFile>;
     getImageData(uriOrBase64: string): Promise<ImageDataReturn>;
     getImageData0(uriOrBase64: string): Promise<ImageDataReturn>;
+    getBase64(file: any): Promise<string>;
 }
 declare const _default: ImageUtl;
 export default _default;

package/dist/util/ImageUtil.es.js

@@ -1,7 +1,7 @@
-import c from "browser-image-compression";
-class g {
+import d from "browser-image-compression";
+class c {
   async resizeImage(t) {
-    const e = await c(t, {
+    const e = await d(t, {
       maxSizeMB: 1,
       maxWidthOrHeight: 1920,
       useWebWorker: !0
@@ -16,48 +16,61 @@ class g {
     if (e) {
       const a = new Image();
       a.src = e.data;
-      const o = await new Promise(
-        (n) => {
+      const n = await new Promise(
+        (r) => {
           a.onload = function() {
-            n({
+            r({
               height: a.height,
               width: a.width
             });
           };
         }
       );
-      return Object.assign(e, o), e;
+      return Object.assign(e, n), e;
     } else
       return null;
   }
   async getImageData0(t) {
     try {
       if (t.startsWith("data:image/")) {
-        const e = t.match(/^data:image\/(png|jpeg|jpg);base64,(.*)$/);
+        const e = t.match(
+          /^data:image\/(png|jpeg|jpg);base64,(.*)$/
+        );
         if (!e)
           throw new Error("Invalid base64 image data");
-        return { data: t, type: e[1] };
+        return {
+          data: t,
+          type: e[1]
+        };
       } else {
         const e = await fetch(t);
         if (!e.ok) throw new Error("Network response was not ok");
         const a = await e.blob();
-        return new Promise((o, n) => {
+        return new Promise((n, r) => {
           const s = new FileReader();
           s.onloadend = function() {
-            const r = s.result, i = r.match(/^data:image\/(png|jpeg|jpg);base64,/);
-            i ? o({
-              data: r,
+            const o = s.result, i = o.match(
+              /^data:image\/(png|jpeg|jpg);base64,/
+            );
+            i ? n({
+              data: o,
               type: i[1]
-            }) : n(new Error("Could not determine image type"));
-          }, s.onerror = n, s.readAsDataURL(a);
+            }) : r(new Error("Could not determine image type"));
+          }, s.onerror = r, s.readAsDataURL(a);
         });
       }
     } catch (e) {
       return console.warn(e), null;
     }
   }
+  getBase64(t) {
+    return new Promise((e, a) => {
+      const n = new FileReader();
+      n.readAsDataURL(t), n.onload = () => e(n.result), n.onerror = (r) => a(r);
+    });
+  }
 }
-const l = new g();
+const l = new c();
 export {
   l as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kingteza/crud-component",
   "private": false,
-  "version": "1.9.0",
+  "version": "1.10.0",
   "description": "React CRUD component library with Ant Design",
   "keywords": [
     "react",