react-native-umui 1.3.65 → 1.3.87

package/src/Numeral.tsx

@@ -1,5 +1,5 @@
-import React from "react"
-import { cts, stc } from "./common"
+import React from "react";
+import { cts, stc } from "./common";
 /**
  * @param fraction default 2
  * @param thousandSeperator default true
@@ -25,32 +25,37 @@ export interface NumeralUtil {
     * @param code country iat code or currency symbol, if it is empty set it geves from global
     * @returns 
     */
-    setCode: (code?: string) => void
+    setCode: (code?: string) => void;
+
     /**
     * @param code country iat code or currency symbol, if it is empty set it geves from global
     * @returns 
     */
-    currency: (value: number, code?: string | null, thousandSeperator?: boolean | null, fraction?: number, direction?: "ltr" | "rtl") => string
+    currency: (value: number, code?: string | null, thousandSeperator?: boolean | null, fraction?: number, direction?: "ltr" | "rtl") => string;
+
     /**
     * @param code country iat code or currency symbol, if it is empty set it geves from global
     * @returns 
     */
-    format: (value: number, code?: string | null, thousandSeperator?: boolean | null, fraction?: number) => string
+    format: (value: number, code?: string | null, thousandSeperator?: boolean | null, fraction?: number) => string;
+
     /**
     * @param code country iat code or currency symbol, if it is empty set it geves from global
     * @returns 
     */
-    parseRaw: (value: string, code?: string | null, fraction?: number) => string
+    parseRaw: (value: string, code?: string | null, fraction?: number) => string;
+
     /**
      * 
      * @returns 
      */
-    toNumber: (value: string | number, fraction?: number) => number
+    toNumber: (value: string | number, fraction?: number) => number;
+
     /**
      * 
      * @returns 
      */
-    toFloat: (value: string | number, fraction?: number) => number
+    toFloat: (value: string | number, fraction?: number) => number;
 }
 /**
  * @param code country iat code or currency symbol, if it is empty set it geves from global
@@ -71,11 +76,15 @@ export interface NumeralSlotProps {
     thousandSeperator?: boolean | null;
     fraction?: number;
 };
-const fractionDefault: number = 2
-const isopt = (k: any) => k == undefined || k === null
-const setFraction = (defaultval: number, fraction?: number) => isopt(fraction) ? defaultval : fraction
-const decOptions = (fraction?: number) => { const value = setFraction(fractionDefault, fraction); return { minimumFractionDigits: value, maximumFractionDigits: value }; }
-const fraction = (value: number, fraction: number) => fraction === 0 ? Math.floor(value) : value
+
+const fractionDefault: number = 2;
+const isopt = (k: any) => k == undefined || k === null;
+const setFraction = (defaultval: number, fraction?: number) => isopt(fraction) ? defaultval : fraction;
+const decOptions = (fraction?: number) => {
+    const value = setFraction(fractionDefault, fraction)
+    return { minimumFractionDigits: value, maximumFractionDigits: value };
+}
+const fraction = (value: number, fraction: number) => fraction === 0 ? Math.floor(value) : value;
 const cache = {
     code: "",
     countryCode: null,
@@ -84,75 +93,150 @@ const cache = {
     separatorDecimal: "",
     regexThousands: /[]/g,
     regexDecimal: /[]/g
-}
+};
 class Numeral {
     private fraction?: number;
     private thousandSeperator: boolean = false;
-    static new() { return new Numeral(); }
-    static convert(value: number | string, fraction?: number): number { if (isopt(fraction)) { return Number(value); } return Number(Number((value || "").toString().replace(",", ".")).toFixed(fraction)); }
+
+    static new() {
+        return new Numeral();
+    }
+
+    static convert(value: number | string, fraction?: number): number {
+        if (isopt(fraction)) {
+            return Number(value);
+        }
+
+        return Number(Number((value || "").toString().replace(",", ".")).toFixed(fraction));
+    }
+
     init(code?: string) {
-        if (code !== cache.code) { cache.code = code; cache.countryCode = stc[code] || cts[code]; if (stc[code]) { cache.countryCode = stc[code]; } else if (cts[code]) { cache.countryCode = code; }; cache.symbol = cts[cache.countryCode] || "?"; cache.separatorThousands = new Intl.NumberFormat(cache.countryCode, { style: "decimal" }).format(1111).replace(/\d/g, ""); cache.separatorDecimal = new Intl.NumberFormat(cache.countryCode, { style: "decimal" }).format(11.11).replace(/\d/g, ""); cache.regexThousands = new RegExp(`[${cache.separatorThousands}]`, "g"); cache.regexDecimal = new RegExp(`[${cache.separatorDecimal}]`, "g"); }
+        if (code !== cache.code) {
+            cache.code = code;
+            cache.countryCode = stc[code] || cts[code];
+            if (stc[code]) {
+                cache.countryCode = stc[code];
+            } else if (cts[code]) {
+                cache.countryCode = code;
+            }
+            cache.symbol = cts[cache.countryCode] || "?";
+            cache.separatorThousands = new Intl.NumberFormat(cache.countryCode, { style: "decimal" }).format(1111).replace(/\d/g, "");
+            cache.separatorDecimal = new Intl.NumberFormat(cache.countryCode, { style: "decimal" }).format(11.11).replace(/\d/g, "");
+
+            cache.regexThousands = new RegExp(`[${cache.separatorThousands}]`, "g");
+            cache.regexDecimal = new RegExp(`[${cache.separatorDecimal}]`, "g");
+        }
+
         return this;
     }
-    setFraction(val?: number) { this.fraction = val; return this; }
-    setThousandSeperator(val: boolean = false) { this.thousandSeperator = val; return this; }
+
+    setFraction(val?: number) {
+        this.fraction = val;
+        return this;
+    }
+
+    setThousandSeperator(val: boolean = false) {
+        this.thousandSeperator = val;
+        return this;
+    }
+
     format(value: number): string {
         try {
-            const amount = fraction(Number(value), this.fraction); const stt = decOptions(this.fraction); const amountformat = new Intl.NumberFormat(cache.countryCode, stt).format(amount); return this.thousandSeperator ? amountformat.replace(cache.regexThousands, "") : amountformat;
+            const amount = fraction(Number(value), this.fraction);
+            const stt = decOptions(this.fraction);
+            const amountformat = new Intl.NumberFormat(cache.countryCode, stt).format(amount);
+            return this.thousandSeperator ? amountformat.replace(cache.regexThousands, "") : amountformat;
         } catch (error) {
             return "";
         }
     }
+
     inputFormat(value: number): string {
         try {
-            const amountformat = this.format(value); return amountformat.replace(cache.regexThousands, "");
+            const amountformat = this.format(value);
+            return amountformat.replace(cache.regexThousands, "");
         } catch (error) {
             return "";
         }
     }
+
     currency(value: number, direction: "ltr" | "rtl" = "ltr") {
         try {
-            const amountformat = this.format(value); return direction === "ltr" ? `${amountformat}${cache.symbol}` : `${cache.symbol}${amountformat}`;
+            const amountformat = this.format(value);
+            return direction === "ltr" ? `${amountformat}${cache.symbol}` : `${cache.symbol}${amountformat}`;
         } catch (error) {
             return "";
         }
     }
+
     parseRawFormat(value: string) {
-        const stringNumber = (value || "").replace(cache.regexThousands, "").replace(cache.regexDecimal, ".").replace(new RegExp(`[${cache.symbol}]`, "g"), ""); const amount = fraction(parseFloat(stringNumber), this.fraction);return stringNumber ? amount.toFixed(setFraction(fractionDefault, this.fraction)) : stringNumber;
+        const stringNumber = (value || "")
+            .replace(cache.regexThousands, "")
+            .replace(cache.regexDecimal, ".")
+            .replace(new RegExp(`[${cache.symbol}]`, "g"), "");
+
+        const amount = fraction(parseFloat(stringNumber), this.fraction);
+
+        return stringNumber ? amount.toFixed(setFraction(fractionDefault, this.fraction)) : stringNumber;
     }
 }
 export const numeral: NumeralUtil = (() => {
-    let _code: string = null
+    let _code: string = null;
+
     /**
     * @param code country iat code or currency symbol, if it is empty set it geves from global
     * @returns 
     */
-    function setCode(code?: string) { _code = code; }
+    function setCode(code?: string) {
+        _code = code;
+    }
+
     /**
     * @param code country iat code or currency symbol, if it is empty set it geves from global
     */
-    function currency(value: number, code?: string | null, thousandSeperator?: boolean | null, fraction?: number, direction: "ltr" | "rtl" = "ltr") { return Numeral.new().init(code || _code).setFraction(fraction).setThousandSeperator(thousandSeperator).currency(value, direction); }
+    function currency(value: number, code?: string | null, thousandSeperator?: boolean | null, fraction?: number, direction: "ltr" | "rtl" = "ltr") {
+        return Numeral.new().init(code || _code).setFraction(fraction).setThousandSeperator(thousandSeperator).currency(value, direction);
+    }
+
     /**
     * @param code country iat code or currency symbol, if it is empty set it geves from global
     */
-    function format(value: number, code?: string | null, thousandSeperator?: boolean | null, fraction?: number) { return Numeral.new().init(code || _code).setFraction(fraction).setThousandSeperator(thousandSeperator).format(value); }
+    function format(value: number, code?: string | null, thousandSeperator?: boolean | null, fraction?: number) {
+        return Numeral.new().init(code || _code).setFraction(fraction).setThousandSeperator(thousandSeperator).format(value);
+    }
+
     /**
     * @param code country iat code or currency symbol, if it is empty set it geves from global
     */
-    function parseRaw(value: string, code?: string | null, fraction?: number) { return Numeral.new().init(code || _code).setFraction(fraction).parseRawFormat(value); }
+    function parseRaw(value: string, code?: string | null, fraction?: number) {
+        return Numeral.new().init(code || _code).setFraction(fraction).parseRawFormat(value);
+    }
+
     /**
      * 
      * @param value 
      * @param fraction 
      * @returns 
      */
-    function toNumber(value: string | number, fraction?: number): number { return Numeral.convert(value, fraction); }
+    function toNumber(value: string | number, fraction?: number): number {
+        return Numeral.convert(value, fraction);
+    }
+
     /**
      * 
      * @param value 
      * @param fraction 
      * @returns 
      */
-    function toFloat(value: string | number, fraction: number = 2): number { return Numeral.convert(value, fraction); }
+    function toFloat(value: string | number, fraction: number = 2): number {
+        return Numeral.convert(value, fraction);
+    }
+
     return { setCode, currency, format, parseRaw, toNumber, toFloat };
-})(); export function CurrencySlot(props: ICurrencySlotProps) { return (<>{numeral.currency(props.value, props.code, props.thousandSeperator, props.fraction)}</>); } export function NumeralSlot(props: NumeralSlotProps) { return (<>{numeral.format(props.value, props.code, props.thousandSeperator, props.fraction)}</>); }
+})();
+export function CurrencySlot(props: ICurrencySlotProps) {
+    return (<React.Fragment>{numeral.currency(props.value, props.code, props.thousandSeperator, props.fraction)}</React.Fragment>)
+}
+export function NumeralSlot(props: NumeralSlotProps) {
+    return (<React.Fragment>{numeral.format(props.value, props.code, props.thousandSeperator, props.fraction)}</React.Fragment>)
+}

package/src/PanelRK.tsx

@@ -1,6 +1 @@
-import React from "react";
-import { View, ViewProps } from "react-native";
-interface MPanelRkProps extends ViewProps {
-    children?: React.ReactNode;
-};
-export function MPanelRK({ style, children, ...props }: MPanelRkProps) { return (<View style={[{ backgroundColor: "white", height: 53, borderWidth: 1, borderColor: "gray", marginTop: 7, marginBottom: 7, padding: 11, paddingHorizontal: 9, display: "flex", flexDirection: "row", alignItems: "center" }, style]} {...props}>{children}</View>) }
+import React from "react"; import { TouchableOpacity, TouchableOpacityProps } from "react-native"; interface MPanelRkProps extends TouchableOpacityProps { children?: React.ReactNode; }; export function MPanelRK({ style, children, ...props }: MPanelRkProps) { return (<TouchableOpacity style={[ { backgroundColor: "white", height: 53, borderWidth: 1, borderColor: "gray", marginTop: 7, marginBottom: 7, padding: 11, paddingHorizontal: 9, display: "flex", flexDirection: "row", alignItems: "center" }, style ]} {...props}>{children}</TouchableOpacity>); }

package/src/Phone.tsx

@@ -4,96 +4,124 @@ import { MText } from "./Text";
 import { aa3phone } from "./common";
 import { MTextInput } from "./TextInput";
 import { codesMap } from "./regions";
+
 export enum PhoneType {
     ANY = "ANY",
     MOBILE = "MOBILE",
     LAND = "LAND"
-}
+};
+
 export interface PhoneRaw {
-    aa2: string
-    code: number
-    nn: string
-    example?: string
-}
+    aa2: string;
+    code: number;
+    nn: string;
+    example?: string;
+};
+
 export interface PhoneUtil {
-    regisons: () => string[]
-    flag: (code: string) => string
+    regisons: () => string[];
+    flag: (code: string) => string;
     /**
      * @param phone
      * @returns 
      */
-    parseRaw: (phone: string) => PhoneRaw | null
+    parseRaw: (phone: string) => PhoneRaw | null;
+
     /**
      * @param code 
      * @param phone 
      * @returns 
      */
-    parseRawByCountryCode: (code: string, phone: string) => PhoneRaw | null
+    parseRawByCountryCode: (code: string, phone: string) => PhoneRaw | null;
+
     /**
      * @param code 
      * @param phone 
      * @returns 
      */
-    pretty: (phone: string, phoneType?: PhoneType) => string
+    pretty: (phone: string, phoneType?: PhoneType) => string;
 }
+
 function checkList(item: AA3, phoneType: PhoneType) {
-    const regexlist: RegExp[] = []; const phonelenghts = item.phone_number_lengths; const beginwiths = item.mobile_begin_with; const isNotOnlyMobile = phoneType === PhoneType.MOBILE;
+    const regexlist: RegExp[] = []
+    const phonelenghts = item.phone_number_lengths
+    const beginwiths = item.mobile_begin_with
+    const isNotOnlyMobile = phoneType === PhoneType.MOBILE
+
     if (phonelenghts.length && beginwiths.length) {
         phonelenghts.forEach(pl => {
-            beginwiths.forEach(bw => { const r = new RegExp(`^${item.countryCode}${isNotOnlyMobile ? bw : `[0-9]{${bw.toString().length}}`}[0-9]{${pl - (bw as number).toString().length}}$`); regexlist.push(r); })
+            beginwiths.forEach(bw => {
+                const r = new RegExp(`^${item.countryCode}${isNotOnlyMobile ? bw : `[0-9]{${bw.toString().length}}`}[0-9]{${pl - (bw as number).toString().length}}$`)
+                regexlist.push(r)
+            })
         })
     } else if (!phonelenghts.length && beginwiths.length) {
         beginwiths.forEach(bw => {
-            const r = new RegExp(`^${item.countryCode}${isNotOnlyMobile ? bw : `[0-9]{${bw.toString().length}}`}[0-9]`); regexlist.push(r);
+            const r = new RegExp(`^${item.countryCode}${isNotOnlyMobile ? bw : `[0-9]{${bw.toString().length}}`}[0-9]`)
+            regexlist.push(r)
         })
     } else if (phonelenghts.length && !beginwiths.length) {
         phonelenghts.forEach(pl => {
-            const r = new RegExp(`^${item.countryCode}[0-9]{${pl}}$`); regexlist.push(r);
+            const r = new RegExp(`^${item.countryCode}[0-9]{${pl}}$`)
+            regexlist.push(r)
         })
     } else {
-        const r = new RegExp(`^${item.countryCode}[0-9]`); regexlist.push(r);
+        const r = new RegExp(`^${item.countryCode}[0-9]`)
+        regexlist.push(r)
     }
     return regexlist
 }
+
 interface AA3 {
     countryCode: number;
     mobile_begin_with?: number[];
     phone_number_lengths?: number[];
     flag: string;
-}
+};
+
 interface AA2 {
     aa2: string;
     flag: string;
-}
+};
+
 class Phone {
     private supportAa2s: AA2[] = [];
-    static new() { return new Phone(); }
+
+    static new() {
+        return new Phone();
+    }
+
     setRegions(vals: string[] = []) {
         try {
             vals.forEach(k => {
                 if (aa3phone[k]) {
-                    this.supportAa2s.push({ aa2: k, flag: this.itemAa3ByAa2(k).flag });
-                };
-            });
+                    this.supportAa2s.push({ aa2: k, flag: this.itemAa3ByAa2(k).flag })
+                }
+            })
         } catch (error) {
+
         }
         return this;
     }
+
     get supportsIat2(): AA2[] {
         return this.supportAa2s;
     }
+
     formatRaw(raw: PhoneRaw, noPlusPrefix: boolean = false) {
-        return `${noPlusPrefix ? "" : "+"}${raw.code}${raw.nn}`
+        return `${noPlusPrefix ? "" : "+"}${raw.code}${raw.nn}`;
     }
+
     private itemAa3ByAa2(aa2: string): AA3 | null {
         const item: AA3 = aa3phone[aa2];
         return item ? item : null;
     }
+
     private check(aa2: string, fullPn: string, phoneType: PhoneType = PhoneType.MOBILE): PhoneRaw | null {
-        const item: AA3 | null = this.itemAa3ByAa2(aa2);
-        const regexlist = checkList(item, phoneType);
+        const item: AA3 | null = this.itemAa3ByAa2(aa2)
+        const regexlist = checkList(item, phoneType)
         if (regexlist.map(k => k.test(fullPn)).filter(k => k).length > 0) {
-            const line = `${item.mobile_begin_with.length ? item.mobile_begin_with[item.mobile_begin_with.length - 1] : ""}${"512312387612638131123"}`;
+            const line = `${item.mobile_begin_with.length ? item.mobile_begin_with[item.mobile_begin_with.length - 1] : ""}${"512312387612638131123"}`
             return ({
                 aa2: aa2,
                 code: item.countryCode,
@@ -101,64 +129,80 @@ class Phone {
                 example: line.substring(0, item.phone_number_lengths.length ? item.phone_number_lengths[item.mobile_begin_with.length - 1] : line.length)
             });
         }
+
         return null;
     }
+
     parseRaw(fullPn: string, phoneType?: PhoneType): PhoneRaw | null {
         try {
             const pn = (fullPn || "").replace(/\D/g, "").replace(/ /g, "");
             const aa2s = Object.keys(aa3phone);
+
             let index = 0;
             let raw: PhoneRaw | null = null;
+
             for (index = 0; index < aa2s.length; index++) {
                 raw = this.check(aa2s[index], pn, phoneType);
+
                 if (raw) {
                     break;
                 }
             }
+
             return raw;
         } catch (error) {
             return null;
         }
     }
+
     parseRawInput(aa2: string, nn: string, phoneType?: PhoneType): PhoneRaw | null {
         try {
             const item: AA3 | null = this.itemAa3ByAa2(aa2);
             if (!item) {
                 return null;
-            };
+            }
+
             const fullPn = `${item.countryCode}${nn}`;
             return this.check(aa2, fullPn, phoneType);
         } catch (error) {
             return null;
         }
     }
+
     placeholder(aa2: string): string {
         try {
             const item: AA3 | null = this.itemAa3ByAa2(aa2);
             if (!item) {
                 return "";
             }
+
             const line = `${item.mobile_begin_with.length ? item.mobile_begin_with[item.mobile_begin_with.length - 1] : ""}${"512312387612638131123"}`;
+
             return line.substring(0, item.phone_number_lengths.length ? item.phone_number_lengths[item.phone_number_lengths.length - 1] : line.length);
         } catch (error) {
             return "";
         }
     }
+
     private mask(lenght: number, pt: string, txt: string, rmt: string): string {
         if (rmt.length === 0 || txt.length >= lenght) {
-            return txt
+            return txt;
         }
         const c = pt.at(0);
         const v = rmt.at(0);
+
         if (c != "#") {
             txt += c;
         } else {
             txt += v;
             rmt = rmt.split("").filter((_, i) => i != 0).join("");
         }
+
         pt = pt.split("").filter((_, i) => i != 0).join("");
-        return this.mask(lenght, pt, txt, rmt)
+
+        return this.mask(lenght, pt, txt, rmt);
     }
+
     prettyMaskWoc(aa2: string, nn: string) {
         try {
             const item = aa3phone[aa2];
@@ -168,6 +212,7 @@ class Phone {
             return "";
         }
     }
+
     prettyMask(aa2: string, nn: string) {
         try {
             const item = aa3phone[aa2];
@@ -178,12 +223,13 @@ class Phone {
         }
     }
 }
+
 export const phoneUtil: PhoneUtil = (() => {
     function regisons() {
-        return Object.keys(codesMap)
+        return Object.keys(codesMap);
     }
     function flag(code: string) {
-        return aa3phone[code]?.flag
+        return aa3phone[code]?.flag;
     }
     /**
      * @param phone 
@@ -191,9 +237,9 @@ export const phoneUtil: PhoneUtil = (() => {
      */
     function parseRaw(phone: string, phoneType?: PhoneType): PhoneRaw | null {
         try {
-            return Phone.new().parseRaw(phone, phoneType)
+            return Phone.new().parseRaw(phone, phoneType);
         } catch (error) {
-            return null
+            return null;
         }
     }
     /**
@@ -203,55 +249,36 @@ export const phoneUtil: PhoneUtil = (() => {
      */
     function parseRawByCountryCode(code: string, phone: string, phoneType?: PhoneType): PhoneRaw | null {
         try {
-            return Phone.new().parseRawInput(code, phone, phoneType)
+            return Phone.new().parseRawInput(code, phone, phoneType);
         } catch (error) {
-            return null
+            return null;
         }
     }
     function pretty(phone: string, phoneType?: PhoneType): string {
         try {
-            const raw = Phone.new().parseRaw(phone.replace(/\D/g, ""), phoneType || PhoneType.ANY)
-            return Phone.new().prettyMask(raw.aa2, raw.nn)
+            const raw = Phone.new().parseRaw(phone.replace(/\D/g, ""), phoneType || PhoneType.ANY);
+            return Phone.new().prettyMask(raw.aa2, raw.nn);
         } catch (error) {
-            return ""
+            return "";
         }
     }
     return { regisons, flag, parseRaw, parseRawByCountryCode, pretty };
 })();
+
 interface MPhoneInputProps {
-    containerStyle?: StyleProp<ViewStyle>
-    phoneStyle?: StyleProp<TextStyle>
-    placeholder?: string
-    disabled?: boolean
-    noPlusPrefix?: boolean
-    regions?: Array<keyof typeof codesMap>
-    phoneType?: PhoneType
-    code: string
-    value: any
-    onChangeCountry: (regions: string[], active?: string) => void
-    onChange: (value: string) => void
-    onBlur: () => void
-}
-export function MPhoneInput(props: MPhoneInputProps) {
-    const [init, setInit] = React.useState<boolean>(false);
-    const [focus, setFocus] = React.useState<boolean>(false);
-    const [raw, setRaw] = React.useState<PhoneRaw & { pretty: string, flag: any }>({ aa2: "", nn: "", code: 0, pretty: "", flag: "" });
-    function onChangeCountryCode(v: string, isReset?: boolean) {
-        try {
-            setRaw(vals => { const item = ({ ...vals, aa2: v, nn: isReset ? "" : vals.nn, code: aa3phone[props.code]?.countryCode, flag: aa3phone[props.code]?.flag, example: Phone.new().setRegions(props.regions).placeholder(v) }); item.pretty = Phone.new().prettyMaskWoc(item.aa2, item.nn); return item; });
-        } catch (error) {
-        }
-    }
-    function onChangeNn(v: string) {
-        try {
-            const value = String(v).replace(/\D/g, "");
-            setRaw(vals => { const item = { ...vals, nn: value }; item.pretty = Phone.new().prettyMaskWoc(item.aa2, item.nn); return item; });
-        } catch (error) {
+    containerStyle?: StyleProp<ViewStyle>;
+    phoneStyle?: StyleProp<TextStyle>;
+    placeholder?: string;
+    disabled?: boolean;
+    noPlusPrefix?: boolean;
+    regions?: Array<keyof typeof codesMap>;
+    phoneType?: PhoneType;
+    keyboardType?: 'default' | 'number-pad' | 'decimal-pad' | 'numeric' | 'email-address' | 'phone-pad' | 'url';
+    code: string;
+    value: any;
+    onChangeCountry: (regions: string[], active?: string) => void;
+    onChange: (value: string) => void;
+    onBlur: () => void;
+};
 
-        }
-    }
-    React.useEffect(() => { if (init) { const instance = Phone.new().setRegions(props.regions); const rawResponse = instance.parseRawInput(raw.aa2, raw.nn, props.phoneType); if (rawResponse) { const a = instance.formatRaw(rawResponse, props.noPlusPrefix); props.onChange(a); } else if (props.onChange) { props.onChange(""); } } }, [init, focus, raw, props.regions?.length]);
-    React.useEffect(() => { if (init && !focus) { const rawResponse = Phone.new().setRegions(props.regions).parseRaw(props.value, props.phoneType); if (rawResponse) { const item: PhoneRaw & { pretty: string, flag: any } = { ...rawResponse, pretty: "", flag: aa3phone[rawResponse.aa2]?.flag }; item.pretty = Phone.new().prettyMaskWoc(rawResponse.aa2, raw.nn); setRaw(item); } else { onChangeCountryCode(props.code); } if (rawResponse?.nn == raw?.nn && props.code !== raw.aa2) { onChangeCountryCode(props.code, true); } } }, [init, focus, props.code, props.value]);
-    React.useEffect(() => { setInit(true); }, []);
-    return (<View style={[{ flex: 1, height: 45, maxHeight: 45, display: "flex", flexDirection: "row", borderWidth: 1, borderColor: "#dadce0" }, props.containerStyle]}><TouchableHighlight style={{ flex: 1, maxWidth: 55, display: "flex", justifyContent: "center", alignItems: "center", borderRightWidth: 1, borderRightColor: "#dadce0", backgroundColor: "white" }} onPress={() => props.onChangeCountry(Phone.new().setRegions(props.regions).supportsIat2.map(k => k.aa2), raw.aa2)}><MText style={{ textAlign: "center", fontSize: 23 }}>{raw.flag || "🏁"}</MText></TouchableHighlight><View style={{ flex: 1, maxWidth: 55, padding: 5, display: "flex", justifyContent: "center", alignItems: "center", backgroundColor: "white", borderRightWidth: 1, borderRightColor: "#dadce0" }}><MText style={{ color: "black", textAlign: "center", padding: 5, fontWeight: "500" }}>+{raw?.code}</MText></View><MTextInput style={[{ flex: 1, color: "black", borderWidth: 0, borderRadius: 0, minHeight: 43, height: 43 }, props.phoneStyle]} value={raw.pretty} autoFocus={false} maxLength={Phone.new().prettyMaskWoc(raw.aa2, raw.example)?.length} placeholder={props.placeholder} onChangeText={onChangeNn} onFocus={() => setFocus(true)} onBlur={() => setFocus(false)} /></View>);
-}
+export function MPhoneInput({ keyboardType = "phone-pad", ...props }: MPhoneInputProps) { const [init, setInit] = React.useState<boolean>(false); const [focus, setFocus] = React.useState<boolean>(false); const [raw, setRaw] = React.useState<PhoneRaw & { pretty: string, flag: any }>({ aa2: "", nn: "", code: 0, pretty: "", flag: "" }); function onChangeCountryCode(v: string, isReset?: boolean) { try { setRaw(vals => { const item = ({ ...vals, aa2: v, nn: isReset ? "" : vals.nn, code: aa3phone[props.code]?.countryCode, flag: aa3phone[props.code]?.flag, example: Phone.new().setRegions(props.regions).placeholder(v) }); item.pretty = Phone.new().prettyMaskWoc(item.aa2, item.nn); return item; }); } catch (error) { } } function onChangeNn(v: string) { try { const value = String(v).replace(/\D/g, ""); setRaw(vals => { const item = { ...vals, nn: value }; item.pretty = Phone.new().prettyMaskWoc(item.aa2, item.nn); return item; }); } catch (error) { } } React.useEffect(() => { if (init) { const instance = Phone.new().setRegions(props.regions); const rawResponse = instance.parseRawInput(raw.aa2, raw.nn, props.phoneType); if (rawResponse) { const a = instance.formatRaw(rawResponse, props.noPlusPrefix); props.onChange(a); } else if (props.onChange) { props.onChange(""); } } }, [init, focus, raw, props.regions?.length]); React.useEffect(() => { if (init && !focus) { const rawResponse = Phone.new().setRegions(props.regions).parseRaw(props.value, props.phoneType); if (rawResponse) { const item: PhoneRaw & { pretty: string, flag: any } = { ...rawResponse, pretty: "", flag: aa3phone[rawResponse.aa2]?.flag }; item.pretty = Phone.new().prettyMaskWoc(rawResponse.aa2, raw.nn); setRaw(item); } else { onChangeCountryCode(props.code); } if (rawResponse?.nn == raw?.nn && props.code !== raw.aa2) { onChangeCountryCode(props.code, true); } } }, [init, focus, props.code, props.value]); React.useEffect(() => { setInit(true); }, []); return (<View style={[{ flex: 1, height: 45, maxHeight: 45, display: "flex", flexDirection: "row", borderWidth: 1, borderColor: "#dadce0" }, props.containerStyle]}><TouchableHighlight style={{ flex: 1, maxWidth: 55, display: "flex", justifyContent: "center", alignItems: "center", borderRightWidth: 1, borderRightColor: "#dadce0", backgroundColor: "white" }} onPress={() => props.onChangeCountry(Phone.new().setRegions(props.regions).supportsIat2.map(k => k.aa2), raw.aa2)}><MText style={{ textAlign: "center", fontSize: 23 }}>{raw.flag || "🏁"}</MText></TouchableHighlight><View style={{ flex: 1, maxWidth: 55, padding: 5, display: "flex", justifyContent: "center", alignItems: "center", backgroundColor: "white", borderRightWidth: 1, borderRightColor: "#dadce0" }}><MText style={{ color: "black", textAlign: "center", padding: 5, fontWeight: "500" }}>+{raw?.code}</MText></View><MTextInput style={[{ flex: 1, color: "black", borderWidth: 0, borderRadius: 0, minHeight: 43, height: 43 }, props.phoneStyle]} value={raw.pretty} keyboardType={keyboardType} placeholder={props.placeholder} maxLength={Phone.new().prettyMaskWoc(raw.aa2, raw.example)?.length} onChangeText={onChangeNn} onFocus={() => setFocus(true)} onBlur={() => setFocus(false)} /></View>) }

package/src/Press.tsx

@@ -1,6 +1 @@
-import React, { ReactNode } from "react";
-import { Pressable, PressableProps } from "react-native";
-interface MPressProps extends PressableProps {
-    children: ReactNode;
-};
-export function MPress({ children, ...props }: MPressProps) {return (<Pressable {...props}>{children}</Pressable>)}
+import React, { ReactNode } from "react"; import { Pressable, PressableProps } from "react-native"; interface MPressProps extends PressableProps { children: ReactNode; }; export function MPress({ children, ...props }: MPressProps) { return (<Pressable {...props}>{children}</Pressable>); }

package/src/Radio.tsx

@@ -1,15 +1 @@
-import React, { ReactNode } from "react";
-import { TextStyle, TouchableHighlight, TouchableHighlightProps, View } from "react-native";
-import { MText } from "./Text";
-interface MRadioProps extends TouchableHighlightProps {
-    name?: string;
-    activeValue?: string | number | boolean;
-    value: string | number | boolean;
-    size?: number;
-    color: string;
-    label?: string;
-    labelStyle?: TextStyle;
-    onChange?: (values: string | number | boolean, checked: boolean, name?: string) => void;
-    children?: ReactNode;
-};
-export function MRadio({ name = "", activeValue, value, color, label, size = 26, labelStyle, style, onChange, ...props }: MRadioProps) { const checked = value == activeValue; return (<TouchableHighlight activeOpacity={0.85}{...props} onPress={() => { if (onChange) { onChange(checked ? "" : value, !checked, name); }; }} underlayColor="transparent" style={[{ flex: 1 }, style]}><View style={{ display: "flex", flexDirection: "row", alignItems: "center", minHeight: size }}><View style={{ padding: 4, width: size, height: size, borderRadius: size, borderWidth: 1, borderColor: color, backgroundColor: "white", display: "flex", justifyContent: "center", alignItems: "center" }} ><View style={{ width: size - 8, height: size - 8, backgroundColor: checked ? color : "white", borderRadius: size }} /></View><MText style={[{ flex: 1, fontSize: 15, paddingLeft: 5 }, labelStyle]}>{label}</MText></View></TouchableHighlight>) }
+import React, { ReactNode } from "react"; import { TextStyle, TouchableHighlight, TouchableHighlightProps, View } from "react-native"; import { MText } from "./Text"; interface MRadioProps extends TouchableHighlightProps { name?: string; activeValue?: string | number | boolean; value: string | number | boolean; size?: number; color: string; label?: string; labelStyle?: TextStyle; onChange?: (values: string | number | boolean, checked: boolean, name?: string) => void; children?: ReactNode; }; export function MRadio({ name = "", activeValue, value, color, label, size = 26, labelStyle, style, onChange, ...props }: MRadioProps) { const checked = value == activeValue; return (<TouchableHighlight activeOpacity={0.85} {...props} onPress={() => { if (onChange) { onChange(checked ? "" : value, !checked, name); } }} underlayColor="transparent" style={[{ flex: 1 }, style]}><View style={{ display: "flex", flexDirection: "row", alignItems: "center", minHeight: size }}><View style={{ padding: 4, width: size, height: size, borderRadius: size, borderWidth: 1, borderColor: color, backgroundColor: "white", display: "flex", justifyContent: "center", alignItems: "center" }}><View style={{ width: size - 8, height: size - 8, backgroundColor: checked ? color : "white", borderRadius: size }} /></View><MText style={[{ flex: 1, fontSize: 15, paddingLeft: 5 }, labelStyle]}>{label}</MText></View></TouchableHighlight>) }

package/src/Scroll.tsx

@@ -1,13 +1 @@
-import React, { forwardRef, ReactNode } from "react";
-import { RefreshControl, ScrollView, StyleProp, ViewStyle, ScrollViewProps } from "react-native";
-export const styleMSVerticalCenter = {
-    justifyContent: "center"
-} as any;
-interface MScrollProps extends ScrollViewProps {
-    name?: string;
-    contentContainerStyle?: StyleProp<ViewStyle>;
-    isRefreshing?: boolean;
-    onRefresh?: () => void;
-    children?: ReactNode;
-};
-export const MScroll = forwardRef<ScrollView, MScrollProps>((props, ref) => { return (<ScrollView ref={ref} contentInsetAdjustmentBehavior="automatic" contentContainerStyle={{ flexGrow: 1, backgroundColor: "transparent", paddingBottom: 175, padding: 9, ...(props.contentContainerStyle || {}) as any }} refreshControl={(props.onRefresh ? <RefreshControl refreshing={Boolean(props.isRefreshing)} onRefresh={props.onRefresh} /> : <React.Fragment></React.Fragment>)}>{props.children}</ScrollView>); })
+import React, { forwardRef, ReactNode } from "react"; import { RefreshControl, ScrollView, StyleProp, ViewStyle, ScrollViewProps } from "react-native"; export const styleMSVerticalCenter = { justifyContent: "center" } as any; interface MScrollProps extends ScrollViewProps { name?: string; contentContainerStyle?: StyleProp<ViewStyle>; isRefreshing?: boolean; onRefresh?: () => void; children?: ReactNode; }; export const MScroll = forwardRef<ScrollView, MScrollProps>((props, ref) => { return (<ScrollView ref={ref} contentInsetAdjustmentBehavior="automatic" contentContainerStyle={{ flexGrow: 1, backgroundColor: "transparent", paddingBottom: 175, padding: 9, ...(props.contentContainerStyle || {}) as any }} refreshControl={(props.onRefresh && (<RefreshControl refreshing={Boolean(props.isRefreshing)} onRefresh={props.onRefresh} /> ))}>{props.children}</ScrollView> ) })