react-native-umui 1.3.25

package/src/Grid.tsx

@@ -0,0 +1,3 @@
+import React, { ReactElement, useMemo } from "react"; import { StyleProp, View, ViewStyle } from "react-native";
+interface IColProps { colSpan: number; style?: StyleProp<ViewStyle>; children?: React.ReactNode; }; export function MCol({ }: IColProps) { return (<></>) };
+interface IMGridProps { testID?: string; cols?: number; content?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly"; items?: "flex-start" | "flex-end" | "center" | "stretch" | "baseline"; style?: StyleProp<ViewStyle>; gap?: number; children: ReactElement<IColProps> | Array<ReactElement<IColProps>>; }; function calc(cols: number = 12) { let _cols = Number(cols) || 12; _cols = _cols <= 0 ? 12 : cols; return Number((100.0 / _cols).toFixed(5)); }; export function MGrid(props: IMGridProps) { const span = useMemo(() => { return calc(props.cols); }, [props.cols]); return (<View testID={props.testID} style={[{ display: "flex", flexDirection: "row", flexWrap: "wrap", justifyContent: props.content, alignItems: props.items, columnGap: props.gap }, props.style,]}>{(Array.isArray(props.children) ? props.children : [props.children])?.map(k => { return (<View style={[k.props.style, { flex: (span * k.props.colSpan) || 0 }]}>{k.props.children}</View>) })}</View>) }

package/src/InputField.tsx

@@ -0,0 +1,3 @@
+import React, { ReactNode } from "react"; import { TextStyle, View, ViewStyle } from "react-native"; import { MText } from "./Text"; import { StyleProp } from "react-native";
+interface InputFieldProps { testID?: string; label?: string; containerStyle?: StyleProp<ViewStyle>; labelStyle?: StyleProp<TextStyle>; children?: ReactNode; }; export function MInputField(props: InputFieldProps) { return (<View testID={props.testID} style={[{ width: "100%", marginVertical: 5 }, props.containerStyle]}>{props.label ? <MText style={[{ color: "black", marginBottom: 3, fontSize: 15, paddingHorizontal: 3, fontWeight: "500" }, props.labelStyle]}>{props.label}</MText> : <></>}<View>{props.children}</View></View>) };
+type MInputSetFieldProps = InputFieldProps & { noBackground?: boolean, border?: boolean }; export function MInputSetField(props: MInputSetFieldProps) { return (<View testID={props.testID} style={[{ width: "100%", marginVertical: 5 }, props.border ? { borderWidth: 1, borderColor: "#dadce0" } : {}, props.containerStyle]}>{props.label ? <MText style={[{ color: "black", fontWeight: "500", marginBottom: 3, paddingHorizontal: 7, paddingVertical: 1, fontSize: 15, top: -11.5, left: 7, zIndex: 105, position: "absolute", borderLeftWidth: 1, borderRightWidth: 1, borderColor: "#dadce0" }, props.noBackground ? {} : { backgroundColor: "white" }, props.labelStyle]}>{props.label}</MText> : <></>}<View>{props.children}</View></View>) }

package/src/Line.tsx

@@ -0,0 +1,2 @@
+import React from "react"; import { StyleProp, View, ViewStyle } from "react-native";
+interface HrProps { margin?: number; direction?: "w" | "h"; style?: StyleProp<ViewStyle>; }; export function MLine({ direction = "w", margin = 5, style }: HrProps) { return (<View style={[direction === "w" ? { flex: 1, height: 1, maxHeight: 1, marginVertical: margin } : { flex: 1, width: 1, maxWidth: 1, marginHorizontal: margin }, { backgroundColor: "#dadce0" }, style]} />) }

package/src/Load.tsx

@@ -0,0 +1,3 @@
+import React, { ComponentProps, useCallback, useEffect, useRef, useState } from "react"; import { ActivityIndicator, View } from "react-native";
+function LoadActivity() { return (<View style={{ flex: 1, display: "flex", justifyContent: "center", alignItems: "center" }}><ActivityIndicator size={45} color="#016db6" /></View>) };
+interface MLoadProps extends ComponentProps<any> { loadId: string; showLoading?: boolean; name?: string; delay?: number; load: () => Promise<{}>; onLoaded?: () => void; onError?: () => void; }; export function MLoad({ loadId, showLoading, name = "default", delay, load, ...props }: MLoadProps) { const [loaded, setLoaded] = useState<boolean>(false); const loadIfRef = useRef<string>(); const timeRef = useRef<any>(); const ref = useRef<any>(); const loadCmp = useCallback(async () => { try { if (!timeRef.current) { setLoaded(false); timeRef.current = setTimeout(async () => { try { ref.current = await load(); if (props.onLoaded) { props.onLoaded(); }; clearTimeout(timeRef.current); timeRef.current = undefined; loadIfRef.current = loadId; setLoaded(true); } catch (error) { if (props.onError) { props.onError(); } } }, delay || 25); }; } catch (error) { if (props.onError) { props.onError(); } } }, [timeRef, loadId, props.load, props.name]); useEffect(() => { loadCmp(); return () => { clearTimeout(timeRef.current); }; }, [loadCmp]); if (showLoading && !loaded) { return (<LoadActivity />) }; const Component = ref.current && ref.current[name] ? ref.current[name] : LoadActivity; return (<Component key={loadIfRef.current} {...props} />) }

package/src/Numeral.tsx

@@ -0,0 +1,135 @@
+import React from "react"; import { cts, stc } from "./common";
+/**
+ * @param fraction default 2
+ * @param thousandSeperator default true
+*/
+export interface INumeralOptions { fraction?: number; thousandSeperator?: boolean; }
+/**
+ * @param gte >= Y
+ * @param gt > Y
+ * @param lte <= Y
+ * @param lt < Y
+ */
+export interface NumeralValidity {
+    gte?: number;
+    gt?: number;
+    lte?: number;
+    lt?: number;
+}
+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;
+
+    /**
+    * @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;
+
+    /**
+    * @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;
+
+    /**
+    * @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;
+
+    /**
+     * 
+     * @returns 
+     */
+    toNumber: (value: string | number, fraction?: number) => number;
+
+    /**
+     * 
+     * @returns 
+     */
+    toFloat: (value: string | number, fraction?: number) => number;
+}
+/**
+ * @param code country iat code or currency symbol, if it is empty set it geves from global
+ */
+export interface ICurrencySlotProps { direction?: "ltr" | "ltr"; value: number; code?: string; thousandSeperator?: boolean | null; fraction?: number; };
+/**
+ * @param code country iat code or currency symbol, if it is empty set it geves from global
+ */
+export interface NumeralSlotProps { value: number; code?: string; 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; 
+// function testValid(value: string, validity?: NumeralValidity) { const amount = Number(value); if (!validity || value == "" || isopt(value)) { return ""; }; const gte = Number(validity.gte); const gt = Number(validity.gt); const lte = Number(validity.lte); const lt = Number(validity.lt); if (!isopt(validity.gte) && amount < gte) { return `X >= ${gte}`; }; if (!isopt(validity.gt) && amount <= gt) { return `X > ${gt}`; }; if (!isopt(validity.lte) && amount > lte) { return `X <= ${lte}`; }; if (!isopt(validity.lt) && amount > lt) { return `X < ${lt}`; }; return ""; }
+const cache = { code: "", countryCode: null, symbol: "", separatorThousands: "", 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)); };
+
+    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"); } 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; } catch (error) { return ""; } };
+
+    inputFormat(value: number): string { try { 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}`; } 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; }
+}
+export const numeral: NumeralUtil = (() => {
+    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; };
+
+    /**
+    * @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); };
+
+    /**
+    * @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); };
+
+    /**
+    * @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); };
+
+    /**
+     * 
+     * @param value 
+     * @param fraction 
+     * @returns 
+     */
+    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); };
+
+    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)}</>) };

package/src/PanelRK.tsx

@@ -0,0 +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>) };

package/src/Phone.tsx

@@ -0,0 +1,159 @@
+import React from "react"; import { StyleProp, TextStyle, TouchableHighlight, View, ViewStyle } from "react-native"; 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; };
+export interface PhoneUtil {
+    regisons: () => string[]
+    flag: (code: string) => string
+    /**
+     * @param phone
+     * @returns 
+     */
+    parseRaw: (phone: string) => PhoneRaw | null
+
+    /**
+     * @param code 
+     * @param phone 
+     * @returns 
+     */
+    parseRawByCountryCode: (code: string, phone: string) => PhoneRaw | null
+
+    /**
+     * @param code 
+     * @param phone 
+     * @returns 
+     */
+    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;
+    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); }); });
+    } 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); })
+    } else if (phonelenghts.length && !beginwiths.length) {
+        phonelenghts.forEach(pl => { const r = new RegExp(`^${item.countryCode}[0-9]{${pl}}$`); regexlist.push(r); });
+    } else {
+        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() }
+
+    setRegions(vals: string[] = []) {
+        try {
+            vals.forEach(k => { if (aa3phone[k]) { 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}` }
+
+    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);
+        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"}`; return ({ aa2: aa2, code: item.countryCode, nn: fullPn.substring(item.countryCode.toString().length, fullPn.length), 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; }; 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);
+    }
+
+    prettyMaskWoc(aa2: string, nn: string) {
+        try {
+            const item = aa3phone[aa2]; const mask = item?.mask?.replace(`+${item.countryCode.toString()} `, "");
+            return this.mask(mask.length, mask, "", nn);
+        } catch (error) {
+            return ""
+        }
+    }
+
+    prettyMask(aa2: string, nn: string) {
+        try {
+            const item = aa3phone[aa2]; const mask = item?.mask;
+            return this.mask(mask.length, mask, "", nn);
+        } catch (error) {
+            return ""
+        }
+    }
+}
+
+export const phoneUtil: PhoneUtil = (() => {
+    function regisons() { return Object.keys(codesMap); }
+    function flag(code: string) { return aa3phone[code]?.flag; }
+    /**
+     * @param phone 
+     * @returns 
+     */
+    function parseRaw(phone: string, phoneType?: PhoneType): PhoneRaw | null {
+        try {
+            return Phone.new().parseRaw(phone, phoneType);
+        } catch (error) {
+            return null
+        }
+    }
+
+    /**
+     * @param code 
+     * @param phone 
+     * @returns 
+     */
+    function parseRawByCountryCode(code: string, phone: string, phoneType?: PhoneType): PhoneRaw | null {
+        try {
+            return Phone.new().parseRawInput(code, phone, phoneType);
+        } catch (error) {
+            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);
+        } catch (error) {
+            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) { }; }; 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>); }

package/src/Press.tsx

@@ -0,0 +1,2 @@
+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

@@ -0,0 +1,2 @@
+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" }}><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

@@ -0,0 +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>(({ contentContainerStyle, onRefresh, isRefreshing, children, ...props }, ref) => { return (<ScrollView contentInsetAdjustmentBehavior="automatic" contentContainerStyle={{ flexGrow: 1, backgroundColor: "transparent", paddingBottom: 175, padding: 9, ...(contentContainerStyle || {}) as any }} refreshControl={(onRefresh ? (<RefreshControl refreshing={Boolean(isRefreshing)} onRefresh={onRefresh} />) : (<></>))}{...props} ref={ref}>{children}</ScrollView>) });

package/src/Tab.tsx

@@ -0,0 +1,40 @@
+import React, { Fragment, ReactElement, ReactNode } from "react"; import { StyleProp, View, ViewStyle, PanResponder, Animated, Dimensions } from "react-native"; import { MButton } from "./Button"; import { MText } from "./Text";
+interface IMTabButtonProps { testID?: string; size?: "xs" | "sm" | "md" | "nm"; noSizeLimit?: boolean; style?: StyleProp<ViewStyle>; label?: string; textAlign?: "center" | "left" | "right"; disabled?: boolean; outline?: boolean; noborder?: boolean; loading?: boolean; btnType?: "primary" | "success" | "warning" | "secondary" | "danger" | "light" | "navy" | "smokelight"; onPress?: () => void; children?: ReactNode; }; export function MTabButton({ children, btnType = "smokelight", style, size = "md", outline = true, ...props }: IMTabButtonProps) { return (<MButton btnType={btnType} size={size} outline={outline}{...props} style={[{ borderWidth: 1, borderColor: "#dadada" }, style]}>{children}</MButton>) };
+export interface MCustomTabProps { value: string | number; active: boolean; disabled: boolean; onPress: (value: any) => void; }; interface MTabProps { value: string | number; tab: string | ((props: MCustomTabProps) => ReactNode); disabled?: boolean; isHidden?: boolean; render?: () => ReactNode; children?: ReactNode; }; export function MTab(props: MTabProps) { return (<>{props.children || props.render()}</>) };
+interface TabContainerProps { testID?: string; tabStyle?: StyleProp<ViewStyle>; isTop: boolean; activeValue: string | number; onChange: (value: any) => void; items: Array<ReactElement<MTabProps>>; }; function TabContainer(props: TabContainerProps) { return (<View style={[{ width: "100%", display: "flex", flexDirection: "row", justifyContent: "space-around", alignItems: "center" }, props.tabStyle]}>{props.items.filter(k => k && !k.props.isHidden).map((item, index) => { const isActive = item.props.value === props.activeValue; return (<Fragment key={`${index}${props.activeValue}`}>{typeof item.props.tab === "string" ? (<MButton testID={props.testID} size="md" btnType={isActive ? "navy" : "light"} outline={isActive} disabled={item.props.disabled} style={{ backgroundColor: "transparent", flex: 1, borderRadius: 0, borderColor: null, borderWidth: 0, borderTopWidth: !props.isTop ? 2 : 0, borderBottomWidth: props.isTop ? 2 : 0, borderTopColor: !props.isTop && isActive ? undefined : "transparent", borderBottomColor: props.isTop && isActive ? undefined : "transparent", minHeight: 43, maxHeight: 43 }} onPress={() => props.onChange(item.props.value)}><MText style={{ color: "black", fontSize: 15 }}>{item.props.tab}</MText></MButton>) : (item.props.tab({ active: isActive, value: item.props.value, disabled: item.props.disabled, onPress: props.onChange }))}</Fragment>); })}</View>) };
+interface MTabsProps { position?: "top" | "bottom"; tabStyle?: StyleProp<ViewStyle>; active: string | number; children: ReactElement<MTabProps> | Array<ReactElement<MTabProps>>; onChange: (value: any) => void; }; export function MTabs({ position = "top", ...props }: MTabsProps) { const fadeAnim = React.useRef(new Animated.Value(0, { useNativeDriver: true })).current; const children = Array.isArray(props.children) ? props.children : [props.children]; const activeIndex = React.useMemo(() => { return children.findIndex(k => k.props.value === props.active); }, [props.active]); const panResponder = React.useMemo(() => { fadeAnim.setValue(0); return PanResponder.create({ onMoveShouldSetPanResponder(_e1, gestureState) { if ((Math.abs(gestureState.dx) > (Dimensions.get("window").width / 2.5)) && (Math.abs(gestureState.dx) > Math.abs(gestureState.dy * 3.5)) && (Math.abs(gestureState.vx) > Math.abs(gestureState.vy * 2.5))) { if (gestureState.dx > 0 && activeIndex > 0) { props.onChange(children[activeIndex - 1].props.value); return true; }; if (gestureState.dx < 0 && activeIndex < children.length - 1) { props.onChange(children[activeIndex + 1].props.value); return true; }; }; if ((gestureState.dx > 0 && activeIndex > 0) || (gestureState.dx < 0 && activeIndex < children.length - 1)) { fadeAnim.setValue(gestureState.dx); }; return true; }, onPanResponderRelease(_e1, _g1) { fadeAnim.setValue(0); }, onPanResponderTerminate() { } }); }, [activeIndex]); return (<View style={{ flex: 1, display: "flex", flexDirection: "column" }} {...panResponder.panHandlers} onTouchEnd={() => { fadeAnim.setValue(0); }}>{position === "top" ? <TabContainer isTop={true} activeValue={props.active} tabStyle={props.tabStyle} items={children} onChange={props.onChange} /> : <></>}<Animated.View style={{ flex: 1, transform: [{ translateX: fadeAnim }] }}>{children[activeIndex]?.props?.children || children[activeIndex]?.props?.render()}</Animated.View>{position === "bottom" ? <TabContainer isTop={false} activeValue={props.active} tabStyle={props.tabStyle} items={children} onChange={props.onChange} /> : <></>}</View>) }
+
+// 
+
+class MTabButtonBaseProps { testID?: string; value: string | number; disabled?: boolean; label: string; style?: StyleProp<ViewStyle>; }; class MTabButtonProps extends MTabButtonBaseProps { activeValue?: string | number; onChange?: (value: any) => void; }; export function MTabControlButton(props: MTabButtonProps) { const isActive = props.value === props.activeValue; return (<MButton testID={props.testID} btnType={isActive ? "navy" : "light"} disabled={props.disabled} style={[{ borderRadius: 0, borderWidth: 1, borderColor: "#fafafa" }, props.style]} onPress={() => props.onChange(props.value)}><MText style={{ color: isActive ? "white" : "black", fontSize: 15 }}>{props.label}</MText></MButton>) };
+interface MTabContollerProps { active: string | number; style?: StyleProp<ViewStyle>; children: Array<ReactElement<MTabButtonBaseProps | ReactNode>>; onChange: (value: any) => void; }; export function MTabContoller(props: MTabContollerProps) { return (<View style={[{ width: "100%", display: "flex", flexDirection: "row", justifyContent: "space-evenly", alignItems: "center" }, props.style]}>{props.children.map((k, index) => { if (k.type["name"] === "MTabControlButton") { return (<MTabControlButton key={index}{...k.props as any} activeValue={props.active} onChange={(value) => { props.onChange(value); if (k.props["onChange"]) { k.props["onChange"](value); } }} />) } else { return k; } })}</View>) }
+interface MTabContentProps { value: string | number; style?: StyleProp<ViewStyle>; children: ReactNode; }; export function MTabContent(props: MTabContentProps) { return (<View style={[{ flex: 1 }, props.style]}>{props.children}</View>) };
+interface MTabContentsProps { active: string | number; children: Array<ReactElement<MTabContentProps>>; }; export function MTabContents(props: MTabContentsProps) { return (<>{props.children?.find(k => k.props.value === props.active)}</>) };
+interface MTabContainerProps { style?: StyleProp<ViewStyle>; children: [ReactElement<MTabContollerProps>, ReactElement<MTabContentsProps>]; }; export function MTabContainer(props: MTabContainerProps) { return (<View style={[{ flex: 1, display: "flex", flexDirection: "column" }, props.style]}>{props.children}</View>) };
+
+/*
+<MTabContainer>
+    <MTabContoller active={tab} onChange={setTab}>
+        <MTabControlButton value={ORDER_GROUP_TYPE.PENDING} label="Paketlerim" />
+        <MTabControlButton value={ORDER_GROUP_TYPE.DELIVERED} label="Teslim-İptal" />
+        <MTabControlButton value={ORDER_GROUP_TYPE.ACCEPTED} label="Aktifler" />
+        <MButton color="light" onPress={()=> {}} style={{maxWidth: 41}}>
+
+        </MButton>
+    </MTabContoller>
+
+    <MTabContents active={tab}>
+        <MTabContent value={ORDER_GROUP_TYPE.PENDING}>
+            <MText style={{ color: "black" }}>{ORDER_GROUP_TYPE.PENDING}</MText>
+        </MTabContent>
+
+        <MTabContent value={ORDER_GROUP_TYPE.DELIVERED}>
+            <MText style={{ color: "black" }}>{ORDER_GROUP_TYPE.DELIVERED}</MText>
+        </MTabContent>
+
+        <MTabContent value={ORDER_GROUP_TYPE.ACCEPTED}>
+            <MText style={{ color: "black" }}>{ORDER_GROUP_TYPE.ACCEPTED}</MText>
+        </MTabContent>
+    </MTabContents>
+</MTabContainer>
+*/

package/src/Text.tsx

@@ -0,0 +1 @@
+import React from "react"; import { Text, TextProps } from "react-native"; interface MTextProps extends TextProps { }; export function lineHeight(fontSize) { const multiplier = (fontSize > 20) ? 1.5 : 1; return parseInt(fontSize + (fontSize * multiplier), 10); }; export const MText = React.forwardRef<Text, MTextProps>((props, ref) => { return (<Text ref={ref} {...props} style={[{ fontSize: 15, letterSpacing: 0.65 }, props.style]}>{props.children}</Text>) })

package/src/TextInput.tsx

@@ -0,0 +1,22 @@
+import React, { StyleSheet, TextInput, TextInputProps } from "react-native";
+const styleOTI = StyleSheet.create({
+    txtInput: {
+        flex: 1,
+        height: 45,
+        minHeight: 45,
+        maxHeight: 45,
+        borderStyle: "solid",
+        zIndex: 101,
+        backgroundColor: "white",
+        color: "black",
+        borderRadius: 3,
+        fontSize: 16.25,
+        paddingHorizontal: 11,
+        paddingVertical: 5,
+        borderWidth: 1,
+        borderColor: "#dadce0",
+        letterSpacing: 1
+    }
+});
+interface ITextInputProps extends TextInputProps { }; export function MTextInput({ style, ...props }: ITextInputProps) { return (<TextInput autoCapitalize="none" autoFocus={false}{...props} style={[styleOTI.txtInput, { backgroundColor: props.editable == false ? "#f7f7f7" : "white" }, style]} placeholderTextColor="#919191" />) };
+export function MTextareaInput({ style, ...props }: ITextInputProps) { return (<TextInput autoCapitalize="none" numberOfLines={4} multiline={true} editable={true} autoFocus={false}{...props} style={[styleOTI.txtInput, { height: null, maxHeight: null, backgroundColor: props.editable == false ? "#f7f7f7" : "white" }, style]} placeholderTextColor="#919191" />) };