@kingteza/crud-component 1.27.2 → 1.29.0

package/dist/crud/CrudField.es.js

@@ -1,214 +1,214 @@
-import { jsx as o, Fragment as S, jsxs as W } from "react/jsx-runtime";
-import { Form as I, Radio as _, Select as A, Tag as G, ColorPicker as ee } from "antd";
-import { useEffect as j, useState as $, useMemo as z, useCallback as J } from "react";
-import re from "react-highlight-words";
-import { useTranslationLibNoNS as te } from "../locale/index.es.js";
-import oe from "./FileCrudField.es.js";
-import ae from "./ImageCrudField.es.js";
-import le from "../common/check-box/CheckBox.es.js";
-import ne from "../common/date-picker/DatePicker.es.js";
-import ie from "../common/date-picker/TimePicker.es.js";
-import Q from "../common/select/SelectComponent.es.js";
-import de from "../common/text-field/NumberField.es.js";
-import se from "../common/text-field/PhoneNumberField.es.js";
-import ce from "../common/text-field/TextField.es.js";
-import me from "../common/tooltip/TooltipComponent.es.js";
-import ue from "./CrudTextAreaComponent.es.js";
-import K from "../util/CrudUtil.es.js";
-function Se(F) {
+import { jsx as o, Fragment as L, jsxs as M } from "react/jsx-runtime";
+import { Form as O, Radio as W, Checkbox as _, Col as re, Select as S, Tag as $, ColorPicker as te } from "antd";
+import { useEffect as j, useState as z, useMemo as J, useCallback as K } from "react";
+import oe from "react-highlight-words";
+import { useTranslationLibNoNS as ae } from "../locale/index.es.js";
+import le from "./FileCrudField.es.js";
+import ne from "./ImageCrudField.es.js";
+import ie from "../common/check-box/CheckBox.es.js";
+import de from "../common/date-picker/DatePicker.es.js";
+import se from "../common/date-picker/TimePicker.es.js";
+import V from "../common/select/SelectComponent.es.js";
+import ce from "../common/text-field/NumberField.es.js";
+import me from "../common/text-field/PhoneNumberField.es.js";
+import ue from "../common/text-field/TextField.es.js";
+import he from "../common/tooltip/TooltipComponent.es.js";
+import pe from "./CrudTextAreaComponent.es.js";
+import Q from "../util/CrudUtil.es.js";
+function je(F) {
   const {
     label: n,
-    name: m,
+    name: c,
     type: v,
     required: d,
     hidden: H,
-    rules: p = [],
-    updatable: f = !0,
-    readonly: k = !1,
-    fieldClassName: u,
+    rules: h = [],
+    updatable: p = !0,
+    readonly: R = !1,
+    fieldClassName: m,
     customFormFieldRender: T,
-    fieldTooltip: y,
-    fieldHelper: g,
-    formLayoutProps: w,
+    fieldTooltip: x,
+    fieldHelper: f,
+    formLayoutProps: N,
     ...e
-  } = F, C = I.useFormInstance();
+  } = F, C = O.useFormInstance();
   j(() => {
     if (v === "select") {
       const {
-        items: r = [],
-        onSearch: i,
-        searchOnType: l
+        items: t = [],
+        onSearch: l,
+        searchOnType: i
       } = e;
-      !(r != null && r.length) && !l && (i == null || i(void 0, C, e == null ? void 0 : e.updatingValue));
+      !(t != null && t.length) && !i && (l == null || l(void 0, C, e == null ? void 0 : e.updatingValue));
     }
   }, [C, e, v, e == null ? void 0 : e.updatingValue]);
-  const { t: O } = te();
-  if (k || H) return /* @__PURE__ */ o(S, {});
+  const { t: P } = ae();
+  if (R || H) return /* @__PURE__ */ o(L, {});
   if (T)
     return T(C, F);
   switch (v) {
     case "text":
     case "email":
     case "password": {
-      const { onChange: r, placeholder: i, addonAfter: l, addonBefore: s } = e;
+      const { onChange: t, placeholder: l, addonAfter: i, addonBefore: g } = e;
       return /* @__PURE__ */ o(
-        ce,
+        ue,
         {
-          ...w,
-          placeholder: i,
-          disabled: !f,
-          rules: p,
+          ...N,
+          placeholder: l,
+          disabled: !p,
+          rules: h,
           required: d,
-          onChange: r ? (h) => r(h, C) : void 0,
+          onChange: t ? (b) => t(b, C) : void 0,
           type: v,
-          name: m,
-          tooltip: y,
+          name: c,
+          tooltip: x,
           label: n,
-          className: u,
+          className: m,
           autoComplete: "new-password",
-          addonAfter: l,
-          addonBefore: s,
-          help: g
+          addonAfter: i,
+          addonBefore: g,
+          help: f
         }
       );
     }
     case "phone": {
-      const { onChange: r, placeholder: i, addonAfter: l, addonBefore: s } = e;
+      const { onChange: t, placeholder: l, addonAfter: i, addonBefore: g } = e;
       return /* @__PURE__ */ o(
-        se,
+        me,
         {
           ...e,
-          ...w,
-          placeholder: i,
-          disabled: !f,
-          rules: p,
+          ...N,
+          placeholder: l,
+          disabled: !p,
+          rules: h,
           required: d,
-          onChange: r ? (h) => r(h, C) : void 0,
+          onChange: t ? (b) => t(b, C) : void 0,
           type: v,
-          name: m,
-          tooltip: y,
+          name: c,
+          tooltip: x,
           label: n,
-          className: u,
+          className: m,
           autoComplete: "new-password",
-          addonAfter: l,
-          addonBefore: s,
-          help: g
+          addonAfter: i,
+          addonBefore: g,
+          help: f
         }
       );
     }
     case "number": {
       const {
-        onChange: r,
-        placeholder: i,
-        allowMinus: l,
-        min: s,
-        max: h,
-        addonAfter: b,
-        addonBefore: N
+        onChange: t,
+        placeholder: l,
+        allowMinus: i,
+        min: g,
+        max: b,
+        addonAfter: s,
+        addonBefore: w
       } = e;
       return /* @__PURE__ */ o(
-        de,
+        ce,
         {
-          ...w,
-          placeholder: i,
-          disabled: !f,
+          ...N,
+          placeholder: l,
+          disabled: !p,
           moneyField: !!e.formatted,
           type: v,
-          onChange: r ? (x) => r(x, C) : void 0,
-          rules: p,
+          onChange: t ? (r) => t(r, C) : void 0,
+          rules: h,
           autoComplete: "false",
           required: d,
-          tooltip: y,
-          className: u,
-          min: l ? null : s,
-          max: h,
-          addonAfter: b,
-          addonBefore: N,
-          name: m,
+          tooltip: x,
+          className: m,
+          min: i ? null : g,
+          max: b,
+          addonAfter: s,
+          addonBefore: w,
+          name: c,
           label: n,
-          help: g
+          help: f
         }
       );
     }
     case "date": {
       const {
-        range: r,
-        disableToday: i,
-        disabledFutureDays: l,
-        disabledPastDays: s,
-        onChange: h,
-        placeholder: b,
-        format: N
+        range: t,
+        disableToday: l,
+        disabledFutureDays: i,
+        disabledPastDays: g,
+        onChange: b,
+        placeholder: s,
+        format: w
       } = e;
       return /* @__PURE__ */ o(
-        ne,
+        de,
         {
-          ...w,
-          placeholder: b,
+          ...N,
+          placeholder: s,
           required: d,
-          disabled: !f,
+          disabled: !p,
           type: v,
-          format: N,
-          tooltip: y,
-          range: r,
-          name: m,
+          format: w,
+          tooltip: x,
+          range: t,
+          name: c,
           label: n,
-          onChange: h ? (x) => h(x, C) : void 0,
-          className: u,
-          disableToday: i,
-          disabledFutureDays: l,
-          disabledPastDays: s,
-          help: g
+          onChange: b ? (r) => b(r, C) : void 0,
+          className: m,
+          disableToday: l,
+          disabledFutureDays: i,
+          disabledPastDays: g,
+          help: f
         }
       );
     }
     case "time": {
       const {
-        range: r = !1,
-        disableCurrent: i,
-        disabledFuture: l,
-        disabledPast: s,
-        onChange: h,
-        use12Hours: b,
-        format: N,
-        placeholder: x
+        range: t = !1,
+        disableCurrent: l,
+        disabledFuture: i,
+        disabledPast: g,
+        onChange: b,
+        use12Hours: s,
+        format: w,
+        placeholder: r
       } = e;
       return /* @__PURE__ */ o(
-        ie,
+        se,
         {
-          ...w,
-          placeholder: x,
+          ...N,
+          placeholder: r,
           required: d,
-          format: N,
-          disabled: !f,
+          format: w,
+          disabled: !p,
           type: v,
-          tooltip: y,
-          range: r,
-          use12Hours: b,
-          name: m,
+          tooltip: x,
+          range: t,
+          use12Hours: s,
+          name: c,
           label: n,
-          onChange: h ? (a) => h(a, C) : void 0,
-          className: u,
-          disableCurrent: i,
-          disabledFuture: l,
-          disabledPast: s,
-          help: g
+          onChange: b ? (y) => b(y, C) : void 0,
+          className: m,
+          disableCurrent: l,
+          disabledFuture: i,
+          disabledPast: g,
+          help: f
         }
       );
     }
     case "textarea":
-      return /* @__PURE__ */ o(ue, { ...F });
+      return /* @__PURE__ */ o(pe, { ...F });
     case "image":
       return /* @__PURE__ */ o(
-        ae,
+        ne,
         {
           ...e,
           required: d,
-          name: m,
+          name: c,
           label: n,
-          rules: p,
-          fieldHelper: g,
-          fieldClassName: u,
+          rules: h,
+          fieldHelper: f,
+          fieldClassName: m,
           onRemoved: e.onRemoved,
           onUploading: e.onUploading,
           provider: e.provider
@@ -216,15 +216,15 @@ function Se(F) {
       );
     case "file":
       return /* @__PURE__ */ o(
-        oe,
+        le,
         {
           ...e,
           required: d,
-          name: m,
+          name: c,
           label: n,
-          rules: p,
-          fieldHelper: g,
-          fieldClassName: u,
+          rules: h,
+          fieldHelper: f,
+          fieldClassName: m,
           onRemoved: e.onRemoved,
           onUploading: e.onUploading,
           provider: e.provider
@@ -232,273 +232,289 @@ function Se(F) {
       );
     case "select":
       return /* @__PURE__ */ o(
-        he,
+        fe,
         {
           ...e,
           required: d,
-          name: m,
+          name: c,
           label: n,
-          rules: p,
-          fieldClassName: u,
+          rules: h,
+          fieldClassName: m,
           form: C,
-          help: g,
-          updatable: f,
-          readonly: k,
-          fieldTooltip: y,
-          fieldHelper: g
+          help: f,
+          updatable: p,
+          readonly: R,
+          fieldTooltip: x,
+          fieldHelper: f
         }
       );
     case "enum": {
       const {
-        enum: r,
-        radio: i = !1,
+        enum: t,
         translation: l,
-        onChange: s,
-        onSearch: h,
+        onChange: i,
+        onSearch: g,
         multiple: b,
-        tagRender: N
-      } = e, x = Array.isArray(r) ? r : Object.keys(r);
-      return i ? /* @__PURE__ */ o(
-        I.Item,
+        tagRender: s
+      } = e, w = Array.isArray(t) ? t : Object.keys(t);
+      return "radio" in e && e.radio ? /* @__PURE__ */ o(
+        O.Item,
         {
           ...e,
-          ...w,
-          name: m,
+          ...N,
+          name: c,
           required: d,
-          tooltip: y,
-          rules: p,
+          tooltip: x,
+          rules: h,
           label: n,
-          className: ["w-100", u].join(" "),
-          help: g,
+          className: ["w-100", m].join(" "),
+          help: f,
           children: /* @__PURE__ */ o(
-            _.Group,
+            W.Group,
             {
               ...e,
-              onChange: s ? (a) => {
-                var P;
-                return s((P = a == null ? void 0 : a.target) == null ? void 0 : P.value, C);
+              onChange: i ? (r) => {
+                var y;
+                return i((y = r == null ? void 0 : r.target) == null ? void 0 : y.value, C);
               } : void 0,
-              children: x.map((a) => /* @__PURE__ */ o(_, { disabled: !f, value: a, children: l ? O(l[a]) : a }, a))
+              children: w.map((r) => /* @__PURE__ */ o(W, { disabled: !p, value: r, children: l ? P(l[r]) : r }, r))
             }
           )
         }
+      ) : "checkbox" in e && e.checkbox ? /* @__PURE__ */ o(
+        O.Item,
+        {
+          ...e,
+          ...N,
+          name: c,
+          required: d,
+          tooltip: x,
+          rules: h,
+          label: n,
+          className: ["w-100", m].join(" "),
+          help: f,
+          children: /* @__PURE__ */ o(_.Group, { className: "w-100", children: w.map((r) => {
+            const y = /* @__PURE__ */ o(_, { disabled: !p, value: r, children: l ? P(l[r]) : r }, r);
+            return "checkboxGrid" in e && e.checkboxGrid ? /* @__PURE__ */ o(re, { ...e.checkboxGrid, children: y }) : y;
+          }) })
+        }
       ) : /* @__PURE__ */ o(
-        Q,
+        V,
         {
           ...e,
-          ...w,
-          tagRender: typeof N == "function" ? N : N ? (a) => {
-            const { value: P, label: R } = a, L = N[P];
-            return L ? /* @__PURE__ */ o(G, { color: L.color, children: R }) : /* @__PURE__ */ o(G, { children: R });
+          ...N,
+          tagRender: typeof s == "function" ? s : s ? (r) => {
+            const { value: y, label: I } = r, k = s[y];
+            return k ? /* @__PURE__ */ o($, { color: k.color, children: I }) : /* @__PURE__ */ o($, { children: I });
           } : void 0,
-          onChange: s ? (a) => s(a, C) : void 0,
-          className: ["w-100", u].join(" "),
-          name: m,
-          items: x,
+          onChange: i ? (r) => i(r, C) : void 0,
+          className: ["w-100", m].join(" "),
+          name: c,
+          items: w,
           required: d,
-          tooltip: y,
-          rules: p,
+          tooltip: x,
+          rules: h,
           label: n,
-          help: g,
-          disabled: !f,
-          onSearch: h ? (a) => h(a, C) : void 0,
+          help: f,
+          disabled: !p,
+          onSearch: g ? (r) => g(r, C) : void 0,
           allowClear: !0,
           mode: b ? "multiple" : void 0,
           showLoadingInEmptyIndicator: !0,
-          itemBuilder: (a) => /* @__PURE__ */ o(A.Option, { value: a, children: l ? O(l[a]) : a }, a)
+          itemBuilder: (r) => /* @__PURE__ */ o(S.Option, { value: r, children: l ? P(l[r]) : r }, r)
         }
       );
     }
     case "checkbox": {
-      const { onChange: r, switch: i } = e;
+      const { onChange: t, switch: l } = e;
       return /* @__PURE__ */ o(
-        le,
+        ie,
         {
-          ...w,
-          className: u,
-          rules: p,
-          onChange: r ? (l) => r(l, C) : void 0,
+          ...N,
+          className: m,
+          rules: h,
+          onChange: t ? (i) => t(i, C) : void 0,
           label: n,
-          tooltip: y,
-          disabled: !f,
-          name: m,
-          help: g,
-          switch: i
+          tooltip: x,
+          disabled: !p,
+          name: c,
+          help: f,
+          switch: l
         }
       );
     }
     case "color":
       return /* @__PURE__ */ o(
-        pe,
+        ge,
         {
           ...e,
           type: "color",
           required: d,
-          name: m,
+          name: c,
           label: n,
-          rules: p,
-          fieldClassName: u,
-          updatable: f,
-          readonly: k,
-          fieldTooltip: y,
-          fieldHelper: g
+          rules: h,
+          fieldClassName: m,
+          updatable: p,
+          readonly: R,
+          fieldTooltip: x,
+          fieldHelper: f
         }
       );
     default:
-      return /* @__PURE__ */ o(S, { children: `${v} Not Implemented` });
+      return /* @__PURE__ */ o(L, { children: `${v} Not Implemented` });
   }
 }
-function he(F) {
+function fe(F) {
   const {
     items: n = [],
-    loading: m,
+    loading: c,
     searchOnType: v,
     onSearch: d,
     multiple: H,
-    onChange: p,
-    highlightSearch: f,
-    required: k,
-    fieldClassName: u,
+    onChange: h,
+    highlightSearch: p,
+    required: R,
+    fieldClassName: m,
     rules: T,
-    fieldTooltip: y,
-    updatable: g,
-    label: w,
+    fieldTooltip: x,
+    updatable: f,
+    label: N,
     name: e,
     tagRender: C,
-    updatingValue: O,
-    onSet: r,
-    placeholder: i,
-    allowClear: l = !0,
-    selectOptionRender: s,
-    formLayoutProps: h
-  } = F, b = F.form, [N, x] = $(""), a = z(() => K.getRealName(e), [e]), P = z(
-    () => K.getRealName(e, "upsertFieldName"),
+    updatingValue: P,
+    onSet: t,
+    placeholder: l,
+    allowClear: i = !0,
+    selectOptionRender: g,
+    formLayoutProps: b
+  } = F, s = F.form, [w, r] = z(""), y = J(() => Q.getRealName(e), [e]), I = J(
+    () => Q.getRealName(e, "upsertFieldName"),
     [e]
-  ), R = I.useWatch(a, b), [L, B] = $(!0);
+  ), k = O.useWatch(y, s), [A, B] = z(!0);
   j(() => {
-    r && L && R && (r == null || r(R, n, b), B(!1));
-  }, [L, b, n, a, r, R]), j(() => {
-    R && B(!0);
-  }, [R]);
-  const V = J(
-    async (t) => {
-      x(t), v && (d == null || d(t, b, O));
+    t && A && k && (t == null || t(k, n, s), B(!1));
+  }, [A, s, n, y, t, k]), j(() => {
+    k && B(!0);
+  }, [k]);
+  const X = K(
+    async (a) => {
+      r(a), v && (d == null || d(a, s, P));
     },
-    [b, d, v, O]
-  ), X = J(
-    (t) => s ? s(t) : t.value,
-    [s]
+    [s, d, v, P]
+  ), Y = K(
+    (a) => g ? g(a) : a.value,
+    [g]
   );
   return /* @__PURE__ */ o(
-    Q,
+    V,
     {
       ...F,
-      ...h,
+      ...b,
       showLoadingInEmptyIndicator: !0,
       maxTagCount: "responsive",
-      maxTagPlaceholder: (t) => /* @__PURE__ */ W(
-        me,
+      maxTagPlaceholder: (a) => /* @__PURE__ */ M(
+        he,
         {
-          title: /* @__PURE__ */ o(S, { children: t.map((c) => /* @__PURE__ */ W(S, { children: [
-            c.label,
+          title: /* @__PURE__ */ o(L, { children: a.map((u) => /* @__PURE__ */ M(L, { children: [
+            u.label,
             " ",
             /* @__PURE__ */ o("br", {})
           ] })) }),
           children: [
             "+",
-            t == null ? void 0 : t.length
+            a == null ? void 0 : a.length
           ]
         }
       ),
-      placeholder: i,
-      onSelect: (t) => {
-        r == null || r(t == null ? void 0 : t.key, n, b);
+      placeholder: l,
+      onSelect: (a) => {
+        t == null || t(a == null ? void 0 : a.key, n, s);
       },
-      onChange: p ? (t) => {
-        x(""), p(t, b);
+      onChange: h ? (a) => {
+        r(""), h(a, s);
       } : void 0,
       mode: H ? "multiple" : void 0,
-      className: ["w-100", u].join(" "),
-      name: P,
+      className: ["w-100", m].join(" "),
+      name: I,
       items: n,
-      required: k,
-      tooltip: y,
+      required: R,
+      tooltip: x,
       tagRender: C,
       rules: T,
-      disabled: !g,
-      label: w,
-      allowClear: l,
-      onSearch: V,
-      loading: m,
-      filterOption: f ? (t, c) => {
-        var E, U, q;
+      disabled: !f,
+      label: N,
+      allowClear: i,
+      onSearch: X,
+      loading: c,
+      filterOption: p ? (a, u) => {
+        var E, G, U;
         try {
-          const D = t.toLowerCase().split(/\s+/), Y = ((typeof (c == null ? void 0 : c.children) == "string" ? c == null ? void 0 : c.children : (U = (E = c == null ? void 0 : c.children) == null ? void 0 : E.props) == null ? void 0 : U.textToHighlight) ?? "").toLowerCase(), Z = (((q = c == null ? void 0 : c.value) == null ? void 0 : q.toString()) ?? "").toLowerCase();
-          return D.every(
-            (M) => Y.indexOf(M) >= 0 || Z.indexOf(M) >= 0
+          const q = a.toLowerCase().split(/\s+/), Z = ((typeof (u == null ? void 0 : u.children) == "string" ? u == null ? void 0 : u.children : (G = (E = u == null ? void 0 : u.children) == null ? void 0 : E.props) == null ? void 0 : G.textToHighlight) ?? "").toLowerCase(), ee = (((U = u == null ? void 0 : u.value) == null ? void 0 : U.toString()) ?? "").toLowerCase();
+          return q.every(
+            (D) => Z.indexOf(D) >= 0 || ee.indexOf(D) >= 0
           );
         } catch {
           return !0;
         }
       } : void 0,
-      itemBuilder: f ? (t) => {
-        const c = t.value ? String(t.value) : void 0;
+      itemBuilder: p ? (a) => {
+        const u = a.value ? String(a.value) : void 0;
         return /* @__PURE__ */ o(
-          A.Option,
+          S.Option,
           {
-            value: t.key,
-            title: c,
-            disabled: t.disabled,
+            value: a.key,
+            title: u,
+            disabled: a.disabled,
             children: /* @__PURE__ */ o(
-              re,
+              oe,
               {
                 highlightClassName: "highlight-text",
-                searchWords: (N ?? "").split(" "),
+                searchWords: (w ?? "").split(" "),
                 autoEscape: !0,
-                textToHighlight: c ?? ""
+                textToHighlight: u ?? ""
               }
             )
           },
-          t.key
+          a.key
         );
-      } : (t) => /* @__PURE__ */ o(
-        A.Option,
+      } : (a) => /* @__PURE__ */ o(
+        S.Option,
         {
-          value: t.key,
-          title: t.value,
-          disabled: t.disabled,
-          children: X(t)
+          value: a.key,
+          title: a.value,
+          disabled: a.disabled,
+          children: Y(a)
         },
-        t.key
+        a.key
       )
     }
   );
 }
-function pe(F) {
+function ge(F) {
   const {
     formLayoutProps: n,
-    required: m,
+    required: c,
     fieldClassName: v,
     rules: d,
     fieldTooltip: H,
-    updatable: p,
-    label: f,
-    name: k,
-    fieldHelper: u
+    updatable: h,
+    label: p,
+    name: R,
+    fieldHelper: m
   } = F;
   return /* @__PURE__ */ o(
-    I.Item,
+    O.Item,
     {
       ...n,
-      label: f,
-      name: k,
-      required: m,
+      label: p,
+      name: R,
+      required: c,
       rules: d,
       tooltip: H,
-      help: u,
+      help: m,
       getValueFromEvent: (T) => typeof T == "object" ? T.toHexString() : T,
       children: /* @__PURE__ */ o(
-        ee,
+        te,
         {
           disabledAlpha: !0,
           format: "hex",
@@ -506,7 +522,7 @@ function pe(F) {
           showText: !0,
           trigger: "click",
           className: v,
-          disabled: !p,
+          disabled: !h,
           ...F.innerProps
         }
       )
@@ -514,7 +530,7 @@ function pe(F) {
   );
 }
 export {
-  pe as ColorCrudFieldComponent,
-  he as SelectCrudFieldComponent,
-  Se as default
+  ge as ColorCrudFieldComponent,
+  fe as SelectCrudFieldComponent,
+  je as default
 };