react-native-umui 1.3.59 → 1.3.87

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> ) })