@kingteza/crud-component 1.22.2 → 1.23.0

package/dist/crud/CrudField.es.js

@@ -1,5 +1,5 @@
-import { jsx as o, Fragment as L, jsxs as W } from "react/jsx-runtime";
-import { Form as j, Radio as _, Select as A, Tag as G, ColorPicker as ee } from "antd";
+import { jsx as o, Fragment as A, jsxs as W } from "react/jsx-runtime";
+import { Form as L, Radio as _, Select as j, Tag as G, ColorPicker as ee } from "antd";
 import { useEffect as B, 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";
@@ -10,178 +10,203 @@ 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/TextField.es.js";
-import ce from "../common/tooltip/TooltipComponent.es.js";
-import me from "./CrudTextAreaComponent.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 Pe(F) {
+function Ae(F) {
   const {
-    label: l,
+    label: n,
     name: m,
     type: v,
-    required: i,
-    hidden: O,
-    rules: h = [],
-    updatable: p = !0,
+    required: d,
+    hidden: H,
+    rules: p = [],
+    updatable: f = !0,
     readonly: k = !1,
     fieldClassName: u,
     customFormFieldRender: w,
-    fieldTooltip: x,
+    fieldTooltip: y,
     fieldHelper: g,
     formLayoutProps: T,
     ...e
-  } = F, C = j.useFormInstance();
+  } = F, C = L.useFormInstance();
   B(() => {
     if (v === "select") {
       const {
-        items: t = [],
-        onSearch: d,
-        searchOnType: n
+        items: r = [],
+        onSearch: i,
+        searchOnType: l
       } = e;
-      !(t != null && t.length) && !n && (d == null || d(void 0, C, e == null ? void 0 : e.updatingValue));
+      !(r != null && r.length) && !l && (i == null || i(void 0, C, e == null ? void 0 : e.updatingValue));
     }
   }, [C, e, v, e == null ? void 0 : e.updatingValue]);
-  const { t: P } = te();
-  if (k || O) return /* @__PURE__ */ o(L, {});
+  const { t: O } = te();
+  if (k || H) return /* @__PURE__ */ o(A, {});
   if (w)
     return w(C, F);
   switch (v) {
     case "text":
     case "email":
     case "password": {
-      const { onChange: t, placeholder: d, addonAfter: n, addonBefore: c } = e;
+      const { onChange: r, placeholder: i, addonAfter: l, addonBefore: s } = e;
+      return /* @__PURE__ */ o(
+        ce,
+        {
+          ...T,
+          placeholder: i,
+          disabled: !f,
+          rules: p,
+          required: d,
+          onChange: r ? (h) => r(h, C) : void 0,
+          type: v,
+          name: m,
+          tooltip: y,
+          label: n,
+          className: u,
+          autoComplete: "new-password",
+          addonAfter: l,
+          addonBefore: s,
+          help: g
+        }
+      );
+    }
+    case "phone": {
+      const { onChange: r, placeholder: i, addonAfter: l, addonBefore: s } = e;
       return /* @__PURE__ */ o(
         se,
         {
+          ...e,
           ...T,
-          placeholder: d,
-          disabled: !p,
-          rules: h,
-          required: i,
-          onChange: t ? (b) => t(b, C) : void 0,
+          placeholder: i,
+          disabled: !f,
+          rules: p,
+          required: d,
+          onChange: r ? (h) => r(h, C) : void 0,
           type: v,
           name: m,
-          tooltip: x,
-          label: l,
+          tooltip: y,
+          label: n,
           className: u,
           autoComplete: "new-password",
-          addonAfter: n,
-          addonBefore: c,
+          addonAfter: l,
+          addonBefore: s,
           help: g
         }
       );
     }
     case "number": {
       const {
-        onChange: t,
-        placeholder: d,
-        allowMinus: n,
-        min: c,
-        max: b,
-        addonAfter: f,
-        addonBefore: y
+        onChange: r,
+        placeholder: i,
+        allowMinus: l,
+        min: s,
+        max: h,
+        addonAfter: b,
+        addonBefore: N
       } = e;
       return /* @__PURE__ */ o(
         de,
         {
           ...T,
-          placeholder: d,
-          disabled: !p,
+          placeholder: i,
+          disabled: !f,
           moneyField: !!e.formatted,
           type: v,
-          onChange: t ? (N) => t(N, C) : void 0,
-          rules: h,
+          onChange: r ? (x) => r(x, C) : void 0,
+          rules: p,
           autoComplete: "false",
-          required: i,
-          tooltip: x,
+          required: d,
+          tooltip: y,
           className: u,
-          min: n ? null : c,
-          max: b,
-          addonAfter: f,
-          addonBefore: y,
+          min: l ? null : s,
+          max: h,
+          addonAfter: b,
+          addonBefore: N,
           name: m,
-          label: l,
+          label: n,
           help: g
         }
       );
     }
     case "date": {
       const {
-        range: t,
-        disableToday: d,
-        disabledFutureDays: n,
-        disabledPastDays: c,
-        onChange: b,
-        placeholder: f,
-        format: y
+        range: r,
+        disableToday: i,
+        disabledFutureDays: l,
+        disabledPastDays: s,
+        onChange: h,
+        placeholder: b,
+        format: N
       } = e;
       return /* @__PURE__ */ o(
         ne,
         {
           ...T,
-          placeholder: f,
-          required: i,
-          disabled: !p,
+          placeholder: b,
+          required: d,
+          disabled: !f,
           type: v,
-          format: y,
-          tooltip: x,
-          range: t,
+          format: N,
+          tooltip: y,
+          range: r,
           name: m,
-          label: l,
-          onChange: b ? (N) => b(N, C) : void 0,
+          label: n,
+          onChange: h ? (x) => h(x, C) : void 0,
           className: u,
-          disableToday: d,
-          disabledFutureDays: n,
-          disabledPastDays: c,
+          disableToday: i,
+          disabledFutureDays: l,
+          disabledPastDays: s,
           help: g
         }
       );
     }
     case "time": {
       const {
-        range: t = !1,
-        disableCurrent: d,
-        disabledFuture: n,
-        disabledPast: c,
-        onChange: b,
-        use12Hours: f,
-        format: y,
-        placeholder: N
+        range: r = !1,
+        disableCurrent: i,
+        disabledFuture: l,
+        disabledPast: s,
+        onChange: h,
+        use12Hours: b,
+        format: N,
+        placeholder: x
       } = e;
       return /* @__PURE__ */ o(
         ie,
         {
           ...T,
-          placeholder: N,
-          required: i,
-          format: y,
-          disabled: !p,
+          placeholder: x,
+          required: d,
+          format: N,
+          disabled: !f,
           type: v,
-          tooltip: x,
-          range: t,
-          use12Hours: f,
+          tooltip: y,
+          range: r,
+          use12Hours: b,
           name: m,
-          label: l,
-          onChange: b ? (a) => b(a, C) : void 0,
+          label: n,
+          onChange: h ? (a) => h(a, C) : void 0,
           className: u,
-          disableCurrent: d,
-          disabledFuture: n,
-          disabledPast: c,
+          disableCurrent: i,
+          disabledFuture: l,
+          disabledPast: s,
           help: g
         }
       );
     }
     case "textarea":
-      return /* @__PURE__ */ o(me, { ...F });
+      return /* @__PURE__ */ o(ue, { ...F });
     case "image":
       return /* @__PURE__ */ o(
         ae,
         {
           ...e,
-          required: i,
+          required: d,
           name: m,
-          label: l,
-          rules: h,
+          label: n,
+          rules: p,
           fieldHelper: g,
           fieldClassName: u,
           onRemoved: e.onRemoved,
@@ -194,10 +219,10 @@ function Pe(F) {
         oe,
         {
           ...e,
-          required: i,
+          required: d,
           name: m,
-          label: l,
-          rules: h,
+          label: n,
+          rules: p,
           fieldHelper: g,
           fieldClassName: u,
           onRemoved: e.onRemoved,
@@ -207,53 +232,53 @@ function Pe(F) {
       );
     case "select":
       return /* @__PURE__ */ o(
-        ue,
+        he,
         {
           ...e,
-          required: i,
+          required: d,
           name: m,
-          label: l,
-          rules: h,
+          label: n,
+          rules: p,
           fieldClassName: u,
           form: C,
           help: g,
-          updatable: p,
+          updatable: f,
           readonly: k,
-          fieldTooltip: x,
+          fieldTooltip: y,
           fieldHelper: g
         }
       );
     case "enum": {
       const {
-        enum: t,
-        radio: d = !1,
-        translation: n,
-        onChange: c,
-        onSearch: b,
-        multiple: f,
-        tagRender: y
-      } = e, N = Array.isArray(t) ? t : Object.keys(t);
-      return d ? /* @__PURE__ */ o(
-        j.Item,
+        enum: r,
+        radio: i = !1,
+        translation: l,
+        onChange: s,
+        onSearch: h,
+        multiple: b,
+        tagRender: N
+      } = e, x = Array.isArray(r) ? r : Object.keys(r);
+      return i ? /* @__PURE__ */ o(
+        L.Item,
         {
           ...e,
           ...T,
           name: m,
-          required: i,
-          tooltip: x,
-          rules: h,
-          label: l,
+          required: d,
+          tooltip: y,
+          rules: p,
+          label: n,
           className: ["w-100", u].join(" "),
           help: g,
           children: /* @__PURE__ */ o(
             _.Group,
             {
               ...e,
-              onChange: c ? (a) => {
-                var H;
-                return c((H = a == null ? void 0 : a.target) == null ? void 0 : H.value, C);
+              onChange: s ? (a) => {
+                var P;
+                return s((P = a == null ? void 0 : a.target) == null ? void 0 : P.value, C);
               } : void 0,
-              children: N.map((a) => /* @__PURE__ */ o(_, { disabled: !p, value: a, children: n ? P(n[a]) : a }, a))
+              children: x.map((a) => /* @__PURE__ */ o(_, { disabled: !f, value: a, children: l ? O(l[a]) : a }, a))
             }
           )
         }
@@ -262,151 +287,151 @@ function Pe(F) {
         {
           ...e,
           ...T,
-          tagRender: typeof y == "function" ? y : y ? (a) => {
-            const { value: H, label: R } = a, S = y[H];
+          tagRender: typeof N == "function" ? N : N ? (a) => {
+            const { value: P, label: R } = a, S = N[P];
             return S ? /* @__PURE__ */ o(G, { color: S.color, children: R }) : /* @__PURE__ */ o(G, { children: R });
           } : void 0,
-          onChange: c ? (a) => c(a, C) : void 0,
+          onChange: s ? (a) => s(a, C) : void 0,
           className: ["w-100", u].join(" "),
           name: m,
-          items: N,
-          required: i,
-          tooltip: x,
-          rules: h,
-          label: l,
+          items: x,
+          required: d,
+          tooltip: y,
+          rules: p,
+          label: n,
           help: g,
-          disabled: !p,
-          onSearch: b ? (a) => b(a, C) : void 0,
+          disabled: !f,
+          onSearch: h ? (a) => h(a, C) : void 0,
           allowClear: !0,
-          mode: f ? "multiple" : void 0,
-          itemBuilder: (a) => /* @__PURE__ */ o(A.Option, { value: a, children: n ? P(n[a]) : a }, a)
+          mode: b ? "multiple" : void 0,
+          itemBuilder: (a) => /* @__PURE__ */ o(j.Option, { value: a, children: l ? O(l[a]) : a }, a)
         }
       );
     }
     case "checkbox": {
-      const { onChange: t, switch: d } = e;
+      const { onChange: r, switch: i } = e;
       return /* @__PURE__ */ o(
         le,
         {
           ...T,
           className: u,
-          rules: h,
-          onChange: t ? (n) => t(n, C) : void 0,
-          label: l,
-          tooltip: x,
-          disabled: !p,
+          rules: p,
+          onChange: r ? (l) => r(l, C) : void 0,
+          label: n,
+          tooltip: y,
+          disabled: !f,
           name: m,
           help: g,
-          switch: d
+          switch: i
         }
       );
     }
     case "color":
       return /* @__PURE__ */ o(
-        fe,
+        pe,
         {
           ...e,
           type: "color",
-          required: i,
+          required: d,
           name: m,
-          label: l,
-          rules: h,
+          label: n,
+          rules: p,
           fieldClassName: u,
-          updatable: p,
+          updatable: f,
           readonly: k,
-          fieldTooltip: x,
+          fieldTooltip: y,
           fieldHelper: g
         }
       );
     default:
-      return /* @__PURE__ */ o(L, { children: `${v} Not Implemented` });
+      return /* @__PURE__ */ o(A, { children: `${v} Not Implemented` });
   }
 }
-function ue(F) {
+function he(F) {
   const {
-    items: l = [],
+    items: n = [],
     loading: m,
     searchOnType: v,
-    onSearch: i,
-    multiple: O,
-    onChange: h,
-    highlightSearch: p,
+    onSearch: d,
+    multiple: H,
+    onChange: p,
+    highlightSearch: f,
     required: k,
     fieldClassName: u,
     rules: w,
-    fieldTooltip: x,
+    fieldTooltip: y,
     updatable: g,
     label: T,
     name: e,
     tagRender: C,
-    updatingValue: P,
-    onSet: t,
-    placeholder: d,
-    allowClear: n = !0,
-    selectOptionRender: c,
-    formLayoutProps: b
-  } = F, f = F.form, [y, N] = $(""), a = z(() => K.getRealName(e), [e]), H = z(
+    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"),
     [e]
-  ), R = j.useWatch(a, f), [S, I] = $(!0);
+  ), R = L.useWatch(a, b), [S, I] = $(!0);
   B(() => {
-    t && S && R && (t == null || t(R, l, f), I(!1));
-  }, [S, f, l, a, t, R]), B(() => {
+    r && S && R && (r == null || r(R, n, b), I(!1));
+  }, [S, b, n, a, r, R]), B(() => {
     R && I(!0);
   }, [R]);
   const V = J(
-    async (r) => {
-      N(r), v && (i == null || i(r, f, P));
+    async (t) => {
+      x(t), v && (d == null || d(t, b, O));
     },
-    [f, i, v, P]
+    [b, d, v, O]
   ), X = J(
-    (r) => c ? c(r) : r.value,
-    [c]
+    (t) => s ? s(t) : t.value,
+    [s]
   );
   return /* @__PURE__ */ o(
     Q,
     {
       ...F,
-      ...b,
+      ...h,
       maxTagCount: "responsive",
-      maxTagPlaceholder: (r) => /* @__PURE__ */ W(
-        ce,
+      maxTagPlaceholder: (t) => /* @__PURE__ */ W(
+        me,
         {
-          title: /* @__PURE__ */ o(L, { children: r.map((s) => /* @__PURE__ */ W(L, { children: [
-            s.label,
+          title: /* @__PURE__ */ o(A, { children: t.map((c) => /* @__PURE__ */ W(A, { children: [
+            c.label,
             " ",
             /* @__PURE__ */ o("br", {})
           ] })) }),
           children: [
             "+",
-            r == null ? void 0 : r.length
+            t == null ? void 0 : t.length
           ]
         }
       ),
-      placeholder: d,
-      onSelect: (r) => {
-        t == null || t(r == null ? void 0 : r.key, l, f);
+      placeholder: i,
+      onSelect: (t) => {
+        r == null || r(t == null ? void 0 : t.key, n, b);
       },
-      onChange: h ? (r) => {
-        N(""), h(r, f);
+      onChange: p ? (t) => {
+        x(""), p(t, b);
       } : void 0,
-      mode: O ? "multiple" : void 0,
+      mode: H ? "multiple" : void 0,
       className: ["w-100", u].join(" "),
-      name: H,
-      items: l,
+      name: P,
+      items: n,
       required: k,
-      tooltip: x,
+      tooltip: y,
       tagRender: C,
       rules: w,
       disabled: !g,
       label: T,
-      allowClear: n,
+      allowClear: l,
       onSearch: V,
       loading: m,
-      filterOption: p ? (r, s) => {
+      filterOption: f ? (t, c) => {
         var U, q, D;
         try {
-          const E = r.toLowerCase().split(/\s+/), Y = ((typeof (s == null ? void 0 : s.children) == "string" ? s == null ? void 0 : s.children : (q = (U = s == null ? void 0 : s.children) == null ? void 0 : U.props) == null ? void 0 : q.textToHighlight) ?? "").toLowerCase(), Z = (((D = s == null ? void 0 : s.value) == null ? void 0 : D.toString()) ?? "").toLowerCase();
+          const E = t.toLowerCase().split(/\s+/), Y = ((typeof (c == null ? void 0 : c.children) == "string" ? c == null ? void 0 : c.children : (q = (U = c == null ? void 0 : c.children) == null ? void 0 : U.props) == null ? void 0 : q.textToHighlight) ?? "").toLowerCase(), Z = (((D = c == null ? void 0 : c.value) == null ? void 0 : D.toString()) ?? "").toLowerCase();
           return E.every(
             (M) => Y.indexOf(M) >= 0 || Z.indexOf(M) >= 0
           );
@@ -414,60 +439,60 @@ function ue(F) {
           return !0;
         }
       } : void 0,
-      itemBuilder: p ? (r) => {
-        const s = r.value ? String(r.value) : void 0;
+      itemBuilder: f ? (t) => {
+        const c = t.value ? String(t.value) : void 0;
         return /* @__PURE__ */ o(
-          A.Option,
+          j.Option,
           {
-            value: r.key,
-            title: s,
-            disabled: r.disabled,
+            value: t.key,
+            title: c,
+            disabled: t.disabled,
             children: /* @__PURE__ */ o(
               re,
               {
                 highlightClassName: "highlight-text",
-                searchWords: (y ?? "").split(" "),
+                searchWords: (N ?? "").split(" "),
                 autoEscape: !0,
-                textToHighlight: s ?? ""
+                textToHighlight: c ?? ""
               }
             )
           },
-          r.key
+          t.key
         );
-      } : (r) => /* @__PURE__ */ o(
-        A.Option,
+      } : (t) => /* @__PURE__ */ o(
+        j.Option,
         {
-          value: r.key,
-          title: r.value,
-          disabled: r.disabled,
-          children: X(r)
+          value: t.key,
+          title: t.value,
+          disabled: t.disabled,
+          children: X(t)
         },
-        r.key
+        t.key
       )
     }
   );
 }
-function fe(F) {
+function pe(F) {
   const {
-    formLayoutProps: l,
+    formLayoutProps: n,
     required: m,
     fieldClassName: v,
-    rules: i,
-    fieldTooltip: O,
-    updatable: h,
-    label: p,
+    rules: d,
+    fieldTooltip: H,
+    updatable: p,
+    label: f,
     name: k,
     fieldHelper: u
   } = F;
   return /* @__PURE__ */ o(
-    j.Item,
+    L.Item,
     {
-      ...l,
-      label: p,
+      ...n,
+      label: f,
       name: k,
       required: m,
-      rules: i,
-      tooltip: O,
+      rules: d,
+      tooltip: H,
       help: u,
       getValueFromEvent: (w) => typeof w == "object" ? w.toHexString() : w,
       children: /* @__PURE__ */ o(
@@ -479,7 +504,7 @@ function fe(F) {
           showText: !0,
           trigger: "click",
           className: v,
-          disabled: !h,
+          disabled: !p,
           ...F.innerProps
         }
       )
@@ -487,7 +512,7 @@ function fe(F) {
   );
 }
 export {
-  fe as ColorCrudFieldComponent,
-  ue as SelectCrudFieldComponent,
-  Pe as default
+  pe as ColorCrudFieldComponent,
+  he as SelectCrudFieldComponent,
+  Ae as default
 };