@pisell/materials 6.0.10 → 6.0.12

package/lib/components/dataSourceComponents/dataSourceForm/utils.js

@@ -36,6 +36,7 @@ __export(utils_exports, {
   isValidDomain: () => isValidDomain,
   renderValueWithMap: () => renderValueWithMap,
   toArr: () => toArr,
+  transformFormObjToArrayWithUntouched: () => transformFormObjToArrayWithUntouched,
   withDataSource: () => withDataSource,
   withFormItem: () => withFormItem,
   withMode: () => withMode,
@@ -125,6 +126,7 @@ var withFormItem = (WrappedComponent, overlayProps) => {
     const field = fields == null ? void 0 : fields.find((item) => item.name === propsName);
     const label = propsLabel || ((_a = field == null ? void 0 : field.uiSchema) == null ? void 0 : _a.title) || propsName;
     const effectiveMode = propsRenderMode || globalRenderMode;
+    const name = (0, import_utils.isString)(propsName) && propsName.includes(".") ? [propsName] : propsName;
     const renderComponent = (0, import_react.useMemo)(() => {
       var _a2;
       return /* @__PURE__ */ import_react.default.createElement(
@@ -138,6 +140,7 @@ var withFormItem = (WrappedComponent, overlayProps) => {
             ...innerStyle || {},
             ...((_a2 = overlayProps == null ? void 0 : overlayProps.innerProps) == null ? void 0 : _a2.style) || {}
           },
+          fieldKey: name,
           isVerification: typeobj == null ? void 0 : typeobj.enabled,
           size
         }
@@ -149,11 +152,11 @@ var withFormItem = (WrappedComponent, overlayProps) => {
       overlayProps == null ? void 0 : overlayProps.innerProps,
       typeobj == null ? void 0 : typeobj.enabled,
       size,
-      innerStyle
+      innerStyle,
+      name
     ]);
     const isDesignMode = __designMode === "design";
     const isHidden = effectiveMode === "hidden";
-    const name = (0, import_utils.isString)(propsName) && propsName.includes(".") ? [propsName] : propsName;
     const concatName = name !== void 0 ? [...prefixPath, ...toArr(name)] : void 0;
     const rules = [];
     if (requiredobj && requiredobj.required) {
@@ -163,44 +166,131 @@ var withFormItem = (WrappedComponent, overlayProps) => {
       });
     }
     if (typeobj && typeobj.enabled) {
-      if (typeobj.type === "email") {
-        rules.push({
-          ...typeobj,
-          message: typeobj.message || (0, import_locales.getText)("pisell-data-source-form-email-message")
-        });
-      }
-      if (typeobj.type === "domain" && typeobj.enabled) {
-        rules.push({
-          validator: (_, value) => isValidDomain(value) ? Promise.resolve() : Promise.reject(
-            new Error(
-              typeobj.message || (0, import_locales.getText)("pisell-data-source-form-domain-message")
-            )
-          )
-        });
-      }
-      if (typeobj.type === "url" && typeobj.enabled) {
-        rules.push({
-          ...typeobj,
-          message: typeobj.message || (0, import_locales.getText)("pisell-data-source-form-url-message")
-        });
-      }
-      if (typeobj.type === "phone" && typeobj.enabled) {
-        rules.push({
-          validator: (_, value) => {
-            var _a2;
-            return !otherProps.disabled || (0, import_libphonenumber_js.isValidPhoneNumber)(value) && ((_a2 = (0, import_libphonenumber_js.parsePhoneNumberFromString)(value)) == null ? void 0 : _a2.isValid()) ? Promise.resolve() : Promise.reject(
-              new Error(
-                typeobj.message || (0, import_locales.getText)("pisell-data-source-form-phone-message")
-              )
-            );
-          }
-        });
-      }
-      if (typeobj.type === "pattern" && typeobj.enabled) {
-        rules.push({
-          ...typeobj,
-          message: typeobj.message
-        });
+      switch (typeobj.type) {
+        case "email":
+          rules.push({
+            ...typeobj,
+            message: typeobj.message || (0, import_locales.getText)("pisell-data-source-form-email-message")
+          });
+          break;
+        case "pattern":
+          rules.push({
+            ...typeobj,
+            pattern: new RegExp(typeobj.pattern),
+            message: typeobj.message || (0, import_locales.getText)("pisell-data-source-form-pattern-message")
+          });
+          break;
+        case "phone":
+          rules.push({
+            ...typeobj,
+            validator: (_, value) => {
+              if (!(value == null ? void 0 : value.trim())) {
+                return Promise.resolve();
+              }
+              try {
+                const cleanedNumber2 = value.replace(/\s|\(|\)/g, "");
+                const parsedNumber = (0, import_libphonenumber_js.parsePhoneNumberFromString)(cleanedNumber2);
+                if (!(parsedNumber == null ? void 0 : parsedNumber.isValid())) {
+                  return Promise.reject(
+                    new Error(
+                      typeobj.message || (0, import_locales.getText)("pisell-data-source-form-phone-message")
+                    )
+                  );
+                }
+                return Promise.resolve();
+              } catch (error) {
+                return Promise.reject(
+                  new Error(
+                    typeobj.message || (0, import_locales.getText)("pisell-data-source-form-phone-message")
+                  )
+                );
+              }
+            }
+          });
+          break;
+        case "mobile":
+          rules.push({
+            ...typeobj,
+            validator: (_, value) => {
+              if (!(value == null ? void 0 : value.trim())) {
+                return Promise.resolve();
+              }
+              try {
+                const cleanedNumber2 = value.replace(/\s|\(|\)/g, "");
+                if (cleanedNumber2.length > 15) {
+                  return Promise.reject(
+                    new Error(
+                      typeobj.message || (0, import_locales.getText)("pisell-data-source-form-mobile-message")
+                    )
+                  );
+                }
+                if (cleanedNumber2.startsWith("+61")) {
+                  const numberWithoutPrefix = cleanedNumber2.slice(3);
+                  if (!/^(?:04\d{8}|4\d{8})$/.test(numberWithoutPrefix)) {
+                    return Promise.reject(
+                      new Error(
+                        typeobj.message || (0, import_locales.getText)("pisell-data-source-form-mobile-message")
+                      )
+                    );
+                  }
+                } else if (cleanedNumber2.startsWith("+86")) {
+                  const numberWithoutPrefix = cleanedNumber2.slice(3);
+                  if (!/^1[3-9]\d{9}$/.test(numberWithoutPrefix)) {
+                    return Promise.reject(
+                      new Error(
+                        typeobj.message || (0, import_locales.getText)("pisell-data-source-form-mobile-message")
+                      )
+                    );
+                  }
+                }
+                return Promise.resolve();
+              } catch (error) {
+                if (cleanedNumber.length > 15) {
+                  return Promise.reject(
+                    new Error(
+                      typeobj.message || (0, import_locales.getText)("pisell-data-source-form-mobile-message")
+                    )
+                  );
+                }
+                return Promise.resolve();
+              }
+            }
+          });
+          break;
+        case "subdomain":
+          rules.push({
+            ...typeobj,
+            validator: (_, value) => {
+              if (!value)
+                return Promise.resolve();
+              const subdomain = value.split(".")[0];
+              if (!subdomain) {
+                return Promise.resolve();
+              }
+              if (!/^[a-z0-9-]+$/.test(subdomain)) {
+                return Promise.reject(
+                  new Error((0, import_locales.getText)("subdomain-error-pattern"))
+                );
+              }
+              if (/^\d+$/.test(subdomain)) {
+                return Promise.reject(
+                  new Error((0, import_locales.getText)("subdomain-error-numbers-only"))
+                );
+              }
+              if (subdomain.startsWith("-") || subdomain.endsWith("-")) {
+                return Promise.reject(
+                  new Error((0, import_locales.getText)("subdomain-error-hyphen-ends"))
+                );
+              }
+              if (subdomain.includes("--")) {
+                return Promise.reject(
+                  new Error((0, import_locales.getText)("subdomain-error-consecutive-hyphens"))
+                );
+              }
+              return Promise.resolve();
+            }
+          });
+          break;
       }
     }
     if (maxLengthobj && maxLengthobj.enabled) {
@@ -298,7 +388,7 @@ var withFormItem = (WrappedComponent, overlayProps) => {
         rules,
         normalize,
         getValueProps,
-        validateTrigger,
+        validateTrigger: validateTrigger || ["onChange", "onBlur"],
         labelCol,
         initialValue: otherProps == null ? void 0 : otherProps.defaultValue,
         className: (0, import_classnames.default)("pisell-data-source-form-item", {
@@ -394,6 +484,12 @@ var filterSystemFields = (params) => {
     return acc;
   }, {});
 };
+var transformFormObjToArrayWithUntouched = (obj) => {
+  return Object.keys(obj).reduce((acc, key) => {
+    acc.push({ name: key, value: obj[key], touched: false });
+    return acc;
+  }, []);
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   filterSystemFields,
@@ -403,6 +499,7 @@ var filterSystemFields = (params) => {
   isValidDomain,
   renderValueWithMap,
   toArr,
+  transformFormObjToArrayWithUntouched,
   withDataSource,
   withFormItem,
   withMode,

package/lib/components/dataSourceComponents/dataSourceMenu/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/lib/components/dataSourceComponents/dataSourceMenu/index.js

@@ -0,0 +1,45 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/dataSourceComponents/dataSourceMenu/index.tsx
+var dataSourceMenu_exports = {};
+__export(dataSourceMenu_exports, {
+  default: () => dataSourceMenu_default
+});
+module.exports = __toCommonJS(dataSourceMenu_exports);
+var import_react = __toESM(require("react"));
+var import_pisellMenu = __toESM(require("../../pisellMenu"));
+var import_useVariables = __toESM(require("../hooks/useVariables"));
+var DataSourceMenu = (0, import_react.forwardRef)(
+  (props, ref) => {
+    const { dataSource } = props;
+    const { parseVariable } = (0, import_useVariables.default)();
+    return /* @__PURE__ */ import_react.default.createElement(import_pisellMenu.default, { ...props, dataSource: parseVariable == null ? void 0 : parseVariable(dataSource), ref });
+  }
+);
+var dataSourceMenu_default = DataSourceMenu;

package/lib/components/dataSourceComponents/dataSourceTable/BaseTable.js

@@ -58,6 +58,10 @@ var BaseTable = (props) => {
   const { list } = (0, import_useDataSource.default)();
   const { data } = list;
   const { dataSourceKey, dataSourceKeyRef } = (0, import_useDataSourceKey.default)();
+  const beforeClose = (0, import_react.useRef)();
+  const setBeforeClose = (0, import_react.useCallback)((fn) => {
+    beforeClose.current = fn;
+  }, []);
   const {
     drawerVisible,
     setDrawerVisible,
@@ -94,7 +98,13 @@ var BaseTable = (props) => {
       currentDataSource: dataSource
     });
   }, [dataSource]);
-  const handleCloseDrawer = () => {
+  const handleCloseDrawer = async () => {
+    if (beforeClose.current) {
+      const canClose = await beforeClose.current();
+      if (!canClose) {
+        return;
+      }
+    }
     closeDrawer();
     registerValueVariable == null ? void 0 : registerValueVariable(componentId, {
       currentRecord: null
@@ -124,7 +134,9 @@ var BaseTable = (props) => {
     {
       visible: drawerVisible,
       setVisible: setDrawerVisible,
-      refreshTableData: refreshData
+      refreshTableData: refreshData,
+      setBeforeClose,
+      beforeClose: beforeClose.current
     },
     /* @__PURE__ */ import_react.default.createElement(
       Container,

package/lib/components/dataSourceComponents/dataSourceTable/hooks/useTableProps.d.ts

@@ -17,7 +17,7 @@ interface UseTablePropsProps {
  * @returns
  */
 declare const useTableProps: (props: UseTablePropsProps) => {
-    title: number | boolean | Iterable<React.ReactNode> | React.JSX.Element | (() => React.ReactNode) | null | undefined;
+    title: number | boolean | React.JSX.Element | Iterable<React.ReactNode> | (() => React.ReactNode) | null | undefined;
     pagination: {
         total: number;
         current: number;
@@ -26,7 +26,7 @@ declare const useTableProps: (props: UseTablePropsProps) => {
         showSizeChanger: boolean;
     };
     columns: import("./useColumns").Column[];
-    subTitle: number | boolean | Iterable<React.ReactNode> | React.JSX.Element | (() => React.ReactNode) | null | undefined;
+    subTitle: number | boolean | React.JSX.Element | Iterable<React.ReactNode> | (() => React.ReactNode) | null | undefined;
     buttons: any[] | null;
     filter: React.JSX.Element | null;
     onRow: (record: any) => any;
@@ -65,7 +65,7 @@ declare const useTableProps: (props: UseTablePropsProps) => {
         useCustomAction: boolean;
         actionType: string;
         openMode: "modal" | "drawer";
-        openContentSize: "small" | "large" | "middle";
+        openContentSize: "small" | "middle" | "large";
         openTitle: string;
         key: string;
     } | undefined;

package/lib/components/dataSourceComponents/fields/Input/index.d.ts

@@ -5,6 +5,8 @@ import TextArea from '../Input.TextArea';
 import Url from '../Input.Url';
 import Email from '../Input.Email';
 import Phone from '../Input.Phone';
+import Mobile from '../Input.Mobile';
+import Subdomain from '../Input.Subdomain';
 import { InputProps } from './type';
 declare type InputComponent = React.FC<InputProps> & {
     JSON: typeof JSON;
@@ -13,6 +15,8 @@ declare type InputComponent = React.FC<InputProps> & {
     URL: typeof Url;
     Email: typeof Email;
     Phone: typeof Phone;
+    Mobile: typeof Mobile;
+    Subdomain: typeof Subdomain;
 };
 declare const Input: InputComponent;
 export default Input;

package/lib/components/dataSourceComponents/fields/Input/index.js

@@ -38,6 +38,8 @@ var import_Input3 = __toESM(require("../Input.TextArea"));
 var import_Input4 = __toESM(require("../Input.Url"));
 var import_Input5 = __toESM(require("../Input.Email"));
 var import_Input6 = __toESM(require("../Input.Phone"));
+var import_Input7 = __toESM(require("../Input.Mobile"));
+var import_Input8 = __toESM(require("../Input.Subdomain"));
 var import_WithMode = __toESM(require("./WithMode"));
 var import_utils = require("../../dataSourceForm/utils");
 var Input = (0, import_utils.withFormItem)(import_WithMode.default);
@@ -47,4 +49,6 @@ Input.TextArea = import_Input3.default;
 Input.URL = import_Input4.default;
 Input.Email = import_Input5.default;
 Input.Phone = import_Input6.default;
+Input.Mobile = import_Input7.default;
+Input.Subdomain = import_Input8.default;
 var Input_default = Input;

package/lib/components/dataSourceComponents/fields/Input.Mobile/ReadPretty.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { PhoneInputProps } from './WithMode';
+import './ReadPretty.less';
+declare const ReadPretty: React.FC<PhoneInputProps>;
+export default ReadPretty;

package/lib/components/dataSourceComponents/fields/Input.Mobile/ReadPretty.js

@@ -0,0 +1,58 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/dataSourceComponents/fields/Input.Mobile/ReadPretty.tsx
+var ReadPretty_exports = {};
+__export(ReadPretty_exports, {
+  default: () => ReadPretty_default
+});
+module.exports = __toCommonJS(ReadPretty_exports);
+var import_react = __toESM(require("react"));
+var import_libphonenumber_js = require("libphonenumber-js");
+var import_classnames = __toESM(require("classnames"));
+var import_ReadPretty = require("./ReadPretty.less");
+var ReadPretty = ({
+  value,
+  renderMode
+}) => {
+  if (!value)
+    return null;
+  const className = (0, import_classnames.default)("pisell-phone-read-pretty", {
+    "pisell-phone-read-pretty-table-view": renderMode === "tableView"
+  });
+  try {
+    const phoneNumber = (0, import_libphonenumber_js.parsePhoneNumberFromString)(value);
+    if (!phoneNumber)
+      return /* @__PURE__ */ import_react.default.createElement("span", { className }, value);
+    const formattedValue = `(${phoneNumber.formatInternational().split(" ")[0]}) ${phoneNumber.formatNational()}`;
+    return /* @__PURE__ */ import_react.default.createElement("span", { className }, formattedValue);
+  } catch (error) {
+    return /* @__PURE__ */ import_react.default.createElement("span", { className }, value);
+  }
+};
+var ReadPretty_default = ReadPretty;

package/lib/components/dataSourceComponents/fields/Input.Mobile/ReadPretty.less

@@ -0,0 +1,11 @@
+.pisell-phone-read-pretty {
+  color: var(--Gray-900, #101828);
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px; /* 150% */
+}
+
+.pisell-phone-read-pretty-table-view {
+  font-size: 14px;
+  font-weight: 400;
+}

package/lib/components/dataSourceComponents/fields/Input.Mobile/WithMode.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { InputProps } from 'antd';
+import { ModeType } from "../../dataSourceForm/type";
+export interface PhoneInputProps extends Omit<InputProps, 'value' | 'onChange'> {
+    renderMode: ModeType;
+    value?: string;
+    onChange?: (value: string) => void;
+}
+declare const MobileNumberInputWithMode: React.FC<PhoneInputProps & import("../../dataSourceForm/utils").WithModeProps>;
+export default MobileNumberInputWithMode;

package/lib/components/dataSourceComponents/fields/Input.Mobile/WithMode.js

@@ -0,0 +1,171 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/dataSourceComponents/fields/Input.Mobile/WithMode.tsx
+var WithMode_exports = {};
+__export(WithMode_exports, {
+  default: () => WithMode_default
+});
+module.exports = __toCommonJS(WithMode_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_utils = require("@pisell/utils");
+var import_select = __toESM(require("../../../select"));
+var import_serve = require("./serve");
+var import_ReadPretty = __toESM(require("./ReadPretty"));
+var import_utils2 = require("../../dataSourceForm/utils");
+var import_useTranslationOriginal = __toESM(require("../../../../hooks/useTranslationOriginal"));
+var { Option } = import_select.default;
+var MobileNumberInput = ({ value: propsValue, onChange, disabled, ...props }) => {
+  const { data: countries = [] } = (0, import_serve.useCountries)();
+  const translationOriginal = (0, import_useTranslationOriginal.default)();
+  const value = (0, import_react.useMemo)(() => {
+    if ((0, import_utils.isNumber)(propsValue)) {
+      return `${propsValue}`;
+    }
+    return propsValue;
+  }, [propsValue]);
+  const parseExternalValue = (val) => {
+    if (!val)
+      return { countryCode: "AU", phoneNumber: "" };
+    const matchedPrefix = countries.find(
+      (country) => val.startsWith(country.prefix)
+    );
+    if (matchedPrefix) {
+      return {
+        countryCode: matchedPrefix.code,
+        phoneNumber: val.slice(matchedPrefix.prefix.length)
+      };
+    }
+    return {
+      countryCode: "AU",
+      phoneNumber: val.replace(/\D/g, "")
+    };
+  };
+  const [countryCode, setCountryCode] = (0, import_react.useState)(
+    () => parseExternalValue(value).countryCode
+  );
+  const [phoneNumber, setPhoneNumber] = (0, import_react.useState)(
+    () => parseExternalValue(value).phoneNumber
+  );
+  (0, import_react.useEffect)(() => {
+    if (value) {
+      const { countryCode: newCountryCode, phoneNumber: newPhoneNumber } = parseExternalValue(value);
+      setCountryCode(newCountryCode);
+      setPhoneNumber(newPhoneNumber);
+    } else {
+      setPhoneNumber("");
+    }
+  }, [value, countries]);
+  const handleCountryChange = (value2) => {
+    setCountryCode(value2);
+    const selectedCountry = countries.find(
+      (c) => c.code === value2
+    );
+    const prefix = (selectedCountry == null ? void 0 : selectedCountry.prefix) || "";
+    const newValue = `${prefix}${phoneNumber}`;
+    onChange == null ? void 0 : onChange(newValue);
+    setTimeout(() => {
+      const formInstance = props.form;
+      const fieldName = props.fieldKey;
+      if (formInstance && fieldName) {
+        formInstance.validateFields([fieldName]);
+      }
+    });
+  };
+  const handlePhoneNumberChange = (e) => {
+    const cleanNumber = e.target.value.replace(/\D/g, "");
+    setPhoneNumber(cleanNumber);
+    const selectedCountry = countries.find(
+      (c) => c.code === countryCode
+    );
+    const prefix = (selectedCountry == null ? void 0 : selectedCountry.prefix) || "";
+    const newValue = cleanNumber ? `${prefix}${cleanNumber}` : "";
+    onChange == null ? void 0 : onChange(newValue);
+    if (!cleanNumber) {
+      const formInstance = props.form;
+      const fieldName = props.fieldKey;
+      if (formInstance && fieldName) {
+        formInstance.setFields([
+          {
+            name: fieldName,
+            errors: [],
+            // 清除错误信息
+            validating: false
+            // 停止验证状态
+          }
+        ]);
+      }
+    }
+  };
+  const concatenatedNumber = (0, import_react.useMemo)(() => {
+    const selectedCountry = countries.find(
+      (c) => c.code === countryCode
+    );
+    if (phoneNumber.length === 0) {
+      return "";
+    }
+    const prefix = (selectedCountry == null ? void 0 : selectedCountry.prefix) || "";
+    return `${prefix}${phoneNumber}`;
+  }, [countryCode, phoneNumber, countries]);
+  const handleBlur = () => {
+    const finalValue = concatenatedNumber;
+    onChange == null ? void 0 : onChange(finalValue);
+  };
+  return /* @__PURE__ */ import_react.default.createElement(import_antd.Space.Compact, { block: true }, /* @__PURE__ */ import_react.default.createElement(
+    import_select.default,
+    {
+      disabled,
+      value: countryCode,
+      onChange: handleCountryChange,
+      style: { width: "90px" },
+      popupMatchSelectWidth: false,
+      optionLabelProp: "inputValue",
+      optionFilterProp: "label",
+      showSearch: true,
+      options: countries.map((country) => ({
+        value: country.code,
+        label: `${translationOriginal(country.name)} (${country.prefix})`,
+        inputValue: country.prefix
+      }))
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Input,
+    {
+      ...props,
+      disabled,
+      type: "tel",
+      value: phoneNumber,
+      onChange: handlePhoneNumberChange,
+      onBlur: handleBlur,
+      style: { flex: 1 }
+    }
+  ));
+};
+var MobileNumberInputWithMode = (0, import_utils2.withMode)(MobileNumberInput, import_ReadPretty.default);
+var WithMode_default = MobileNumberInputWithMode;

package/lib/components/dataSourceComponents/fields/Input.Mobile/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const Mobile: React.FC<import("./WithMode").PhoneInputProps & import("../../dataSourceForm/utils").WithModeProps & import("../../dataSourceForm/utils").WithFormItemProps>;
+export default Mobile;