@kingteza/crud-component 1.0.45 → 1.0.47

package/crud/CrudField.es.js

@@ -1,5 +1,5 @@
-import { jsx as r, Fragment as j, jsxs as D } from "react/jsx-runtime";
-import { Form as S, Radio as E, Tag as W, Select as I, ColorPicker as z } from "antd";
+import { jsx as o, Fragment as S, jsxs as D } from "react/jsx-runtime";
+import { Form as j, Radio as E, Tag as W, Select as I, ColorPicker as z } from "antd";
 import { useEffect as L, useState as G, useCallback as J } from "react";
 import K from "react-highlight-words";
 import { useTranslationLib as Q } from "../locale/index.es.js";
@@ -9,380 +9,359 @@ import Z from "../common/check-box/CheckBox.es.js";
 import V from "../common/date-picker/DatePicker.es.js";
 import ee from "../common/date-picker/TimePicker.es.js";
 import M from "../common/select/SelectComponent.es.js";
-import te from "../common/text-field/NumberField.es.js";
-import oe from "../common/text-field/TextField.es.js";
-import re from "../common/text-field/TextArea.es.js";
-import ae from "../common/tooltip/TooltipComponent.es.js";
-function Te(x) {
+import re from "../common/text-field/NumberField.es.js";
+import te from "../common/text-field/TextField.es.js";
+import oe from "../common/tooltip/TooltipComponent.es.js";
+import ae from "./CrudTextAreaComponent.es.js";
+function Te(v) {
   const {
-    label: i,
-    name: m,
-    type: b,
-    required: s,
+    label: n,
+    name: c,
+    type: f,
+    required: d,
     hidden: w,
-    rules: u = [],
-    updatable: h = !0,
+    rules: m = [],
+    updatable: u = !0,
     readonly: k = !1,
-    fieldClassName: f,
+    fieldClassName: p,
     customFormFieldRender: R,
-    fieldTooltip: v,
+    fieldTooltip: b,
     ...e
-  } = x, p = S.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__ */ r(j, {});
+  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;
-      return /* @__PURE__ */ r(
-        oe,
+      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,
-          name: m,
-          tooltip: v,
-          label: i,
-          className: f,
+          placeholder: i,
+          disabled: !u,
+          rules: m,
+          required: d,
+          onChange: l ? (a) => l(a, h) : void 0,
+          type: f,
+          name: c,
+          tooltip: b,
+          label: n,
+          className: p,
           autoComplete: "new-password"
         }
       );
     }
     case "number": {
-      const { onChange: a, placeholder: n, allowMinus: l } = e;
-      return /* @__PURE__ */ r(
-        te,
+      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 ? (g) => a(g, p) : void 0,
-          rules: u,
+          type: f,
+          onChange: l ? (C) => l(C, h) : void 0,
+          rules: m,
           autoComplete: "false",
-          required: s,
-          tooltip: v,
-          className: f,
-          min: l ? null : void 0,
-          name: m,
-          label: i
+          required: d,
+          tooltip: b,
+          className: p,
+          min: a ? null : void 0,
+          name: c,
+          label: n
         }
       );
     }
     case "date": {
       const {
-        range: a,
-        disableToday: n,
-        disabledFutureDays: l,
-        disabledPastDays: g,
-        onChange: C,
-        placeholder: d,
-        format: y
+        range: l,
+        disableToday: i,
+        disabledFutureDays: a,
+        disabledPastDays: C,
+        onChange: y,
+        placeholder: g,
+        format: x
       } = e;
-      return /* @__PURE__ */ r(
+      return /* @__PURE__ */ o(
         V,
         {
-          placeholder: d,
-          required: s,
-          disabled: !h,
-          type: b,
-          format: y,
-          tooltip: v,
-          range: a,
-          name: m,
-          label: i,
-          onChange: C ? (T) => C(T, p) : void 0,
-          className: f,
-          disableToday: n,
-          disabledFutureDays: l,
-          disabledPastDays: g
+          placeholder: g,
+          required: d,
+          disabled: !u,
+          type: f,
+          format: x,
+          tooltip: b,
+          range: l,
+          name: c,
+          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: g,
-        onChange: C,
-        use12Hours: d,
-        format: y,
+        range: l = !1,
+        disableCurrent: i,
+        disabledFuture: a,
+        disabledPast: C,
+        onChange: y,
+        use12Hours: g,
+        format: x,
         placeholder: T
       } = e;
-      return /* @__PURE__ */ r(
+      return /* @__PURE__ */ o(
         ee,
         {
           placeholder: T,
-          required: s,
-          format: y,
-          disabled: !h,
-          type: b,
-          tooltip: v,
-          range: a,
-          use12Hours: d,
-          name: m,
-          label: i,
-          onChange: C ? (t) => C(t, p) : void 0,
-          className: f,
-          disableCurrent: n,
-          disabledFuture: l,
-          disabledPast: g
-        }
-      );
-    }
-    case "textarea": {
-      const { onChange: a, placeholder: n, rows: l, cols: g } = e;
-      return /* @__PURE__ */ r(
-        re,
-        {
-          rules: u,
-          placeholder: n,
-          onChange: a ? (C) => {
-            var d;
-            return a((d = C == null ? void 0 : C.target) == null ? void 0 : d.value, p);
-          } : void 0,
-          tooltip: v,
-          required: s,
-          disabled: !h,
-          name: m,
-          label: i,
-          className: f,
-          rows: l,
-          cols: g
+          required: d,
+          format: x,
+          disabled: !u,
+          type: f,
+          tooltip: b,
+          range: l,
+          use12Hours: g,
+          name: c,
+          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__ */ r(
+      return /* @__PURE__ */ o(
         Y,
         {
           ...e,
-          required: s,
-          name: m,
-          label: i,
-          rules: u,
-          fieldClassName: f,
+          required: d,
+          name: c,
+          label: n,
+          rules: m,
+          fieldClassName: p,
           onRemoved: e.onRemoved,
           onUploading: e.onUploading,
           provider: e.provider
         }
       );
     case "file":
-      return /* @__PURE__ */ r(
+      return /* @__PURE__ */ o(
         X,
         {
           ...e,
-          required: s,
-          name: m,
-          label: i,
-          rules: u,
-          fieldClassName: f,
+          required: d,
+          name: c,
+          label: n,
+          rules: m,
+          fieldClassName: p,
           onRemoved: e.onRemoved,
           onUploading: e.onUploading,
           provider: e.provider
         }
       );
     case "select":
-      return /* @__PURE__ */ r(
+      return /* @__PURE__ */ o(
         le,
         {
           ...e,
-          required: s,
-          name: m,
-          label: i,
-          rules: u,
-          fieldClassName: f,
-          form: p,
-          updatable: h,
+          required: d,
+          name: c,
+          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: g,
-        onSearch: C,
-        multiple: d,
-        tagRender: y
-      } = e, T = Array.isArray(a) ? a : Object.keys(a);
-      return n ? /* @__PURE__ */ r(
-        S.Item,
+        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: m,
-          required: s,
-          tooltip: v,
-          rules: u,
-          label: i,
-          className: ["w-100", f].join(" "),
-          children: /* @__PURE__ */ r(
+          name: c,
+          required: d,
+          tooltip: b,
+          rules: m,
+          label: n,
+          className: ["w-100", p].join(" "),
+          children: /* @__PURE__ */ o(
             E.Group,
             {
               ...e,
-              onChange: g ? (t) => {
+              onChange: C ? (r) => {
                 var F;
-                return g((F = t == null ? void 0 : t.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((t) => /* @__PURE__ */ r(E, { disabled: !h, value: t, children: l ? N(l[t]) : t }, t))
+              children: T.map((r) => /* @__PURE__ */ o(E, { disabled: !u, value: r, children: a ? N(a[r]) : r }, r))
             }
           )
         }
-      ) : /* @__PURE__ */ r(
+      ) : /* @__PURE__ */ o(
         M,
         {
           ...e,
-          tagRender: typeof y == "function" ? y : y ? (t) => {
-            const { value: F, label: O } = t, P = y[F];
-            return P ? /* @__PURE__ */ r(W, { color: P.color, children: O }) : /* @__PURE__ */ r(W, { children: O });
+          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: g ? (t) => g(t, p) : void 0,
-          className: ["w-100", f].join(" "),
-          name: m,
+          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 ? (t) => C(t, p) : void 0,
+          required: d,
+          tooltip: b,
+          rules: m,
+          label: n,
+          disabled: !u,
+          onSearch: y ? (r) => y(r, h) : void 0,
           allowClear: !0,
-          maxCount: d ? void 0 : 1,
-          mode: d ? "multiple" : typeof y == "function" || typeof y == "object" ? "tags" : void 0,
-          itemBuilder: (t) => /* @__PURE__ */ r(I.Option, { value: t, children: l ? N(l[t]) : t }, t)
+          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;
-      return /* @__PURE__ */ r(
+      const { onChange: l } = e;
+      return /* @__PURE__ */ o(
         Z,
         {
-          className: f,
-          rules: u,
-          onChange: a ? (n) => a(n, p) : void 0,
-          label: i,
-          tooltip: v,
-          disabled: !h,
-          name: m
+          className: p,
+          rules: m,
+          onChange: l ? (i) => l(i, h) : void 0,
+          label: n,
+          tooltip: b,
+          disabled: !u,
+          name: c
         }
       );
     }
     case "color":
-      return /* @__PURE__ */ r(
+      return /* @__PURE__ */ o(
         ne,
         {
           ...e,
           type: "color",
-          required: s,
-          name: m,
-          label: i,
-          rules: u,
-          fieldClassName: f,
-          updatable: h,
+          required: d,
+          name: c,
+          label: n,
+          rules: m,
+          fieldClassName: p,
+          updatable: u,
           readonly: k,
-          fieldTooltip: v
+          fieldTooltip: b
         }
       );
     default:
-      return /* @__PURE__ */ r(j, { children: `${b} Not Implemented` });
+      return /* @__PURE__ */ o(S, { children: `${f} Not Implemented` });
   }
 }
-function le(x) {
+function le(v) {
   const {
-    items: i = [],
-    loading: m,
-    searchOnType: b,
-    onSearch: s,
+    items: n = [],
+    loading: c,
+    searchOnType: f,
+    onSearch: d,
     multiple: w,
-    onChange: u,
-    highlightSearch: h,
+    onChange: m,
+    highlightSearch: u,
     required: k,
-    fieldClassName: f,
+    fieldClassName: p,
     rules: R,
-    fieldTooltip: v,
+    fieldTooltip: b,
     updatable: e,
-    label: p,
+    label: h,
     name: N,
-    tagRender: a,
-    updatingValue: n,
-    onSet: l,
-    placeholder: g,
-    allowClear: C = !0
-  } = x, d = x.form, [y, T] = G(""), t = S.useWatch(N, d), [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 && t && (l == null || l(t, i, d), O(!1));
-  }, [F, d, i, N, l, t]), L(() => {
-    t && O(!0);
-  }, [t]);
+    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 (o) => {
-      T(o), b && (s == null || s(o, d, n));
+    async (t) => {
+      T(t), f && (d == null || d(t, g, i));
     },
-    [d, s, b, n]
+    [g, d, f, i]
   );
-  return /* @__PURE__ */ r(
+  return /* @__PURE__ */ o(
     M,
     {
-      ...x,
+      ...v,
       maxTagCount: "responsive",
-      maxTagPlaceholder: (o) => /* @__PURE__ */ D(
-        ae,
+      maxTagPlaceholder: (t) => /* @__PURE__ */ D(
+        oe,
         {
-          title: /* @__PURE__ */ r(j, { children: o.map((c) => /* @__PURE__ */ D(j, { children: [
-            c.label,
+          title: /* @__PURE__ */ o(S, { children: t.map((s) => /* @__PURE__ */ D(S, { children: [
+            s.label,
             " ",
-            /* @__PURE__ */ r("br", {})
+            /* @__PURE__ */ o("br", {})
           ] })) }),
           children: [
             "+",
-            o == null ? void 0 : o.length
+            t == null ? void 0 : t.length
           ]
         }
       ),
-      placeholder: g,
-      onSelect: (o) => {
-        l == null || l(o == null ? void 0 : o.key, i, d);
+      placeholder: C,
+      onSelect: (t) => {
+        a == null || a(t == null ? void 0 : t.key, n, g);
       },
-      onChange: u ? (o) => {
-        T(""), u(o, d);
+      onChange: m ? (t) => {
+        T(""), m(t, g);
       } : void 0,
       mode: w ? "multiple" : void 0,
-      className: ["w-100", f].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: m,
-      filterOption: h ? (o, c) => {
+      loading: c,
+      filterOption: u ? (t, s) => {
         var A, B, H;
         try {
-          const U = o.toLowerCase().split(/\s+/), _ = ((typeof (c == null ? void 0 : c.children) == "string" ? c == null ? void 0 : c.children : (B = (A = c == null ? void 0 : c.children) == null ? void 0 : A.props) == null ? void 0 : B.textToHighlight) ?? "").toLowerCase(), $ = (((H = c == null ? void 0 : c.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
           );
@@ -390,58 +369,58 @@ function le(x) {
           return !0;
         }
       } : void 0,
-      itemBuilder: h ? (o) => {
-        const c = o.value ? String(o.value) : void 0;
-        return /* @__PURE__ */ r(
+      itemBuilder: u ? (t) => {
+        const s = t.value ? String(t.value) : void 0;
+        return /* @__PURE__ */ o(
           I.Option,
           {
-            value: o.key,
-            title: c,
-            disabled: o.disabled,
-            children: /* @__PURE__ */ r(
+            value: t.key,
+            title: s,
+            disabled: t.disabled,
+            children: /* @__PURE__ */ o(
               K,
               {
                 highlightClassName: "highlight-text",
-                searchWords: (y ?? "").split(" "),
+                searchWords: (x ?? "").split(" "),
                 autoEscape: !0,
-                textToHighlight: c ?? ""
+                textToHighlight: s ?? ""
               }
             )
           },
-          o.key
+          t.key
         );
-      } : (o) => /* @__PURE__ */ r(
+      } : (t) => /* @__PURE__ */ o(
         I.Option,
         {
-          value: o.key,
-          title: o.value,
-          disabled: o.disabled,
-          children: o.value
+          value: t.key,
+          title: t.value,
+          disabled: t.disabled,
+          children: t.value
         },
-        o.key
+        t.key
       )
     }
   );
 }
-function ne(x) {
+function ne(v) {
   const {
-    required: i,
-    fieldClassName: m,
-    rules: b,
-    fieldTooltip: s,
+    required: n,
+    fieldClassName: c,
+    rules: f,
+    fieldTooltip: d,
     updatable: w,
-    label: u,
-    name: h
-  } = x;
-  return /* @__PURE__ */ r(
-    S.Item,
+    label: m,
+    name: u
+  } = v;
+  return /* @__PURE__ */ o(
+    j.Item,
     {
-      label: u,
-      name: h,
-      required: i,
-      rules: b,
-      tooltip: s,
-      children: /* @__PURE__ */ r(
+      label: m,
+      name: u,
+      required: n,
+      rules: f,
+      tooltip: d,
+      children: /* @__PURE__ */ o(
         z,
         {
           disabledAlpha: !0,
@@ -449,9 +428,9 @@ function ne(x) {
           defaultFormat: "hex",
           showText: !0,
           trigger: "click",
-          className: m,
+          className: c,
           disabled: !w,
-          ...x.innerProps
+          ...v.innerProps
         }
       )
     }