@kingteza/crud-component 1.0.46 → 1.0.48

package/crud/CrudField.es.js

@@ -11,174 +11,154 @@ import ee from "../common/date-picker/TimePicker.es.js";
 import M from "../common/select/SelectComponent.es.js";
 import re from "../common/text-field/NumberField.es.js";
 import te from "../common/text-field/TextField.es.js";
-import oe from "../common/text-field/TextArea.es.js";
-import ae from "../common/tooltip/TooltipComponent.es.js";
-function Te(x) {
+import oe from "../common/tooltip/TooltipComponent.es.js";
+import ae from "./CrudTextAreaComponent.es.js";
+function Te(v) {
   const {
-    label: i,
+    label: n,
     name: c,
-    type: b,
-    required: s,
+    type: f,
+    required: d,
     hidden: w,
-    rules: u = [],
-    updatable: h = !0,
+    rules: m = [],
+    updatable: u = !0,
     readonly: k = !1,
-    fieldClassName: g,
+    fieldClassName: p,
     customFormFieldRender: R,
-    fieldTooltip: v,
+    fieldTooltip: b,
     ...e
-  } = x, p = j.useFormInstance();
+  } = v, h = j.useFormInstance();
   L(() => {
-    if (b === "select") {
+    if (f === "select") {
       const {
-        items: a = [],
-        onSearch: n,
-        searchOnType: l
+        items: l = [],
+        onSearch: i,
+        searchOnType: a
       } = e;
-      !(a != null && a.length) && !l && (n == null || n(void 0, p, e == null ? void 0 : e.updatingValue));
+      !(l != null && l.length) && !a && (i == null || i(void 0, h, e == null ? void 0 : e.updatingValue));
     }
-  }, [p, e, b, e == null ? void 0 : e.updatingValue]);
+  }, [h, e, f, e == null ? void 0 : e.updatingValue]);
   const { t: N } = Q();
   if (k || w) return /* @__PURE__ */ o(S, {});
   if (R)
-    return R(p, x);
-  switch (b) {
+    return R(h, v);
+  switch (f) {
     case "text":
     case "email":
     case "password": {
-      const { onChange: a, placeholder: n } = e;
+      const { onChange: l, placeholder: i } = e;
       return /* @__PURE__ */ o(
         te,
         {
-          placeholder: n,
-          disabled: !h,
-          rules: u,
-          required: s,
-          onChange: a ? (l) => a(l, p) : void 0,
-          type: b,
+          placeholder: i,
+          disabled: !u,
+          rules: m,
+          required: d,
+          onChange: l ? (a) => l(a, h) : void 0,
+          type: f,
           name: c,
-          tooltip: v,
-          label: i,
-          className: g,
+          tooltip: b,
+          label: n,
+          className: p,
           autoComplete: "new-password"
         }
       );
     }
     case "number": {
-      const { onChange: a, placeholder: n, allowMinus: l } = e;
+      const { onChange: l, placeholder: i, allowMinus: a } = e;
       return /* @__PURE__ */ o(
         re,
         {
-          placeholder: n,
-          disabled: !h,
+          placeholder: i,
+          disabled: !u,
           moneyField: !!e.formatted,
-          type: b,
-          onChange: a ? (f) => a(f, p) : void 0,
-          rules: u,
+          type: f,
+          onChange: l ? (C) => l(C, h) : void 0,
+          rules: m,
           autoComplete: "false",
-          required: s,
-          tooltip: v,
-          className: g,
-          min: l ? null : void 0,
+          required: d,
+          tooltip: b,
+          className: p,
+          min: a ? null : void 0,
           name: c,
-          label: i
+          label: n
         }
       );
     }
     case "date": {
       const {
-        range: a,
-        disableToday: n,
-        disabledFutureDays: l,
-        disabledPastDays: f,
-        onChange: C,
-        placeholder: m,
-        format: y
+        range: l,
+        disableToday: i,
+        disabledFutureDays: a,
+        disabledPastDays: C,
+        onChange: y,
+        placeholder: g,
+        format: x
       } = e;
       return /* @__PURE__ */ o(
         V,
         {
-          placeholder: m,
-          required: s,
-          disabled: !h,
-          type: b,
-          format: y,
-          tooltip: v,
-          range: a,
+          placeholder: g,
+          required: d,
+          disabled: !u,
+          type: f,
+          format: x,
+          tooltip: b,
+          range: l,
           name: c,
-          label: i,
-          onChange: C ? (T) => C(T, p) : void 0,
-          className: g,
-          disableToday: n,
-          disabledFutureDays: l,
-          disabledPastDays: f
+          label: n,
+          onChange: y ? (T) => y(T, h) : void 0,
+          className: p,
+          disableToday: i,
+          disabledFutureDays: a,
+          disabledPastDays: C
         }
       );
     }
     case "time": {
       const {
-        range: a = !1,
-        disableCurrent: n,
-        disabledFuture: l,
-        disabledPast: f,
-        onChange: C,
-        use12Hours: m,
-        format: y,
+        range: l = !1,
+        disableCurrent: i,
+        disabledFuture: a,
+        disabledPast: C,
+        onChange: y,
+        use12Hours: g,
+        format: x,
         placeholder: T
       } = e;
       return /* @__PURE__ */ o(
         ee,
         {
           placeholder: T,
-          required: s,
-          format: y,
-          disabled: !h,
-          type: b,
-          tooltip: v,
-          range: a,
-          use12Hours: m,
-          name: c,
-          label: i,
-          onChange: C ? (r) => C(r, p) : void 0,
-          className: g,
-          disableCurrent: n,
-          disabledFuture: l,
-          disabledPast: f
-        }
-      );
-    }
-    case "textarea": {
-      const { onChange: a, placeholder: n, rows: l, cols: f } = e;
-      return /* @__PURE__ */ o(
-        oe,
-        {
-          rules: u,
-          placeholder: n,
-          onChange: a ? (C) => {
-            var m;
-            return a((m = C == null ? void 0 : C.target) == null ? void 0 : m.value, p);
-          } : void 0,
-          tooltip: v,
-          required: s,
-          disabled: !h,
+          required: d,
+          format: x,
+          disabled: !u,
+          type: f,
+          tooltip: b,
+          range: l,
+          use12Hours: g,
           name: c,
-          label: i,
-          className: g,
-          rows: l,
-          cols: f
+          label: n,
+          onChange: y ? (r) => y(r, h) : void 0,
+          className: p,
+          disableCurrent: i,
+          disabledFuture: a,
+          disabledPast: C
         }
       );
     }
+    case "textarea":
+      return /* @__PURE__ */ o(ae, { ...v });
     case "image":
       return /* @__PURE__ */ o(
         Y,
         {
           ...e,
-          required: s,
+          required: d,
           name: c,
-          label: i,
-          rules: u,
-          fieldClassName: g,
+          label: n,
+          rules: m,
+          fieldClassName: p,
           onRemoved: e.onRemoved,
           onUploading: e.onUploading,
           provider: e.provider
@@ -189,11 +169,11 @@ function Te(x) {
         X,
         {
           ...e,
-          required: s,
+          required: d,
           name: c,
-          label: i,
-          rules: u,
-          fieldClassName: g,
+          label: n,
+          rules: m,
+          fieldClassName: p,
           onRemoved: e.onRemoved,
           onUploading: e.onUploading,
           provider: e.provider
@@ -204,46 +184,46 @@ function Te(x) {
         le,
         {
           ...e,
-          required: s,
+          required: d,
           name: c,
-          label: i,
-          rules: u,
-          fieldClassName: g,
-          form: p,
-          updatable: h,
+          label: n,
+          rules: m,
+          fieldClassName: p,
+          form: h,
+          updatable: u,
           readonly: k,
-          fieldTooltip: v
+          fieldTooltip: b
         }
       );
     case "enum": {
       const {
-        enum: a,
-        radio: n = !1,
-        translation: l,
-        onChange: f,
-        onSearch: C,
-        multiple: m,
-        tagRender: y
-      } = e, T = Array.isArray(a) ? a : Object.keys(a);
-      return n ? /* @__PURE__ */ o(
+        enum: l,
+        radio: i = !1,
+        translation: a,
+        onChange: C,
+        onSearch: y,
+        multiple: g,
+        tagRender: x
+      } = e, T = Array.isArray(l) ? l : Object.keys(l);
+      return i ? /* @__PURE__ */ o(
         j.Item,
         {
           ...e,
           name: c,
-          required: s,
-          tooltip: v,
-          rules: u,
-          label: i,
-          className: ["w-100", g].join(" "),
+          required: d,
+          tooltip: b,
+          rules: m,
+          label: n,
+          className: ["w-100", p].join(" "),
           children: /* @__PURE__ */ o(
             E.Group,
             {
               ...e,
-              onChange: f ? (r) => {
+              onChange: C ? (r) => {
                 var F;
-                return f((F = r == null ? void 0 : r.target) == null ? void 0 : F.value, p);
+                return C((F = r == null ? void 0 : r.target) == null ? void 0 : F.value, h);
               } : void 0,
-              children: T.map((r) => /* @__PURE__ */ o(E, { disabled: !h, value: r, children: l ? N(l[r]) : r }, r))
+              children: T.map((r) => /* @__PURE__ */ o(E, { disabled: !u, value: r, children: a ? N(a[r]) : r }, r))
             }
           )
         }
@@ -251,37 +231,37 @@ function Te(x) {
         M,
         {
           ...e,
-          tagRender: typeof y == "function" ? y : y ? (r) => {
-            const { value: F, label: O } = r, P = y[F];
+          tagRender: typeof x == "function" ? x : x ? (r) => {
+            const { value: F, label: O } = r, P = x[F];
             return P ? /* @__PURE__ */ o(W, { color: P.color, children: O }) : /* @__PURE__ */ o(W, { children: O });
           } : void 0,
-          onChange: f ? (r) => f(r, p) : void 0,
-          className: ["w-100", g].join(" "),
+          onChange: C ? (r) => C(r, h) : void 0,
+          className: ["w-100", p].join(" "),
           name: c,
           items: T,
-          required: s,
-          tooltip: v,
-          rules: u,
-          label: i,
-          disabled: !h,
-          onSearch: C ? (r) => C(r, p) : void 0,
+          required: d,
+          tooltip: b,
+          rules: m,
+          label: n,
+          disabled: !u,
+          onSearch: y ? (r) => y(r, h) : void 0,
           allowClear: !0,
-          mode: m ? "multiple" : void 0,
-          itemBuilder: (r) => /* @__PURE__ */ o(I.Option, { value: r, children: l ? N(l[r]) : r }, r)
+          mode: g ? "multiple" : void 0,
+          itemBuilder: (r) => /* @__PURE__ */ o(I.Option, { value: r, children: a ? N(a[r]) : r }, r)
         }
       );
     }
     case "checkbox": {
-      const { onChange: a } = e;
+      const { onChange: l } = e;
       return /* @__PURE__ */ o(
         Z,
         {
-          className: g,
-          rules: u,
-          onChange: a ? (n) => a(n, p) : void 0,
-          label: i,
-          tooltip: v,
-          disabled: !h,
+          className: p,
+          rules: m,
+          onChange: l ? (i) => l(i, h) : void 0,
+          label: n,
+          tooltip: b,
+          disabled: !u,
           name: c
         }
       );
@@ -292,63 +272,63 @@ function Te(x) {
         {
           ...e,
           type: "color",
-          required: s,
+          required: d,
           name: c,
-          label: i,
-          rules: u,
-          fieldClassName: g,
-          updatable: h,
+          label: n,
+          rules: m,
+          fieldClassName: p,
+          updatable: u,
           readonly: k,
-          fieldTooltip: v
+          fieldTooltip: b
         }
       );
     default:
-      return /* @__PURE__ */ o(S, { children: `${b} Not Implemented` });
+      return /* @__PURE__ */ o(S, { children: `${f} Not Implemented` });
   }
 }
-function le(x) {
+function le(v) {
   const {
-    items: i = [],
+    items: n = [],
     loading: c,
-    searchOnType: b,
-    onSearch: s,
+    searchOnType: f,
+    onSearch: d,
     multiple: w,
-    onChange: u,
-    highlightSearch: h,
+    onChange: m,
+    highlightSearch: u,
     required: k,
-    fieldClassName: g,
+    fieldClassName: p,
     rules: R,
-    fieldTooltip: v,
+    fieldTooltip: b,
     updatable: e,
-    label: p,
+    label: h,
     name: N,
-    tagRender: a,
-    updatingValue: n,
-    onSet: l,
-    placeholder: f,
-    allowClear: C = !0
-  } = x, m = x.form, [y, T] = G(""), r = j.useWatch(N, m), [F, O] = G(!0);
+    tagRender: l,
+    updatingValue: i,
+    onSet: a,
+    placeholder: C,
+    allowClear: y = !0
+  } = v, g = v.form, [x, T] = G(""), r = j.useWatch(N, g), [F, O] = G(!0);
   L(() => {
-    l && F && r && (l == null || l(r, i, m), O(!1));
-  }, [F, m, i, N, l, r]), L(() => {
+    a && F && r && (a == null || a(r, n, g), O(!1));
+  }, [F, g, n, N, a, r]), L(() => {
     r && O(!0);
   }, [r]);
   const P = J(
     async (t) => {
-      T(t), b && (s == null || s(t, m, n));
+      T(t), f && (d == null || d(t, g, i));
     },
-    [m, s, b, n]
+    [g, d, f, i]
   );
   return /* @__PURE__ */ o(
     M,
     {
-      ...x,
+      ...v,
       maxTagCount: "responsive",
       maxTagPlaceholder: (t) => /* @__PURE__ */ D(
-        ae,
+        oe,
         {
-          title: /* @__PURE__ */ o(S, { children: t.map((d) => /* @__PURE__ */ D(S, { children: [
-            d.label,
+          title: /* @__PURE__ */ o(S, { children: t.map((s) => /* @__PURE__ */ D(S, { children: [
+            s.label,
             " ",
             /* @__PURE__ */ o("br", {})
           ] })) }),
@@ -358,30 +338,30 @@ function le(x) {
           ]
         }
       ),
-      placeholder: f,
+      placeholder: C,
       onSelect: (t) => {
-        l == null || l(t == null ? void 0 : t.key, i, m);
+        a == null || a(t == null ? void 0 : t.key, n, g);
       },
-      onChange: u ? (t) => {
-        T(""), u(t, m);
+      onChange: m ? (t) => {
+        T(""), m(t, g);
       } : void 0,
       mode: w ? "multiple" : void 0,
-      className: ["w-100", g].join(" "),
+      className: ["w-100", p].join(" "),
       name: N,
-      items: i,
+      items: n,
       required: k,
-      tooltip: v,
-      tagRender: a,
+      tooltip: b,
+      tagRender: l,
       rules: R,
       disabled: !e,
-      label: p,
-      allowClear: C,
+      label: h,
+      allowClear: y,
       onSearch: P,
       loading: c,
-      filterOption: h ? (t, d) => {
+      filterOption: u ? (t, s) => {
         var A, B, H;
         try {
-          const U = t.toLowerCase().split(/\s+/), _ = ((typeof (d == null ? void 0 : d.children) == "string" ? d == null ? void 0 : d.children : (B = (A = d == null ? void 0 : d.children) == null ? void 0 : A.props) == null ? void 0 : B.textToHighlight) ?? "").toLowerCase(), $ = (((H = d == null ? void 0 : d.value) == null ? void 0 : H.toString()) ?? "").toLowerCase();
+          const U = t.toLowerCase().split(/\s+/), _ = ((typeof (s == null ? void 0 : s.children) == "string" ? s == null ? void 0 : s.children : (B = (A = s == null ? void 0 : s.children) == null ? void 0 : A.props) == null ? void 0 : B.textToHighlight) ?? "").toLowerCase(), $ = (((H = s == null ? void 0 : s.value) == null ? void 0 : H.toString()) ?? "").toLowerCase();
           return U.every(
             (q) => _.indexOf(q) >= 0 || $.indexOf(q) >= 0
           );
@@ -389,21 +369,21 @@ function le(x) {
           return !0;
         }
       } : void 0,
-      itemBuilder: h ? (t) => {
-        const d = t.value ? String(t.value) : void 0;
+      itemBuilder: u ? (t) => {
+        const s = t.value ? String(t.value) : void 0;
         return /* @__PURE__ */ o(
           I.Option,
           {
             value: t.key,
-            title: d,
+            title: s,
             disabled: t.disabled,
             children: /* @__PURE__ */ o(
               K,
               {
                 highlightClassName: "highlight-text",
-                searchWords: (y ?? "").split(" "),
+                searchWords: (x ?? "").split(" "),
                 autoEscape: !0,
-                textToHighlight: d ?? ""
+                textToHighlight: s ?? ""
               }
             )
           },
@@ -422,24 +402,24 @@ function le(x) {
     }
   );
 }
-function ne(x) {
+function ne(v) {
   const {
-    required: i,
+    required: n,
     fieldClassName: c,
-    rules: b,
-    fieldTooltip: s,
+    rules: f,
+    fieldTooltip: d,
     updatable: w,
-    label: u,
-    name: h
-  } = x;
+    label: m,
+    name: u
+  } = v;
   return /* @__PURE__ */ o(
     j.Item,
     {
-      label: u,
-      name: h,
-      required: i,
-      rules: b,
-      tooltip: s,
+      label: m,
+      name: u,
+      required: n,
+      rules: f,
+      tooltip: d,
       children: /* @__PURE__ */ o(
         z,
         {
@@ -450,7 +430,7 @@ function ne(x) {
           trigger: "click",
           className: c,
           disabled: !w,
-          ...x.innerProps
+          ...v.innerProps
         }
       )
     }

package/crud/CrudForm.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),i=require("react"),u=require("antd"),g=require("./CrudField.cjs.js");function h({form:d,purpose:m="new",...s}){return t.jsx(t.Fragment,{children:t.jsx(u.Form,{form:d,layout:"vertical",children:t.jsx(y,{...s,purpose:m})})})}function y({fields:d,formBuilder:m,grid:s,onDeleteFile:l,onUploadFile:o,purpose:c}){const f=i.useMemo(()=>d.filter(r=>!r.readonly).map(r=>{const a={onUploading:e=>{var n;r.onUploading&&((n=r.onUploading)==null||n.call(r,e)),o==null||o(e)},onDelete:e=>{var n;r.onUploading&&((n=r.onDelete)==null||n.call(r,e)),l==null||l(e)}};return t.jsx(i.Fragment,{children:r.grid&&s?t.jsx(u.Col,{...r.grid,children:i.createElement(g.default,{...r,...a,key:typeof r.name=="string"?r.name:String(r.name),updatable:c!=="update"?!0:r.updatable})}):i.createElement(g.default,{...r,...a,key:typeof r.name=="string"?r.name:String(r.name),updatable:c!=="update"?!0:r.updatable})},r.name)}),[d,s,l,o,c]),j=i.useCallback((r,a={})=>{const e=d.find(n=>n.name===r);if(e!=null&&e.hidden)return t.jsx(t.Fragment,{});if(e){const n=i.createElement(g.default,{...e,...a,key:typeof e.name=="string"?e.name:String(e.name),updatable:c!=="update"?!0:e.updatable});return a.render?a.render(n):n}return t.jsx(t.Fragment,{})},[d,c]);return t.jsx(t.Fragment,{children:m?t.jsxs(t.Fragment,{children:[m(j,{isAnyFieldHidden(...r){const a=Array.isArray(r)?r:[r];return d.filter(n=>a.includes(n.name)).some(n=>n.hidden)},isAllFieldsHidden(...r){const a=Array.isArray(r)?r:[r];return d.filter(n=>a.includes(n.name)).every(n=>n.hidden)}}),t.jsxs(u.Form.Item,{hidden:!0,noStyle:!0,children:[t.jsx(u.Input,{name:"id"}),t.jsx(u.Input,{})]})]}):s?t.jsx(u.Row,{gutter:[8,8],children:f}):f})}exports.CrudForm=h;exports.CrudFormFields=y;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("react"),c=require("antd"),l=require("./CrudField.cjs.js");function x({form:d,purpose:y="new",...m}){return e.jsx(c.Form,{form:d,layout:"vertical",children:e.jsx(h,{...m,purpose:y})})}function h({fields:d,formBuilder:y,grid:m,onDeleteFile:i,onUploadFile:u,purpose:o}){const p=s.useMemo(()=>d.filter(t=>!t.readonly).map(t=>{const a={onUploading:t.type==="image"||t.type==="file"?r=>{var n;t.onUploading&&((n=t.onUploading)==null||n.call(t,r)),u==null||u(r)}:void 0,onDelete:t.type==="image"||t.type==="file"?r=>{var n;t.onUploading&&((n=t.onDelete)==null||n.call(t,r)),i==null||i(r)}:void 0};return e.jsx(s.Fragment,{children:t.grid&&m?e.jsx(c.Col,{...t.grid,children:s.createElement(l.default,{...t,...a,key:typeof t.name=="string"?t.name:String(t.name),updatable:o!=="update"?!0:t.updatable})}):s.createElement(l.default,{...t,...a,key:typeof t.name=="string"?t.name:String(t.name),updatable:o!=="update"?!0:t.updatable})},t.name)}),[d,m,i,u,o]),b=s.useCallback((t,a={})=>{const r=d.find(n=>n.name===t);if(r!=null&&r.hidden)return e.jsx(e.Fragment,{});if(r){const n={onUploading:r.type==="image"||r.type==="file"?g=>{var f;r.onUploading&&((f=r.onUploading)==null||f.call(r,g)),u==null||u(g)}:void 0,onDelete:r.type==="image"||r.type==="file"?g=>{var f;r.onUploading&&((f=r.onDelete)==null||f.call(r,g)),i==null||i(g)}:void 0},j=s.createElement(l.default,{...r,...a,...n,key:typeof r.name=="string"?r.name:String(r.name),updatable:o!=="update"?!0:r.updatable});return a.render?a.render(j):j}return e.jsx(e.Fragment,{})},[d,o]);return e.jsx(e.Fragment,{children:y?e.jsxs(e.Fragment,{children:[y(b,{isAnyFieldHidden(...t){const a=Array.isArray(t)?t:[t];return d.filter(n=>a.includes(n.name)).some(n=>n.hidden)},isAllFieldsHidden(...t){const a=Array.isArray(t)?t:[t];return d.filter(n=>a.includes(n.name)).every(n=>n.hidden)}}),e.jsxs(c.Form.Item,{hidden:!0,noStyle:!0,children:[e.jsx(c.Input,{name:"id"}),e.jsx(c.Input,{})]})]}):m?e.jsx(c.Row,{gutter:[8,8],children:p}):p})}exports.CrudForm=x;exports.CrudFormFields=h;

package/crud/CrudForm.d.ts

@@ -8,7 +8,7 @@ export interface CurdFormFieldsProps<T> {
     fields: CrudFieldProps<T>[];
     purpose?: CrudPurpose;
 }
-export declare function CrudForm<T>({ form, purpose, ...props }: CurdFormFieldsProps<T> & {
+export declare function CrudForm<T>({ form, purpose, ...props }: Readonly<CurdFormFieldsProps<T> & {
     form: FormInstance;
-}): import("react/jsx-runtime").JSX.Element;
-export declare function CrudFormFields<T>({ fields, formBuilder, grid, onDeleteFile, onUploadFile, purpose, }: CurdFormFieldsProps<T>): import("react/jsx-runtime").JSX.Element;
+}>): import("react/jsx-runtime").JSX.Element;
+export declare function CrudFormFields<T>({ fields, formBuilder, grid, onDeleteFile, onUploadFile, purpose, }: Readonly<CurdFormFieldsProps<T>>): import("react/jsx-runtime").JSX.Element;