@kingteza/crud-component 1.0.45 → 1.0.47

package/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/crud/CrudTextAreaComponent.es.js

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

package/crud/FileCrudField.cjs.js

@@ -1 +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"),k=require("mime"),c=require("react"),B=require("../locale/index.cjs.js"),H=require("../util/ValidationUtil.cjs.js"),p=require("../common/button/Button.cjs.js"),z=require("../common/layout/VerticalSpace.cjs.js");function G({name:n,label:e,required:l,provider:s,onUploading:a,onRemoved:h,fieldClassName:j,accept:P,rules:U,maxCount:O=1,block:_,...$}){const f=F.Form.useFormInstance(),x=F.Form.useWatch(n,f),[b,q]=c.useState(!1),[V,N]=c.useState(!1),A=c.useCallback(async r=>{var i,u;try{const{file:o}=r,g=o.name;q(!0),N(!0),a==null||a(!0);const C=g??"",I=C.split("."),R=I[I.length-1],W=s.generateFileName(C),M=`${await s.getInitialPath()}/${W}.${R}`;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{q(!1)}},[f,n,a,s]),[w,S]=c.useState([]);c.useEffect(()=>{!V&&x&&Promise.all((Array.isArray(x)?x:[x]).map(async r=>{const i=k.getType(r),u=r.split("/").pop(),o=await s.getRealUrl(r);return{uid:r,url:o,type:i,name:u}})).then(r=>S(()=>{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,b,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?H.required(e):[],...U??[]],children:[t.jsx("input",{hidden:!0}),t.jsx(F.Upload,{...$,fileList:w,className:((w==null?void 0:w.length)??0)>=O?"hide-upload":"",maxCount:O,customRequest:A,onRemove:L,listType:"picture",onChange:({fileList:r})=>{S(r)},style:_?{width:"100%"}:void 0,children:t.jsx(p,{loading:b,children:"Upload File"})})]})}const J=({provider:n,value:e})=>{const[l,s]=c.useState();return c.useEffect(()=>{e&&n.getRealUrl(e).then(a=>{s({mimeType:k.getType(e),url:a,fileName:e.split("/").pop()??e})})},[n,e]),l?t.jsx(E,{fileName:l.fileName,url:l==null?void 0:l.url,mimeType:l==null?void 0:l.mimeType}):t.jsx(t.Fragment,{})},E=({url:n,mimeType:e="",fileName:l})=>{const s=c.useMemo(()=>e!=null&&e.includes("image")?"image":e!=null&&e.includes("pdf")?"pdf":e!=null&&e.includes("word")?"word":e!=null&&e.includes("text")?"text":e!=null&&e.includes("presentation")?"presentation":e!=null&&e.includes("excel")||e!=null&&e.includes("spreadsheet")?"excel":"file",[e]),a=c.useMemo(()=>{switch(s){case"image":return t.jsx(d.FileImageOutlined,{});case"pdf":return t.jsx(d.FilePdfOutlined,{});case"word":return t.jsx(d.FileWordOutlined,{});case"text":return t.jsx(d.FileTextOutlined,{});case"excel":return t.jsx(d.FileExcelOutlined,{});case"presentation":return t.jsx(d.FilePptOutlined,{});default:return t.jsx(d.FileOutlined,{})}},[s]),[h,j]=c.useState(!1),{t:P}=B.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"},destroyOnClose:!0,children:t.jsxs(z,{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=E;exports.FileCrudCellValue=J;exports.default=G;
+"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"),k=require("mime"),c=require("react"),B=require("../locale/index.cjs.js"),H=require("../util/ValidationUtil.cjs.js"),p=require("../common/button/Button.cjs.js"),z=require("../common/layout/VerticalSpace.cjs.js");function G({name:n,label:e,required:l,provider:s,onUploading:a,onRemoved:h,fieldClassName:j,accept:P,rules:U,maxCount:O=1,block:_,...$}){const f=F.Form.useFormInstance(),x=F.Form.useWatch(n,f),[b,q]=c.useState(!1),[V,N]=c.useState(!1),A=c.useCallback(async r=>{var i,u;try{const{file:o}=r,g=o.name;q(!0),N(!0),a==null||a(!0);const C=g??"",I=C.split("."),R=I[I.length-1],W=s.generateFileName(C),M=`${await s.getInitialPath()}/${W}.${R}`;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{q(!1)}},[f,n,a,s]),[w,S]=c.useState([]);c.useEffect(()=>{!V&&x&&Promise.all((Array.isArray(x)?x:[x]).map(async r=>{const i=k.getType(r),u=r.split("/").pop(),o=await s.getRealUrl(r);return{uid:r,url:o,type:i,name:u}})).then(r=>S(()=>{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,b,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?H.required(e):[],...U??[]],children:[t.jsx("input",{hidden:!0}),t.jsx(F.Upload,{...$,fileList:w,className:((w==null?void 0:w.length)??0)>=O?"hide-upload":"",maxCount:O,customRequest:A,onRemove:L,listType:"picture",onChange:({fileList:r})=>{S(r)},style:_?{width:"100%"}:void 0,children:t.jsx(p,{loading:b,children:"Upload File"})})]})}const J=({provider:n,value:e})=>{const[l,s]=c.useState();return c.useEffect(()=>{e&&n.getRealUrl(e).then(a=>{s({mimeType:k.getType(e),url:a,fileName:e.split("/").pop()??e})})},[n,e]),l?t.jsx(E,{fileName:l.fileName,url:l==null?void 0:l.url,mimeType:l==null?void 0:l.mimeType}):t.jsx(t.Fragment,{})},E=({url:n,mimeType:e="",fileName:l})=>{const s=c.useMemo(()=>e!=null&&e.includes("image")?"image":e!=null&&e.includes("pdf")?"pdf":e!=null&&e.includes("word")?"word":e!=null&&e.includes("text")?"text":e!=null&&e.includes("presentation")?"presentation":e!=null&&e.includes("excel")||e!=null&&e.includes("spreadsheet")?"excel":"file",[e]),a=c.useMemo(()=>{switch(s){case"image":return t.jsx(d.FileImageOutlined,{});case"pdf":return t.jsx(d.FilePdfOutlined,{});case"word":return t.jsx(d.FileWordOutlined,{});case"text":return t.jsx(d.FileTextOutlined,{});case"excel":return t.jsx(d.FileExcelOutlined,{});case"presentation":return t.jsx(d.FilePptOutlined,{});default:return t.jsx(d.FileOutlined,{})}},[s]),[h,j]=c.useState(!1),{t:P}=B.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"},destroyOnClose:!0,children:t.jsxs(z,{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=E;exports.FileCrudCellValue=J;exports.default=G;

package/crud/FileCrudField.d.ts

@@ -13,7 +13,7 @@ export interface _FileCrudField<T> extends InitialCrudField<T> {
     maxCount?: number;
     block?: boolean;
 }
-export default function FileCrudFieldComponent<T>({ name, label, required, provider, onUploading, onRemoved, fieldClassName, accept, rules, maxCount, block, ...props }: _FileCrudField<T>): import("react/jsx-runtime").JSX.Element;
+export default function FileCrudFieldComponent<T>({ name, label, required, provider, onUploading, onRemoved, fieldClassName, accept, rules, maxCount, block, ...props }: Readonly<_FileCrudField<T>>): import("react/jsx-runtime").JSX.Element;
 export declare const FileCrudCellValue: FC<{
     value: string;
     provider: FileDownloadProvider;

package/crud/FileCrudField.es.js

@@ -164,8 +164,7 @@ const pt = ({ provider: n, value: t }) => {
           ),
           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__ */ s("a", { href: n, children: "Download PDF" })
           ] }) : /* @__PURE__ */ f(
             "iframe",
             {

package/crud/ImageCrudField.cjs.js

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

package/crud/ImageCrudField.d.ts

@@ -28,7 +28,7 @@ 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, }: _ImageCrudField<T>): import("react/jsx-runtime").JSX.Element;
+export default function ImageCrudFieldComponent<T>({ name, label, required, provider, onUploading, aspectRatio, onRemoved, fieldClassName, hideLabel, listType, }: Readonly<_ImageCrudField<T>>): import("react/jsx-runtime").JSX.Element;
 export declare const ImageCrudCellValue: FC<{
     value: string;
     provider: FileDownloadProvider;

package/crud/ImageCrudField.es.js

@@ -1,12 +1,12 @@
-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 { jsx as n, Fragment as V, jsxs as S } from "react/jsx-runtime";
+var j = Object.defineProperty;
+var A = (e, a, t) => a in e ? j(e, a, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[a] = t;
+var h = (e, a, t) => A(e, typeof a != "symbol" ? a + "" : a, t);
+import { jsxs as E, jsx as n, Fragment as S } from "react/jsx-runtime";
 /* empty css             */
 import { EyeOutlined as D } 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 x } from "react";
+import d from "path-browserify";
+import { useState as P, useCallback as B, useEffect as V } from "react";
 import G from "../util/NumberUtil.es.js";
 import H from "../util/ValidationUtil.es.js";
 import { v4 as J } from "uuid";
@@ -21,8 +21,8 @@ class ae extends L {
     this.rootPath = t, this.subPath = s;
   }
   cloneFilePath(t) {
-    const s = w.parse(t), l = `${s.name}_cloned_${G.randInt(1e5)}`;
-    return w.format({
+    const s = d.parse(t), l = `${s.name}_cloned_${G.randInt(1e5)}`;
+    return d.format({
       dir: s.dir,
       ext: s.ext,
       name: l
@@ -40,16 +40,16 @@ function le({
   onUploading: l,
   aspectRatio: I,
   onRemoved: c,
-  fieldClassName: y,
-  hideLabel: C = !1,
-  listType: $
+  fieldClassName: x,
+  hideLabel: y = !1,
+  listType: C
 }) {
-  const i = F.useFormInstance(), u = F.useWatch(e, i), [p, g] = P(!1), N = B(
-    async (r, b) => {
-      if (b) {
+  const i = F.useFormInstance(), u = F.useWatch(e, i), [p, $] = P(!1), N = B(
+    async (r, g) => {
+      if (g) {
         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), i.setFieldValue(e, j);
+        const m = r.name, o = m.split("."), b = o[o.length - 1], k = s.generateFileName(m), O = `${await s.getInitialPath()}/${k}.${b}`, _ = await s.upload(r, O);
+        $(!0), l == null || l(!1), i.setFieldValue(e, _);
       } else {
         console.log(r);
         const m = i.getFieldsValue(), o = await s.delete(m[e]);
@@ -57,14 +57,14 @@ function le({
       }
     },
     [i, e, c, l, s]
-  ), [f, d] = P();
-  return x(() => {
-    !p && u ? s.getRealUrl(u).then(d) : d(f);
-  }, [u, p, s, f]), /* @__PURE__ */ n(V, { children: /* @__PURE__ */ S(
+  ), [f, w] = P();
+  return V(() => {
+    !p && u ? s.getRealUrl(u).then(w) : w(f);
+  }, [u, p, s, f]), /* @__PURE__ */ E(
     F.Item,
     {
       rules: t ? H.required(a) : [],
-      label: C ? null : a,
+      label: y ? null : a,
       required: t,
       name: e,
       children: [
@@ -72,7 +72,7 @@ function le({
           K,
           {
             noStyle: !0,
-            listType: $,
+            listType: C,
             aspectRatio: I,
             values: f,
             onRemove: (r) => {
@@ -81,19 +81,19 @@ function le({
             onAdd: async (r) => {
               r && await N(r, !0);
             },
-            className: y
+            className: x
           }
         ),
         /* @__PURE__ */ n(W, { hidden: !0 })
       ]
     }
-  ) });
+  );
 }
 const re = ({ provider: e, value: a }) => {
   const [t, s] = P();
-  return x(() => {
+  return V(() => {
     a && e.getRealUrl(a).then(s);
-  }, [e, a]), t ? /* @__PURE__ */ n(M, { url: t }) : /* @__PURE__ */ n(V, {});
+  }, [e, a]), t ? /* @__PURE__ */ n(M, { url: t }) : /* @__PURE__ */ n(S, {});
 }, M = ({ url: e }) => /* @__PURE__ */ n(q, { className: "p-0", children: /* @__PURE__ */ n(
   z,
   {

package/crud/index.d.ts

@@ -1,4 +1,4 @@
-export type { CheckboxBasedFieldProps, ColorPickerFieldProps, CrudComponentProps, CrudFieldGrid, CrudFieldProps, CrudPaginateProps, CrudPurpose, CrudWizardProp, DateBasedFieldProps, EnumCrudField, FormBuilderFunc, FormBuilderFunc0, GetFormFieldOptions, InitialCrudField, NumberBasedFieldProps, ObjectCrudField, SelectCrudField, SelectFieldItem, TextAreaBasedFieldProps, TextBasedFieldProps, TimeBasedFieldProps, } from './CrudComponent';
+export type { CheckboxBasedFieldProps, ColorPickerFieldProps, CrudComponentProps, CrudFieldGrid, CrudFieldProps, CrudPaginateProps, CrudPurpose, CrudWizardProp, DateBasedFieldProps, EnumCrudField, FormBuilderFunc, FormBuilderFunc0, GetFormFieldOptions, InitialCrudField, NumberBasedFieldProps, ObjectCrudField, SelectCrudField, SelectFieldItem, TextBasedFieldProps, TimeBasedFieldProps, } from './CrudComponent';
 export { default as CrudComponent } from './CrudComponent';
 export { default as CrudField, ColorCrudFieldComponent, SelectCrudFieldComponent, } from './CrudField';
 export { CrudForm, CrudFormFields } from './CrudForm';

package/crud/view/CrudDecListView.d.ts

@@ -11,4 +11,4 @@ export interface CrudDecListViewProps<T> {
     action?: React.JSX.Element;
     keepEmptyValues?: boolean;
 }
-export declare function CrudDecListView<T>({ className, fields, data, descListColumn, layout, action, keepEmptyValues, }: CrudDecListViewProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function CrudDecListView<T>({ className, fields, data, descListColumn, layout, action, keepEmptyValues, }: Readonly<CrudDecListViewProps<T>>): import("react/jsx-runtime").JSX.Element;

package/crud/view/CrudViewerUtil.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react/jsx-runtime"),d=require("@ant-design/icons"),r=require("antd"),y=require("../../common/show-more/index.cjs.js"),j=require("../FileCrudField.cjs.js"),x=require("../ImageCrudField.cjs.js"),m=require("../../util/DateUtil.cjs.js"),v=require("../../util/NumberUtil.cjs.js"),s=require("../../locale/index.cjs.js");function b({type:a,render:n,...i}){return a==="object"?(t,u,e)=>typeof n=="function"?n(t,u,e):"":a==="select"?(t,u,e)=>{const o=i;let c=o.multiple?Array.isArray(t)?t.map(l=>l==null?void 0:l[o.innerFieldLabel??"name"]):void 0:t==null?void 0:t[o.innerFieldLabel??"name"];return(!c&&typeof t=="string"||typeof t=="number")&&(c=t),typeof n=="function"?n(c,u,e):Array.isArray(c)?c.join(", "):c}:a==="number"?(t,u,e)=>typeof n=="function"?n(t,u,e):i!=null&&i.int?v.default.toInt(t,i.formatted):v.default.toMoney(t):a==="enum"?(t,u,e)=>{var l;const o=s.t(((l=i==null?void 0:i.translation)==null?void 0:l[t??""])??t),c=i==null?void 0:i.tagRender;if(typeof n=="function")return n(t,u,e);if(typeof c=="object"){const g=c[t];if(g)return f.jsx(r.Tag,{color:g.color,children:o})}return o}:a==="date"?(t,u,e)=>{if(!t)return"-";const o=i!=null&&i.formatTime?m.formatDateTime(t):m.formatDate(t);return typeof n=="function"?n(t,u,e):o}:a==="checkbox"?(t,u,e)=>typeof n=="function"?n(t,u,e):t?f.jsx(d.CheckOutlined,{}):f.jsx(d.CloseOutlined,{}):a==="image"?(t,u,e)=>typeof n=="function"?n(t,u,e):f.jsx(x.ImageCrudCellValue,{value:t,provider:i.provider}):a==="file"?(t,u,e)=>typeof n=="function"?n(t,u,e):f.jsx(j.FileCrudCellValue,{value:t,provider:i.provider}):a==="time"?(t,u,e)=>{if(!t)return"-";const o=i==null?void 0:i.format,c=i==null?void 0:i.use12Hours,l=m.formatTime(t,o||(c?"hh:mm:ss A":void 0));return typeof n=="function"?n(t,u,e):l}:a==="color"?(t,u,e)=>typeof n=="function"?n(t,u,e):typeof t=="string"&&t.startsWith("#")?f.jsx(r.Tooltip,{title:t,children:f.jsx(r.Avatar,{style:{backgroundColor:t}})}):String(t):a==="textarea"?(t,u,e)=>{const o=(i==null?void 0:i.truncated)??1;return typeof n=="function"?n(t,u,e):o?f.jsx(y.ShowMore,{lines:o===!0?1:o,children:t}):t}:typeof n=="function"?n:t=>t}exports.getRendererValueCrudViewer=b;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),C=require("@ant-design/icons"),d=require("antd"),A=require("../../common/show-more/index.cjs.js"),S=require("../FileCrudField.cjs.js"),T=require("../ImageCrudField.cjs.js"),m=require("../../util/DateUtil.cjs.js"),q=require("../../util/NumberUtil.cjs.js"),j=require("../../locale/index.cjs.js");function F({type:l,render:i,...a}){try{return l==="object"?(t,e,o)=>typeof i=="function"?i(t,e,o):"":l==="select"?(t,e,o)=>{const n=a,r=n.multiple?Array.isArray(t)?t.map(f=>f==null?void 0:f[n.innerFieldLabel??"name"]):void 0:t==null?void 0:t[n.innerFieldLabel??"name"];return typeof i=="function"?i(r,e,o):Array.isArray(r)?r.join(", "):r}:l==="number"?(t,e,o)=>typeof i=="function"?i(t,e,o):a!=null&&a.int?q.default.toInt(t,a.formatted):q.default.toMoney(t):l==="enum"?(t,e,o)=>{var y;const n=a;if(typeof i=="function")return i(t,e,o);if(n.multiple){const c=Array.isArray(t)?t:t?[t]:[];return typeof n.tagRender=="object"?u.jsx(d.Space,{wrap:!0,children:c.map((s,g)=>{var x,b;const v=(x=n.tagRender)==null?void 0:x[s],h=j.t(((b=n==null?void 0:n.translation)==null?void 0:b[s??""])??s);return v?u.jsx(d.Tag,{color:v.color,children:h},g+s):h})}):n!=null&&n.translation?c==null?void 0:c.map(s=>{var g;return j.t(((g=n==null?void 0:n.translation)==null?void 0:g[s??""])??s)}).join(", "):c==null?void 0:c.join(", ")}const r=((y=n==null?void 0:n.translation)==null?void 0:y[t??""])??t,f=j.t(r);if(typeof n.tagRender=="object"){const c=n.tagRender[t];if(c)return u.jsx(d.Tag,{color:c.color,children:f})}return f}:l==="date"?(t,e,o)=>{if(!t)return"-";const n=a!=null&&a.formatTime?m.formatDateTime(t):m.formatDate(t);return typeof i=="function"?i(t,e,o):n}:l==="checkbox"?(t,e,o)=>typeof i=="function"?i(t,e,o):t?u.jsx(C.CheckOutlined,{}):u.jsx(C.CloseOutlined,{}):l==="image"?(t,e,o)=>typeof i=="function"?i(t,e,o):u.jsx(T.ImageCrudCellValue,{value:t,provider:a.provider}):l==="file"?(t,e,o)=>typeof i=="function"?i(t,e,o):u.jsx(S.FileCrudCellValue,{value:t,provider:a.provider}):l==="time"?(t,e,o)=>{if(!t)return"-";const n=a==null?void 0:a.format,r=a==null?void 0:a.use12Hours,f=m.formatTime(t,n||(r?"hh:mm:ss A":void 0));return typeof i=="function"?i(t,e,o):f}:l==="color"?(t,e,o)=>typeof i=="function"?i(t,e,o):typeof t=="string"&&t.startsWith("#")?u.jsx(d.Tooltip,{title:t,children:u.jsx(d.Avatar,{style:{backgroundColor:t}})}):String(t):l==="textarea"?(t,e,o)=>{const n=a,r=n.truncated??1;return typeof i=="function"?i(t,e,o):r?u.jsx(A.ShowMore,{lines:r===!0?1:r,children:n.rich?u.jsx("div",{style:{all:"unset"},dangerouslySetInnerHTML:{__html:t}}):t}):n.rich?u.jsx("div",{style:{all:"unset"},dangerouslySetInnerHTML:{__html:t}}):t}:typeof i=="function"?i:(t,e,o)=>t}catch(t){return console.warn("An error occurred while rendering the value for field: "+String(a.name),t),"-"}}exports.getRendererValueCrudViewer=F;

package/crud/view/CrudViewerUtil.d.ts

@@ -1,2 +1,2 @@
 import { CrudFieldProps } from '../CrudComponent';
-export declare function getRendererValueCrudViewer<T>({ type, render, ...props }: CrudFieldProps<T>): (value: any, obj: T, index: number) => any;
+export declare function getRendererValueCrudViewer<T>({ type, render, ...props }: CrudFieldProps<T>): any;

package/crud/view/CrudViewerUtil.es.js

@@ -1,62 +1,92 @@
-import { jsx as l } from "react/jsx-runtime";
-import { CheckOutlined as g, CloseOutlined as y } from "@ant-design/icons";
-import { Tag as b, Tooltip as h, Avatar as C } from "antd";
-import { ShowMore as A } from "../../common/show-more/index.es.js";
-import { FileCrudCellValue as T } from "../FileCrudField.es.js";
-import { ImageCrudCellValue as j } from "../ImageCrudField.es.js";
-import r from "../../util/DateUtil.es.js";
-import v from "../../util/NumberUtil.es.js";
-import { t as x } from "../../locale/index.es.js";
-function I({
-  type: a,
-  render: o,
-  ...i
+import { jsx as c } from "react/jsx-runtime";
+import { CheckOutlined as S, CloseOutlined as T } from "@ant-design/icons";
+import { Space as w, Tag as C, Tooltip as R, Avatar as V } from "antd";
+import { ShowMore as x } from "../../common/show-more/index.es.js";
+import { FileCrudCellValue as F } from "../FileCrudField.es.js";
+import { ImageCrudCellValue as H } from "../ImageCrudField.es.js";
+import h from "../../util/DateUtil.es.js";
+import j from "../../util/NumberUtil.es.js";
+import { t as s } from "../../locale/index.es.js";
+function N({
+  type: u,
+  render: n,
+  ...r
 }) {
-  return a === "object" ? (t, n, f) => typeof o == "function" ? o(t, n, f) : "" : a === "select" ? (t, n, f) => {
-    const u = i;
-    let m = u.multiple ? Array.isArray(t) ? t.map((c) => c == null ? void 0 : c[u.innerFieldLabel ?? "name"]) : void 0 : t == null ? void 0 : t[u.innerFieldLabel ?? "name"];
-    return (!m && typeof t == "string" || typeof t == "number") && (m = t), typeof o == "function" ? o(m, n, f) : Array.isArray(m) ? m.join(", ") : m;
-  } : a === "number" ? (t, n, f) => typeof o == "function" ? o(t, n, f) : i != null && i.int ? v.toInt(t, i.formatted) : v.toMoney(t) : a === "enum" ? (t, n, f) => {
-    var c;
-    const u = x(
-      ((c = i == null ? void 0 : i.translation) == null ? void 0 : c[t ?? ""]) ?? t
-    ), m = i == null ? void 0 : i.tagRender;
-    if (typeof o == "function")
-      return o(t, n, f);
-    if (typeof m == "object") {
-      const e = m[t];
-      if (e)
-        return /* @__PURE__ */ l(b, { color: e.color, children: u });
-    }
-    return u;
-  } : a === "date" ? (t, n, f) => {
-    if (!t) return "-";
-    const u = i != null && i.formatTime ? r.formatDateTime(t) : r.formatDate(t);
-    return typeof o == "function" ? o(t, n, f) : u;
-  } : a === "checkbox" ? (t, n, f) => typeof o == "function" ? o(t, n, f) : t ? /* @__PURE__ */ l(g, {}) : /* @__PURE__ */ l(y, {}) : a === "image" ? (t, n, f) => typeof o == "function" ? o(t, n, f) : /* @__PURE__ */ l(
-    j,
-    {
-      value: t,
-      provider: i.provider
-    }
-  ) : a === "file" ? (t, n, f) => typeof o == "function" ? o(t, n, f) : /* @__PURE__ */ l(
-    T,
-    {
-      value: t,
-      provider: i.provider
-    }
-  ) : a === "time" ? (t, n, f) => {
-    if (!t) return "-";
-    const u = i == null ? void 0 : i.format, m = i == null ? void 0 : i.use12Hours, c = r.formatTime(
-      t,
-      u || (m ? "hh:mm:ss A" : void 0)
-    );
-    return typeof o == "function" ? o(t, n, f) : c;
-  } : a === "color" ? (t, n, f) => typeof o == "function" ? o(t, n, f) : typeof t == "string" && t.startsWith("#") ? /* @__PURE__ */ l(h, { title: t, children: /* @__PURE__ */ l(C, { style: { backgroundColor: t } }) }) : String(t) : a === "textarea" ? (t, n, f) => {
-    const u = (i == null ? void 0 : i.truncated) ?? 1;
-    return typeof o == "function" ? o(t, n, f) : u ? /* @__PURE__ */ l(A, { lines: u === !0 ? 1 : u, children: t }) : t;
-  } : typeof o == "function" ? o : (t) => t;
+  try {
+    return u === "object" ? (t, i, a) => typeof n == "function" ? n(t, i, a) : "" : u === "select" ? (t, i, a) => {
+      const o = r, l = o.multiple ? Array.isArray(t) ? t.map((e) => e == null ? void 0 : e[o.innerFieldLabel ?? "name"]) : void 0 : t == null ? void 0 : t[o.innerFieldLabel ?? "name"];
+      return typeof n == "function" ? n(l, i, a) : Array.isArray(l) ? l.join(", ") : l;
+    } : u === "number" ? (t, i, a) => typeof n == "function" ? n(t, i, a) : r != null && r.int ? j.toInt(t, r.formatted) : j.toMoney(t) : u === "enum" ? (t, i, a) => {
+      var v;
+      const o = r;
+      if (typeof n == "function")
+        return n(t, i, a);
+      if (o.multiple) {
+        const f = Array.isArray(t) ? t : t ? [t] : [];
+        return typeof o.tagRender == "object" ? /* @__PURE__ */ c(w, { wrap: !0, children: f.map((m, g) => {
+          var b, A;
+          const y = (b = o.tagRender) == null ? void 0 : b[m], d = s(
+            ((A = o == null ? void 0 : o.translation) == null ? void 0 : A[m ?? ""]) ?? m
+          );
+          return y ? /* @__PURE__ */ c(C, { color: y.color, children: d }, g + m) : d;
+        }) }) : o != null && o.translation ? f == null ? void 0 : f.map((m) => {
+          var g;
+          return s(((g = o == null ? void 0 : o.translation) == null ? void 0 : g[m ?? ""]) ?? m);
+        }).join(", ") : f == null ? void 0 : f.join(", ");
+      }
+      const l = ((v = o == null ? void 0 : o.translation) == null ? void 0 : v[t ?? ""]) ?? t, e = s(l);
+      if (typeof o.tagRender == "object") {
+        const f = o.tagRender[t];
+        if (f)
+          return /* @__PURE__ */ c(C, { color: f.color, children: e });
+      }
+      return e;
+    } : u === "date" ? (t, i, a) => {
+      if (!t) return "-";
+      const o = r != null && r.formatTime ? h.formatDateTime(t) : h.formatDate(t);
+      return typeof n == "function" ? n(t, i, a) : o;
+    } : u === "checkbox" ? (t, i, a) => typeof n == "function" ? n(t, i, a) : t ? /* @__PURE__ */ c(S, {}) : /* @__PURE__ */ c(T, {}) : u === "image" ? (t, i, a) => typeof n == "function" ? n(t, i, a) : /* @__PURE__ */ c(
+      H,
+      {
+        value: t,
+        provider: r.provider
+      }
+    ) : u === "file" ? (t, i, a) => typeof n == "function" ? n(t, i, a) : /* @__PURE__ */ c(
+      F,
+      {
+        value: t,
+        provider: r.provider
+      }
+    ) : u === "time" ? (t, i, a) => {
+      if (!t) return "-";
+      const o = r == null ? void 0 : r.format, l = r == null ? void 0 : r.use12Hours, e = h.formatTime(
+        t,
+        o || (l ? "hh:mm:ss A" : void 0)
+      );
+      return typeof n == "function" ? n(t, i, a) : e;
+    } : u === "color" ? (t, i, a) => typeof n == "function" ? n(t, i, a) : typeof t == "string" && t.startsWith("#") ? /* @__PURE__ */ c(R, { title: t, children: /* @__PURE__ */ c(V, { style: { backgroundColor: t } }) }) : String(t) : u === "textarea" ? (t, i, a) => {
+      const o = r, l = o.truncated ?? 1;
+      return typeof n == "function" ? n(t, i, a) : l ? /* @__PURE__ */ c(x, { lines: l === !0 ? 1 : l, children: o.rich ? /* @__PURE__ */ c(
+        "div",
+        {
+          style: { all: "unset" },
+          dangerouslySetInnerHTML: { __html: t }
+        }
+      ) : t }) : o.rich ? /* @__PURE__ */ c(
+        "div",
+        {
+          style: { all: "unset" },
+          dangerouslySetInnerHTML: { __html: t }
+        }
+      ) : t;
+    } : typeof n == "function" ? n : (t, i, a) => t;
+  } catch (t) {
+    return console.warn(
+      "An error occurred while rendering the value for field: " + String(r.name),
+      t
+    ), "-";
+  }
 }
 export {
-  I as getRendererValueCrudViewer
+  N as getRendererValueCrudViewer
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kingteza/crud-component",
   "private": false,
-  "version": "1.0.45",
+  "version": "1.0.47",
   "description": "React CRUD component library with Ant Design",
   "keywords": [
     "react",
@@ -72,6 +72,7 @@
     "react-cropper": "^2.3.3",
     "react-highlight-words": "^0.20.0",
     "react-i18next": "^15.2.0",
+    "react-quill": "^2.0.0",
     "react-responsive": "^10.0.0",
     "react-show-more-text": "^1.7.1",
     "uuid": "^11.0.3"