react-native-umui 1.4.11 → 1.4.21

package/src/Phone.tsx

@@ -1,284 +0,0 @@
-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;
-    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;
-};
-
-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 +0,0 @@
-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 +0,0 @@
-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; checked?: 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 = props.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 +0,0 @@
-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 }} {...props} refreshControl={(props.onRefresh && (<RefreshControl refreshing={Boolean(props.isRefreshing)} onRefresh={props.onRefresh} />))}>{props.children}</ScrollView>) })

package/src/Tab.tsx

@@ -1,309 +0,0 @@
-import React, { Fragment, ReactElement, ReactNode } from "react";
-import { StyleProp, View, ViewStyle, PanResponder, Animated, Dimensions, TextStyle } 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;
-    fontSize?: number;
-    textAlign?: "center" | "left" | "right";
-    fontWeight?: | 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900' | undefined;
-    tabTextStyle?: StyleProp<TextStyle>;
-    tab: string | ((props: MCustomTabProps) => ReactNode);
-    disabled?: boolean;
-    isHidden?: boolean;
-    render?: () => ReactNode;
-    children?: ReactNode;
-};
-
-export function MTab(props: MTabProps) {
-    return (<React.Fragment>{props.children || props.render()}</React.Fragment>);
-}
-
-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={[{ flex: 1, color: "black", fontSize: item.props.fontSize || 15, fontWeight: item.props.fontWeight, textAlign: item.props.textAlign || "center" }, item.props.tabTextStyle]}>
-                                    {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]).filter(k => (!k.props.isHidden && !k.props.disabled))
-
-
-    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)
-        }} onTouchCancel={()=>fadeAnim.setValue(0)}>
-            {position === "top" ? <TabContainer isTop={true} activeValue={props.active} tabStyle={props.tabStyle} items={children} onChange={props.onChange} /> : <React.Fragment></React.Fragment>}
-
-            {children.length ? <Animated.View key={activeIndex} style={{ flex: 1, transform: [{ translateX: fadeAnim }] }}>
-                {children[activeIndex]?.props?.children || children[activeIndex]?.props?.render()}
-            </Animated.View> : <React.Fragment></React.Fragment>}
-
-            {position === "bottom" ? <TabContainer isTop={false} activeValue={props.active} tabStyle={props.tabStyle} items={children} onChange={props.onChange} /> : <React.Fragment></React.Fragment>}
-        </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 (<React.Fragment>{props.children?.find(k => k.props.value === props.active)}</React.Fragment>);
-}
-
-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

@@ -1,21 +0,0 @@
-import React from "react"; import {Text, TextProps } from "react-native"; interface MTextProps extends TextProps { }; export const MText = React.forwardRef<Text, MTextProps>((props, ref) => { return (<Text ref={ref} {...props} style={[{ fontSize: 15, letterSpacing: 0.59 }, props.style]}>{props.children}</Text>) })
-
-// import React from "react";
-// import { StyleProp, Text, TextProps, TextStyle } from "react-native"
-
-// interface MTextProps extends TextProps {
-//      // style?: StyleProp<Omit<TextStyle, "fontSize">>
-// }
-
-// 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.59 }, props.style]}>
-//                {props.children}
-//           </Text>
-//      )
-// })

package/src/TextInput.tsx

@@ -1 +0,0 @@
-import React, { StyleProp, StyleSheet, TextInput, TextInputProps, View, ViewStyle } from "react-native"; import { MText } from "./Text"; import { useEffect } from "react"; 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 { disabled?: boolean; }; export function MTextInput({ disabled, editable, style, ...props }: ITextInputProps) { const _editable = !(disabled || editable == false); return (<TextInput autoCapitalize="none" autoFocus={false} {...props} editable={_editable} style={[styleOTI.txtInput, { backgroundColor: _editable ? "white" : "#f7f7f7" }, style]} placeholderTextColor="#919191" />); } export function MTextareaInput({ disabled, editable, style, ...props }: ITextInputProps) { const _editable = !(disabled || editable == false); return (<TextInput autoCapitalize="none" numberOfLines={4} multiline={true} autoFocus={false} {...props} editable={_editable} style={[styleOTI.txtInput, { height: null, maxHeight: null, backgroundColor: _editable ? "white" : "#f7f7f7" }, style]} placeholderTextColor="#919191" />); } interface IMPinInputMatProps extends TextInputProps { size: number; styleContainer?: StyleProp<ViewStyle>; styleBadge?: StyleProp<ViewStyle>; onFilledFully?: (value?: string)=> void; }; export function MPinInput({ size, styleContainer, onFilledFully, ...props }: IMPinInputMatProps) { useEffect(()=>{ if(props.value?.length>=size && onFilledFully){ onFilledFully(props.value); } },[size, props.value]); return (<View style={[ { flex: 1, zIndex: 9, height: 45, minHeight: 45, maxHeight: 45, paddingHorizontal: 11, display: 'flex', flexDirection: 'row', justifyContent: 'space-around', alignItems: 'center', position: 'relative' }, styleContainer ]}><TextInput {...props} style={{ flex: 1, position: 'absolute', left: 0, top: 0, right: 0, bottom: 0, color: 'transparent', textAlign: 'center', zIndex: 3 }} secureTextEntry={true} caretHidden={true} maxLength={size} placeholder="" />{Array(Math.abs(size)).fill(null).map((_, i) => (<View key={i} style={[{ width: 45, height: 45, borderWidth: 1, borderColor: '#8080802e', backgroundColor: 'white', display: "flex", justifyContent: 'center', alignItems: "center" }, props.styleBadge]}><MText style={{ color: "black", fontSize: 17, fontWeight: "700" }}>{props.value?.at(i)}</MText></View>))}</View>) }